前端项目笔记总结

Posted 2022-12-15 十九万里

技术栈： Spring Boot + vue
3.0 Element-Plus 路由采用vue-router 图标插件采用echarts5.0编写
vite热更新能力 更新速度非常快 提高了开发的体验
启动命令：npm run serve

列表采用 el-table 进行编写，并且采用 el-pagination 作为分页组件。通过 globalProperties 全局属性设置全局通用过滤器

1、二次封装弹窗组件

布局：左边固定 右边栏自适应 flex布局
公用组件 采用路由监听的方式 浏览器地址的pathname变化时动态请求修改请求地址

2、为什么要采用前后端分离：第三章开头

3、vue3新变化：

1、性能提升：
打包体积变小
首次渲染更快
diff 算法更快
内存使用减少

2、CompositionAPI
3、更好的Typescript的支持

4、vite

支持原生ES模块代入方法 所以允许快速提供代码 使得开发效率大大提高
三个特点： 快速冷启动 即时的热模块更新 真正的按需编译
vue2和vue3的生命周期函数的对比：

5、使用@/的形式获取文件路径

在vite,config.js下添加 resolve.alias
@ 代表 src 目录下的别名；~ 代表根目录下的别名，这样我们在项目中使用路径的时候，就不用写一长串。

6、环境变量配置： mode 可以用于二次封装axios

在vue cli中使用precess.env获取到相关的环境变量
打包时：
在vite 中 打包时在package.json的script属性中做出改变
“dev”: “vite --mode development” 通过在mode后后面添加对应环境变量值 然后在vite.config.js
中获取：

export default ( mode ) => defineConfig(
  ...
)

打包时根据base属性配置
打包命令：npm run build:beta

运行时： import.meta.env vite专用的环境变量参数 也是在mode后面设置 在inedx.vue中获取

7、二次封装axios：

先使用：npm i axios 安装成功之后 新建 utils/axios.js文件 添加代码
这里axios的 方法需要去复习一下

封装cookie
请求头
post请求
拦截器 根据返回值 重新组装 统一管理

8、配置proxy代理接口：解决跨域

在vite.config.js中配置
把遇到带/api路径的请求，都映射到target属性 然后重写api为空 为了去掉他

server: 
  proxy: 
    '/api': 
      target: 'http://backend-api-02.newbee.ltd/manage-api/v1', // 凡是遇到 /api 路径的请求，都映射到 target 属性
      changeOrigin: true,
      rewrite: path => path.replace(/^\\/api/, '') // 重写 api 为 空，就是去掉它
    
  

9、引入Element Plus

可以全局引入 也能局部进入
完整引入：

Plus 可以自定义主题配色配置

10、封装公共方法

在utils下新建index.js文件
封装本地数据获取：
1、封装localGet方法
本来是 const value = window.localStorage.getItem(key)
最后返回value
2、还有错误提示组件 原来是使用try catch捕获错误 现在换成ElMessage.error的方法返回错误数据
ElMessage是plus中的一个组件

12 结构 左边固定宽度 右边栏上中下布局 自适应宽度

公共侧边栏：写在app.vue里面 和<router-view>同级。

点击左边栏需要触发路由的变化：左边点击 右边视图变化
el-menu组件有一个router属性 作用：

是否启用vue-router属性 启用之后激活导航会议index作为path进行路由跳转
默认是false 需要修改成为 true

然后在添加index属性 默认为index=“/”
使用flex布局 display：flex

右边主体部分上中下布局：

头部和底部也是公共布局 公共组件： Header.vue组件 Footer.vue组件
在app.vue中引入<Header /> <Footer />
在import中导入 然后components中加入

13、头部信息联动——路由监听

左边点击A 右边顶部的title就跟随改变
路由监听方法：afterEach 核心代码：

 router.afterEach((to) => 
      console.log('to', to)
      // to 能获取到路由相关信息。
      const  id  = to.query
      state.name = pathMap[to.name]
    )

路径的跳转我这里用到的是plus 中的el-menu-item的index属性
vue-router中可以使用router-link 或者useRouter返回实例

14、登陆：Form表单验证 token鉴权 公共变量提取

思路：在app.vue中声明一个showMenu布尔变量，用于控制是否展示菜单栏 在申明一个noMenu数组变量，存放不需要展示的菜单路径 在通过监听路由变化来匹配是否需要展示路径 动态判断 showMenu，最后通过showMenu来展示和隐藏

优化：
在二次封装axios时做了登陆鉴权 如果错误码为419 就会通过router.push跳转到/login

// src/utils/axios.js
if (res.data.resultCode == 419)
router.push( path: ‘/login’ )

在localSyorage中没有token的时候 明确没有登陆授权 此时直接根据错误码跳转
在把token存入localStorage之后 要通过window.location.href方法刷新页面 否则axios。js文件内
axios/defaults.headers拿不到最新的token信息

常见的授权方式有：
cookie、OAuth(开放授权)、HTTP Basic Authentication等，不过最终目的就是限制用户调用权限接口，按需选择即可。

15、Echarts 5.0图表插件 个人信息弹窗显示

el-popover组件实现一个点击弹出弹窗组件，将个人信息放入弹窗内部 el-popover 提供了插槽 reference 这就是具名插槽，
Vue 2.0 的具名插槽的书写形式为 v-slot:reference，而 Vue 3.0 则变为 #reference，# 代替了之前的 v-slot:
这样做的好处是Header.vue只会被加载一次，无论后续切换什么页面 都不会在请求个人信息接口， 一般来说个人信息的接口不会频繁的获取 所以就固定一次

echarts一般使用 npm i echarts的方法 这里采用静态资源的方式引入

  <script src="https://s.yezgea02.com/1609305532675/echarts.js"></script>    

主要是打包的时候 会将第三方资源打成一个vendor.js文件 如果内部引入的haul会变得很臃肿，使用script的方式引入 echarts资源就会另行加载 还是会挂载到windo全局变量上
这里主要还是看文档完成的

存在问题

在多页面公用一个组件的时。反复点击存在的问题：点击轮播图在切换轮播图的时。会发生上一次大的router没有被销毁的情况 然后又创建一次router 导致执行了几次的router.beforeEach的回调反复
也导致了我们在回调反复内直接根据路径的变化 请求不同的接口 一次性会有多个请求发出
解决是组件销毁的时候 路由守卫也跟着销毁

  export default 
    name: 'IndexConfig',
    setup() 
      const router = useRouter()
       // 监听路由变化
      const unWatch = router.beforeEach((to) => 
        console.log('to', to.name)
      )

      onUnmounted(() => 
        unWatch()
      )
    
  

16、弹窗组件的封装 多页面公用同一个组件

多页面公用同一个组件：
最开始做这个的时候 传统的方法是：
通过Tab在同一组件内，切换不同的选项 从而替换展示的内容
看了文章之后的方法：三个页面共用一个组件 通过路由监听变化 来判断不同的路径 对应不同的接口参数
需要写一个路由监听的办法：
批量删除和增加的按钮功能：

封装弹窗组件点击商品之后 会显示修改商品 添加商品 对商品进行操作
单独写一个vue组件 样式部分都差不多 主要是逻辑部分

17、通过路径判断设置返回按钮， 多级路径公用一个组件

设置耳机页面的时候 重点还是数据吧 因为公用一个组件 但是数据不一样
这里主要靠id区别

然后通过 router.push 的形式修改浏览器地址路径，router.afterEach 就能监听到，并且触发 getCategory 方法，重新获取列表数据，并且 getCategory 方法内，通过 route 去获取浏览器地址栏上的查询参数，如下：

const  level = 1, parent_id = 0  = route.query // 默认没有的情况下，level 为 1，parent_id 为 0

这里的弹窗有三个：新增 修改 删除逻辑所以要分开去写
重点在于 父组件是通过ref的方法 拿到弹窗组件的所有return返回的值

18、wangEditor富文本插件 CasCader三级联动（懒加载）

表单内涉及到的内容也基本涵盖了正常业务开发的范畴，如三级联动（动态获取）、文本输入框、数字输入框、Radio 选项、图片上传、富文本编辑

富文本的原理：在内容编辑完成之后样式会以内嵌的形式嵌入到标签里 只要将最后编辑完的内容上传给服务器 C端可以直接通过v-html直接展示详情内容
也是同样的通过npm安装 然后注册好组件
需要注意的是一个是单张图片上传 另外一个是多图片上传

三级联动懒加载
主要依靠的是props属性
给props动态赋值 定义了两个属性 lazy和lazyLoad
lazy：true 是否动态加载子节点 需要和lazyLoad方法结合 因为是和接口联动所以动态设置为ture
lazyLoad：动态加载是数据方法
接受的类型为function 有两个参数：node resolve ；node为当前节点 resolve为数据加载完成后必须的回调 默认第一次参数为 level = 0, value = 0，获取 categoryLevel = 1，parentId = 0 的分类。当你选择某个分类的时候，会再次触发 lazyLoad。此时 level = 1，value = 点击的分类id，categoryLevel = 2，parentId = 点击的分类id，二级分类的值也就通过 resolve(nodes) 返回给 el-cascader 组件。

19、Table筛选项 ，路由router-link带参跳转。

大量利用了v-if v-else-if v-else 可以提高了代码的可读性