vue+element-admin 解构+发送请求流程
特征
- Login / Logout -登录/注销
- Permission Authentication -权限验证
- Page permission -页面权限
- Directive permission -指令许可
- Permission configuration page -权限配置页面
- Two-step login -两步登录
- Multi-environment build -多环境构建
- Develop (dev) -开发（开发）
- sit -坐着
- Stage Test (stage) -阶段测试（阶段）
- Production (prod) -生产（prod）
- Global Features -全局特征
- I18n
- Multiple dynamic themes -多个动态主题
- Dynamic sidebar (supports multi-level routing) -动态侧栏（支持多级路由）
- Dynamic breadcrumb -动态面包屑
- Tags-view (Tab page Support right-click operation)-标签视图（标签页支持右键点击操作）
- Svg Sprite -Svg精灵
- Mock data -模拟数据
- Screenfull
- Responsive Sidebar -响应侧边栏
- Editor -编辑
- Rich Text Editor
- Markdown Editor
- JSON Editor
- Excel
- Export Excel
- Upload Excel
- Visualization Excel
- Export zip
- Table -表格
- Dynamic Table -动态表
- Drag And Drop Table -拖放表
- Inline Edit Table -内联编辑表
- Error Page -错误页
- 401
- 404
- Components -组成部分
- Avatar Upload
- Back To Top
- Drag Dialog
- Drag Select
- Drag Kanban
- Drag List
- SplitPane
- Dropzone
- Sticky
- CountTo
- Advanced Example -高级范例
- Error Log
- Dashboard
- Guide Page
- ECharts
- Clipboard
- Markdown to html项目结构
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── public # 静态资源
│ │── Tinymce # 富文本
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求 （axios相关）一般来说，每个.js与views文件夹的对应
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件 页面级的还是放在各自的views文件夹下
│ ├── 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 配置
└── package.json # package.jso
主要涉及登录流程文件夹：
router/index.js（封装路由）
store/index.js (建立vuex实例和相关导入模板）
store/getters.js(使用getter获取store数据）
store/modules /user.js (进行发送登录请求等及存储vuex及cookie)
api/user.js (封装好的登录请求，获取用户信息请求，退出登录请求等)
store/modules/permission.js (进行路由筛选判断等。生成动态路由)
permission.js ( 包含全局路由导航钩子router.beforeEach（），也就是添加路由的操作)
views文件夹境况
clipboard文件夹 再次下载页面-----删除
components-demo文件夹 组件演示---综合实例-----可删除--相关代码要用
dashboard文件夹 仪表板---首页--可删除
documentation 文档------删除
error-log文件夹 错误日志-----删除
error-page文件夹 错误页面
guide文件夹 指导---引导页---删除
icons文件夹 图标-----删除
login文件夹 登陆页面
nested文件夹 嵌套路由
permission文件夹 准许（权限）
profile文件夹 轮廓--个人中心
qiniu文件夹 文件上传
redirect文件夹 外链---可删除
tab文件夹 显示数据的表格
table文件夹 可做一些操作的表格
theme文件夹 主题---换肤-----删除
permission.js 添加路由的文件，与vouter文件夹关联理解
settings.js 设置相关，可不管
store文件夹-----仓库----保存各项参数
modules/permission.js 生成相关路由判断文件
utils文件夹----保存各种方法
request.js 封装axios请求
compents文件夹---公用组件
Tinymce文件夹 富文本插件
layout文件
App Main.vue 同一组件 不同用法
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
computed: {
cachedViews() {
// 仓库获取数据
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}发送请求流程
1.views文件下页面的函数调用api/service里的请求函数
// views/页面
<button @click="ceshia">举例测试</button>
import { ceshi } from '@service/ceshi'
export default {
data() {
list: '',
tokon: 'suibian'
},
methods: {
ceshia() {
ceshi(this.tokon).then(res => {
this.list = res.data.list
})
}
}
}2.api/serve.js 调用utils/request.js里封装的axios请求
import request from '@utils/request' //引入request中封装的请求函数，包括请求拦截器，response，error等操作
export function ceshi(data) {
return ruquest ({
url: 'i/suibian/suibian/suibian',
method: 'post',
data
})
}