vue-nodejs-elementUI-mysql-express-demo
Aprenda a usar proyectos de separación de front-end y back-end de Vue + nodejs, incluidas las operaciones de entrada básicas. Incluyendo el proceso de implementación desde la creación del proyecto hasta la implementación final y un resumen de algunos problemas encontrados durante el proceso.
Dirección de vista previa del proyecto: Dirección de vista previa--aixiaodou.cn
Dirección de comentarios y discusión: Blog personal: https://blog.csdn.net/qq_32442967/article/details/103459148
Dirección de la base de datos: express-demo/doc/demo2.sql
base de datos mysql
La base de datos es demo2.
Crear base de datos demo2> ejecutar declaración sql
Modifique la configuración de conexión de la base de datos model/connDb.js en el proyecto express-demo
express-demo-web: proyecto web front-end
# 安装依赖
npm install
# 运行项目
npm run dev
demostración rápida: proyecto backend nodejs
# 安装依赖
npm install
# 运行项目
npm start
Este proyecto es un proyecto de nivel de entrada que utiliza el modo de separación final frontal (vue) y posterior (nodejs).
Tecnologías principalmente utilizadas:
- Front-end: vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
- Servidor: nodejs+ express+ jsonwebtoken
- Base de datos: mysql
- Entorno de implementación: nginx
- Servidor de implementación: Linux centos7
Introducción a las funciones existentes:
- Módulo de descarga de herramientas toolsDown: consulta la lista de la base de datos y la muestra por categoría
- módulo de inicio de sesión, registro de inicio de sesión, registro, cierre de sesión: la página de inicio y la página de descarga de herramientas se pueden obtener una vista previa sin iniciar sesión, y la página de lista de usuarios será visible después de iniciar sesión. Guarde el token de sesión en la cookie y el ID de usuario después de iniciar sesión en el almacenamiento local. Dependiendo de si ha iniciado sesión o no, muestre el inicio de sesión o el avatar en la esquina superior derecha.
- módulo userManage de lista de usuarios: funciones de paginación, búsqueda difusa, edición y eliminación de usuarios
- friend_link interfaz de enlace de amigo: coloca enlaces de amigos y archiva información en la base de datos
- Estadísticas de recuento de descargas de software
- Funciones de modificación y eliminación de usuarios.
V 1.0.2 Descargar estadísticas/verificación del registro de inicio de sesión (elementos 5-6)
- Optimizar la verificación del token
- Estadísticas de recuento de descargas de software
- Funciones de modificación y eliminación de usuarios.
V 1.0.1 Implementar funciones básicas (elementos 1 a 4): registra principalmente algunos problemas encontrados
Interfaz
- Controle si se puede acceder a la página solo después de iniciar sesión: juzgue si hay un inicio de sesión según el token, configure el enlace de referencia del enrutador
- Guarde el ID de usuario obtenido después de iniciar sesión en localstorage. Al obtener información del usuario, traiga el ID de usuario para obtener la información del usuario que inició sesión y muestre el avatar en la esquina superior derecha.
extremo posterior
- Nodejs se conecta a la base de datos MySQL. Si se utiliza un grupo de conexiones, la conexión debe liberarse después de su uso; de lo contrario, se excederá el número máximo de conexiones.
desplegar
- Después de que nginx implemente el proyecto vue, no habrá ningún problema con el acceso normal, pero aparecerá un problema 404 al actualizar.
- nodejs se ejecuta permanentemente en Linux usando un enlace de referencia permanente
V 1.0.0 Crear proyectos front-end y back-end
Interfaz
- Utilice el paquete web vue-cli+ para generar proyectos vue
- Configurar router, store, utils, axios, elementUI, número de puerto...
extremo posterior
- Utilice express para generar enlaces de referencia del proyecto nodejs
- Instale el paquete de dependencia jsonwebtoken, genere el token y devuelva el enlace de referencia del front-end después de iniciar sesión correctamente.
- Instalar el paquete de dependencia de la base de datos MySQL
Resuelva el problema entre dominios de los proyectos de separación de front-end y back-end (configuración de encabezados de solicitud) Enlace de referencia
- Front-end: interceptor de solicitudes en axios, establece sessionToken, utilizado como verificación de back-end para determinar si es un servidor permitido
- Backend: establezca encabezados de solicitud en app.js - agregue app.all()
- Backend: debido al token de sesión del encabezado de solicitud personalizado, para solicitudes complejas entre dominios, habrá una solicitud previa de opciones y las solicitudes con opciones de método se procesan rápidamente y devuelven 200
base de datos
- Crear base de datos > tabla [usuario, herramientas_down, amigo_enlace]
- Datos de prueba simulados
