# 校园超市后台管理系统

**Repository Path**: chenyzy/vue_shop

## Basic Information

- **Project Name**: 校园超市后台管理系统
- **Description**: 采用前后端分离的开发模式，基于 Vue 技术栈的 SPA 项目，用户登录，用户管理，权限管理，商品管理，订单管理，数据统计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-04-25
- **Last Updated**: 2023-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI

## README

# 电商后台管理系统

## 安装依赖
yarn install或者npm i
### 运行
vue ui
### 登录过程
* http 是无状态的
* 通过 cookie 在客户端记录状态
* 通过 session 在服务器端记录状态
* 通过 token 方式维持状态
* 前端与服务器之间存在跨域问题时使用
* 登录前输入帐号、密码 -》 服务器验证后返回token -》 客户端保存token -》 后续请求都携带token数据发送请求（用户的验证） -》 服务器验证token是否通过
### 用户管理
  * 卡片搜索框的使用: `el-card` 配合 栅栏布局 使用 input复合框 : 样式配合 Row 和 Col的栅栏配合
  * 表格数据: `<el-table :data="数据源" stripe(avtice) border(边框)>` `<el-table-column prop="数据名" label="列的名字">`
  * 显示按钮使用作用预插槽: 在`<el-table-column>` 添加template模板再使用`v-slot`属性拿到当前槽作用域的布尔值 Boolean 再通过Switch组件显示 而在 `<el-table-column>` 使用了作用域插槽会覆盖当前层的prop所以可以删除prop 按钮使用时需要 插槽作用域
  * 分页: `pagination`: `page-sizes`	每页显示个数选择器的选项设置 `page-size`	每页显示条目个数，支持 .sync 修饰符	number  `layout`: 显示那些组件 监听改变事件 页码的修改 显示个数的修改 `handleSizeChange(newValue)` 监听显示页数的改变自带参数 是 新的值 `handleCurrentChange`监听页码的改变
  * 按钮状态的修改: 通过Switch的chang改变事件触发回调函数
  * 搜索功能: 给搜索框双向绑定到 `queryInfo.query` 因为搜索时根据它来的 再搜索按钮绑定点击事件发送用户数据请求,根据query返回对应的参数 , 清空搜索框并清空搜索的内容 element-ui的搜索框有自带的clear事件,点击清楚时再次发送用户数据请求,此时因为query已经清空所以返回的是默认的数据
* 修改用户信息: 点击按钮使用作用插槽传id值,再发送axios.get请求获取当前id的用户 并将数据保存到起来
     * 点击确认按钮: 表单预登录验证 如果成功就发送 put请求并将保存的数据作为参数修改(因为双向绑定)
* 删除用户: 点击删除按钮 弹出对话框 -> 确认是否删除;  需要使用ui的 MessageBox 且要全局挂载在Vue.prototype.confirm = MessageBox .confirm
![输入图片说明](image/image.png)
### 角色管理
![输入图片说明](image/roles.png)
### 权限管理
* 展开的设置: 使用 栅栏布局 嵌套 for 循环 遍历children ,el-row -> el-col**2 -> el-row -> el-col*2  
* 栅栏row套栅栏会重置成24块样
* Tree 树形结构 : :data 要绑定的数据源 :prop展示的属性名字 `show-checkbox` 以复选框的形式 `node-key="id"`绑定id
* :default-checked-keys="defKeys"` 默认选中的 使用递归推送到数组中 没有子了直接推进数组 否则重再调用自己 
* 递归的形式:  结束的条件  自己调用自己
![输入图片说明](image/rights.png)
### 商品列表
![输入图片说明](image/goods.png)
### 分类参数
![输入图片说明](image/params.png)
### 商品分类
* 树形表格:由于 element-ui 没有 树形的表格要借助于第三方的 `vue-table-with-tree-grid`   [github地址](https://github.com/MisterTaki/vue-table-with-tree-grid)
  * columns｛ｌａｂｅｌ    template  type  prop｝   --  show-index   index-text　下面案例
* 分页: 由于获取用户的方法关系,可以每次修改 页码 或 页数 时直接重新发送获取用户请求
![输入图片说明](image/categories.png)
### 订单列表
![输入图片说明](image/orders.png)
### 数据统计
![输入图片说明](image/reports.png)