Vue学习笔记——基于接口的图书管理案例

Vue学习笔记——基于接口的图书管理案例

样式：

案例分析：

• 图书相关的操作基于后台接口数据进行操作
• 需要调用接口的功能点
  ① 图书列表数据加载 GET
  ② 添加图书 POST
  ③ 验证图书名称是否存在 GET
  ④ 编辑图书-根据id查询图书信息 GET
  ⑤ 编辑图书-提交图书信息 PUT
  ⑥ 删除图书 DELETE

---

步骤：

1. 图书列表数据加载

需要调用后台接口，先引入axios.js，设置基础路径

2. 添加图书

① 书的id由系统生成，所以先将id输入框禁用

② 找到添加图书的方法，调用后台接口，是post请求，请求参数为name

③ 接收axios “包装的对象”

④ 根据ret.status判断是否成功，成功则重新加载一遍数据列表

methods:{
		submit:async function(){
			if(this.flag){
				//编辑操作
				//根据当前的id去更新数组中对应的数据（遍历）
				this.books.some((item)=>{
					if(item.id==this.id){
						item.name= this.name;
						//完成更新操作之后，需要终止循环
						return true;
					}
				});
				this.flag=false;
			}else{
				//添加图书
				//点击提交的时候调用后台接口，
				//结果只需要获取到状态位，
				
				var ret = await axios.post('books',{
					name:this.name
				});
				//拿到状态位后做一个判断，
				//如果是200那就表示数据添加成功，重新加载列表数据
				if(ret.status==200){
					this.queryData();
				}
			}
			//清空表单
			this.id='';
            this.name='';
		},

3. 添加图书的时候验证图书名称是否存在

vue 的监听器（watch）

      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;
          }
        }
      },

4. 编辑图书（需要两个接口）

• 根据id 查询图书信息（这样能保证查到比较新的数据）
  根据id查询出对应的图书信息，然后查到的信息显示在输入框当中

• 提交图书信息
  调用接口，把要编辑的信息提交到后台

submit: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;
			}


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

5. 删除图书

向后台提交要删除的id，删除成功后重新加载数据

deleteBook:async function(idx){
			//向后台提交要删除的id
			var ret=await axios.delete('books/'+idx);
			if(ret.status==200){
				//删除成功
				this.queryData();
			}
			// //根据id从数组中查找元素的索引
			// var index = this.books.findIndex(function(item){
			// 	return item.id == idx;
			// })
			// //根据索引删除数组元素
			// this.books.splice(index,1);
			// ------------------
			// 法二：
			this.books = this.books.filter(function(item){
				return item.id != idx;
			})
		},

---

• 这个要和静态的结合多写几遍
• 最后也了解一下后端是怎么写的吧