vue full stack project

0. Schreiben Sie vorne

Als Bildschneider ist dies mein erstes Full-Stack-Projekt: Ich habe mir zuvor einige Node-bezogene Videos angesehen und ursprünglich geplant, den nativen Node für das Backend zu verwenden Zufälligerweise konnte ich übrigens ein anderes Framework lernen, also habe ich koa2 gelernt und verkauft. Element, der Grund, warum ich ein solches Projekt schreiben möchte, ist, dass ich noch nie ein vollständiges Vue-Projekt von Anfang bis Ende geschrieben habe. Das Schreiben dieses Projekts kann nur die Technologie festigen, die ich zuvor gelernt habe.
Online-Vorschau-Adresse: https://qietuzai.club/vue

1. Technologie-Stack

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

Backend: Knoten, KOA2, MySQL

1.1 Komponentenbibliothek

Das Projekt enthält mehrere selbst entwickelte Komponenten, die direkt in der tatsächlichen Arbeit angewendet werden können.

• toDoList
• Komponenten hochladen
• Wasserfallkomponente

2. Projektstruktur

2.1 Front-End-Projektstruktur

 ├──  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 Backend-Projektstruktur

 ├──  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. Schnelle Bereitstellung

3.1 Klonen Sie zunächst den Projektcode

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

3.2 Konfigurieren Sie die MySQL-Umgebung

Führen Sie zunächst den mysql -Befehl in cmd aus und schauen Sie sich das an.
Wenn die obige Ausgabe angezeigt wird, überspringen Sie diesen Schritt und fahren Sie direkt mit 3.2.2 fort. Wenn andere Inhalte ausgegeben werden, bedeutet dies, dass auf dem von Ihnen verwendeten Computer kein MySQL installiert ist und Sie zuerst MySQL installieren müssen.

3.2.1 Laden Sie MySQL herunter und konfigurieren Sie es

Gehen Sie zunächst zu Google oder Baidu, um mysql 5.7 herunterzuladen. Am besten laden Sie die Version 5.7 herunter, da die neueste Version, die ich zuvor heruntergeladen habe, keine Verbindung herstellen konnte. Gehen Sie nach einer erfolgreichen Installation zu cmd, um mysql auszuführen Es wird definitiv keine unerwartete Ausgabe geben

Dies liegt daran, dass die Umgebungsvariablen nicht konfiguriert sind und der bin Pfad unter MySQL Server 5.7 zu den Systemvariablen hinzugefügt wird. Gehen Sie dann zu cmd, um mysql auszuführen. Wenn die im Screenshot in 3.2 gezeigten Informationen ausgegeben werden, ist die Installation erfolgreich.

3.2.2 Verbindung zur Datenbank herstellen

Gehen Sie zu Google oder Baidu, um Navicat herunterzuladen, und klicken Sie dann, um eine Verbindung zur Datenbank herzustellen und den Inhalt in das Bild einzugeben (wenn Ihr MySQL-Passwort 123456 lautet).

Nachdem die Verbindung erfolgreich hergestellt wurde, klicken Sie mit der rechten Maustaste新建数据库, und geben Sie die Informationen wie unten gezeigt ein.

Klicken Sie mit der rechten Maustaste auf die neu erstellte test und wählen Sie运行SQL文件, wählen Sie test.sql unter vue-full-stack-projectbackend aus und die Datenbankverbindung ist abgeschlossen.

3.3 Installieren Sie das NPM-Paket und führen Sie das Projekt aus

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

Das Obige ist der gesamte Prozess der schnellen Bereitstellung. Dieses Projekt ist für Neulinge bei Node & Vue geeignet. Wenn dieses Projekt für Sie hilfreich ist, klicken Sie bitte auf einen Stern: