vue+express+mysql +node項目搭建

項目搭建前需要先安裝node環境及mysql數據庫。

1、利用vue-cli腳手架創建一個vue項目

　　　a.全局安裝　npm install -g vue-cli

　　　b.初始化項目 vue init webpack myexpress

　　　c.npm install

　　　d.npm run dev

2.在vue的項目基礎上添加express后端目錄

　　a.在跟目錄下新建server文件夾

　　

　　b.在server文件夾下新建api文件夾、db.js、index.js、sqlMap.js。（api文件存放相關api接口路徑及方法，db.js配置相關數據庫，index.js配置后端端口及api路由）

　　

3.db.js數據庫配置

module.exports ={
  mysql:{
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'test',
    port: '3306'
  }
}

4.index.js

const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

// 后端api路由
app.use('/api/user', userApi);

// 監聽端口
app.listen(3000);
console.log('success listen at port:3000......');

 

5.sqlMap.js 

var sqlMap = {
  // 用戶
  user: {
    add: 'insert into user(name,age) values(?,?)'
  }
}

module.exports = sqlMap;

6.api編寫

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');



// 連接數據庫
var conn = mysql.createConnection(models.mysql);

conn.connect();
var jsonWrite = function(res, ret) {
  if(typeof ret === 'undefined') {
    res.json({
      code: '1',
      msg: '操作失敗'
    });
  } else {
    res.json(ret);
  }
};

// 增加用戶接口
router.post('/addUser', (req, res) => {
  let sql = $sql.user.add;
  let params = req.body;
  console.log(params);
  conn.query(sql, [params.name, params.age], function(err, result) {
    if (err) {
      console.log("添加失敗"+err);
    }
    if (result) {
      jsonWrite(res, result);
    }
  })
});

module.exports = router;

7.vue頁面編寫

8.測試