前端开发项目技术总结

前端 vue框架简单学了一遍，也做了demo，主要学了创建项目、路由、状态管理、UI组件库等。

最近在做前端的项目，总结一些开发遇到的问题和解决方案

数据绑定模型

vue框架的标签 :data 和prop标签 data绑定对应的模型，prop是对应模型里面的属性名

点击注册在同一个页面内容跳转如何完成的

用一个const isRegister = ref(false) 这个来标识，false显示的是登录表单，true显示注册表单，点击注册的时候，讲这个值修改为true,点击返回将这个值修改为true。这样就可以完成页面的跳转了。

通过标签v-if v-else 来控制显示，是作用的el-form上面。 具体的表单属性是el-form-item；

解决跨域问题

由于浏览器具有同源策略的限制，向不同源发送ajax请求会发生失败，如何解决跨域问题呢？
可以通过配置代理的方式来解决，让前端的请求发送给自己的前端服务，通过修改请求地址比再发送给后端服务，也可以通过nginx服务器来配置代理。


如果不填写对应的url，浏览器默认是给当前端口所占用的服务发送请求。
在vite.config.js文件中配置代码

vue组件ref

ref提供了一种访问DOM元素或组件实例的方式，但是如果需要使用ref的值，是需要在对象后面.value才可以使用。

定义表单校验的规则

element-plus提供的表单校验规则的代码，需要const编写一个rules属性。
required为标签是否需要填写，trigger是标签是如何才能触发的；也可以自定义校验规则，用函数validator来接收，函数有三个参数，rule value callback。 callback是回调。

使用的时候在表单上面添加 :rules属性 在具体的item上面添加prop属性

trigger 属性用于指定何时触发某个特定的事件。blur 是一个常见的事件，表示当元素失去焦点时触发。因此，trigger 设置为 blur 的意思是指定在元素失去焦点时触发某个事件。

后端项目部署

项目需要部署到固定的服务器上面，开发好的项目如何进行部署呢？

windows部署项目

执行maven packege，编译->测试->打包

部署项目 首相将项目打包成jar包，采用的是package命令将项目打包，运行Jar包的命令是Java -jar Jar包名称；
服务器必须要有对应的jre环境

布局

‘
后台管理系统经常采用的是总体的左右进行布局，右边模块，分为上中下布局，最上面可能显示对应的路由或者页面跳转等，中间显示页面的主要信息，下面可能显示版权等内容。

想要切换页面 需要掌握路由功能

路由 是决定从起点到终点的路劲的进程
在前端工程中，路由指的是根据不同的访问路径，展示不同的组件内容
Vue Router是Vue.js的官方路由

在main.js中导入对应的vue文件;

路由的js文件 1.导入vue-router 2.导入需要路由的组件 3.定义路由关系4.创建路由并且导出

使用路由功能：

子路由问题：
一级路由和二级路由问题

给item标签配置子路由

使用路由功能首先需要分析有几个等级的路由，画出图像，在路由里面层层去嵌套即可。

跨路由共享信息

由于登录的时候获得了token，下面的请求token是没有共享的，那么如何共享token呢？

1. 首先安装 pinia npm install pinia
2. 在vue中使用应用实列pinia
3. 在js中定义store
4. 在组件中使用store

使用流程

定义token.js

组件中使用token.js

pinia持久插件

之前的列表存在bug，pinia默认是内存存储的，刷新浏览器会丢失数据。
persist插件可以讲pinia中的数据持久化的存储起来。

npm install pinia-persistedstate-plugin

使用的流程
注意是pinia使用这个持久化的插件，并不是vue使用这个插件

未登录的统一操作

对未登录的状态进行统一处理
本项目用到的是相应拦截器来完成未登录的操作，通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。跳转对应的路由；

编辑分类功能编写

因为添加分类和编辑分类共用的是一个弹窗，如何区别呢？
对弹窗引入一个title属性

点击添加分类，title改为添加分类 ，点击修改分类 title 改为修改分类

在 确定按钮上绑定点击事件，通过title的属性来判断，编写对应的三元组；

此时添加分类和修改共用的是一个数据模型，当点击修改分类的时候，模型绑定的对应的数据，再点击对应的添加分类的时候数据需要清空，编写下面的代码

删除或者退出的提示框编写

HTTP delete请求拼接参数

http请求路径后面包含参数，用？进行拼接。

分页条相关

导入的element-plus组件

使用中文语言包，分页默认是英文的