Vue项目通过node连接MySQL数据库并实现增删改查操作_百度小程序

Vue项目通过node连接MySQL数据库

1.创建Vue项目

vue create 项目名

Vue项目创建的详细步骤，有需要的可移步这里

2.下载安装需要的插件

下载express

npm install express

下载cors，用于处理接口跨域问题

npm install cors

下载mysql

npm install mysql

下载axios

npm install axios

3.在项目中创建server文件夹，用于搭建本地服务器

新建/server/app.js，用于配置服务器相关信息

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域，必须在路由之前
app.listen(80, () => {
    console.log('服务器启动成功');
})

新建/server/db/index.js，用于配置数据库相关信息

let mysql = require('mysql')
let db = mysql.createPool({
    host: '127.0.0.1',     //数据库IP地址
    user: 'root',          //数据库登录账号
    password: 'root',      //数据库登录密码
    database: 'test'       //要操作的数据库
})
module.exports = db

新建/server/API/user.js，用于操作数据库

let db = require('../db/index')
exports.get = (req, res) => {
    var sql = 'select * from user'
    db.query(sql, (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        res.send(data)
    })
}

新建/server/router.js，用于配置对应路由

let express = require('express')
let router = express.Router()
let user = require('./API/user')
router.get('/user', user.get)
module.exports = router

在/server/app.js中导入路由配置

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')
app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域
app.use(router)              //配置路由
app.listen(80, () => {
    console.log('服务器启动成功');
})

测试服务器是否搭建成功

server文件夹下执行

node app.js

提示“服务器启动成功”，浏览器打开http://127.0.0.1/user，可看见user数据表中对应的数据，表示服务器搭建成功。

Vue项目通过node连接MySQL数据库并实现增删改查操作,在这里插入图片描述,第1张

Vue项目通过node连接MySQL数据库并实现增删改查操作,在这里插入图片描述,第2张

4.Vue项目访问接口获取数据

执行结果

Vue项目通过node连接MySQL数据库并实现增删改查操作,在这里插入图片描述,第3张

注意：运行项目前，一定要先启动服务器，只有服务器启动之后，接口才能被调用，所以需要打开两个终端，分别用于启动服务器和项目

数据表的增删改查操作

1.服务器配置

新建/server/API/list.js，用于存放列表相关操作

let db = require('../db/index')
exports.all = (req, res) => {        //获取info表全部数据
    var sql = 'select * from info'
    db.query(sql, (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        res.send(data)
    })
}
exports.get = (req, res) => {        //通过id查询数据
    var sql = 'select * from info where id = ?'    //？用于占位
    db.query(sql, [req.query.id], (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        res.send(data)
    })
}
exports.del = (req, res) => {        //通过id删除数据
    var sql = 'delete from info where id = ?'
    db.query(sql, [req.query.id], (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        if(data.affectedRows > 0) {
            res.send({
              status: 200,
              message: '删除成功'
            })
        }else{
            res.send({
              status: 202,
              message: '删除失败'
            })
        }
    })
}
exports.add = (req, res) => {        //向info表添加数据
    var sql = 'insert into info (id,name,address,tel) values (?,?,?,?)'
    db.query(sql, [req.query.id, req.query.name, req.query.address, req.query.tel], (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        if(data.affectedRows > 0) {
            res.send({
              status: 200,
              message: 'success'
            })
        }else{
            res.send({
              status: 202,
              message: 'error'
            })
        }
    })
}
exports.update = (req, res) => {        //通过id更新数据
    var sql = 'update info set name = ?, address = ?, tel = ? where id = ?'
    db.query(sql, [req.query.name, req.query.address, req.query.tel, req.query.id], (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        if(data.changedRows > 0) {
          res.send({
            status: 200,
            message: 'success'
          })
        }else{
          res.send({
            status: 202,
            message: 'error'
          })
        }
    })
}

在/server/router.js中配置对应路由
```
let express = require('express')
let router = express.Router()
let user= require('./API/user')
let info = require('./API/list')
router.get('/user', user.get)
router.get('/list/all', info.all)
router.get('/list/get', info.get)
router.get('/list/add', info.add)
router.get('/list/update', info.update)
router.get('/list/del', info.del)
module.exports = router
```
2.前端配置
- 页面样式
  （本人懒得写样式了，随便看看就好_(:з」∠)_）
  
  注意：此处的页面搭建本人使用了elementUI组件，CV前要先下载elementUI
  在终端执行 npm i element-ui -S ，同时在main.js中导入注册即可
  - 对应的实现函数
    效果展示
    
    vue+mysql+node实现数据表增删改查
    
    再补充一点：get请求传参数据存放在req.query中；post请求传参数据存放在req.body中。
    文章中只展示了get请求，所以在此特别补充说明一下
    具体可参见vue登录注册案例，其中的登录使用的是get请求，注册使用的是post请求
    
    文中的内容都是一些相当基础的知识，希望大家可以在看懂理解的基础上多敲代码，这样才能有所进步（虽然cv真的很快乐）
    
    待完善demo git下载地址：https://gitee.com/xie-xiaochun/demo.git
    
    2021国内最好用免费建站系统重庆网站制作工具深圳网站建设费用网站搭建武汉做网站费用企业做个网站多少钱

ID	姓名	家庭住址	联系电话
{{item.id}}	{{item.name}}	{{item.address}}	{{item.tel}}

上一篇：Spark 增量抽取 Mysql To Hive

下一篇：The MySQL server is running with the LOCK