vue的初始和简单应用--发送数据和获取数据并且生成表格

vue的初始和简单应用--发送数据和获取数据并且生成表格_第1张图片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <style>
        td {
            width: 80px;
            padding: 5px 30px;
            text-align: center;
            height: 30px;
            border: 1px solid brown;
        }

        table {
            border-collapse: collapse;

        }
    </style>
</head>

<body>
    <div id="app">
        <div><input type="text" v-model='username'></div>
        <div><input type="text" v-model='pwd'></div>
        <button @click='login'>登录</button>
        <table>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>电话</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
            <tr v-for='item in list'>
                <td>{{item.id}}</td>
                <td>{{item.realname}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.createtime | fmtTime}}</td>
                <td @click='del(item.id)'><button>删除</button></td>
            </tr>
        </table>
    </div>
    <script src="../Vue/vue.js"></script>
    <script src="../Vue/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
    <script>
        axios.defaults.timeout = 2500;
        axios.interceptors.request.use(function (config) {
            let {method,url,params,data} =config
            if(method === 'get') console.log(`${method}${url},参数是${Qs.stringify(params)}`);
             else console.log(`${method}${url},参数是${Qs.stringify(data)}`);
            NProgress.start()
            return config;
        }, function (error) {
    NProgress.done()
            return Promise.reject(error);
        });

        axios.interceptors.response.use(function (response) {
            NProgress.done()
            return response;
        }, function (error) {
            return Promise.reject(error);
        });
        Vue.filter('fmtTime', val => {
            let timer = new Date(val)
            return timer.getFullYear() + '-' + (timer.getMonth() + 1) + '-' + timer.getDate()
        })

        new Vue({
            el: '#app',
            created() {
                this.getList()
            },
            data() {
                return {
                    username: '',
                    pwd: '',
                    list: []
                }
            },
            methods: {
                async getList() {
                    let {
                        data
                    } = await axios.get('http://simbajs.com:89/sys/shitinglist', {
                        params: {
                            pageIndex: 1,
                            pageSize: 10
                        }
                    })
                    this.list = data
                    console.log(data);
                },
                async login() {
                    let {
                        data
                    } = await axios.post('http://simbajs.com:89/user/login', {
                        username: this.username,
                        pwd: this.pwd
                    })
                    if (data.success) alert('登录成功')
                    else alert('用户名或密码错误')
                },
                async del(id) {
                    let {
                        data
                    } = await axios.post('http://simbajs.com:89/sys/removest', {
                        id
                    })
                    if (data.success) alert('删除成功')
                    else alert('删除失败');
                    this.getList()
                },
            },
        })
    </script>
</body>

</html>

你可能感兴趣的:(vue,vue.js)