新疆企业电子网站建设家庭优化大师
环境准备:
开发:
跨域问题:
只有浏览器才存在跨域问题, 此时浏览器的地址和前端服务一致,所以不存在跨域问题, 但是当浏览器中的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. 注重重复代码的封装, 提高利用率, 包括数据模型的复用