zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    短信
    solr测试用的配置
    中文词启动
    配置域
    applicationContext-redis.xml
    Redis端口配置
    springDataRedis 依赖
    FastDFSClient上传图片工具类
    security 页面测试
    PHP图片压缩功能(按比例图片缩放)(转载)
  • 原文地址:https://www.cnblogs.com/ywjfx/p/12545184.html
Copyright © 2011-2022 走看看