VUE全面总结【项目篇】

╰半橙微兮° 2023-10-03 08:24 5阅读 0赞

> **前言：学习vue就是为了在实际开发中解决问题。而解决问题最重要的就是解决思路，这篇文章会提出一系列的问题，然后利用所学知识给出答案。**

## 第一节 登录注册页 ##

**问题1：如何做一个完整的登录注册页面？**

答：第一步：创建组件-->配置路由-->测试跳转是否成功-->布局结构-->调整样式-->基础静态页面搭建完成。

第二步：实现功能：表单校验（前端得做）-->调接口发请求-->根据后台反馈结果，给出提示

**问题2：你认为在这个功能模块中，哪里最重要？**

答：发送请求后，如登陆成功。后台发回来的token需要保存，因为后续开发的许多功能模块都需要使用到token。

**问题3：你是怎么保存的？**

答：通过vuex保存的，同时也保存到了本地存储中。

首先，在vuex的actions函数里，发送请求。接着将获取到的token值，通过context.commit()传给mutations,让mutations去保存token。因为只有mutations可以修改state里面的值，将token存到vuex好处是所有的组件都可以通过this.$store.state.token 拿到token的值。localStorage setItem保存到本地。用getItem()取值。

**问题4 为什么要这么麻烦，还要存到本地？**

答：vuex保存的数据是存到内存里面，页面一刷新数据就没了。而存到本地时效性变的相对长，但是本地存储不是响应式的，而vuex是响应式的，所以利用他们的优点。

**问题5 那登录成功之后怎么跳转？**

**答：****分两种情况。第一种就是正常登录，可以使用编程式跳转this.$router.push('/xx')**

**还有一种情况，就是用户访问了某些需要权限的页面，被跳转到了登录页，这个时候就需要跳转到用户来之前的页面，我们可以从query里面取值。this.$router.push(this.$router.query.backto || '/') 就是说有backto就用没有就去主页**

**问题6 如果用户登陆了，那么它访问需要token权限的页面（请求需要带token），你是怎么处理的？**

**答：我可以在这次请求中，将token的值从state中取出来，给请求**

我会封装一个请求拦截器，每次发送请求的时候，将token发给后台。

**问题6 怎么处理 非登陆用户去访问敏感页面？**

**首先，用户没有权限是不能访问需要权限的页面的。应该让他去登录页。**

**利用路由守卫（前置路由守卫），为了更好的用户体验，我们应该记住用户之前所在的页面，以便用户登录之后，跳转到之前的页面 。因此，我们需要在跳转到登录页前传入要返回的地址**

**next('/xxx?backto=' + to.fullPath) 而用户登录成功后，会根据传回来的地址跳转过去利用**

**this.$router.push(this.$router.query.backto || '/首页' ) 如果没有的话跳首页**

【**待更新…**】

## 第二节 布局问题（UI组件、二级路由） ##

问题1 ：使用了哪些第三方UI库

问题2 ：

## 第三节 封装问题 ##

**问题1 ：什么时候封装？**

**问题2 ：封装了哪些？**

**问题3 ：封装的流程？**

## 第四节 axios请求问题 ##

**问题1 ：传参**

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关黑马点评项目全面业务总结

1 黑马点评项目 1.1 短信登陆 1.1.1 短信登陆简介 session共享问题:多台服务器并不共享session存储空间,当请求切换到不同tomcat服

叁歲伎倆/ 2024年03月31日 10:12/ 0 赞/ 105 阅读

相关 VUE项目调试篇

一.解决node-sass版本不兼容问题 npm uninstall node-sass npm install [node-sass@6.0.1][node-sass_6

分手后的思念是犯贱/ 2024年03月25日 15:04/ 0 赞/ 88 阅读

相关 VUE全面总结【项目篇】

> 前言：学习vue就是为了在实际开发中解决问题。而解决问题最重要的就是解决思路，这篇文章会提出一系列的问题，然后利用所学知识给出答案。第一节登录注册页问题1：如

╰半橙微兮°/ 2023年10月03日 08:24/ 0 赞/ 6 阅读

相关 JNDI全面总结

原理：在DataSource中事先建立多个数据库连接，保存在数据库连接池中。当程序访问数据库时，只用从连接池中取空闲状态的数据库连接即可，访问结束，销毁

太过爱你忘了你带给我的痛/ 2022年08月27日 04:44/ 0 赞/ 225 阅读

相关位操作基础篇之位操作全面总结

原文地址：[http://blog.csdn.net/morewindows/article/details/7354571][http_blog.csdn.net_morew

偏执的太偏执、/ 2022年08月22日 06:23/ 0 赞/ 196 阅读

相关 makefile全面总结

makefile很重要什么是makefile？或许很多Winodws的程序员都不知道这个东西，因为那些Windows的IDE都为你做了这个工作，但我觉得

客官°小女子只卖身不卖艺/ 2022年08月06日 09:17/ 0 赞/ 216 阅读

相关一篇文章，全面总结Android面试知识点

> 本篇文章的所有知识点是亲身经历十余家一二线互联网企业面试后总结产出，包含应聘Android开发岗位的各个方面的高频知识点，主要针对但不局限于Android应届面试。以下所有

￡神魔★判官ぃ/ 2022年06月07日 10:53/ 0 赞/ 225 阅读

相关最全面的vue开源项目库汇总

内容送上一波福利微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取 ![在这里插入图片描述][

你的名字/ 2022年04月14日 21:29/ 0 赞/ 280 阅读

相关 vue全面介绍--全家桶、项目实例

简介 “简单却不失优雅，小巧而不乏大匠”。 2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和r

清疚/ 2021年10月13日 00:37/ 0 赞/ 471 阅读

相关 vue全面介绍--全家桶、项目实例

简介 “简单却不失优雅，小巧而不乏大匠”。 2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和r

傷城~/ 2021年09月12日 03:58/ 0 赞/ 405 阅读