环境准备:

开发:

跨域问题:

只有浏览器才存在跨域问题, 此时浏览器的地址和前端服务一致,所以不存在跨域问题, 但是当浏览器中的js代码需要向8080发送请求时就会由于存在跨域问题而失败. 简单的说前端和浏览器的地址+端口是一致的,浏览器只能向前端服务发送请求, 所以可以使用配置代理的方式, 使得浏览器不直接发送请求到别的服务,而是将请求发送给前端服务, 由前端服务发送相应的请求给别的服务器.

一个单击事件绑定两个函数的格式:

用分号将两个函数名隔开

优化axios:

避免重复代码的书写

原本的axios是直接返回result

路由:

和之前的课程设计不同, 所有的vue文件都要导入进App.vue中, 这时就需要使用路由技术来确定何时展现不同的页面

在vue中路由模式有两种: 哈希模式, history模式

导入vue-router后需要在main.js中导入, 注意, 如果router不是在index.js中写的, 那么路径就不能省略文件名. (也就是说, 如果没有写文件的名字 ,他会默认找到名为index的js文件)最后在App.vue中导入router, 这样就会使用router-view来承载对应组件中的内容

在代码中实现页面的跳转:

导入'vue-router' 的useRouter函数, 生成router, router有实现页面跳转的api: push方法, 

子路由:

注意重定向: 可以把'/'的访问重新定义到指定的路径

Pinia:

注意useTokenStore的返回值, 是一个json对象: return {token, setToken, removeToken}

在pinia中定义的响应式数据都不需要通过.value获取数据

在登陆成功后, 将返回的token保存在pinia对象的token中,然后在其他的调用后端服务器的请求中添加请求头传入pinia中的token即可.

如果在所有的请求中都手动添加请求头是比较繁琐的, 可以添加拦截器,配置请求前的操作:

pinia持久化插件:

未登录统一处理:

编程技巧总结:

对于使用次数超过两次的代码一般都会进行封装或者编写拦截器

对于内容的展示会封装成函数后在script标签中执行进行渲染

相当一部分的数据都写成响应式数据, 对于json格式的数据使用的非常普遍

有专门的文件夹对应utils, api, view

要注意script标签中函数执行的先后顺序, 函数调用可能存在数据的依赖关系(比如说, A函数从后台获取数据, B函数需要使用获取到的数据, 那么B函数就需要放在A的后面调用)

开发步骤: 1.页面的搭建: 去到Element Plus官网查找相应的框架

2. 根据需求修改框架

3. 编写需要的数据, 函数

4.编写api接口

项目总结:

1.了解了Element + Plus的使用

2.了解了axios的使用

3.了解了pinia的使用(用于共享不同vue文件之间的数据)

4.了解了路由的使用, 用于切换不同的vue页面

5. 注重重复代码的封装, 提高利用率, 包括数据模型的复用