vue_shop e-commerce management system

Foreword

In the past two days, I saw a dark horse Vue combat project on the B station: e-commerce management system (Element-UI), including front-end and back-end source code, the front-end uses Vue, Vue-router, Element-UI, Axios, Echarts technology stack, The backend adopts Node.js, Express, Jwt, Mysql, Sequelize technology stack. The video address of the B station is:
https://www.bilibili.com/video/av74592164 . For the specific front-end and back-end source code, please refer to my Github repository https://github.com/ccf19881030/vue_shop , the corresponding code cloud address For: https://gitee.com/havealex/vue_shop

git clone https://github.com/ccf19881030/vue_shop.git

git clone https://gitee.com/havealex/vue_shop

Download the corresponding source code, which contains the front-end and back-end of the project. The back-end source code vue_api_server is complete. The front-end code vue_shop completes functions such as login verification, user management, rights management, product management, order management, and data statistics.

Technical selection of e-commerce background management system

1. Front-end project technology stack
Vue
Vue-router
Element-UI
Axios
Echarts
2. The backend project technology stack
Node.js
Express
Jwt state keeping tool, which simulates the Seession login record function
Mysql
Sequelize to operate the database framework

Vue-shop's dark horse video source code, including the front and back end, the source code of the back end is complete; the front end has currently completed login, user management, and rights management functions, and it is still being improved. For convenience, I host the source code of the front end and back end to the Github repository. If you are interested, you can take a look at my Github project vue_shop . Remember to help star.

Front-end video address

The source of this code is station B. The address is: Vue combat project: e-commerce management system (Element-UI) , the video of the UP main is easy to understand, and it is very suitable for front-end Xiaobai to watch and learn.

Backend source code vue_api_server

See vue_api_server

Description of the overall project document

config Configuration file directory
- default.json Default configuration file (including database configuration, jwt configuration)
dao Data access layer, store the addition, deletion and modification of the database
- DAO.js Provided public access to database
models Store specific database ORM model files
modules Current project module
- authorization.js API permission verification module
- database.js Database module (database loading is based on nodejs-orm2 library loading)
- passport.js Login building based on passport module
- resextra.js API unified return result interface
node_modules Third-party modules that the project depends on
routes Unified routing
- api Provide API interface
- mapp Provide mobile APP interface
- mweb Provide mobile web site
services Service layer, where business logic code is written, and data obtained through different interfaces is converted into data required by a unified front end
app.js Main project entry file
package.json Project configuration file

Installation and operation instructions

1. Installation dependencies

Install related dependencies in the project root directory vue_api_server

npm install

Or use Taobao's cnpm

cnpm install

After installing the dependencies, the node_modules directory will be generated in the root directory, which is the dependency library installed by npm install

2. Import the database script into MySQL

Use a MySQL client such as Navicat Premium to import the mydb.sql database script file in the vue_api_server / db directory into the MySQL database; you can also directly import the database script using the MySQL command line, provided that the MySQL database is installed on the local or cloud server software.

3. Configure the MySQL database

Modify the configuration of the default.json MySQL database in the vue_api_server / config directory to the configuration of your own project, including the server IP and port can also be modified as needed.

{
	"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" : "1030",
		"port" : 3306
	}
}

4. Run

Run the following command in the vue_api_server root directory of the backend project to run the backend program

node app.js

The running screenshot is as follows:
vue_api_server running screenshot 1

vue_api_server running screenshot 2

Front-end source code vue-shop

See the vue_shop
front-end code is currently following the video of station B, complete the functions of login verification, user management, rights management, commodity management, order management, data statistics and so on.
Front-end login interface

There is an admin account in the MySQL database, the password is 123456, after entering the user name and password, jump to the Main back-end management page, as shown in the following figure:
Main backend management page