实战vue+node+mysql获取数据

实战vue+node+mysql获取数据

首先先搭建一个vue脚手架，搭建完成之后进行一下操作！

第一步：在根目录下（src）创建一个server文件，如下图就是文件结构了

第二步：文件创建完成之后，那么我们现在进行完成数据库的连接配置

// 数据库连接配置    db.js
module.exports = {
    mysql: {
        host: '192.168.×××.××',//mysql连接ip地址
        user: '***',
        password: '***',//mySql用户名密码
        database: '***',//mySql数据库名
        port: '3306'//mysql连接端口
    }
  }

第三步：我们在api文件夹为与数据库的各个表连接接口

//userApi.js
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.get('/addUser', (req, res) => {
  var sql = $sql.leftList.search;
  var params = req.body;
  conn.query(sql, [params.loginname, params.password], function(err, result) {
    if (err) {
      console.log(err);
    }
    if (result) {
      jsonWrite(res, result);
    }
  })
})

// 全部
router.get('/whole', (req, res) => {
  var sql = $sql.whole.search;
  var params = req.body;
  conn.query(sql, [params.loginname, params.password], function(err, result) {
    if (err) {
      console.log(err);
    }
    if (result) {
      jsonWrite(res, result);
    }
  })
})

// 其他
router.post('/project', (req, res) => {
  var sql = $sql.project.search
  var params = req.body
  console.log(params)
  console.log(sql);
  
  conn.query(sql, [params.name], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})


// 根据某个项目查询系统详情信息
router.post('/system', (req, res) => {
  var sql = $sql.system.search
  var params = req.body
  console.log(params)
  console.log(sql);
  
  conn.query(sql, [params.entryName], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 根据某个项目查询系统列表信息
router.post('/systemlist', (req, res) => {
  var sql = $sql.systemlist.search
  var params = req.body
  console.log(sql);
  console.log(params)
  
  conn.query(sql, [params.entryName], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 根据项目名称查询系统入口
router.post('/detail', (req, res) => {
  var sql = $sql.detail.search
  var params = req.body
  console.log(params)
  console.log(sql);
  
  conn.query(sql, [params.entryName], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 根据ID查询所属领域
router.post('/businessType', (req, res) => {
  var sql = $sql.businessType.search
  var params = req.body
  console.log(params)
  console.log(sql);
  
  conn.query(sql, [params.entryName], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})


// 各业务领域下查询
router.post('/getMessage', (req, res) => {
  var sql = $sql.getMessage.search
  var params = req.body
  console.log(params)
  console.log(sql);
  
  conn.query(sql, [params.oneName,params.twoName,params.NAME], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})


// 全部情况下，根据项目或者系统名称查询项目
router.post('/wholeproject', (req, res) => {
  var sql = $sql.wholeproject.search
  var params = req.body
  console.log(params)
  conn.query(sql, [params.entryName,params.entryName], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

module.exports = router

第四步：在index.js用来定义与监听后端服务器

// node 后端服务器

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.json());
app.use(bodyParser.urlencoded({extended: false}));

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

// 监听端口
app.listen(3306);

console.log('success listen at port:3000......');

第五步：sqlMap.js用来实现封装sql语句的api

//sqlMap.js
var sqlMap = {
    leftList: {
      search:'SELECT `NAME`,SORT,PATH,ICON FROM BUSINESS_AREA ORDER BY SORT;'
    },
    whole:{
      search:'SELECT * FROM PROJECT where area_id in (SELECT area_id from BUSINESS_AREA)'
    },
    project:{
      search:'SELECT * FROM PROJECT where area_id = (SELECT area_id from BUSINESS_AREA where name=?)'
    },
  }
  module.exports = sqlMap;
  

第六步：在项目根目录下安装 安装依赖 mysql ，安装成功之后我们在server终端执行命令： node index

npm install express mysql body-parser

第七步：就是在vue文件中进行使用了

this.$http.post('/api/businessType/',{
    entryName:this.dataDetail.AREA_ID
 }).then( (response) => {
    this.businessType = response.data[0]
    console.log('所属领域',this.businessType);
})

总结：需要注意一下几点
1、我们需要在main.js中引用 vue-resource 并且要记得user
2、我们需要在vue.config.js中配置代理，请看下图

main.js：

vue.config.js:

以上就是一个完整的流程，希望对你有帮助！