Vue.js + express +mysql实现数据库增删改查

article/2025/9/29 11:30:52

Vue.js + express +mysql实现数据库增删改查

1、下载安装Node.js

在Node.js官网可下载

2、下载vue-cli脚手架

npm install vue-cli -g

3、创建项目

后面是项目名称，在安装项目过程中需要选择安装vue-router
vue init webpack mysqlconnect

4、安装vue-resource依赖

npm install vue-resourve

5、安装express模块

npm install express

6、安装mysql依赖

npm install mysql

7、安装body-parser依赖

npm install body-parser

8、在项目根目录文件下创建server文件夹，在文件夹中有两个文件（db.js和index.js)和一个api文件夹（含有user.Api.js）

db.js，用于数据库连接配置

// 数据库连接配置module.exports = {mysql: {host: 'localhost',user: 'root',//数据库用户名password: 'password',//数据库密码database: 'vue',//所用数据库port: '3306'}
};

index.js，用于配置后端服务器

// node 后端服务器const userApi = require('./api/userApi');
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/user', userApi);// 监听端口
app.listen(3000);console.log('success listen at port:3000......');

api/userApi.js，用于数据库增删改查操作

var models = require('../db');var express = require('express');var router = express.Router();var mysql = require('mysql');// 连接数据库
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('/addUser', (req, res) => {var params = req.body;var sql = 'insert into user(username, password) values (?, ?)';console.log(params);conn.query(sql, [params.username, params.password], function(err, result) {if (err) {console.log(err);}if (result) {jsonWrite(res, result);}})
});// 查询用户接口
router.post('/queryUser', (req, res) => {var params = req.body;var sql = " select * from user where username = '" + params.username + "'";console.log(params);conn.query(sql, [params.username], function(err, result) {if (err) {console.log(err);}if (result) {console.log(res);jsonWrite(res, result);}})
});// 修改用户接口
router.post('/updateUser', (req, res) => {var params = req.body;var sql = " update user set password = '"+ params.password + "' where username = '" + params.username + "'";console.log(params);conn.query(sql, [params.username], function(err, result) {if (err) {console.log(err);}if (result) {console.log(res);jsonWrite(res, result);}})
});// 删除用户接口
router.post('/deleteUser', (req, res) => {var params = req.body;var sql = " delete from user where username = '" + params.username + "'";console.log(params);conn.query(sql, [params.username], function(err, result) {if (err) {console.log(err);}if (result) {console.log(res);jsonWrite(res, result);}})
});module.exports = router;

Hello.vue，项目主页

<template><div>{{msg}}<div><input type="text" v-model="username"><input type="password" v-model="password"><button @click="addUser">新增</button></div><div><input type="text" v-model="username"><input type="password" v-model="password"><button @click="queryUser">查询</button></div><div><input type="text" v-model="username"><input type="password" v-model="password"><button @click="updateUser">修改</button></div><div><input type="text" v-model="username"><input type="password" v-model="password"><button @click="deleteUser">删除</button></div></div></template><script>export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App',username: '',password: '',// tableData: [],}},methods: {// 新增函数addUser() {var username = this.username;var password = this.password;this.$http.post('/api/user/addUser', {username: username,password: password},{}).then((response) => {console.log(response);})},// 查询函数queryUser() {var username = this.username;var password = this.password;this.$http.post('/api/user/queryUser', {username: username,password: password},{}).then((response) => {console.log(response);})},// 修改函数updateUser() {var username = this.username;var password = this.password;this.$http.post('/api/user/updateUser', {username: username,password: password},{}).then((response) => {console.log(response);})},// 删除函数deleteUser() {var username = this.username;var password = this.password;this.$http.post('/api/user/deleteUser', {username: username,password: password},{}).then((response) => {console.log(response);})},}}
</script><style scoped></style>

注意：

1、通过npm run dev在终端运行项目，如果没有引用vue-resouce，this.$http.post无法生效，报错如下：

在这里插入图片描述

解决方法：在main.js文件中引入vue-resource

import Vue from 'vue'
import App from './App'
import router from './router'import VueRouter from 'vue-router'
//引入vue-resource
import VueResource from 'vue-resource'Vue.config.productionTip = false;/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
});// 此处需要use后，this.$http.get或者this.$http.post才可以
Vue.use(VueRouter);
//使用vue-resource
Vue.use(VueResource);

2、在config/index.js中还需要加入以下代码段，否则增删改查过程中会出现（Not Found）。

解决方法

proxyTable: {'/api': {target: 'http://localhost:3000/api/',changeOrigin: true,pathRewrite: {'^/api': ''}}},

3、有一位博主说，在npm run dev过程中还会报eslint的错误，但是我这边是没有遇到这种情况，下面我也给出博主的解决方案供大家参考。

解决方法：

如果执行npm run dev后，报eslint的错误，可以在build目录的webpack.base.conf.js文件中，把eslint的代码注释掉,重新执行npm run dev就不会报错了：ESLint是一个QA工具，用来避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：
在注释中配置：使用JavaScript注释直接把配置嵌入到文件中。
配置文件：使用一个JSON或YAML文件来为全部的目录和它的子目录指定配置信息。
注释的代码如下：
// 去掉eslint验证，注释掉下面的代码
// {
// test: /.(js|vue)$/,
// loader: ‘eslint-loader’,
// enforce: “pre”,
// include: [resolve(‘src’), resolve(‘test’)],
// options: {
// formatter: require(‘eslint-friendly-formatter’)
// }
// }
作者：余生社会
链接：https://www.jianshu.com/p/4c058db039d5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。