【全栈初体验】Vue+Node+MySQL实现前后端分离开发

前言

• 这个 demo 是MVVM开发模式，我也写过一个前后端结合开发的完整系统 demo
• Vue项目使用vue-cil3创建的。
• 使用vue-cil2创建的项目也可以实现，只是配置代理服务器的时候有一点差别。后面分别针对这两个版本进行区分。
• 数据库操作使用Navicat。

数据库配置

1. 新建MySQL连接（参数可以自己配置，后面会用到）

   

2. 新建数据库

   

3. 新建数据表

   

Node服务端

目录结构如下：

1. 新建文件夹server

2. 初始化

   • 在server文件夹下打开命令窗口

   • 输入命令行 npm init -y

     

3. utils/DBHelper.js --> 有mysql连接配置，与上面对应

   // 数据库连接助手
   const mysql = require('mysql');
   
   class DBHelper{
        
       // 获取数据库连接
       getConn(){
        
           let conn = mysql.createConnection({
        
               // 数据库连接配置
               host:'127.0.0.1',
               port:'3306', 
               user:'root',
               password:'',
               database:'test'  // 数据库名
           });
           conn.connect();
           return conn;
       }
   }
   
   module.exports = DBHelper;
   

4. sqlMap.js --> SQL语句，供api调用

   // sql语句
   var sqlMap = {
        
       user: {
        
           // 添加用户
           add: 'insert into user(name, age) values (?, ?)',
           // 查询用户
           select: 'select * from user where name like "%"?"%"'
       }
   }
   
   module.exports = sqlMap;
   

5. api/userApi.js --> 用户api

   const express = require('express');
   const router = express.Router();
   
   const DBHelper = require('../utils/DBHelper');
   const sql = require('../sqlMap');
   
   // 增加用户
   router.post('/addUser', (req, res) => {
        
       let sqlStr