框架基本知识总结 Day15

前后端大整合

1.新建一个文件夹，在终端中打开输入vue create 项目名（前提是安装了vue脚手架）
2.安装路由npm add vue-router，新建一个router文件夹，router相关都会在这里配置，创建一个router实例，然后在mian.js引入并且挂载
3.安装vuex，命令npm add vuex，新建文件夹store，这是vuex的实例,同样引入挂载
4.新建api文件夹，这里用来存放和后端交互相关文件
5.其他的类似过程
6.新建assets/style/commons.css，在实际开发中通常对整个 html页面进行格式化，让整个页面铺满

路由相关

路由配置

1.导入vue-router
2.定义路由规则（路径）
3.创建路由规则
4.配置路由守卫
4.对外暴露

补充

路由守卫的作用是每次切换路由都判断有没有登录，如果没有登陆就去登陆，否则放行

项目启动应该默认跳到登录页

createWebHistory()：不带 #，依赖 HTML5 History API，URL 更加干净和直观，适合需要清晰 URL 的应用，但需要服务器配置支持。
createWebHashHistory()：带 #，使用哈希模式，URL 中会包含 # 符号，简单易用，适合不想配置服务器的情况。

跨域问题，通过在vue.config.js设置一个小型代理服务器，避免浏览器直接和后端交互

RBAC权限管理模型（基于角色的权限控制）

认证：规定谁能登录
鉴权：规定了能访问哪些接口，使用那些功能
RBAC组成三个部分：用户   角色   权限
通过定义角色的权限，给用户授予某个角色，实现用户和权限的逻辑分离

用户（User）：每个用户有一个唯一标识ID，授予不同角色
角色（Role）：不同角色具有不同的访问权限
权限（Permission）：访问权限

直白的说就每个人看到的东西都不一样

用户登录细节

前端处理用户名密码发送到后端，校验失败则提示或者重登录，校验成功则使用uuid生成一个令牌（token），返回给前台，存在reids里一份，防止直接向后端发送请求

校验成功通常返回一个专门用来登录的实体类

登录数据库查询

通常不会select * from user where username=xxx and password=xxx这样查询

原因
1.直接发送用户名和密码到服务器查询是一个很不安全的行为
2.使用and查询效率很低

解决途径

可以直接发送用户名向数据库查询，没查到就失败，如果查到了返回user对象，在java后端中比较密码