Vue项目通过node连接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, (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连接mysql数据库,Vue学习笔记,mysql,数据库,vue.js,node.js
vue连接mysql数据库,Vue学习笔记,mysql,数据库,vue.js,node.js

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>

执行结果
vue连接mysql数据库,Vue学习笔记,mysql,数据库,vue.js,node.js

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

数据表的增删改查操作

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

<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="update">修改</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>

vue连接mysql数据库,Vue学习笔记,mysql,数据库,vue.js,node.js

  • 对应的实现函数
<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);
          if(res.data.status == 200) {
          	this.all()
          }else{
          	this.$message({
	          message: '删除失败',
	          type: 'error'
	        });
          }
      }).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);
          if(res.data.status == 200) {
          	this.all()
          }else{
          	this.$message({
	          message: '添加失败',
	          type: 'error'
	        });
          }
      }).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);
          if(res.data.status == 200) {
          	this.all()
          }else{
          	this.$message({
	          message: '修改失败',
	          type: 'error'
	        });
          }
      }).catch(err=>{
          console.log("操作失败" + err);
      })
    }
  }
}
</script>

效果展示

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

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

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

待完善demo git下载地址:https://gitee.com/xie-xiaochun/demo.git文章来源地址https://www.toymoban.com/news/detail-604762.html

到了这里,关于Vue项目通过node连接MySQL数据库并实现增删改查操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ASP.NET WEB API通过SugarSql连接MySQL数据库

    注意:VS2022企业版可以,社区版可能存在问题。实体名称和字段和数据库中的要一致。 1、创建项目,安装SqlSugarCore、Pomelo.EntityFrameworkCore.MySql插件 2、文件结构 2、appsettings.json { “Logging”: { “LogLevel”: { “Default”: “Information”, “Microsoft.AspNetCore”: “Warning” } }, “Allowed

    2024年02月12日
    浏览(41)
  • Java--用户登录/注册界面(连接Mysql数据库)并可以通过验证码登录

    1 效果展示 (1)登录界面 (2)注册界面 (3)动图展示 2 内容说明 (1)开发前,需引入一个连接Mysql 数据库驱动mysql-connector-java-5.1.30-bin.jar包 提取码:6666 (2)构建路径 (3)需要下载xampp软件 xampp软件下载 提取码:2255 xampp软件包含 Apache Web服务器、 Mysql Web服务器、Filezilla

    2024年02月09日
    浏览(60)
  • java通过JDBC连接mysql8.0数据库,并对数据库中的表进行增删改查操作

    目录 一、JDBC简介 二、添加依赖 三、JDBC操作数据库的步骤 四、JDBC操作数据库——增删改查 (一)新增数据 (二)删除数据 (三)修改数据 (四)查询数据 (五)多表连接查询         Java数据库连接,(Java Database Connectivity,简称JDBC)是java语言中用来规范客户端程序如何来访问数

    2024年02月03日
    浏览(126)
  • 关于JAVA Maven项目连接mysql数据库

      本文作为个人学习笔记 此处使用8.0.28版本,关于mysql更多依赖版本查阅:https://mvnrepository.com/artifact/com.mysql/mysql-connector-j 1、指定驱动器 本部分指定jdbc驱动器类名,使用Class.forName()以加载数据库驱动程序 2、指定数据库 本部分指定所需数据库的url链接,(注:在测试过程中

    2024年04月12日
    浏览(74)
  • Android studio 通过mysql连接数据库完成注册登录,登陆后通过tcp协议与电脑的网络调试助手互发信息

    先不多直接看软件截图 这个是首页等陆界面 xml代码如下 MainActivity文件    注册界面的xlm文件  这个界面比较简单就不介绍了   MainActivity文件 这是一个注册失败的界面,如果数据库内有相同的账号密码则显示注册失败 话不多说直接上代码 MainActivity里面的代码 这里是user类用

    2024年02月02日
    浏览(46)
  • node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

    大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。 技术选型 前端:vite+vue3+antd 后端:node koa 数据库:mysql koa是一个现代的Node.js框架,可以用来构建Web应用程序。 Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vu

    2024年02月20日
    浏览(38)
  • idea写一个连接MySQL数据库的javaweb项目(基础向)

            一个完整javaweb项目大致可以分为这三个层:         显示层、业务层、数据访问层(DAO层) 显示层: 显示在客户端的html,jsp等网页文件 和 处理来自网页提交数据(controller) 业务层: 是显示层和数据访问层之间的桥梁,通过显示层的需求进行不同的数据访问 数

    2024年02月05日
    浏览(45)
  • Java(一):创建 Spring Boot 项目并实现连接操作MySQL数据库

    MySQL 命令 Maven 相关地址 下载地址: https://maven.apache.org/ maven配置方法地址: https://developer.aliyun.com/mvn/guide 仓库搜索地址: https://mvnrepository.com/ https://repo.maven.apache.org/ maven 本地配置 conf/settings.xml 下载 idea 并配置本地环境 maven Maven 构建 生命周期 Maven 的构建 生命周期 包括 三

    2024年02月07日
    浏览(65)
  • 物联网开发终端管理篇-java从MQTT获取设备数据,并通过Druid连接池把数据写入MySQL数据库(Windows系统)

    下面来给大家做个简单的数据对接,也就是通过写JAVA代码实现MQTT协议 首页我们得搭建一个简单的IDEA项目,这个我就不做演示了 搭建完项目,我们需要准备一些jar包,jar包名如下: org.eclipse.paho.client.mqttv3-1.1.0.jar mysql-connector-java-5.1.34.jar jackson-databind-2.10.0.jar jackson-core-2.10.0

    2024年02月11日
    浏览(49)
  • SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月11日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包