Vue-项目开发2

接口的作用

1.提高代码的可以维护性
2.方便代码的复用和管理
3.方便接口的测试和调试

vue中token 的存储流程

1.第一次登录的时候，前端调用后端接口，发送用户名和密码
2.后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3.前端拿到token，将token存储到localStorage和pinia中，并跳转路由页面
4.前端每次跳转路由，就判断localStorage中有无token，没有就跳转到登录页面，有则跳转到对应路由页面

5.每次调用后端接口，都要在请求头中加token
6.后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败(如：token过期)就返回401，请求头中没有token也返回401
7.如果前端拿到状态码为401，就清除token信息并跳转到登录页面

项目大概流程

// user 文件夹的内容是 后台设置下的 用户列表子路由页面
其中有五个文件
	ButtonGroup.vue
	ImportXlsx.vue
	SearchBar.vue
	TabelView.vue
	UserEdit.vue
	UserTabel.vue
	
其中SearchBar.vue和TabelView.vue 放在主路由页面UserView.vue下
TabelView.vue 是ButtonGroup.vue、ImportXlsx.vue、UserEdit.vue、UserTabel.vue的主路由

1.UserTabel.vue 中是表格内的部分 
	其中写入了表格样式
	处理的事件有：1.表格内最后一项操作里的 修改和删除，2.删除选中按钮
	向父组件抛发了 自定义的删除事件,选中删除事件,修改事件
	其中自定义选中删除事件和自定义删除事件 分别需要向父组件中传入被选中的信息和要删除事件的id

2.ButtonGroup.vue 中是表格上面的按钮部分 其中写入了四个按钮的样式，处理了每一个按钮所会触发的事件
	向父组件中抛发了 自定义的 添加用户事件、删除选中用户事件、导入用户事件

`注：要分清 添加用户事件 和 添加成功事件`
`两者不是在同一个按钮`
3.UserEdit.vue 中是对于添加新用户按钮和修改事件的写入 其中写入了添加新用户和修改事件 在这两个不同的事件下会显示的不同的模态窗页面(根据数据的不同)
	自定义了添加数据成功事件
	当数据添加成功时通过模态窗页面中的保存用户信息按钮 向父组件抛发了 添加数据成功事件
	在父组件中的UserEdit标签内获取并使用该事件，并重新渲染列表，并把新的
 
4.SearchBar.vue 是用户搜索界面	当输入同时输入账号和姓名，或者输入二者中的一个时，可以根据输入的内容查询到对应用户的信息
`如何获取到对应用户信息`
    1.SearchBar.vue向父组件中抛出一个 自定义搜索事件
    2.在父组件中获取并使用该事件，构造一个函数，通过函数把SearchBar.vue中传入的表单信息给到TabelView.vue中
    3.在TabelView.vue中进行判断，当表单信息存在时就把对应表单信息中的用户信息，显示在表格中
    4.在SearchBar.vue中查询过后，要清空表单，为下一次查询做准备

5.TabelView.vue 是		
	ButtonGroup.vue,
	UserTabel.vue,
	UserEdit.vue,
	ImportXlsx.vue的主页面
是用来进行组件间的值的传递，和数据信息的处理

6.ImportXlsx 是导入数据到后台的界面，需要与ButtonGroup.vue中的导出选中按钮通过v-moudel进行关联


// role 文件夹的内容是 后台设置下的 角色列表子路由页面
	共有三个文件
    ChangeRole.vue
    GrantRole.vue
	RoleList.vue
其中ChangeRole.vue 是上半部分表单页面，用来通过角色名称保存角色信息，RoleList.vue是下半部分表格页面，显示出当前角色有的权限，可以修改和分配权限，GrantRole.vue 是分配权限的模态窗界面

1.ChangeRole.vue中，需要通过RoleList.vue中的修改按钮获取到，当前所点击的角色名称，放入到ChangeRole.vue的输入框中，在RoleList.vue需要抛发出一个事件同时把信息列表传出去，在父组件中接收该事件并构造函数，把信息列表中的角色名称通过父组件给到ChangeRole.vue中




`如何把模态窗与ButtonGroup.vue 中的添加新用户按钮绑定`
    1.在ButtonGroup.vue 中通过添加新用户按钮 抛发了添加用户事件
    2.在父组件的ButtonGroup标签内接收并使用该事件，通过该事件创建了一个addUserHandler函数
    定义了一个初始值为false的变量addUserShow
    在addUserHandler函数内 当点击按钮时，会让addUserShow的值变为true
    3.在UserEdit标签内又通过v-model绑定了addUserShow，这个绑定的addUserShow在父组件中传入了UserEdit组件内会与组件内 el-dialog中的v-model="modelValue" 关联
    4.当addUserShow时初始值时模态窗不会被打开，点击按钮之后会把addUserShow的值变为true
    同时会让el-dialog中的v-model="modelValue"变为true
    从而实现了 当点击按钮时，会显示出模态窗页面

登录流程

1.先布局登录的界面--有一个主路由是两种登录方式的共同界面,在主路由下
有账号登录和手机号登录,使用的是form表单
2.要对主路由传入的登录类型进行判断,设置进入页面时显示的第一个登录界面是账号登录
3.要进行表单的验证,对应手机号要单独设置一个手机号的自定义验证,自定义验证通过 `validator:` 放在通用的验证中
4.要设置form表单的初始值,绑定到标签中

5.使用进入系统按钮,向服务端发送当前表单内输入的内容,请求服务器中的数据进行比对,当比对通过时,即可进入系统
6.通过传入的登录类型,判断当前选择的请求方式
7.要在在点击进入系统时,就动态生成子路由,要把获取到的这些路由放到pinia中进行存储
8.设置跳转至的页面
9.一次操作完成后要重置表单,让表单中内容为空字符串
10.要注意标签中一些值的绑定

11.在userRequest.ts 请求页面中,要根据前端传入的类型获取到账号登录或手机号登录时的数据(手机号登录要请求到验证码)
12.当获取到的结果为真时,就把数据存储到pinia中,实现自动登录

主要点：

<!-- 一般在子组件上获取数据时，说明子组件的数据不会进行更新，当每次打开新的子组件才会调用一次 -->
<!-- 当在父组件中获取数据时，说明这个数据需要进行更改，让父组件更改这个数据，重新渲染子组件 -->

<!-- 按钮与触发该按钮时 显示的页面的绑定 通过自定义事件的抛发和v-model进行关联-->
<!-- 当该按钮需要进行一些操作时,比如添加,修改,删除等 要注意具体的操作是什么,要向服务端请求获取到数据,或者向服务端传入数据 -->
<!-- 当操作完成之后需要告知父组件时,是子组件通过自定义事件向父组件抛发进行告知,父组件在通过该事件定义一个函数,通过函数中的一些列操作反馈给子组件-->