Vue服务端交互

在Vue中实现发送网络请求

原理: Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。

1. vue-resource: Vue.js的插件，已经不维护，不推荐使用
2. axios :不是vue的插件，可以在任何地方使用，推荐

说明: 既可以在浏览器端又可以在**node.js**中使用的发送http请求的库，支持Promise ，不支持jsonp

如果遇到jsonp请求, 可以使用插件 jsonp 实现

基础-axios-介绍-及基本使用

用法:

// 基本用法
axios.get(url).then((res) => {
// 请求成功 会来到这  res响应体
}).catch((err) => {
// 请求失败 会来到这  处理err对象
})

// 获取
axios.get('http://localhost:3000/brands').then().catch()
// 删除
axios.delete('http://localhost:3000/brands/1').then().catch()
// 添加
axios.post('http://localhost:3000/brands', {name: '小米', date: new Date()}).then().catch()
// 修改
axios.put('http://localhost:3000/brands/1', {name: '小米', date: new Date()}).then().catch()
// get模糊搜索
axios.get("http://localhost:3000/brands?name_like=" + "aaa").then().catch()

基础-表格案例-axios-列表

目标: 将表格案例中列表数据实现用axios请求

路径: 使用axios请求列表

1. 引入axios
2. 在mounted（相当于window.onload）函数中 发送请求获取数据
3. 获取的数据赋值给list列表

//  mounted函数 加载完DOM再执行的函数 相当于window.onload
mounted() {
    axios.get("http://localhost:3000/brands").then(result => {
        this.list = result.data;
    });
}

注意:mounted函数相当于window.onload,后面会详细的讲到

基础-表格案例-axios-删除商品

路径: 使用axios删除商品

​ 1.删除方法中传入ID

​ 2.删除方法中调用删除接口

​ 3.删除完成后重新调用获取数据

代码:

delItem(id) {
   if (confirm("确定删除此条记录")) {
     axios
          .delete("http://localhost:3000/brands/" + id)
          .then(result => {
            this.getList(); // 重新调用拉取数据
          });
      }
   }

基础-表格案例-axios-添加商品

路径: 使用axios添加商品

​ 1. 添加方法中调用新增接口

​ 2. 添加成功后重新拉取数据

​ 3. 清空输入框

addItem() {
// 添加商品
axios.post("http://localhost:3000/brands", {
     name: this.name,
    date: new Date()
    })
    .then(res => {
      if (res.status == 201) {
        this.getList(); // 重新拉取数据
        this.name = ""; // 清空文本框
    }
   });

基础-表格案例-axios-搜索功能-分析

目标: 通过分析得出 计算属性中不能进行搜索功能的结论

​ 计算属性=> 异步操作搜索=>返回结果 XXXXX 走不通

结论: 搜索功能不能采用 计算属性 进行解决

注意： 计算属性中一定是**同步操作,如果有异步**操作,则该业务逻辑就会失败

新知识: 当需要根据数据变化 进行相应业务操作,且该操作是**异步操作**时,计算属性不能再使用,可以使用侦听属性watch

基础-实例选项-watch-基本使用

特性: 监听data数据变化时 自动触发函数

计算属性和watch区别：

• 计算属性 必须要有返回值 所以说不能写异步请求 因为有人用它的返回值(插值表达式)
• watch选项中可以写很多逻辑 不需要返回值 因为没有人用它的返回值

// 基本用法
data: {
	msg: 'abc'
},
watch: {
// data中的属性msg发生改变时 自动触发该函数
   msg(newV, oldV) {
     console.log(newV, oldV)
   }
}

基础-表格案例-axios-搜索功能-实现

1. 监听搜索内容
2. 在监听函数中 发送axios请求实现模糊搜索
3. 把返回值赋值给list列表

// 实例代码
watch: {
    searchval(newV, oldV) {
        axios.get("http://localhost:3000/brands?name_like=" + newV)
          .then((res) => {
            this.list = res.data
        }).catch(err => {
            console.log(err)
        })
    }
}