vue full stack project

0. Write in front

As a cutter, this is the first full -stack project I personally wrote: Smile:, I watched some Node -related videos before, originally prepared to use the native node at the back end. Just by the way, you can learn one more framework, so you are currently selling KOA2.X. It feels that it is not so difficult to write an interface: Smirk: The current mainstream Vue + Element is used in the front end. The reason why I want to write such a one The project is because I have never written a complete Vue project from beginning to end before. They are the code of the predecessors who take over. Writing this project can just consolidate the technology I learned before.
Online preview address: https://qietuzai.club/Vue

1. Technology stack

Front end: Vue2, VUEX, Vue-Router, Axios, Webpack, ES6, Stylus, Element-UI

Back end: Node, KOA2, MySQL

1.1 component library

The project contains multiple self -developed components, which can be directly applied to actual work.

• todolist
• Upload component
• Waterfall flow component

2. Project structure

2.1 front -end project structure

 ├──  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 Back -end project structure

 ├──  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. Quick deployment

3.1 First of the project code clone

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

3.2 Configure mysql environment

First execute the mysql command in CMD to see,
If the above output appears, skip this step, and directly enter 3.2.2 . If other contents are output, it means that the computer you are using is not installed MYSQL. You must install MySQL first.

3.2.1 Download configuration MySQL

First go to Google or Baidu to download mysql 5.7 it is best to download version 5.7, because the latest version I downloaded before, all kinds of connection cannot be connected ... After successful installation of an operation, go to CMD to execute mysql . It must be

This is because there is no environmental variable, adding the bin path under MySQL Server 5.7 to the system variable . Then go to CMD to execute mysql .

3.2.2 Connection database

Go to Google or Baidu to download Navicat , and then click the connection database to enter the contents of the picture (if your MySQL password is 123456)

After the connection is successful, right -click to新建数据库and fill in in the figure below

Right click to运行SQL文件on the new test database, select test.sql under vue-full-stack-projectbackend .

3.3 Install NPM Pack & Running Project

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

The above is the whole process of fast deployment. This project is suitable for learning from Node & Vue newcomers. If this project helps you, please click STAR: Blush: