vue full stack project

0. Escreva na frente

Como cortador de imagens, este é meu primeiro projeto full-stack :smile:. Assisti a alguns vídeos relacionados ao nó antes e planejei usar o nó nativo para o backend. A propósito, aconteceu que eu poderia aprender outro framework, então aprendi e vendi o koa2. Elemento, a razão pela qual quero escrever tal projeto é porque nunca escrevi um projeto vue completo do começo ao fim antes. É todo o código assumido pelos predecessores. Escrever este projeto pode apenas consolidar a tecnologia que aprendi antes.
Endereço de visualização online: https://qietuzai.club/vue

1. Pilha de tecnologia

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

Back-end: nó, koa2, mysql

1.1 Biblioteca de componentes

O projeto contém vários componentes autodesenvolvidos que podem ser aplicados diretamente no trabalho real.

• lista de tarefas
• Carregar componentes
• Componente cascata

2. Estrutura do projeto

2.1 Estrutura do projeto 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 Estrutura do projeto de back-end

 ├──  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. Implantação rápida

3.1 Primeiro clone o código do projeto

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

3.2 Configurar ambiente mysql

Primeiro, execute o comando mysql no cmd e dê uma olhada.
Se a saída acima aparecer, pule esta etapa e vá diretamente para 3.2.2 . Se outro conteúdo for exibido, significa que o computador que você está usando não possui o mysql instalado e você deve instalar o mysql primeiro.

3.2.1 Baixe e configure o mysql

Primeiro, vá ao Google ou Baidu para baixar mysql 5.7 . É melhor baixar a versão 5.7, porque a versão mais recente que baixei antes não conseguiu se conectar... Após uma instalação bem-sucedida, vá para cmd para executar mysql e lá estará. não haverá saída inesperada.

Isso ocorre porque as variáveis ​​de ambiente não estão configuradas e o caminho bin no MySQL Server 5.7 é adicionado às variáveis ​​do sistema . Em seguida, vá para cmd para executar mysql . Se as informações mostradas na captura de tela em 3.2 forem exibidas, a instalação foi bem-sucedida.

3.2.2 Conectar ao banco de dados

Acesse o Google ou Baidu para baixar Navicat , clique para se conectar ao banco de dados e insira o conteúdo da imagem (se sua senha mysql for 123456)

Após a conexão ser bem-sucedida, clique com o botão direito新建数据库e preencha as informações conforme mostrado abaixo.

Clique com o botão direito no banco de dados test recém-criado e selecione运行SQL文件, selecione test.sql em vue-full-stack-projectbackend e a conexão com o banco de dados será concluída.

3.3 Instale o pacote npm e execute o projeto

 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     // 运行后端项目

O texto acima é todo o processo de implantação rápida. Este projeto é adequado para iniciantes no node & vue. Se este projeto for útil para você, clique em uma estrela: blush: