Vue商品后台管理系统DEMO

Vue_shop说明文档

开发环境

整个项目基于 Vue和 ElementUI 开发完成，是一个商品后台管理系统。

技术栈

• HTML
• CSS
• JavaScript
• Node.js
• Vue
  • ElementUI

开发工具

• VSCode
• Node.js : v14.15.0
• Vue : @vue/cli 4.5.13

项目结构

Get Started

第一步：下载后端

下载后端需要的服务 链接：https://pan.baidu.com/s/1a_MybhDzvF_2-RdDaod7Jw 提取码：Vue3

下载后的内容

整体文件说明

• config 配置文件目录
  • default.json 默认配置文件（其中包含数据库配置，jwt配置）
• dao 数据访问层，存放对数据库的增删改查操作
  • DAO.js 提供的公共访问数据库的方法
• models 存放具体数据库 ORM 模型文件
• modules 当前项目模块
  • authorization.js API权限验证模块
  • database.js 数据库模块（数据库加载基于 nodejs-orm2 库加载）
  • passport.js 基于 passport 模块的登录搭建
  • resextra.js API 统一返回结果接口
• node_modules 项目依赖的第三方模块
• routes 统一路由
  • api 提供 api 接口
  • mapp 提供移动APP界面
  • mweb 提供移动web站点
• services 服务层，业务逻辑代码在这一层编写，通过不同的接口获取的数据转换成统一的前端所需要的数据
• app.js 主项目入口文件
• package.json 项目配置文件

首先打开db文件夹，里面有mydb.sql文件，在MySQL中新建一个数据库名字为： mydb，接着将mydb.sql导入到新建的数据库中

更改配置文件

将vue_api_server\config中的 default.json 文件打开，更改为：

{
	"config_name" : "develop",
	"jwt_config" : {
		"secretKey":"itcast",
		"expiresIn":86400
	},
	"upload_config":{
		"baseURL":"http://127.0.0.1:8888",
		"upload_ueditor":"uploads/ueditor",
		"simple_upload_redirect":"http://127.0.0.1/reload"
	},
	"db_config" : {
		"protocol" : "mysql",
		"host" : "127.0.0.1",
		"database" : "mydb",
		"user" : "root",
		"password" : "112800",
		"port" : 3306
	}
}

第二步：安装依赖

运行 cmd 定位到当前文件夹运行 npm install 安装依赖包

第三步：启动后端服务

在当前文件夹以管理员身份运行一个PoweShell窗口，接着输入 node .\app.js 以启动后端服务

使用Postman测试后端接口是否正常 接口基准地址：http://127.0.0.1:8888/api/private/v1/

无异常返回以上数据

启动项目

下载好源码后放在VSCode中启动，拆分一个终端输入以下指令

等待项目 Build 成功

进入VueUIServe面板下启动服务

点击启动App

启动成功！

项目基本浏览

欢迎页

用户列表

下载地址

码云：https://gitee.com/jaolvv/vue_shop