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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
实验效果:
1、开始数据表
2、运行界面
3、新增用户 123
4、查询用户
5、修改用户 1 密码
6、删除用户 2
参考学习
https://www.jianshu.com/p/4c058db039d5