sistema de gestión de comercio electrónico vue_shop

Prólogo

En los últimos dos días, vi un proyecto de combate Vue de caballo oscuro en la estación B: sistema de gestión de comercio electrónico (Element-UI), que incluye código fuente de front-end y back-end, el front-end usa Vue, Vue-router, Element-UI, Axios, pila de tecnología Echarts, El backend adopta Node.js, Express, Jwt, Mysql, Sequelize stack de tecnología. La dirección de video de la estación B es:
https://www.bilibili.com/video/av74592164 . Para conocer el código fuente específico de front-end y back-end, consulte mi repositorio de Github https://github.com/ccf19881030/vue_shop , la dirección de nube de códigos correspondiente Para: https://gitee.com/havealex/vue_shop

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

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

Descargue el código fuente correspondiente, que contiene el front-end y el back-end del proyecto. El código fuente back-end vue_api_server está completo. El código front-end vue_shop completa funciones tales como verificación de inicio de sesión, gestión de usuarios, gestión de derechos, gestión de productos, gestión de pedidos y estadísticas de datos.

Selección técnica del sistema de gestión de antecedentes del comercio electrónico.

1. Pila de tecnología de proyecto front-end
Vue
Vue-router
Element-UI
Axios
Echarts
2. La tecnología de proyecto backend stack
Node.js
Express
Jwt herramienta de mantenimiento de estado, que simula la función de registro de inicio de sesión Seq
Mysql
Sequelize para operar el marco de la base de datos

El código fuente de video del caballo oscuro de Vue-shop, incluido el front-end y el back-end, el código fuente del back-end está completo; el front-end actualmente ha completado las funciones de inicio de sesión, gestión de usuarios y gestión de derechos, y todavía se está mejorando. Para mayor comodidad, alojo el código fuente del front-end y el back-end en el repositorio de Github. Si está interesado, puede echar un vistazo a mi proyecto Github vue_shop . Recuerde ayudar a star.

Dirección de video frontal

La fuente de este código es la estación B. La dirección es: Vue combat project: sistema de gestión de comercio electrónico (Element-UI) , el video de UP main es fácil de entender y es muy adecuado para que Xiaobai lo vea y aprenda.

Código fuente del servidor vue_api_server

Ver vue_api_server

Descripción del documento general del proyecto.

config Directorio del archivo de configuración
- default.json Archivo de configuración predeterminado (incluida la configuración de la base de datos, la configuración jwt)
dao Capa de acceso a datos, almacenar la adición, eliminación y modificación de la base de datos
- DAO.js Acceso público a la base de datos.
models Almacenar archivos de modelo ORM de base de datos específicos
modules Módulo de proyecto actual
- authorization.js Módulo de verificación de permisos de API
- database.js Módulo de base de datos (la carga de la base de datos se basa en la carga de la biblioteca nodejs-orm2)
- passport.js Inicio de sesión basado en el módulo de pasaporte
- resextra.js Interfaz de resultado de retorno unificado API
node_modules Módulos de terceros de los que depende el proyecto
routes Enrutamiento unificado
- api Proporcionar interfaz API
- mapp Proporcionar interfaz de aplicación móvil
- mweb Proporcionar sitio web móvil
services Capa de servicio, donde se escribe el código de lógica empresarial, y los datos obtenidos a través de diferentes interfaces se convierten en datos requeridos por un front end unificado
app.js Archivo de entrada principal del proyecto
package.json Archivo de configuración del proyecto

Instrucciones de instalación y operación.

1. Dependencias de instalación

Instalar dependencias relacionadas en el directorio raíz del proyecto vue_api_server

npm install

O use el cnpm de Taobao

cnpm install

Después de instalar las dependencias, el directorio node_modules se generará en el directorio raíz, que es la biblioteca de dependencias instalada por npm install

2. Importe el script de la base de datos a MySQL

Use un cliente MySQL como Navicat Premium para importar el archivo de script de la base de datos mydb.sql en el directorio vue_api_server / db a la base de datos MySQL; también puede importar directamente el script de la base de datos utilizando la línea de comando MySQL, siempre que la base de datos MySQL esté instalada en el servidor local o en la nube Software

3. Configure la base de datos MySQL

Modifique la configuración de la base de datos MySQL default.json en el directorio vue_api_server / config para la configuración de su propio proyecto, incluida la IP del servidor y el puerto también se pueden modificar según sea necesario.

{
	"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. Ejecutar

Ejecute el siguiente comando en el directorio raíz vue_api_server del proyecto de fondo para ejecutar el programa de fondo

node app.js

La captura de pantalla en ejecución es la siguiente:
Captura de pantalla 1 de vue_api_server running

vue_api_server ejecuta la captura de pantalla 2

Código fuente front-end vue-shop

Vea que el código de
front-end vue_shop está siguiendo el video de la estación B, complete las funciones de verificación de inicio de sesión, gestión de usuarios, gestión de derechos, gestión de productos, gestión de pedidos, estadísticas de datos, etc.
Interfaz de inicio de sesión frontal

Hay una cuenta de administrador en la base de datos MySQL con una contraseña de 123456. Después de ingresar el nombre de usuario y la contraseña, vaya a la página de administración de back-end principal, como se muestra en la siguiente figura:
Página principal de administración de backend