# back-manage
电商后台管理系统
<img src="./preview/logo-red.png" style="zoom:67%;" />
# 1. 功能
![](./preview/mall_desc01.png)
### 开发模式
> 电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目
![](./preview/mall_desc02.png)
### 技术选型
- Vue
- Vue-router
- Element-UI
- Axios
- Echarts
- [API接口文档](./api接口文档.md)
- 后端API接口源码 [下载](https://gitee.com/wBekvam/vueShop-api-server.git)
> 此项目中使用的是api地址是:`https://lianghj.top:8888/api/private/v1/`
>
> 可以将后端源码下载下来跑通后使用本地的后端服务,此时需要修改`src/network/request.js`文件中的请求地址,也需要修改`src/components/goods/listChildComponents/ListAdd.vue`中上传图片的请求地址。
### 登录
- 项目默认登录名:admin,密码:123456
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证之后,根据后台的响应状态跳转到项目主页
### 用户管理
系统用户列表
### 权限管理
通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限。
![](./preview/mall_desc04.png)
#### 角色列表
系统中角色列表。可以新增、编辑、删除、为角色分配权限。
#### 权限列表
当前系统可以操作的权限。
### 商品管理
#### 商品列表
所有商品的列表。可以添加、编辑、删除商品。
#### 分类参数
展示或者设置某款商品的参数,如尺寸、板式、颜色等。
#### 商品分类
商品分类用于在购物时,快速找到需要购买的商品,进行直观显示。
### 订单管理
当前系统中的所有订单。可以对订单进行编辑
### 数据统计
数据报表
# 2. 技术问题
## 登录功能
### 保存token
![](./preview/mall_desc03.png)
将登录成功之后的 token,保存到客户端的sessionStorage中。sessionStorage保存的数据用于浏览器的一次会话(session),当会话结束(通常是窗口关闭),数据会被清空
### 路由导航守卫控制访问权限
如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。
```js
// 在配置路由的文件中配置
// 添加全局前置导航守卫
router.beforeEach((to,from,next) => {
// 如果访问的是登录页,直接放行
if (to.path === '/login') return next();
// 从sessionStorage中取出token值
let token = sessionStorage.getItem('token');
// 如果token不存在,说明没有登录,就强制跳转到登录页
if (!token) {
return next('/login');
}
next();
});
```
## 退出功能
基于token的方式实现退出比较简单,只需要销毁本地的token即可。这样,后续的请求就不会携带token ,必须重新登录生成一个新的token之后才可以访问页面。
## 通过axios 请求拦截器添加token
项目中除了登录之外的其他API接口,必须在登录之后才能访问,登录之后可以获得token。**需要授权的 API ,必须在请求头中使用 `Authorization` 字段提供 `token` 令牌**。怎么做呢?
**通过axios 请求拦截器添加token,保证拥有获取数据的权限。**
```js
// 拦截请求。请求在到达服务器之前会首先调用这个函数对请求做一些预处理
axios.interceptors.request.use(config => {
console.log('拦截请求', config);
// 为请求头对象添加Token验证的Authorization字段
config.headers.Authorization = sessionStorage.getItem('token');
return config;
})
```
## 其它
- 适用于 Vue 的富文本编辑器:[Vue-Quill-Editor](https://github.com/surmon-china/vue-quill-editor)
- 进度条使用第三方库:[nprogress](https://github.com/rstacruz/nprogress) 在axios拦截请求时展示进度条,拦截响应时隐藏进度条
- 学习资料:https://www.bilibili.com/video/BV1x64y1S7S7
# 3. 项目预览
## 首页
![](./preview/home.png)
## 用户管理
## 用户列表
![](./preview/user-list.png)
### 添加用户
![](./preview/user-add.png)
## 权限管理
### 角色列表
![](./preview/role-list.png)
### 权限列表
![](./preview/right-list.png)
## 商品管理
### 商品列表
![](./preview/goods-list.png)
### 分类参数
![](./preview/goods-param.png)
### 商品分类
![](./preview/goods-cat.png)
## 订单管理
![](./preview/order-list.png)
## 数据统计
![](./preview/report.png)
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
电商管理后台组合式api (439个子文件)
big_30f08d52c551ecb447277eae232304b8 0B
.browserslistrc 30B
ueditor.css 43KB
ueditor.min.css 34KB
video-js.css 21KB
image.css 18KB
video.css 15KB
attachment.css 14KB
video-js.min.css 11KB
shCoreDefault.css 7KB
demo.css 6KB
iconfont.css 4KB
scrawl.css 4KB
codemirror.css 3KB
charts.css 3KB
background.css 2KB
emotion.css 2KB
dialogbase.css 2KB
music.css 2KB
edittable.css 1KB
template.css 1KB
webuploader.css 515B
help.css 389B
global.css 359B
iframe.css 41B
iconfont.eot 4KB
vjs.eot 3KB
UEditorSnapscreen.exe 508KB
wface.gif 49KB
jxface2.gif 40KB
yface.gif 28KB
bface.gif 27KB
icons.gif 20KB
file-icons.gif 20KB
file-icons.gif 20KB
tface.gif 19KB
fface.gif 18KB
cface.gif 8KB
icons-all.gif 4KB
videologo.gif 2KB
cancelbutton.gif 1KB
button-bg.gif 1KB
lock.gif 1KB
alignicon.gif 1KB
word.gif 1019B
icon_doc.gif 1012B
icon_psd.gif 1009B
icon_rar.gif 1007B
icon_xls.gif 1005B
icon_ppt.gif 1001B
icon_mv.gif 1001B
icon_pdf.gif 996B
icon_mp3.gif 986B
icon_txt.gif 970B
icon_jpg.gif 950B
icon_exe.gif 949B
icon_chm.gif 923B
loading.gif 734B
icons.gif 453B
icons.gif 453B
icons.gif 453B
success.gif 445B
success.gif 445B
success.gif 445B
cursor_v.gif 370B
cursor_h.gif 253B
anchor.gif 184B
highlighted.gif 111B
unhighlighted.gif 111B
bg.gif 84B
pagebreak.gif 54B
spacer.gif 43B
0.gif 43B
.gitignore 231B
.gitignore 64B
index.html 6KB
wordimage.html 6KB
demo_symbol.html 6KB
map.html 6KB
demo_unicode.html 6KB
emotion.html 6KB
image.html 5KB
show.html 5KB
charts.html 5KB
link.html 4KB
insertframe.html 4KB
demo_fontclass.html 4KB
video.html 4KB
searchreplace.html 4KB
gmap.html 4KB
scrawl.html 4KB
background.html 3KB
help.html 3KB
edittable.html 2KB
webapp.html 2KB
attachment.html 2KB
snapscreen.html 2KB
anchor.html 2KB
edittd.html 2KB
preview.html 1KB
共 439 条
- 1
- 2
- 3
- 4
- 5
资源评论
我真的爱前端
- 粉丝: 1
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功