手把手撸管理后台系列1之登入功能实现

写在前面

该项目前端使用的是vue实现，用到的模板是vue-admin-template，后端使用springboot+mybaits-plus等技术，数据库使用的是mysql，本系列文章目的在手把手的教读者构建一个前后端互通的后台管理项目。

前端开发

1.模板下载

建议直接去大佬的git仓库下载，这里提供码云的下载地址

码云下载地址：

https://gitee.com/panjiachen/vue-admin-template.git

百度网盘下载地址：

链接：https://pan.baidu.com/s/1aL0FdDvc0qx0jlbhLFfIpw
提取码：kh5x

2.解压压缩包

2.1解压压缩包

2.2安装相关依赖

进入解压的目录执行一下操作

cnpm install

2.3启动命令

cnpm run dev

这样他就会在浏览器中自动打开如下页面

2.4目录结构介绍

── build # 构建相关
├── mock # 项目mock 模拟数据
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json

3.更改后端所在的地址

这里我们使用的是4.0版本，配置文件为vue.config.js。

其中化红线的部分为后端数据所在的部分，我这里使用的是我真实的后端数据所在的地址，如果只为前端学习可以使用虚拟数据的所在地址。这里推荐一个在线接口平台，需要的同学自取：
fastmock：https://fastmock.site/#/

4.处理请求所在文件的路径

src/api这个文件夹中存储的是处理请求路径所在的文件，虚拟接口的请求路径要与这里相同

5.登入页面所在的文件路径

5.1登入页面所在路径为src/login/index.vue

下面我们来看看其中的代码

5.2与输入框数据绑定

5.3向后端请求操作

5.4this.$store.state.xx.xx

在这里提一下this.$store.xxxx 这个操作，因为我本身主学后端，前端也是为了能独立搞一个项目才略微学习学习

this.$store.state.xx.xx 其实是Vue用到状态管理工具Vuex
Vuex官网：https://vuex.vuejs.org/zh/
感觉就是把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！（在项目的任意地方都可以随时获取和动态的修改，在修改之后，vue会为你的整个项目做更新）

获取store中的数据

在vue根文件中注册store，这样所有的组件都可以使用store中的数据了

我的项目文件结构：

在main.js文件中注册store

然后代码中写到

登录后前端有缓存userId，然后通过userId再去查找

这个位子就用到了 公共页面里面的

总结：main.js是工会老大，你把奖励给了老大，老大有的道具会交给你使用，那么你就可以通过this来使用，不知道我这样总结的对不对，如果不对，欢迎一起探讨

转载自：

版权声明：本文为CSDN博主「鲨鱼辣椒灬」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ll594317566/article/details/90666836

5.5上述操作跳转总结

index.vue向main.js调用方法，

main.js中又引用了./store中的方法

./store/user.js又引用了@/api/user

到这里我们的前端登入部分就介绍完毕，下面来介绍后端部分，点击链接跳转到后端的基础模块开发：第二节基础模块开发https://blog.csdn.net/pjh88/article/details/116831776