vue-resource获取、删除、添加数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</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>
                Title:
                <input type="text" v-model="name" class="form-control">
            </label>
            <input type="button" value="添加" @click="add" class="btn btn-primary">
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead >
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{
   
   {item.id}}</td>
            <td>{
   
   {item.name}}</td>
            <td>{
   
   {item.ctime}}</td>
            <td>
                <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<script>
    //配置全局数据根域名接口
    Vue.http.options.root = 'http://api.cms.liulongbin.top/';
    const app = new Vue({
     
     
        el:'#app',
        data:{
     
     
            name: '',
            list:[
                {
     
     "status":0,
                    "message": [
                        {
     
     "id":1,"name":"宝马","ctime":"2019-10-12T02:15:20.000Z"},
                        {
     
     "id":2,"name":"奥迪","ctime":"2019-12-12T03:20:59.000Z"}
                    ]
                }
            ]
        },
        created(){
     
     
          this.getAllList()
        },
        methods:{
     
     
            getAllList(){
     
     
                //获取所有数据列表
                this.$http.get('api/getprodlist').then(function (result) {
     
     
                    if (result.body.status === 0){
     
     
                        this.list = result.body.message
                    } else{
     
     
                       alert("获取数据失败")
                    }
                })
            },
            add(){
     
     
                //添加数据
                this.$http.post('api/addproduct',{
     
     name:this.name},{
     
     emulateJSON:true})
                .then(result => {
     
     
                    if (result.body.status ===0){
     
     
                        this.getAllList()
                    }else{
     
     
                        alert("添加失败")
                    }

                })
            },
            del(id){
     
     
                this.$http.get('api/delproduct/' + id).then(result => {
     
     
                    if (result.body.status === 0){
     
     
                        //删除成功
                        this.getAllList()
                    }else{
     
     
                        alert("删除失败")
                    }
                })
            }
        }
    })
</script>
</body>
</html>
vue-resource获取、删除、添加数据

猜你喜欢
