Vue前后端交互实现图书管理功能

源码链接：https://pan.baidu.com/s/1MzN9Jcrz-OLv7GVklK7UXQ
提取码：36qe

初始化项目：

npm init -y

安装相应的第三方模块：

npm install express --save
npm install body-parser --save

• 在浏览器中输入 http://localhost:3000/books.html 来执行文件
  

案例效果

案例分析

把图书管理的各个功能都封装成一个模块，并开放出去。
每一个路由对应一个模块。
在前端（.html）文件中，要实现某个功能，

1. 通过请求路径去请求相应的路由，
2. 由路由找到开放出来的功能模块

请求路由	请求方式	请求路由	请求的模块
① 图书列表数据加载	GET	http://localhost:3000/books	获取图书列表数据
② 添加图书	POST	http://localhost:3000/books	添加图书保存数据
③ 验证图书名称是否存在	GET	http://localhost:3000/books/book/:name	验证图书名称是否存在
④ 编辑图书-根据ID查询图书信息	GET	http://localhost:3000/books/:id	跳转编辑图书页面
⑤ 编辑图书-提交图书信息	PUT	http://localhost:3000/books/:id	编辑图书更新数据
⑥ 删除图书	DELETE	http://localhost:3000/books/:id	删除图书信息

接口文档：

基准路径：http://localhost:3000/

// 设置基准URL
    axios.defaults.baseURL='http://localhost:3000';

获取图书列表数据

• 路径：books
• 请求方式：get
• 请求参数：无
• 响应结果

[{
  "id": "4",
  "name": "红楼梦",
  "date": 2525609975000
}, {
  "name": "三国演义",
  "date": 2525609975000,
  "id": 5
}, {
  "name": "水浒传",
  "date": 2525609975000,
  "id": 6
}, {
  "name": "西游记",
  "date": 2525609975000,
  "id": 7
}]

添加图书-提交图书信息

• 路径：books
• 请求方式：post
• 请求参数
  • name：图书名称
• 响应结果

{
    "status": 200  // (200表示成功；500表示失败)
}

编辑图书-根据ID查询图书信息

• 路径：books/:id
• 请求方式：get
• 请求参数：无
• 响应结果

{
    "name": "西游记",
    "date": 2525609975000,
    "id": 7
}

编辑图书-提交图书信息

• 路径：books/:id
• 请求方式：put
• 请求参数
  • name：图书名称
• 响应结果

{
    "status": 200  // (200表示成功；500表示失败)
}

删除图书信息

• 路径：books/:id
• 请求方式：delete
• 请求参数：无
• 响应结果

{
    "status": 200  // (200表示成功；500表示失败)
}

验证图书名称是否存在

• 路径：books/book/:name
• 请求方式：get
• 请求参数：无
• 响应结果

{
    "status": 1 // (1表示存在；2表示不存在)
}

调用各个功能

获取图书列表数据

路径：books
请求方式：get
获取图书列表数据 - 将假数据换成接口形式有3种方法

• 方法1 ~ Promise方法

// 缓存this
 var that =this;
// 接口 可以查询列表
                axios.get('books').then(function(data){
     // console.log(data.data)
     that.books=data.data;
}) 

• 方法2 - Promise方法（箭头函数）

// Promise方法
// 箭头函数可以不缓存this指针
axios.get('books').then((data) => {
    // console.log(data.data)
    this.books=data.data;
})

• 方法3 ~ async/await接口方法
  方法：
  在Vue实例的methods中编写queryData方法

queryData:async function(){
// 调用后台接口获取图书列表数据
var ret =await axios.get('books');
this.books=ret.data
}

在Vue实例的mounted中调用queryData方法
调用：

//  async/await接口方法
// 调用后台接口获取图书列表数据  的  方法
this.queryData();

• 方法4 ~ 响应拦截器
  在Vue的实例中编写：

queryData:async function(){
    // 调用后台接口获取图书列表数据
    this.books = await axios.get('books')
}

相应拦截器：
响应到数据

// 参数 res  -  响应对象
axios.interceptors.response.use(function(res){
    return res.data;
},function(error){
    console.log(error)
})

添加和编辑

1.将id设置为不可输入
disabled用来控制input是否可以输入。
值为true可以输入
值为false是不可以输入
2. 给添加和编辑图书设置端口
请求【添加图书】的路由

handle: async function () {
if (this.flag) {
    // 编辑操作
    var ret = await axios.put('books/' + this.id,{
        name: this.name
    })
    if (ret.status == 200){
        // 重新加载列表数据
        this.queryData();
    }
    this.flag = false;
} else {
    // 添加图书
    var ret = await axios.post('books',{
        name: this.name
    })

    if (ret.status == 200) {
        // 重新加载列表数据
        this.queryData();
    }
    

}

验证图书名称是否存在

// 侦听器
 watch: {
     name: async function (val) {
         // 验证图书名称是否已经存在
         // var flag = this.books.some(function (item) { return item.name == val; })
         // 调用验证图书名称的接口
         var ret=await axios.get('books/book/'+this.name);
         if (ret.status==1) {
             // 图书名存在
             this.submitFlag = true
         } else {
             // 图书名不存在
             this.submitFlag = false
         }
     }

 }

编辑图书- 根据Id查询图书信息 / 提交图书信息

查询图书信息

toEdit: async function (id) {
                    // falg状态位用于区分编辑和添加操作
                    this.flag = true;
                    // 根据id查询出对应的图书信息
                    var ret = await axios.get('books/' + id);
                    this.id = ret.id;
                    this.name = ret.name;
                },

编辑图书信息：

if (this.flag) {
   // 编辑操作
   var ret = await axios.put('books/' + this.id,{
       name: this.name
   })
   if (ret.status == 200){
       // 重新加载列表数据
       this.queryData();
   }
   this.flag = false;
}

删除图书

deleteBook: async function (id) {
   // 删除图书
   var ret = await axios.delete('books/' + id);
   if(ret.status == 200) {
       // 重新加载列表数据
       this.queryData();
   }
}