Chapter 3 Using Vue vue-resource list of cases, the global root domain configuration

1, the list of cases
<!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>
    <!- The latest Bootstrap core JavaScript file -> "
    <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> 
            <-! Using the binding mechanism in vue, if you add a small parenthesis, can give the function parameter passing -> 
            <the INPUT of the type = " the Button " value = " add "  class = " btn Primary-BTN " @ = the Click " the Add " > 

            <INPUT type = " text "  class = " form-Control " V-Model = " KEYWORDS " > 
            <INPUT type = "the Button " value = " Search" 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, for {{}} </ TD> 
            <- - filter can only be used to plug the expression!> 
            <TD> {{item.ctime | timeFormat ( ' YYYY-mm-dd HHMMSS ' ) }} </ TD> 
            <TD> 
                <a href= "#" @click.prevent= "del(item.id)"> delete </a> 
                <a href= "./Model.html"> edit </ A> 
            </ TD> 
        </ TR> 
        </ tbody> 
    </ Table> 
</ div> 
<Script>// set the global domain name with
     // If we pass the global configuration, data interface root domain name request, the http request initiated each time,
     //


    Url route request should begin relative path, not with the front / (eg: api / del) , it would not enable the root path splicing
    = Vue.http.options.root ' http://vue.studyit.io/ ' ;

     // global configuration emulateJSON {:} to true 
    Vue.http.options.emulateJSON = to true ;

     // <- global filters only! can be used to plug the expression -> 
    Vue.filter ( ' timeFormat ' , function (the ctime, pattern) {
         var dt = new new a Date (the 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. Create a vue instance 
    var VM = new Vue ({ 
        el: ' #app ' ,     // indicates this new Vue our current example, to control which area on the page 
        Data: { // Data is stored in the attribute el use the data in the 
        List: [ 
            {ID: . 1 , name: " Benz " , the ctime: new new a Date ()}, 
            {ID: 2 , name: " BMW " , the ctime: new new a 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 ) {
                         the this .getAllList()
                    } the else { 
                        Alert ( ' Get data failed ' ) 
                    } 
                }) 
                } 
            // add 
            the Add () {
                 the this $ http.post (. ' API / POST ' , 
                    {name: the this .name}, {emulateJSON : to true .}) the then (Result => { 
                    the 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>
Chapter 3 Using Vue vue-resource list of cases, the global root domain configuration

Guess you like
