# v-shop

**Repository Path**: ou-dawei/v-shop

## Basic Information

- **Project Name**: v-shop
- **Description**: v-shop商城后台管理项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-04-16
- **Last Updated**: 2024-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

前不久在网上找了资源，跟着写了一个商城后台管理系统，经过差不多半个月的时间终于把系统实现，功能基本都已实现。

#### 技术选型：

框架核心：Vue.js 组件库：Element-UI 数据库：MySql 工具插件：vue-quill-editor（富文本编辑器）、nprogress（进度条插件）、cropperjs（图片裁剪）

工具库：core-js（JavaScript标准库）、Lodash （JavaScript使用工具库）、Apache ECharts（JavaScript的开源可视化图表库） 数据：node.js 开发工具：VsCode

#### API接口文档：[预览](https://gitee.com/ou-dawei/v-shop/blob/master/API%20%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.md)

### 数据库文件 [点击下载sql文件](https://gitee.com/ou-dawei/v-shop/blob/master/mydb.sql)


#### 项目结构：

vue-shop

|—src 代码文件

|—assets 静态文件

|—components  组件页面

|—goods  商品管理

|—notification  消息中心

|—Orders  订单管理

|—person 个人中心组件

|—power  权限管理

|—report  数据统计

|—user  用户管理

|—Home.vue 系统顶部导航栏页面

|—Login.vue 登录页

|—Welcome.vue 首页

|—router 路由管理

|—App.vue 项目根组件

|—main.js 项目根入口文件

|—package.js on 项目配置文件

|—vue.config.js vue.js 配置文件



#### 项目模板：

用户管理：包含用户的基本信息，可以对用户进行管理，实现增、删、改、查，以及给指定用户分配角色；

权限管理：包括角色列表和权限列表两个模块。角色列表中可以添加角色，供用户分配角色选择角色，对已有的角色管理员可以进行编辑、删除、分配权限操作。权限列表中是已定义好的权限，包括权限路径和权限等级，根据权限等级可以清楚了解该权限的上下级关系。

商品管理：包括商品列表、分类参数及商品参数三个模块。商品列表展示全部商品的基本信息，可以对其进行基本的数据操作；分类参数中由动态参数和静态属性组成；可以给指定的商品的第三级分类设置相关参数，进行添加、编辑或删除一些参数；给商品明确的参数，能然用户更好的了解商品；商品分类是对每件商品进行分类管理，按照商品的分类等级使用树形控件渲染，提升用户体验，可以添加商品分类、编辑或删除，把想要的商品分类添加到系统上。

订单管理：对订单进行管理。可以查看订单的基本情况、修改订单配送地址及查看物流配送进度。

数据统计：通过调用ECharts库，实现可视化图表，更直观的将数据展示出来。



#### 体验体验：

线上体验地址：[v-shop商城后台](http://shop.itxwy.cn/)

账号：admin

密码：123456

项目源码地址：[gitee地址](https://gitee.com/ou-dawei/v-shop)



#### 本地部署：

1、将项目代码git或download到本地

2、安装依赖： npm install

3、npm run server



#### 项目截图：

首页

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/welcome.png" />

用户管理 -> 用户列表 

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/user.png" />

权限管理->角色列表

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/role.png" />

权限管理->权限列表

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/setting.png" />

商品管理 -> 商品列表

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/goods.png" />

商品管理 -> 分类参数

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/canshu.png" />

商品管理 -> 商品分类

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/goodscanshu.png" />

订单管理 -> 订单列表

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/order.png" />

数据统计 -> 数据报表

<img src="https://itxwy-cos-1257921549.cos.ap-guangzhou.myqcloud.com/v-shop/shuju.png" />