Vue整合Node.js，直连Mysql数据库进行CURD操作

原创 已于 2022-07-17 21:08:24 修改
· 1.7k 阅读 · 22 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #node

于 2021-06-17 16:27:27 首次发布

文章目录

Vue整合Node.js，直连Mysql数据库进行CURD操作

方法一：

创建相关的库表结构：
在这里插入图片描述
在这里插入图片描述
引入需要的模块（mysql、http、vue-resource）

// 找到项目所在位置（进行DOS命令）、项目中拥有可以不重复引用
cnpm install mysql --save
cnpm install http --save
cnpm install vue-resource --save

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击package.json，查看是否引入成功：
在这里插入图片描述
在项目根目录下创建server文件夹：
在这里插入图片描述
编写server.js文件，作为Node服务端：

// 获取http、mysql模块
let http = require('http');
let mysql = require('mysql');

const server = http.createServer(function (req, res) {
  res.statusCode = 200;

  // 处理跨域问题
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.setHeader("X-Powered-By", ' 3.2.1');
  res.setHeader("Content-Type", "application/json;charset=utf-8");
  res.setHeader('Content-Type', 'text/plain;charset=utf-8');
});

// 创建一个数据库连接池
let connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  port: '3306',
  password: 'root',
  database: 'test'
});

// 开始连接
connection.connect(function (err) {
  if (err) {
    console.log("数据库连接失败！！！");
  } else {
    console.log("数据库连接成功！！！");
  }

});

server.on('request', function (request, response) {
  let url = request.url;
  console.log("获取访问映射地址:" + url);

  // 参数方式，类似于mybatis
  var sql = '';
  var sqlParams = [];

  // 方法一：查询数据
  if (url === '/select') {
    sql = 'select * from test.user where username = ?';
    sqlParams = ['小辰哥哥'];
    connection.query(sql, sqlParams, function (err, row) {
      if (err) {
        console.log("网络异常：" + err);
      } else {
        // 响应数据
        let data = JSON.stringify(row);
        response.end(data);
      }
    })
  }

  // 方法二：新增数据
  if (url === '/insert') {
    sql = 'insert into test.user values(?,?)';
    sqlParams = ['周大猪', '123456'];
    connection.query(sql, sqlParams, function (err, row) {
      if (err) {
        console.log("网络异常：" + err);
      } else {
        // 响应数据
        let data = JSON.stringify(row);
        response.end(data);
      }
    })
  }

  // 方法三：修改数据
  if (url === '/update') {
    sql = 'update test.user set password = ? where username = ?';
    sqlParams = ['123456', '小辰哥哥'];
    connection.query(sql, sqlParams, function (err, row) {
      if (err) {
        console.log("网络异常：" + err);
      } else {
        // 响应数据
        let data = JSON.stringify(row);
        response.end(data);
      }
    })
  }

  // 方法四：删除数据
  if (url === '/delete') {
    sql = 'delete from test.user where username = ?';
    sqlParams = ['周大猪'];
    connection.query(sql, sqlParams, function (err, row) {
      if (err) {
        console.log("网络异常：" + err);
      } else {
        // 响应数据
        let data = JSON.stringify(row);
        response.end(data);
      }
    })
  }
});

// 开始Node服务器端口
server.listen(8088, () => {
  console.log("服务器端口开启成功！");
});

在src目录下，main.js中使用vue-resource模块：

// 将vue-resource模块引入进来，否则this.$http将无法使用
import VueResource from 'vue-resource'
Vue.use(VueResource);

编写demo.vue开始进行交互操作：

// 在路由中引入新demo.vue页面
import demo from "@/components/demo";
{
   path: '/demo',
   name: 'demo',
   component: demo,
}

<template>
  <div style="margin-left: 100px">
    <h3>数据库增删改查（CURD操作）</h3>
    <label>用户名:<input type="text" v-model="username"/></label><br/><br/>
    <label>密码:<input type="password" v-model="password"/></label><br/><br/>
    <el-button type="primary" @click="selectData">查询</el-button>
    <el-button type="primary" @click="insertData">增加</el-button>
    <el-button type="primary" @click="updateData">修改</el-button>
    <el-button type="primary" @click="deleteData">删除</el-button>
  </div>
</template>

<script>
  export default {
    name: "demo",
    data() {
      return {
        username:'',
        password:'',
      }
    },
    methods: {
      selectData() {
        // 访问node.js服务端
        this.$http.get('http://localhost:8088/select',{

        }).then(data => {
          if(data.data[0].username == this.username && data.data[0].password == this.password){
            this.$message({type: 'success',message:"查询成功"});
          }else{
            this.$message({type: 'warning',message:"查询失败"});
          }
        }).catch(error => {
          this.$message({type: 'error',message:"网络连接异常"});
        });
      },
      insertData(){
        // 访问node.js服务端
        this.$http.get('http://localhost:8088/insert',{

        }).then(data => {
          if(data.data.affectedRows > 0){
            this.$message({type: 'success',message:"新增成功"});
          }else{
            this.$message({type: 'warning',message:"新增失败"});
          }
        }).catch(error => {
          this.$message({type: 'error',message:"网络连接异常"});
        });
      },
      updateData(){
        // 访问node.js服务端
        this.$http.get('http://localhost:8088/update',{

        }).then(data => {
          if(data.data.affectedRows > 0){
            this.$message({type: 'success',message:"修改成功"});
          }else{
            this.$message({type: 'warning',message:"修改失败"});
          }
        }).catch(error => {
          this.$message({type: 'error',message:"网络连接异常"});
        });
      },
      deleteData(){
        // 访问node.js服务端
        this.$http.get('http://localhost:8088/delete',{

        }).then(data => {
          if(data.data.affectedRows > 0){
            this.$message({type: 'success',message:"删除成功"});
          }else{
            this.$message({type: 'warning',message:"删除失败"});
          }
        }).catch(error => {
          this.$message({type: 'error',message:"网络连接异常"});
        });
      }
    }
  }
</script>

<style scoped>

</style>

在server目录下，开启Node服务：
在这里插入图片描述
开始测试：
在这里插入图片描述
查询操作：
在这里插入图片描述
在这里插入图片描述
增加操作：
在这里插入图片描述
在这里插入图片描述
修改操作：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除操作：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

方法二（推荐）：

引入需要的模块（mysql、express、body-parser、cors、vue-resource）

// 找到项目所在位置（进行DOS命令）、项目中拥有可以不重复引用
cnpm install mysql --save
cnpm install express --save
cnpm install body-parser --save
cnpm install cors --save
cnpm install vue-resource --save

在项目根目录下创建server文件夹：
在这里插入图片描述
在src目录下，main.js中使用vue-resource模块：

// 将vue-resource模块引入进来，否则this.$http将无法使用
import VueResource from 'vue-resource'
Vue.use(VueResource);

在server目录下，编写database.js：

// 配置数据库相关信息
module.exports = {
  mysql: {
    host: "localhost",
    user: "root",
    password: "root",
    database: "test",
    port: 3306
  }
};

在server目录下，编写sql.js：

// 编写相关sql语句
let sqlMap = {
  user: {
    // 查询数据
    select: "select * from user where username = ?;",

    // 插入数据
    insert: "insert into user values(?,?);",

    // 修改数据
    update: "update user set password = ? where username = ?;",

    // 删除数据
    delete: "delete from user where username = ? and password = ?;"
  }
};

// 暴露sqlMap
module.exports = sqlMap;

在server目录下，编写api.js：

// 引入database.js文件（配置数据库相关信息）
let models = require('./database');

// 引入sql.js文件（编写相关sql语句）
let $sql = require('./sql');

// 引入mysql和express模块
let mysql = require('mysql');
let express = require('express');
let router = express.Router();

// 开始连接数据库
let conn = mysql.createConnection(models.mysql);
conn.connect();

// 对JSON字符串进行处理
let jsonWrite = function (response, result) {
  if (typeof result === 'undefined') {
    response.json({
      code: '500',
      msg: '操作失败'
    });
  } else {
    response.json(result);
  }
};

// 查询数据（'/select'）
router.post('/select', (request, response) => {

  // 获取编写相关sql语句
  let sql = $sql.user.select;
  console.log("相关sql语句：", sql);

  // 获取请求参数
  let params = request.body;
  console.log("相关参数", params);

  // [params.username]传参类似mybatis
  conn.query(sql, [params.username], function (error, result) {
    if (error) {
      console.log('网络连接异常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
      for (let i = 0; i < result.length; i++) {
        if (result[i].password == params.password) {
          return response.end();
        } else {
          return response.end();
        }
      }
    }
  })
});

// 插入数据（'/insert'）
router.post('/insert', (request, response) => {

  // 获取编写相关sql语句
  let sql = $sql.user.insert;
  console.log("相关sql语句：", sql);

  // 获取请求参数
  let params = request.body;
  console.log("相关参数", params);

  // [params.username]传参类似mybatis
  conn.query(sql, [params.username, params.password], function (error, result) {
    if (error) {
      console.log('网络连接异常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
    }
  })
});

// 修改数据（'/update'）
router.post('/update', (request, response) => {

  // 获取编写相关sql语句
  let sql = $sql.user.update;
  console.log("相关sql语句：", sql);

  // 获取请求参数
  let params = request.body;
  console.log("相关参数", params);

  // [params.username]传参类似mybatis
  conn.query(sql, [params.password, params.username], function (error, result) {
    if (error) {
      console.log('网络连接异常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
    }
  })
});

// 删除数据（'/delete'）
router.post('/delete', (request, response) => {

  // 获取编写相关sql语句
  let sql = $sql.user.delete;
  console.log("相关sql语句：", sql);

  // 获取请求参数
  let params = request.body;
  console.log("相关参数", params);

  // [params.username]传参类似mybatis
  conn.query(sql, [params.username, params.password], function (error, result) {
    if (error) {
      console.log('网络连接异常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
    }
  })
});

// 暴露router
module.exports = router;

在server目录下，编写server.js：

// 引入api.js
const userApi = require('./api');

// 引入express模块
const express = require('express');
const app = express();

// 引入cors模块，处理跨域问题
const cors = require('cors');
app.use(cors());

// 引入body-parser模块，解析请求过来的参数
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 访问Node服务端映射地址
app.use('/api', userApi);

// 开始服务器端口
app.listen(8088);
console.log("服务器端口开启成功！");

在这里插入图片描述
编写demo2.vue开始进行交互操作：

// 在路由中引入新demo2.vue页面
import demo2 from "@/components/demo2";
{
   path: '/demo2',
   name: 'demo2',
   component: demo2,
}

<template>
  <div style="margin-left: 100px">
    <h3>数据库增删改查（CURD操作）</h3>
    <label>用户名:<input type="text" v-model="username"/></label><br/><br/>
    <label>密码:<input type="password" v-model="password"/></label><br/><br/>
    <el-button type="primary" @click="selectData">查询</el-button>
    <el-button type="primary" @click="insertData">增加</el-button>
    <el-button type="primary" @click="updateData">修改</el-button>
    <el-button type="primary" @click="deleteData">删除</el-button>
  </div>
</template>

<script>
  export default {
    name: "demo2",
    data() {
      return {
        username: '',
        password: '',
      }
    },
    methods: {
      selectData() {
        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）
        this.$http.post('http://localhost:8088/api/select', {
          username: this.username
        }).then(data => {
          if (data.data[0].username == this.username && data.data[0].password == this.password) {
            this.$message({type: 'success', message: "查询成功"});
          } else {
            this.$message({type: 'warning', message: "查询失败"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "网络连接异常"});
        });
      },
      insertData() {
        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）
        this.$http.post('http://localhost:8088/api/insert', {
          username: this.username,
          password: this.password
        }).then(data => {
          if (data.data.affectedRows > 0) {
            this.$message({type: 'success', message: "新增成功"});
          } else {
            this.$message({type: 'warning', message: "新增失败"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "网络连接异常"});
        });
      },
      updateData() {
        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）
        this.$http.post('http://localhost:8088/api/update', {
          username: this.username,
          password: this.password
        }).then(data => {
          if (data.data.affectedRows > 0) {
            this.$message({type: 'success', message: "修改成功"});
          } else {
            this.$message({type: 'warning', message: "修改失败"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "网络连接异常"});
        });
      },
      deleteData() {
        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）
        this.$http.post('http://localhost:8088/api/delete', {
          username: this.username,
          password: this.password
        }).then(data => {
          if (data.data.affectedRows > 0) {
            this.$message({type: 'success', message: "删除成功"});
          } else {
            this.$message({type: 'warning', message: "删除失败"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "网络连接异常"});
        });
      }
    }
  }
</script>

<style scoped>

</style>

在server目录下，开启Node服务：
在这里插入图片描述
开始测试：
在这里插入图片描述
查询操作：
在这里插入图片描述
增加操作：
在这里插入图片描述
在这里插入图片描述
修改操作：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除操作：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

每天一个提升小技巧！！！

vue mysql 直连
carbonzhao的专栏
10-24 2097
最近又搞了个小项目，单机版本的内部考勤管理系统，直接部署在对方的工作电脑上，不需要在云端部署，因为项目本身就小，我就没配置后端同事进行开发，而是通过VUE直连mysql进行业务开发及保存。后期再通过PM2来守护页面及服务，随时打开使用。下面来复盘一下整体开发过程。
Vue项目通过node连接MySQL数据库并实现增删改查操作
热门推荐
weixin_52580677的博客
03-01 6万+
Vue项目通过node连接MySQL数据库 1.创建Vue项目 vue create 项目名 2.下载安装需要的插件 下载express npm install express 下载cors，用于处理接口跨域问题 npm install cors 下载mysql npm install mysql 下载axios npm install axios 3.在项目中创建server文件夹，用于搭建本地服务器 创建/server/app.js，用于配置服务器相关信息 let expr
vue实现连接Mysql数据库和服务器通信
qq_63656102的博客
05-04 1507
在vue中，我们不仅是为了做前端页面展示和数据响应式，最重要的还是去访问后端请求，把数据给数据库存储，这样刷新页面数据才不会丢失。user是数据库名字，password是数据库密码，host是访问路径，默认是本地127.0.0.1，database是数据库名称。vue中对于数据的发送以及存储也很重要，稍不注意也会存在很大的问题，所以我们要学习一下存储数据以及对数据的请求。query()就是运行sql语句，不管是增删查改都是.query()就行了，是不是很方便！
Vue连接MySql数据库
圆静居士的专栏
01-07 4万+
一、vue-cli2 全局安装 npm install vue-cli -g 局部安装项目 vue init webpack 项目名称 例如：vue init webpack demo1 二、express-generator 1.全局安装 npm install express-generator -g 2.express --view=ejs 项目名称 例如：exp...
vue 项目demo 简单几个页面 路由跳转 连接MySQL数据库
12-12
这个demo适合刚入门不久的学习者学习 ,简单几个页面 router路由跳转 连接MySQL数据库
vue2-elementUI后台系统脚手架
06-09
在本脚手架中，Node.js被用于搭建API服务器，处理HTTP请求，与前端进行数据交互，实现 CURD（Create、Read、Update、Delete）基本数据库操作。 MySQL是世界上最流行的开源关系型数据库管理系统之一，具备良好的性能...
CURD-TS：探索Vue3.0、React与Angular的跨前端框架系统设计
- **Node.js**：一个基于Chrome V8引擎的JavaScript运行环境，允许在服务器端运行JavaScript代码。 - **Express**：是一个灵活的Node.js Web应用框架，提供了一系列强大的特性来创建各种Web和移动应用。 4. **...
Vue3前端 .NET 后端接口【前后端分离】
最新发布
m0_45894394的博客
09-26 1476
使用VsCode搭建Vue3前端项目及配置 后端使用Vistual Studio2022 搭建接口项目， 数据库语言为mysql 数据库工具使用DataGrip进行可视化，后端接口模式为 mvc ，使用前后端分离的模式进行一个简单登录的实现
深入探索当前PHP技术及其在CURD操作中的应用
随着前端技术的发展，JavaScript的重要性不断上升，现代Php应用程序也越来越多地使用JavaScript和相关技术栈（如Ajax、Vue.js、React、Node.js等）来增强用户界面和交互体验。 另外，考虑到“压缩包子文件的文件...
idea快速生成crud_使用NestJS，@ nestjsx / crud和TestMace进行快速轻松的CRUD
编程故事的地方
08-17 1811
idea快速生成crud 如今，REST API已成为Web应用程序开发标准，可以将Web开发分为两个单独的部分。 UI使用了几种主流框架，例如Angular，React，Vue。 后端开发人员可以从多种语言和框架中自由选择。 今天，我想讨论NestJS框架。 我们将使用Nest和@ nestjsx / crud包创建一个简单的CRUD应用程序。 为什么选择NestJS 最近，JavaS...
Vue测试接口访问数据库
12-15
资源主要是自己用来演示通过安装Vue依赖，实现前端自己写接口，去访问本地数据库，用来完善程序功能，测试接口访问，完成学校各项实验内容。
在Vue3项目中操作MySQL数据库
m0_61998604的博客
05-12 6604
在Vue3项目中，我们可以通过axios来发送HTTP请求，从而与后端服务器进行数据交互。因此，我们可以在后端服务器中实现与MySQL数据库的交互，然后在Vue3项目中调用这些接口。
vue项目利用node连接MySQL数据库
YanHSama的博客
08-17 8484
vue项目中利用axios发起请求 <div class="home"> <p>this is home.vue</p> <p> <button @click="changeMsg">点击</button> </p> </div> methods:{ changeMsg () {
【Vue+Mysql实现前端对接数据库】
前端知识分享喵
12-17 2001
Vite + Vue3 工程化环境下，需要在 package.json 中配置。注意：Node 14+ 版本支持 CommonJS 和 ESM 两种规范。当然你也可以使用 CommonJS 规范通过。导入模块，这样项目中就存在两种规范的写法了。其它 api 文件配置参考 login.js。，且后端文件后缀需要由。
vue+mysql实现登录页面连接数据库（向数据库里存数据）
m0_63861761的博客
09-02 7580
vue+mysql实现登录页面连接数据库（向数据库里存数据）
vue通过express创建server连接mysql
qq_32067695的博客
02-27 497
vant文档 地址：https://youzan.github.io/vant/#/zh-CN/ 安装node node官网地址：https://nodejs.org/en/ 查看是否安装成功 node -v npm -v cnpm -v
VUE连接数据库
shanshan33520_的博客
10-24 1011
1、cnpm install --save mysql\n\n2、cnpm install --save axios\n\n3、cnpm install --save body-parser\n\n4、cnpm install --save express\n\n5、cnpm install --save crypto\n\n在main中引入axios\n\nimport Axios from 'axios'\n\nVue.prototype.$axios = axios\n\n配置连接\n在src下新建文
vue项目之js对Mysql数据库操作
m0_47360805的博客
04-09 6192
vue项目之js对Mysql数据库操作
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小辰哥哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值