vue full stack project

0. Напишите впереди

Как инструмент для обрезки изображений, это мой первый полнофункциональный проект :smile: Раньше я смотрел несколько видеороликов, связанных с узлами, и изначально планировал использовать собственный узел для бэкэнда. Затем я передумал и решил использовать фреймворк напрямую. просто так получилось, что мне кстати удалось выучить еще один фреймворк, поэтому я выучил и продал koa2. Элемент, причина, по которой я хочу написать такой проект, заключается в том, что я никогда раньше не писал полный проект vue от начала до конца. Это весь код, перенятый предшественниками. Написание этого проекта может просто закрепить технологию, которую я изучил ранее.
Адрес онлайн-превью: https://qietuzai.club/vue

1. Стек технологий

Интерфейс: vue2, vuex, vue-router, axios, webpack, ES6, stylus, element-ui.

Бэкенд: узел, koa2, mysql.

1.1 Библиотека компонентов

Проект содержит множество самостоятельно разработанных компонентов, которые можно напрямую применять в реальной работе.

• список дел
• Загрузить компоненты
• Компонент водопада

2. Структура проекта

2.1 Структура фронтенд-проекта

 ├──  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 Структура бэкэнд-проекта

 ├──  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. Быстрое развертывание

3.1 Сначала клонируйте код проекта

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

3.2 Настройка среды MySQL

Сначала выполните команду mysql в cmd и посмотрите.
Если появляется приведенный выше вывод, пропустите этот шаг и перейдите непосредственно к 3.2.2 . Если выводится другой контент, это означает, что на используемом вами компьютере не установлена ​​MySQL, и вам необходимо сначала установить MySQL.

3.2.1 Загрузите и настройте MySQL

Сначала зайдите в Google или Baidu, чтобы загрузить mysql 5.7 . Лучше всего скачать версию 5.7, потому что последняя версия, которую я скачал ранее, не смогла подключиться... После успешной установки перейдите в cmd для выполнения mysql , и там будет. Это определенно не неожиданный результат.

Это связано с тем, что переменные среды не настроены, а путь bin в MySQL Server 5.7 добавляется к системным переменным . Затем перейдите в cmd для выполнения mysql . Если выводится информация, показанная на скриншоте в 3.2, установка прошла успешно.

3.2.2 Подключение к базе данных

Зайдите в Google или Baidu, чтобы скачать Navicat , затем нажмите, чтобы подключиться к базе данных и введите содержимое изображения (если ваш пароль mysql — 123456)

После успешного подключения щелкните правой кнопкой мыши新建数据库, и заполните информацию, как показано ниже.

Щелкните правой кнопкой мыши только что созданную test базу данных и выберите运行SQL文件, выберите test.sql в разделе vue-full-stack-projectbackend , и подключение к базе данных будет завершено.

3.3 Установите пакет npm и запустите проект

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

Выше описан весь процесс быстрого развертывания. Этот проект подходит для новичков в node & vue. Если этот проект вам полезен, нажмите звездочку:blush:.