关键词：
技术栈： 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 可以提高了代码的可读性
前端学习笔记-07一些总结(代码片段)
本文目录前端的概念前端的学习思路软件开发架构浏览器访问网址的流程HTTP协议四大特性请求数据格式响应数据格式响应状态码请求方式url:统一资源定位符(即网址)标签的分类1head内常用标签body内常用标签基本标签标签的分类2... 查看详情
太赞了！华为工程师总结的400道前端面试题和vue笔记资料提供免费下载(代码片段)
10月份很多小伙伴找我要一些前端面试题资料，于是我翻箱倒柜，把这份华为大牛总结的前端开发归纳笔记找出来，同时赠送直播、录播、视频、笔记、源码、软件包和价值1万元VUE笔记资料，免费共享给大家！... 查看详情
vueadmin前端学习笔记(代码片段)
vueAdmin前端学习笔记1.安装VUE项目第一步：vue-ui第二步：创建第三步：详情第四步：选择手动第五步：配置第六步：点击创建项目第七步：启动项目第八步：vsCode启动项目2.安装element-ui3.删除不必要... 查看详情
前端项目性能优化记录~(代码片段)
前端性能优化总结原因：最近公司一个项目即将上线,作为它的主要构建者之一(亲爸爸)一直在思考如何能给它更好的性能优化于是博主开始了网上大量的学习,集百家之所长,试图把这些骚操作应用在自己的项目中,完事之后记... 查看详情
git与github笔记总结(代码片段)
...本控制系统，可以快速高效地处理从小到大型的各种项目（管理项目）。Git易学习，占内存小，性能极快。它具有廉价的本地库，方便的暂存区域和多个工作流分支等特性。1.1何为版本控制版本控制是一... 查看详情
前端项目品优购上集完整笔记和源码！万字教程，肝了！(代码片段)
文章目录品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下（称为项目结构）创建文件如下项目模块化开发... 查看详情
react学习笔记总结(代码片段)
...阅与发布(兄弟组件之间的传值)8.fetch的使用9.React路由9.1前端的his 查看详情
react学习笔记总结(代码片段)
针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件... 查看详情
springcloud学习笔记总结(代码片段)
...ureka基础知识2.Eureka之EurekaServer服务端安装3.Eureka之将别的项目入驻进EurekaServer4.Eureka之搭建Eureka集群5.Eureka之搭建业务逻辑集群6.Eureka之actuator微服务信息完善7.Eureka之服务发现Discovery(重点)8.Eureka之自我保护9.Eureka之停更说明1.Eureka... 查看详情
前端vue3+vant4项目：旅游app-项目总结与预览（已开源）(代码片段)
文章目录项目预览首页Home日历：日期选择开始搜索位置选择上搜索框热门精选-房屋详情1热门精选-房屋详情2其他页面项目笔记项目代码项目数据项目预览启动项目：npmrundev在浏览器中F12：首页Home热门精选滑动到底部... 查看详情
typescript学习笔记（十万字超详细知识点总结）(代码片段)
...学习TS不迷路：TypeScript从入门到精通🖥️博主的前端之路（猿创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）🏆分享博主自用牛客网：一个非常全面的面试刷题求... 查看详情
vue后台管理系统实践方案总结(代码片段)
这个是一个电商管理系统的前端项目的笔记，这个项目主要包括登录/退出功能、主页布局、用户管理模块、权限管理模块、分类管理模块、参数管理模块、商品管理模块、订单管理模块等功能，我把里面部分的功能进行... 查看详情
前端常用总结(代码片段)
阅读目录一、vue父组件调用子组件方法二、el-tree自定制三、vue自定制项目启动命令四、Tinymce富文本框一、vue父组件调用子组件方法1.子组件Children.vuemethods:doing_someting()console.log("doing...")2.父组件<template><div><!--... 查看详情
对项目的总结(代码片段)
...重置，第三方登录用户注册1，图片验证码流程分析：1，前端生成uuid随机字符串2，后端生成图片验证码发送给前端，将图形验证码的存入到redis中2，短信验证码1，检查图片的验证码2，检验是否是在60s内是否已经发送过3，生成... 查看详情
数学建模笔记总结(代码片段)
数模论文项目推荐：GitHub-BetterBench/Math_Model数模常用方法介绍：一份简短又全面的数学建模技能图谱：常用模型&算法总结数学建模中常用的方法-知乎Python数据分析 一、生成pandas生成pandas作用pd.Series()生成pandas... 查看详情
前端小问题总结(代码片段)
旨在记录自己在实际项目中遇见的一些小问题，简单做个记录。以便以后翻阅。document.domain通常，解决跨域问题的方法有：document.domainjsonpiframe代理CORS用document.domain来指定域，是可以的，但是有局限性，也就是一级域名一致才可... 查看详情
web前端知识总结(代码片段)
...优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端开发的？ 5.未来三到五年的规划是怎样的？ position的值，relative和a 查看详情
代码规范java程序员的编程笔记（培养好习惯）(代码片段)
...问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的 查看详情