实战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 FCT_BUSINESS_AREA ORDER BY SORT;'
    },
    //全部
    whole:{
      search:'SELECT * FROM FCT_PROJECT where area_id in (SELECT area_id from FCT_BUSINESS_AREA)'
    },
    // 核电
    project:{
      search:'SELECT * FROM FCT_PROJECT where area_id = (SELECT area_id from FCT_BUSINESS_AREA where name=?)'
      // search:'SELECT * FROM FCT_PROJECT where area_id = (SELECT area_id from FCT_BUSINESS_AREA where name=' + "'核电'"+ ')'
    },
    // 根据某个项目查询系统信息
    system:{
      search:'SELECT * FROM FCT_SYSTEM WHERE project_id = (SELECT project_id FROM FCT_PROJECT where NAME = ?);'
    },
    // 根据系统名称查详情
    systemlist:{
      search:'SELECT * FROM FCT_SYSTEM s,FCT_SYSTEM_DETAIL sd WHERE sd.SYSTEM_ID = s.SYSTEM_ID AND s.NAME = ?;'
    },
    // 系统入口
    detail:{
      search:'SELECT * FROM FCT_SYSTEM_DETAIL WHERE SYSTEM_ID = (SELECT SYSTEM_ID FROM FCT_SYSTEM WHERE `NAME`= ?);'
    },
    // 根据ID查询所属领域
    businessType:{
      search:'SELECT * FROM FCT_BUSINESS_AREA WHERE AREA_ID = ? '
    },

    //查询
    // 各业务领域下，根据项目或者系统名称查询项目
    getMessage:{
      search:'SELECT p.`NAME` AS PROJECT_NAME, p.INTRODUCTION AS SYSTEM_INTRODUCTION ,s.`NAME` AS SYSTEM_NAME ,s.INTRODUCTION AS SYSTEM_INTRODUCTION FROM FCT_PROJECT p, FCT_SYSTEM s WHERE s.PROJECT_ID = p.PROJECT_ID AND (p.`NAME` LIKE ? OR s.`NAME` LIKE ? ) AND p.AREA_ID = (SELECT AREA_ID FROM FCT_BUSINESS_AREA WHERE `NAME` = ?);'
    },
    // 全部情况下，根据项目或者系统名称查询项目
    wholeproject:{
      search:'SELECT p.`NAME` AS PROJECT_NAME, p.INTRODUCTION AS SYSTEM_INTRODUCTION ,s.`NAME` AS SYSTEM_NAME ,s.INTRODUCTION AS SYSTEM_INTRODUCTION FROM FCT_PROJECT p, FCT_SYSTEM s WHERE s.PROJECT_ID = p.PROJECT_ID AND (p.`NAME` LIKE ? OR s.`NAME` LIKE ? );'
    },
    // 全部情况下，根据项目或者系统名称查询系统
    // wholesystem:{
    //   search:'SELECT * FROM FCT_SYSTEM s WHERE s.`NAME` LIKE +'%' + 病历库 +'%'; '
    // }

  }
  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:

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