案例-axios版 (列表增删查)

需要安装包： moment.js axios.js vue.js

1.把db.json数据复制到db.json数据里面，开启db.json服务器
2.把html代码复制到html里面
html内容
<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            品牌名称:
            <input type="text" v-model="name" v-focus>
            <input type="button" value="添加" @click=addItem()>
        </div>

        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(v,i) in list" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.date | fmtDate}}</td>
                    <td>
                        <a href="#" @click.prevent="deleItem(v.id)">删除</a>
                    </td>
                </tr>
                <!-- v-if="条件表达式" -->
                <tr v-if="list.length===0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>

    <script src="./vue.js"></script>
    <script src="./moment.js"></script>
    <script src="./axios.min.js"></script>

    <script>

        // 全局自定义指令
        Vue.directive("focus", {
            inserted: function (el) {
                el.focus();
            }
        });
        // 全局过滤器
        Vue.filter("fmtDate", function (v) {
            return moment(v).format('YYYY-MM-DD hh:mm:ss');
        });

        new Vue({
            el: "#app",
            data: {
                searchVal: "",
                name: "",
                list: []
            },

            // 监测搜索框
            watch: {
                searchVal(newV, oldV) {
                    axios
                        .get('http://localhost:3000/brands?name_like=' + newV)
                        .then((res) => {
                            console.log(11);
                            // 关键字改变，请求地址发生改变，接着把结果数据赋值给list[] 
                            this.list = res.data;
                        })
                }
            },

            // 数据加载完后自动调用
            computed: {
                newlist() {

                    var temp = [];
                    axios.get('http://localhost:3000/brands?name_like=' + this.searchVal)
                        .then((res, callback) => {
                            temp = res.data;
                        })
                    // 在异步操作的外面获得异步操作里面函数的结果
                    return temp;
                }
            },
            mounted() {
                this.getData();
            },

            methods: {
                // 获取数据
                getData() {
                    axios
                        .get('http://localhost:3000/brands')
                        .then((res) => {
                            const { status, data } = res;
                            if (status === 200) {
                                this.list = data;
                            }
                        })
                        .cathc((err) => {
                        })
                },
                // 删除
                deleItem(ID) {
                    if (confirm("Sure?")) {
                        // this.list.splice(index, 1);
                        axios.delete('http://localhost:3000/brands/' + ID)
                            .then((res) => {
                                console.log(res);
                                this.getData()
                            })
                    }
                },
                // 增加
                addItem() {
                    axios
                        .post('http://localhost:3000/brands', {
                            name: this.name,
                            date: new Date()
                        })
                        .then((res) => {
                            const { status } = res;
                            if (status === 201) {
                                this.getData()
                            }
                        })
                    this.list.unshift({
                        name: this.name,
                        date: new Date()
                    });
                    this.name = "";
                }
            }
        });
    </script>

    <!-- <script>
        var arr = [1, 2, 3].filter(function (v) {
            // console.log(v);
            return v > 1
        });
    </script> -->
</body>

</html>

<!-- 
一, 准备代码
1. 设置容器
2. 引入vue.js
3. 实例化
4. 设置选项 el data等

 二, 渲染表格
 // v-for->语法->(v,i) in data中的容器
 1. 提供数据list
 2. 找到页面中重复出现的标签结构 ->tr
 3. 确定指令 v-for
 4. 在视图中使用v-for的参数  v,i

 三 处理无数据时的渲染
 1. 找到条件渲染的标签
 2. 使用v-if和v-show v-if="布尔"
 3. 确定条件是什么?

 四 添加商品
 1. 找到输入框 v-model="数据"
 2. 找到添加按钮  绑定事件 @click="addItem()"
 3. methods 增加方法
 4. 向表格绑定的数据list数组添加新数据

 五 删除商品
 1. 找到删除按钮 @click="deleItem()"
 2. methods增加方法
 3. 提示框+从数组list中移除当前元素
 -->
案例-axios版 (列表增删查)

需要安装包： moment.js axios.js vue.js

猜你喜欢
