Vue 第三章 使用vue-resource列表案例、全局根域名配置

1、列表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                id:<input type="text" class="form-control" v-model="id">
            </label>
            <label>
                name:<input type="text" class="form-control" v-model="name">
            </label>
            <!-- 在vue中使用绑定机制，如果加了小括号，可以给函数传参-->
            <input type="button" value="添加" class="btn btn-primary" @click="add">

            <input type="text" class="form-control" v-model="keyWords">
            <input type="button" value="搜索" class="btn btn-primary">

        </div>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr>
            <th>编号</th>
            <th>品牌</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <!--过滤器只能使用到插件表达式-->
            <td>{{item.ctime | timeFormat('yyyy-mm-dd hhmmss')}}</td>
            <td>
                <a href="#" @click.prevent="del(item.id)">删除</a>
                <a href="./Model.html">修改</a>
            </td>

        </tr>
        </tbody>
    </table>
</div>
<script>

    //设置全局跟域名
    //如果我们通过全局配置了，请求的数据接口根域名，则在每次发起http请求的时候，
    //请求的url路径应该以相对路径开头，前面不能带/(eg:api/del)，否则不会启用根路径拼接
    Vue.http.options.root = 'http://vue.studyit.io/';

    //全局配置{emulateJSON:true}
    Vue.http.options.emulateJSON=true;

    //<!--全局过滤器只能使用到插件表达式-->
    Vue.filter('timeFormat',function (ctime,pattern) {
        var dt = new Date(ctime)
        var y =dt.getFullYear()
        var m = (dt.getMonth()+1).toString().padStart(2,0)
        var d = dt.getDate().toString().padStart(2,0)
        if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
            return `${y}-${m}-${d}`
        }else {
            var hh = dt.getHours().toString().padStart(2,0)
            var mm = dt.getMinutes().toString().padStart(2,0)
            var ss = dt.getSeconds().toString().padStart(2,0)
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

        }
    })

    //2.创建一个vue实例
    var vm = new Vue({
        el: '#app',    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
        list:[
            {id:1,name:"奔驰",ctime:new Date()},
            {id:2,name:"宝马",ctime:new Date()}
        ],
        id:'',
        name:'',
        keyWords:'',
        },
        created(){
            this.getAllList()
        },
        methods: {
            //vue-resource获取数据
           //删除
            del(id){
                this.$http.get('api/del'+id).then(result => {
                    console.log("result=" + result.body)
                    var result = result.body;
                    if (result.status === 0) {
                        this.getAllList()
                    } else {
                        alert('获取数据失败')
                    }
                })
                },
            //添加
            add(){
                this.$http.post('api/post',
                    {name:this.name},{emulateJSON:true}).then(result =>{
                    console.log("result=" + result.body)
                    var result = result.body;
                    if (result.status === 0) {
                        this.getAllList()
                        this.name = ''
                    } else {
                        alert('获取数据失败')
                    }
                })
            },
            getAllList() {
                this.$http.get("api/getlunbo").then(result => {
                    console.log("result=" + result.body)
                    var result = result.body;
                    if (result.status === 0) {
                        this.list = result.message
                    } else {
                        alert('获取数据失败')
                    }
                })
            }

        }
    })
</script>
</body>
</html>

 

posted @ 2020-03-22 11:58  小白啊小白，Fighting  阅读(442)  评论(0)  编辑  收藏  举报