[vue项目] 后台管理 11111111111111111

文章目录

• ​​gitee地址​​
• ​​登录业务解析​​
• ​​退出登录​​
• ​​模板结构图​​
• ​​路由的搭建​​
• ​​品牌管理​​

• ​​table数据渲染​​
• ​​分页器​​
• ​​点击添加按钮，添加品牌​​

• ​​上传文件​​

• ​​点击修改按钮​​
• ​​品牌的表单验证功能​​
• ​​删除品牌​​

• ​​商品管理​​

• ​​三级联动​​

​​手摸手，带你用vue撸后台 系列一（基础篇）​​

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

​​手摸手，带你用vue撸后台 系列二(登录权限篇)​​

gitee地址

​​https://gitee.com/jch1011/guigu/tree/master​​

登录业务解析

src\views\login\index.vue

退出登录

模板结构图

路由的搭建

品牌管理

table数据渲染

将请求的接口函数挂在vue实例的原型上，这样就可以在任意的组件中使用这些函数

​​vue+element作用域插槽​

分页器

优化一下

点击添加按钮，添加品牌

用到element-ui 中的dialog对话框

上传文件

用到element-ui 中的upload

点击修改按钮

​​[js] ES6对象展开运算符&&浅拷贝or深拷贝​​

品牌的表单验证功能

​​elementui 表单验证官网​​只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名

删除品牌

商品管理

三级联动

全局注册组件