脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue node连接MySQL并增删改查

Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解

 更新时间：2022年05月09日 10:18:46   作者：呦呀  
最近在研究vue项目中使用node.js搭建server服务器,链接本地mysql数据库,进行数据操作,下面这篇文章主要给大家介绍了关于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, [req.query.name, req.query.password], (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数据表中对应的数据，表示服务器搭建成功。

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

<template>
  <div>
    <button @click="get()">获取user表数据</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    return {
    };
  },

  methods: {
    get() {
      axios.get('http://127.0.0.1/user').then(res=>{
          console.log(res.data);
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    }
  }
}
</script>

执行结果

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

数据表的增删改查操作

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)
        }
        res.send(data)
    })
}

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)
        }
        res.send(data)
    })
}

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)
        }
        res.send(data)
    })
}

在/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中导入注册即可

<template>
  <div id="box">
    <div class="left">
      <el-button type="primary" @click="all">获取info表的全部数据</el-button>
      <h2>-----------------------------------</h2>
      <el-input v-model="id" placeholder="请输入id" class="input"></el-input>
      <el-button type="danger" @click="del">删除</el-button>
      <el-button type="primary" @click="get">查询</el-button>
      <h2>-----------------------------------</h2>
      <el-input v-model="id" placeholder="请输入id" class="input"></el-input>
      <el-input v-model="name" placeholder="请输入姓名" class="input"></el-input>
      <el-input v-model="address" placeholder="请输入地址" class="input"></el-input>
      <el-input v-model="tel" placeholder="请输入电话" class="input"></el-input>
      <el-button type="primary" @click="add">添加</el-button>
      <el-button type="primary" @click="updata">修改</el-button>
    </div>
    <div class="right">
      <table class="hovertable">
        <tr>
          <th>ID</th><th>姓名</th><th>家庭住址</th><th>联系电话</th>
        </tr>
        <tr v-for="(item, index) in info"  v-bind:key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.address}}</td>
          <td>{{item.tel}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

对应的实现函数

<script>
import axios from "axios"
export default {
  data () {
    return {
      id: '',
      name: '',
      address: '',
      tel: '',
      info: []
    };
  },
  methods: {
    all() {    //查找info表全部数据
      axios.get('http://127.0.0.1/list/all').then(res=>{
          // console.log(res.data);
          this.info = res.data
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    },
    del() {    //删除操作
      axios.get('http://127.0.0.1/list/del',{
        params: {
          id: this.id
        }
      }).then(res=>{
          // console.log(res.data);
          this.all()
      }).catch(err=>{
          console.log("操作失败" + err);
      })
    },
    get() {    //查询操作
      axios.get('http://127.0.0.1/list/get',{
        params: {
          id: this.id
        }
      }).then(res=>{
          // console.log(res.data);
          this.info = res.data
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    },
    add() {   //添加操作
      axios.get('http://127.0.0.1/list/add',{
        params: {
          id: this.id,
          name: this.name,
          address: this.address,
          tel: this.tel
        }
      }).then(res=>{
          // console.log(res.data);
          this.all()
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    },
    update() {     //修改操作
      axios.get('http://127.0.0.1/list/update',{
        params: {
          id: this.id,
          name: this.name,
          address: this.address,
          tel: this.tel
        }
      }).then(res=>{
          // console.log(res.data);
          this.all()
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    }
  }
}
</script>

效果展示

vue+mysql+node实现数据表增删改查

再补充一点：get请求传参数据存放在req.query中；post请求传参数据存放在req.body中。
文章中只展示了get请求，所以在此特别补充说明一下
具体可参见vue登录注册案例，其中的登录使用的是get请求，注册使用的是post请求

文中的内容都是一些相当基础的知识，希望大家可以在看懂理解的基础上多敲代码，这样才能有所进步（虽然cv真的很快乐）

总结

到此这篇关于Vue项目通过node连接MySQL数据库并实现增删改查操作的文章就介绍到这了,更多相关Vue node连接MySQL并增删改查内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 关于vuex状态刷新网页时数据被清空问题及解决

    关于vuex状态刷新网页时数据被清空问题及解决

    这篇文章主要介绍了关于vuex状态刷新网页时数据被清空问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue2组件之select2调用的示例代码

    vue2组件之select2调用的示例代码

    本篇文章主要介绍了vue2组件之select2调用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue实现省市区的级联选择

    vue实现省市区的级联选择

    这篇文章主要为大家详细介绍了vue实现省市区的级联选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue通过moment插件实现获取当前月的第一天和最后一天

    Vue通过moment插件实现获取当前月的第一天和最后一天

    这篇文章主要介绍了Vue 结合插件moment 实现获取当前月的第一天和最后一天,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Vue3的效率提升主要表现在哪些方面示例解析

    Vue3的效率提升主要表现在哪些方面示例解析

    Vue3带来了许多性能优化和效率提升的特性，本文将重点讨论Vue3在静态提升、预字符串化、缓存事件处理函数、Block Tree和PatchFlag方面的改进，我们将通过对比Vue2和Vue3的编译结果来说明这些方面的效率提升
    2023-12-12
  • 一文搞懂Vue3中toRef和toRefs的区别

    一文搞懂Vue3中toRef和toRefs的区别

    toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下
    2023-09-09
  • vue实现移动滑块验证

    vue实现移动滑块验证

    这篇文章主要为大家详细介绍了vue实现移动滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue对于低版本浏览器兼容问题的解决思路

    vue对于低版本浏览器兼容问题的解决思路

    很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下
    2023-02-02
  • 详解vue3中如何使用youtube-player

    详解vue3中如何使用youtube-player

    这篇文章主要为大家介绍了详解vue3中如何使用youtube-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 基于vue+ bootstrap实现图片上传图片展示功能

    基于vue+ bootstrap实现图片上传图片展示功能

    这篇文章主要介绍了基于vue+ bootstrap实现图片上传图片展示功能,需要的朋友可以参考下
    2017-05-05

最新评论