05-vue新闻移动端项目总结

1 javascri 有逻辑时加冒号 字符串时不加

变量接收时和改变属性时 props加

this. $router.push( )

2 axios 的安装使用

// 1 引入
import axios from "axios";
将包变成变量

// 2 绑定到原型
Vue.prototype.$axios = axios;

在main.js中引用

2.1axios 发送get参数的两种方式

1 老方法

2 新方法

localhost:3000/post?pageIndex=1&pageSize=2&category=8

这种用

3 vent ui 插件的使用 首字母注意大小写

1 ,按需引入示列

// 1 引入组件
import { Toast } from 'vant';
//  2 引入组件css
import 'vant/lib/toast/style'
// 注册
Vue.use(Toast);

在main.js中引用

2 vue里调用

this.$toast()

括号里可使用参数调节 , 具体看官网

3 main.js 调用

Toast()

​ 全局转按需

4 父级里创建事件 @click . native

[

有时候我们不需要子组件传递参数 , 就不用麻烦的 this.$emit( ) , 只想单纯的想创建事件时 ,

父级里利用原生native的办法创建事件

5 利用侦听属性发送用户的值 , 给axios参数

1 侦听属性 , 将最新的new值发送给父级

2 父级创建函数接受new值 , 并赋值给本身data属性

3 axios 里的data 参数 发送this.属性

6 再次总结 get id 发送

vue 分为两个方式 传递参数

1 ?= 拼接 这种this.route.query 截取

1.1 行内跳转

2 编程式跳转 这种配置路由参数 地址再/给参数值

2.1 行内式 (变量情况下 比如state里值) : 模板字符串不用+号

this.$route.params.id 截取 (id对应路由参数名)

加个? 有无id值传入都可以跳转

总结 : ?= 的有两种方式传参 (get才有)

直接拼接的也有两种方式

具体看接口设置

7 可通过结构函数赋值data 再渲染

8 编辑页面 (数据回显加修改内容)

1 数据回显 将用户详情赋值页面

2 监听用户修改input框 并赋值给data里的属性 上面页面子组件属性: 赋值

3 点击修改按钮发送数据 参数是 : 监听后的返回值

9 基础路径

设置路径

赋值时使用

多基准路由

10 拦截系统

1 发送前判定

//  4 拦截系统
axios.interceptors.request.use(config => {
  // 如果自身没有发送headers
  // 本地有存储token
  if (!config.headers.Authorization && localStorage.getItem('token')) {
    // 那就发送token
    config.headers.Authorization = localStorage.getItem('token')
  }
  return config;
}, error => {
  // Do something with request error
  return Promise.reject(error);
});

2 发送后判定

3 执行顺序:

![image-20201123153321378](vue新闻移动端项目总结.assets/image-20201123153321378.png

1 先进vue文件 , 后进拦截器 (左边覆盖右边)*

​ 2 res 是相应拦截器 , 后自身vue 文件逻辑* (右边覆盖左边)

4 在发送接口前统一加入token

//  4 请求拦截系统
axios.interceptors.request.use(config => {
  // 如果自身没有发送headers
  // 本地有存储token
  if (!config.headers.Authorization && localStorage.getItem('token')) {
    // 那就发送token
    config.headers.Authorization = localStorage.getItem('token')
  }
  return config;
}, error => {
  // Do something with request error
  return Promise.reject(error);
});

11 路由守卫判定

11 不压缩图片显示 object-fit:cover; 平铺

11 vue中@ 查找文件夹名

前提 这个文件夹是唯一的 , 里面只有一个文件可以不写, 如果有多个再后面添加手写 (系统没提示)

12 ForData使用

​ 这是vant iu组件情况下发送

afterRead(fileObj) {
    
    //要先用 FormData 对象将图片转换为二进制形式的数据
    const data = new FormData();
    data.append('file', fileObj.file);
    //回顾 ajax 课程第四天, jQ 上传文件的部分
    
    this.$axios({
        url: '/upload',
        method: 'post',
        headers: {
            Authorization: localStorage.getItem('token')
        },
        data: data
    }).then(res=> {
        console.log(this.$axios.defaults.baseURL + res.data.data.url);
    })
}

13. 拓展 css 如何穿透 scoped 修改子组件的样式 /deep/

修改第三方子组件样式的方法

• 最好直接用设计好的属性配置

  

• 可以查看最终生成的html结构来写 css

• 如果发现影响不了子组件的样式, 可以考虑是因为 scoped 选项限制了样式的生效范围,

  可以使用 /deep/ 深度选择器 的写法进行穿透

• 注意事项

  1. 如果是 sass 语法 /deep/ 可能不生效, 使用 >>> / :v-deep 进行替代 (详细找线上文档)
  2. 不要滥用, 不是说让我们考虑哪里添加, 而是当我们遇到问题发现样式影响不了的时候, 再添加

14. 处理文章图片的问题

文章图片问题主要有两种

14.1 没有图片 以及 区分类型

判断在type数据 以及图片数量长度 以此来区分

主要是发布文章的时候没有上传图片,造成 cover是一个空数组

需要进行判断

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RyzdW1rT-1611225109637)(vue新闻移动端项目总结.assets/image-20200628094342910-1606116245191.png]

14.2 图片基准路径不全

后台发出来的数据, 有可能是完整的, 也有可能是不完整的相对路径, 需要拼接 数据库基准路径 baseURL 就像头像一样

需要进行判断

1函数封装

2 全局过滤器

过滤器的作用, 就是将不符合要求的字符串格式化变成我们需要的结果

• 创建

• main文件里 拿不到 this 用实例名

  

• 调用

  

正则方式:

15 首页map获取对应数据

1 根据id 发送 获取相对应数据 每次都 请求 渲染

缺点: 监听索引 每次变化也请求渲染

  // 导航栏分类数组[组件激活索引].id
      // 当前分类id
      const currentCategory = this.categoryList[this.active];
      this.$axios({
        method: "get",
        url: "/post/",
        params: {
          category: currentCategory.id,
        },
      }).then((res) => {
        console.log(res);
        this.postList = res.data.data;
      });
    },

2 map改造数据

1: 导航栏数据回来时 往每个item 下增加属性

2 新闻数据回来时 将值赋予给新属性 (当前新属性)

要当前属性 否则他不知道将谁来赋值 , 第二次才会获取到!!!

3 当前的属性进行渲染

4 监听变化 只有新属性没有值时才发请求 , 有值就取 临时增加的属性值了

总结 : axios文章发送id 是当前item 的id 第一次渲染封装的函数要在导航栏回来之前, 不然封装函数太快运行

16 分页组件

https://youzan.github.io/vant/#/zh-CN/list

1 是否页面初始化加载

2 拉倒底部触发函数

3 List有以下三种状态，理解这些状态有助于你正确地使用List组件：

• 非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
• 加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
• 加载完成，finished为true，此时不会触发load事件

在每次请求完毕后，需要手动将loading设置为false，表示加载结束

默认为false 是为了 不默认发送完所有数据 每次下拉 触发函数发送

4 turn 是停止运行

17 premise 宏任务 微任务

普通异步宏任务, promise.then 异步 会有vip 特性

18 ref 操作dom属性

19 递归

假设 num=10

在属性上面, 数据从判定条件开始 产生

在属性后面从属性值开始 产生 判定添加结束

练习中

三个文件是借用最后一个来进行渲染 可判定性数据,

而递归是自己调用自己数据 进行渲染

递归渲染 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFPNlJhY-1611224627097)(vue新闻移动端项目总结.assets/image-20201130225944360.png)]

总结

1 数据遍历 , 把每个itme传子组件 分析

2 如果查找到每个item 里有parent 属性, 那么就把值传给子组件

3 自己调用自己 加上v-if判定条件 将每个item 里有parent 属性进行渲染

注意点 : 1 放上面从最深层开始渲染, 下面最表层渲染

​ 2 调用递归部分单独组件出来, 一起递归会 造成页面错乱 一个box渲染两个item

20 nextTick

好处 相比延时器 不用自己去猜多少毫秒

看情况使用: 它的执行原理是, 先执行方法内除它之外的逻辑 , 再来执行nextTick里的逻辑

21 事件总线

可解决兄弟, 递归关系传值

监听后解除绑定

总结 1 创建js文件, 生成事件总线

​ 2 组件引入, 发送 事件名和 数据

​ 3 组件引入, 父级监听事件名 使用数据

​ 4 销毁

22 避免冗余导航到当前位置 捕获错误

全局做法

放入index.js 文件中

const routerPush = VueRouter.prototype.push

VueRouter.prototype.push = function (location) {

 return routerPush.call(this, location).catch(error => error)

}

const router = new VueRouter({
 routes

})

或者局部

23 插槽

普通插槽 :

​ 为了方便在父组件修改内容

作用域插槽 : 拿到每个item

子组件包住 template

一开一闭之间只有一个dom 就不用template包住

24 from表单的校验

​ 注意点:

​ *1 from表单属性名和rules校验名都要对应
​ 2 form标签要绑定数据 , 有rules校验属性 , 下面prop对应校验方法 , 方法是个数组形式

2 点击 全部校验

​

给from加 ref 第一个参数成功时 , 第二个是失败的数据地方

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ajq7k4Z0-1611224627102)(vue新闻移动端项目总结.assets/image-20201205224339996.png)]

有 callba 形式 和promise形式 具体看官网

form表单验证 复杂逻辑规定时 validator 自定义校验

25 增删栏目的优化 , 持久化

1 定义两个数组 遍历渲染 点击自身 就增加另一个数组值 删除自身

2 进来页面 首先判定是否本地缓存 有就取 没有就请求获取

3 监听值的变化, 将最新的值储存到浏览器中

---

26 首页减少不必要的请求,增强性能

首页将文章数据存到本地,并设置时间戳,减少不必要的请求,增强性能

思路 1 tabs 组件具有索引值, 通过索引值来进行默认的渲染

2 通过监听索引值 如果索引值变化, 判定它是不是文章栏目还是 + 号(跳转页面)

如果是栏目 如果文章信息长度为0 就触发函数renderData 不为零就什么都不做 (它就拿之前的数据进行渲染)

3 created 判断本地是否有每条栏目, 如果有 就拿 赋值data里属性 没有就发送数据获取

文章内容是根据栏目id来获取的

​ 当前栏目信息 = 所有文章(index)

自身 就增加另一个数组值 删除自身**

2 进来页面 首先判定是否本地缓存 有就取 没有就请求获取

3 监听值的变化, 将最新的值储存到浏览器中

---