python vue admin_Vue学习笔记-vue-element-admin 前端学习
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码 @ 路径
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── 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.登录学习
模板同后台通讯标准的确定方法:
前端发的什么请求(url)?
数据格式是什么?
提交的是哪些数据?
后台返回的是哪些数据,数据格式是什么?
3.1 点登录发送的请求: dev-api/vue-admin-template/user/login
1. 前端请求url(接口):http://127.0.0.1:8000/user/login
2.请求方式:post
3.提交数据格式:{"username":"admin","password":"111111"}
4.后台返回的数据 : {"code":20000,"data":{"token":"admin-token"}} ,登录成功后返回一个 token.
图解:
-1. 前端请求url(接口1):http://127.0.0.1:8000/user/login ===> base_url + url (不要改admin的路由名称)
base_url : 'http://127.0.0.1:8000' ,改后要重启前端一下.
url: '/user/login/' 不要改admin的路由名称,
-2.请求方式:post
-3.传送的数据和格式: {"username":"admin","password":"111111"}
4.后台返回的数据和格式: {"code":20000,"data":{"token":"admin-token"}} ,登录成功后返回一个 token.
3.2 上面登录验证完后要跳转页面还需要增加user/info接口
1. 前端请求url(接口2):http://127.0.0.1:8000/user/info?token=admin-token
2.请求的参数:?token=admin-token
3.请求方式:get
4.返回数据格式:
{"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}
}
6.jwt多方式登录(用户名,手机号,邮箱))
后端代码实现三个接口，即可对接登录
3.6 前端登录修改
3.路由和侧边栏 @/router/index.js
路由和侧边栏是组织起一个后台应用的关键骨架。本项目侧边栏和路由是绑定在一起的，所以你只有在 @/router/index.js 下面配置对应的路由，侧边栏就能动态的生成了。大大减轻了手动重复编辑侧边栏的工作量。当然这样就需要在配置路由的时候遵循一些约定的规则。
