vue full stack project

0. Escribe delante

Como cortador de imágenes, este es mi primer proyecto de pila completa: sonrisa:. Vi algunos videos relacionados con nodos antes y originalmente planeé usar un nodo nativo para el backend. Luego cambié de opinión y decidí usar el marco directamente. Por cierto, sucedió que pude aprender otro marco, así que aprendí y vendí koa2. Element, la razón por la que quiero escribir un proyecto de este tipo es porque nunca antes había escrito un proyecto vue completo de principio a fin. Todo el código se hizo cargo de los predecesores. Escribir este proyecto simplemente puede consolidar la tecnología que aprendí antes.
Dirección de vista previa en línea: https://qietuzai.club/vue

1. Pila de tecnología

Interfaz: vue2, vuex, vue-router, axios, webpack, ES6, stylus, element-ui

Servidor: nodo, koa2, mysql

1.1 Biblioteca de componentes

El proyecto contiene múltiples componentes de desarrollo propio que se pueden aplicar directamente en el trabajo real.

• lista de tareas pendientes
• Cargar componentes
• Componente de cascada

2. Estructura del proyecto

2.1 Estructura del proyecto front-end

 ├──  build                               
├──  config                              
├──  node_modules                          
├──  src                                    ---核心代码目录
|   ├──  assets                            
|   |    ├── images                         ---静态资源存放目录
|   ├──  common                             ---字体图标存放目录
|   ├──  components                         ---组件存放目录
|   ├──  pages                              ---页面存放目录(可复用的则封装为组件，不可以的写为页面)
|   ├──  router                             ---路由
|   ├──  store                              ---vuex相关的文件
|   ├──  tools                              
|   |    ├── index.js                       ---封装了一些常用的函数
|   ├── App.vue                           
|   ├── main.js                          
├── .eslintrc                               ---自定义eslint配置文件
├── package.json     
......                                      ---其他一些vue脚手架生成的文件就不表述了

2.2 Estructura del proyecto backend

 ├──  api                                    ---接口目录
|   ├──  spider                             ---爬虫相关的接口(开发中...)
|   ├──  upload                             ---上传文件相关的接口
|   ├──  user                               ---用户相关的接口                 
├── common                                  
|   ├──  tool.js                            ---封装了一些常用的函数
|   ├──  mysql.js                           ---连接数据库的js(文件你们是看不到的，因为里面有线上数据库的账户密码，不过我给你们留了一个连接数据库示例哦，看在我这么贴心的份上还不快点个star:）)
|   ├──  mysqlDemo.js                       ---这就是连接数据库示例了(clone下来后，记得把文件名改为mysql.js哦), 2019年4月19日 16:16:59这个文件已经删除
├── upload                                  ---文件上传的路径
├── app.js                                  ---入口文件
├── test.sql                                ---数据库表的设计结构(里面数据全被截断了)
├── package.json                                

3. Despliegue rápido

3.1 Primero clona el código del proyecto.

 git clone https://github.com/xypecho/vue-full-stack-project.git

3.2 Configurar el entorno mysql

Primero, ejecute el comando mysql en cmd y eche un vistazo.
Si aparece el resultado anterior, omita este paso y vaya directamente a 3.2.2 . Si aparece otro contenido, significa que la computadora que está utilizando no tiene mysql instalado y debe instalar mysql primero.

3.2.1 Descargar y configurar mysql

Primero, vaya a Google o Baidu para descargar mysql 5.7 . Es mejor descargar la versión 5.7, porque la última versión que descargué antes no pudo conectarse... Después de una instalación exitosa, vaya a cmd para ejecutar mysql , y allí estará. No habrá ningún resultado inesperado.

Esto se debe a que las variables de entorno no están configuradas y la ruta bin en MySQL Server 5.7 se agrega a las variables del sistema . Luego vaya a cmd para ejecutar mysql . Si se genera la información que se muestra en la captura de pantalla en 3.2, la instalación se realizó correctamente.

3.2.2 Conectarse a la base de datos

Vaya a Google o Baidu para descargar Navicat , luego haga clic para conectarse a la base de datos e ingrese el contenido en la imagen (si su contraseña de mysql es 123456)

Una vez que la conexión sea exitosa, haga clic derecho新建数据库y complete la información como se muestra a continuación.

Haga clic derecho en la base de datos test recién creada y seleccione运行SQL文件, seleccione test.sql en vue-full-stack-projectbackend y se completará la conexión de la base de datos.

3.3 Instalar el paquete npm y ejecutar el proyecto

 cd vue-full-stack-project
cd fontend
npm install     // 首先安装前端的依赖包
npm run dev     // 运行前端项目

cd ../          //回到根目录即vue-full-stack-project
cd backend
npm install     // 安装后端的依赖包
export NODE_ENV=development;           // 这个命令是为了区分不同的环境来读取不同的配置
node app.js     // 运行后端项目

Lo anterior es todo el proceso de implementación rápida. Este proyecto es adecuado para los recién llegados a Node & Vue. Si este proyecto le resulta útil, haga clic en una estrella: rubor.