图书管理系统

最新推荐文章于 2023-03-02 01:40:07 发布

一个想走出去的码农

最新推荐文章于 2023-03-02 01:40:07 发布

阅读量141

点赞数

分类专栏：图书管理系统 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_51811318/article/details/116465576

版权

vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

图书管理系统

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中结合Axios库实现图书管理系统的数据操作，包括创建、读取、更新和删除（CRUD）功能。通过设置Axios的基础URL、使用拦截器、异步操作以及数据验证等技巧，详细阐述了每个步骤的关键点，并提供了完整的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

步骤

axios官方文档

1.展示数据

1.1 获取数据

①页面一开始加载就应该获取数据–>生命周期
一开始就会加载
created（）{}
mounted（）{}
所以就在这两个方法里发送数据请求，两个都可以
②axios本身是promise

1.1.1 注意：

回调函数与箭头函数
在这里插入图片描述

1.2.展示数据

①利用v-for…
②数据格式是在文档里

1.2.1 注意：

关键一步：赋值得对
在这里插入图片描述

1.3优化代码

1.3.1基准路径

axios.defaults.baseURL = ‘http://39.103.175.135:3001/’;
此时代码如下
在这里插入图片描述

1.3.2业务逻辑方法

业务逻辑方法最好放到methods
然后mounted进行调用this.getBooksList()
在这里插入图片描述

1.3.3async 和 await

ES7 新增的
让异步的代码以同步的形式来书写
await 的返回值就是resolve 里面传递的数据
async 写在函数的前面 await 写在promise 的前面

1.3.4 拦截器

每次都要写ret.data–>data是axios给我们包装的
对他进行处理是在请求拦截器–>还是在响应拦截器
ret的结果是响应的结果–>如果不知道就去官方把俩都复制过来–>然后log–>console.log(‘请求’, config); console.log(‘响应’, response);
–>再次查看里面的object 看见请求中没有 -->所以是响应
在这里插入图片描述
响应器中return过来response.data–>那么ret就直接是数据

2.添加数据

当向名称里面添加内容的时候点击提交，内容就会保存在数据库里面

2.1业务逻辑

①点击提交按钮的时候取到文本框的值
②调用接口添加数据
看到文本框想到v-model
③清空文本框的内容this.name=’’
④添加完成之后记得渲染页面调用渲染方法 this.getBooksList();
post请求携带参数的时候要用对象的方式{}

2.2 注意

①只要是数据就得把数据保存在data里面
②只要是指令里面用的变量都写在data里面 v-model v-text v-bind

3.修改数据

3.1修改的业务逻辑

①点击修改按钮的事时候，拿到当前的数据（调接口）
②图书名字和编号渲染到文本框中

3.2实现修改的逻辑

当渲染到页面的时候会出现问题就是提交的时候会重新渲染一行不是原本修改的一行
解决思路:
①由于提交修改公用一个按钮–>需要一个标识符
②如果是修改那么提交–>修改的逻辑 -->点击提交应该是修改的语法–>修改找接口文档里面需要id和name
如果是添加提交的是–>添加逻辑
③如果flag 是 true 说明是添加
如果flag 是false 说明是修改
put携带参数和post一样{}
添加动态id
字符串的话是例如：aaaaa
如果加变量就加 ${} 例如：`aaaa$ {}`
在这里插入图片描述
删除成功记得重新渲染！

4.删除数据

4.1点击删除调用接口删除数据
记得判断成功与不成功，成功的话记得重新渲染页面

5.验证图书信息是否存在

用到watch
验证图书名是否存在
怎么监听值改变–>
computed
watch
watch是用于异步
老方法：当数据写死的时候：
如果改变就查一次这次用到了var flsg=this.books.some(function(item){return item.name=this.name})

<script>
     var flag = this.books.some(function (item) {
            return item.name = this.name
        })
</script>

新方法：当数据是动态的，在数据库里面存着的
异步不能使用计算属性此时只能选择watch
首先获取最新值然后调用接口与之比较验证是否存在
如果是get请求可以省略不写
如果最新值里面有下面的值那么就禁止（disabled）提交
disable为true表示禁用

<script>
watch: {
                // 监听哪个写哪个   val是最新值
                name: async function (val) {
                    const ret = await axios('books/book/' + val)
                    console.log(ret);
                    if (ret.status == 1) {
                        this.btn = true
                    } else {
                        this.btn = false
                    }
                }
            },
</script>

6.代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }

        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: #F3DCAB;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }

        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div><label for="id">
                            编号：
                        </label> <input type="text" id="id" disabled="disabled"> <label for="name">
                            名称：
                        </label> <input type="text" id="name" v-model='name'>
                        <button @click='submit' :disabled="btn">提交</button>
                    </div>
                </div>
            </div>
            <div class="total"><span>图书总数：</span> <span>3</span></div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td><a href="" @click.prevent='editBook(item.id)'>修改</a> <span>|</span> <a href=""
                                @click.prevent='deleteBook(item.id)'>删除</a></td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script>
        axios.defaults.baseURL = 'http://39.103.175.135:3001/';
        // 添加请求拦截器
        // axios.interceptors.request.use(function (config) {
        //     // 在发送请求之前做些什么
        //     console.log('请求', config);
        //     return config;
        // }, function (error) {
        //     // 对请求错误做些什么
        //     return Promise.reject(error);
        // });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('响应', response);
            // 对响应数据做点什么
            return response.data;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello World',
                books: [],
                name: '',
                id: '',
                //  如果flag 是 true 说明是 添加
                //  如果flag 是fals  说明是修改
                flag: true,
                btn: false

            },
            watch: {
                // 监听哪个写哪个   val是最新值
                name: async function (val) {
                    const ret = await axios('books/book/' + val)
                    console.log(ret);
                    if (ret.status == 1) {
                        this.btn = true
                    } else {
                        this.btn = false
                    }
                }
            },
            methods: {
                // 渲染页面
                async getBooksList() {
                    // console.log('一开始就会加载2');
                    // axios.get('books').then((ret) => {
                    //     // 出来的是数组   怎样定义在data里面呢？ 利用赋值法
                    //     // console.log(ret.data);
                    //     // 不知道正确与否 记得多log
                    //     // console.log(this.data);//出来undefined
                    //     this.books = ret.data
                    //     console.log(this.books);
                    // })
                    const ret = await axios.get('books')
                    // console.log(ret);
                    this.books = ret
                },
                //  添加
                async submit() {
                    // 如果是真的那么
                    if (this.flag) {
                        // console.log(this.name);
                        // name就是this.name
                        const ret = await axios.post('books', { name: this.name })
                        // 如果成功返回200
                        // console.log(ret);
                        // 清空表单

                    } else {
                        const ret = await axios.put(`books/${this.id}`, { name: this.name })
                        console.log(ret);
                    }
                    this.name = ''
                    // 重新渲染
                    this.getBooksList()


                },
                // 修改
                async editBook(id) {
                    this.flag = false
                    const ret = await axios.get('books/' + id)
                    console.log(ret);
                    // 点击提交会出现一个问题  就是又重新添加了一个
                    // 所以怎样区分呢   利用flag
                    this.name = ret.name;
                    // console.log(id);
                    this.id = ret.id

                },
                async deleteBook(id) {
                    //    点击删除获取id
                    // console.log(id);
                    // 获取数据  然后删除一行
                    const res = await axios.delete('books/' + id)
                    // console.log(ret);
                    if (res.status != 200) return alert("删除失败")
                    this.getBooksList()

                }


            },
            // created() {
            //     console.log('一开始就会加载');
            // },
            mounted() {
                this.getBooksList()

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