前端 Vue.js MySQL

前端(Vue.js)连接MySQL

实现本地web服务器与MySQL连接删改，查找数据库

Posted by wantingtr on November 22, 2018

前端(Vue.js)连接MySQL数据库

要实现本地web服务器与MySQL的连接，即实现在页面中对数据库的访问。整体逻辑还是很简单的，但是之前没有接触过数据库，还是踩了不少坑。这一篇主要讲与数据库的连接，更多内容在下一篇博文里。

目录结构

|-- server
  |-- api
    |-- userApi.js
    |-- bookApi.js
  |-- db.js
  |-- index.js
  |-- sqlMap.js

其中：

  1. api文件夹为与数据库的各个表连接接口，每一个子文件为一个数据库中一个表的api
  2. db.js为数据库连接配置
  3. index.js用来定义与监听后端服务器。
  4. sqlMap.js用来实现sql语句的api

整体逻辑

监听后端服务器

web服务器使用3000端口监听后端服务器，并根据MySQL中的表内容设置后端api路由，跳转到数据库连接表入口。

//index.js
const userApi = require('./api/userApi')
const bookApi = require('./api/bookApi')
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/reader', userApi)
app.use('/api/book', bookApi)

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

连接数据库配置

//db.js
module.exports = {
    mysql: {
        host: '127.0.0.1', //mysql连接ip地址
        user: 'root',
        password: '', //mySql用户名密码
        database: 'library',
        port: '3306' //mysql连接端口
    }
}

与数据库表连接入口

userApi中的每个函数，连接到sqlMap.js里的一个sql语句进行对数据库的操作

//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.post('/addReader', (req, res) => {
  var sql = $sql.reader.add
  var params = req.body
  console.log(params)
  conn.query(sql, [params.name], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

router.post('/cancelReader', (req, res) => {
  var sql = $sql.reader.delete
  var params = req.body
  console.log(params)
  conn.query(sql, [params.name], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

router.get('/searchReader', (req, res) => {
  var sql = $sql.reader.search
  var params = req.query
  console.log(params)
  conn.query(sql, [params.name], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      console.log(result)
      res.send(result)
    }
  })
})

router.post('/readerBorrow', (req, res) => {
  var sql = $sql.reader.borrowBook
  var params = req.body
  console.log(params)
  conn.query(sql, [params.readerName, params.bookName], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

module.exports = router

sql语句入口

这里也有个小小的坑..如果数据库里有自增的ID项是需要在数据库里设置好，并且需在入口sql语句中忽略该项。

//sqlMap.js
var sqlMap = {
  reader: {
    add: 'insert into reader(name) values (?)',
    delete: 'delete from reader where name = ?',
    search: 'select * from reader where name = ?', //查找读者信息
    borrowBook: 'update reader set lendBook1 = ? where name = ?'//更新用户表中的已借阅书籍
  },
  book: {
    add: 'insert into book(name, author, stock) values (?, ?, ?)',
    search: 'select * from book where name = ?',
    borrowBook: 'update book set stock = ? , lendNum = ? where name = ?'//更新书籍表中的库存
  }
}
module.exports = sqlMap;

启动

在/server目录下

node index 显示success listen at port:3000……，即启动成功 。 ==注意==：后端代码每次修改都需重启服务器才能执行！！

在项目根目录下

npm run dev 启动web服务器

FRIENDS