前端实现登录登出界面
写在前面
前端部分就不想废太多时间了,总结一下干了什么然后去和历史节点一一对照看下就行了。
-
实现两个页面–登陆、注册的前端样式
-
在 router 目录下的
index.js
中加入路径 -
在 store 下的
user.js
存储用户信息 -
把 user 加入到全局 module
-
在
user.js
中利用ajax实现登录。为了方便,在user.js
中添加辅助函数login
,并在UserAccountLoginView.vue
中实现 -
修改
NavBar.vue
,将内容和变量绑定起来 -
实现:用户名和密码输入正确,点击提交跳到主页面。在
UserAccountLoginView.vue
中实现 -
实现: 登陆成功后获取用户的信息。在
user.js
中添加辅助函数,并在UserAccountLoginView.vue
中实现 -
实现:登录成功后修改导航栏信息。修改
NavBar.vue
。利用v-if
和v-else
来实现。 -
实现:退出登录。具体逻辑就是把用户存储的token令牌删掉并更改导航栏。修改
NavBar.vue
,并在user.js
中添加辅助函数来清空token令牌。
改动历史
此文章版权归金晖のBlog所有,如有转载,请注明来自原作者
评论