Vue电商项目总结：电商后台管理系统（Vue+VueRouter+Axios+Element）

电商后台管理系统

               1.功能

2.技术栈

        Vue+VueRouter+Vue CLI3+Element-UI+Axios+Echarts
项目源码：
vue_shop电商后台管理项目: 该项目是pc端的电商管理后台管理系统，适合初学vue进行练手。 (gitee.com)https://gitee.com/jiajibao/vue_shop后端API接口源码
此项目中使用的是api地址是：http://timemeetyou.com:8889/api/private/v1/。如果发现该地址无法使用，可能服务器过期了，这样请自行下载后端源码使用本地的后端服务。

可以将后端源码下载下来跑通后使用本地的后端服务，此时需要修改src/network/request.js文件中的请求地址，也需要修改src/components/goods/listChildComponents/ListAdd.vue中上传图片的请求地址。

3.项目结构

1.项目初始化
2.登录和退出功能
3.主页布局和功能实现
4.用户列表布局和功能实现
5.用户添加，修改删除功能
6.权限列表
7.角色列表
8.分配权限，角色
9.分类参数
10.商品列表
11.商品添加
12.订单列表
13.Echarts数据统计
14.项目优化
15.项目上线
项目总结：

 

4.登录介绍

• 项目默认登录名：admin，密码：123456
• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证之后,根据后台的响应状态跳转到项目主页

1.登录

2.首页

 3.用户管理-用户列表

 4.用户管理-用户列表-添加用户

5.权限管理-角色列表

 

6.权限管理-权限列表

7.商品管理-商品列表

 

8.商品管理-商品列表-添加商品

 

9.商品管理-商品分类

 

10.订单管理-订单列表

 

11.数据统计-数据报表

 

 跟着敲了十天，终于算是完成了，但只部署到了本地服务器上。

 5.总结

这个项目是pc端，所有的代码都在一个页面里，缺点就是后期比较臃肿不利于维护。但对于我这样的新手来说，可以说是非常友好。组件使用的是有饿了么官方背书的element-ui组件，极少会踩到坑，但很多时候感觉基本上都是在重复的写业务代码。总之，还是很不错的一个新手练手项目，收获还是挺大的。