对花裤衩大佬的vue-admin-template项目的个人理解

一、克隆/配置项目

1.1 克隆项目

git clone https://github.com/PanJiaChen/vue-admin-template.git

1.2 在Git Bash中安装依赖

进入项目目录

cd vue-admin-template

安装依赖

npm install

我是在IDEA上打开的项目，在idea中安装依赖

点击打开终端

启动服务

npm run dev

启动成功后

项目首页

二、分析

2.1 项目结构

2.2 登录页面分析（login）

• 登录表单双向绑定’loginForm ,点击登录按钮触发事件，调用函数handleLogin

• 函数先进行表单检验，通过后调用vuex中的login函数，在login函数中调用api中user.js的login来发送请求

• 后端返回响应后，响应数据会先经过request.js进行处理取出code值判断是否请求成功，再返回

• 请求成功后会路由到默认页面，再路由前会先经过路由守卫的判断，是否有权限路由

• 现在我们进入vuex中的Action中的user.js中的login方法 进行分析
  
  这里又调用了src/api/user.js中的login方法，那么我们在进入，进行分析
  
  这里我们发现最终发送的请求的其实是src/api/user.js中的login方法

一个请求进行了层层封装，对于我这个主后端学习的人来说，我的感觉是这个封装跟后端mvc的封装思想很相似，拿springboot来讲，api文件夹就相当于mapper包，用来处理数据的连接，store相当于service，用来处理业务，而view相当于controller用来最终的数据展示/传递，这里是我个人的理解，大家也可在评论区，分享自己的理解

三、后端响应返回数据

所有响应数据都会先经过reques.js方法，进行处理，再返回

• 响应返回到store时，会取出后端传来的token值存入cookie，和vuex中
  
• 再返回到view这里，然后路由到指定页面，注意所有路由都再经过路由守卫进行判断，路由守卫是在permission.js文件中
  

上面就是整个登录页面的执行流程，大家在后续填充内容页面时可以仿照上述步骤进行封装

最后

如果感觉有收获的话，点个赞 👍🏻 吧。
❤️❤️❤️本人菜鸟修行期，如有错误，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍