vue+axios实现评论留言板

 Lan   2020-08-06 10:08   319 人阅读  0 条评论

效果如图

image.png

这里的评论数据以及添加数据都是用的FastAPI,然后再用axios发送请求,获取评论以及添加评论。

<!DOCTYPE Html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>工程快捷报备系统——By:Lan</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <style>
        .content {
            margin-top: 1.5rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li>
                        <a href="./index.html">健康报备</a>
                    </li>
                    <li>
                        <a href="./who.html">谁没报备</a>
                    </li>
                    <li>
                        <a href="./ele.html">电费查询</a>
                    </li>
                    <li class="active">
                        <a href="./comment.html">留言板</a>
                    </li>
                </ul>
                <div class="content" id="box">

                    <form action="" role="form">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">昵称</label>
                            <div class="col-sm-11">
                                <input v-model='newNick' type="text" class="form-control" id="nikename" v-model='newComment' placeholder="请输入昵称">
                            </div>
                            <div class="form-group">
                                <label for="content" class="col-sm-1 control-label">内容</label>
                                <div class="col-sm-11">
                                    <textarea id="content" v-model='newComment' class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="form-group" style="text-align: center;">
                                <input type="button" name="" value="添加" @click='addcomment' class="btn btn-primary">
                                <input type="reset" name="" value="重置" class="btn btn-danger">
                            </div>
                        </div>
                    </form>
                    <table class="table table-bordered table-hover">
                        <caption class="text-success">
                            <h4>评论列表</h4>
                        </caption>
                        <thead>
                            <tr class="text-info">
                                <th class="text-center">昵称</th>
                                <th class="text-center">内容</th>
                                <th class="text-center">时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in list" :key="index" class="text-warning text-center">
                                <td>{{item.nick }}</td>
                                <td>{{item.comment}}</td>
                                <td>{{item.add_time | fmtTime('-')}}</td>
                            </tr>
                            <tr v-if="list.length === 0">
                                <td colspan="3">暂无评论,快来评论吧!</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script>
        Vue.filter('fmtTime', function(sourceTime, sep) {
            sourceTime = new Date(sourceTime);
            let y = sourceTime.getFullYear();
            let m = sourceTime.getMonth() + 1;
            let d = sourceTime.getDate();
            let h = sourceTime.getHours();
            let M = sourceTime.getMinutes();
            return y + sep + m + sep + d + ' ' + h + ':' + M;
        });
        var app = new Vue({
            el: '#box',
            data: {
                newNick: '',
                newComment: '',
                list: [],
                searchVal: ''
            },
            mounted() {
                this.getcomment();
            },
            methods: {
                getcomment() {
                    axios.get('/get_comment/', {
                            params: {
                                page: 1
                            }
                        })
                        .then(res => {
                            this.list = res.data;
                        })
                        .catch(err => {
                            console.error('获取数据失败' + err);
                        })
                },
                addcomment() {
                    axios.get('/add_comment/', {
                            params: {
                                nick: this.newNick,
                                comment: this.newComment
                            }
                        })
                        .then(res => {
                            alert('添加成功');
                            // 添加成功之后,重新获取列表数据
                            this.getcomment();
                            this.newComment = '';
                        })
                        .catch(err => {
                            console.error(err);
                        })

                }
            },
        })
    </script>
</body>

</html>


本文地址:https://www.lanol.cn/post/362.html
版权声明:本文为原创文章,版权归 Lan 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?