下载引入相关依赖
1、cnpm install --save mysql
2、cnpm install --save axios
3、cnpm install --save body-parser
4、cnpm install --save express
5、cnpm install --savecrypto
在main中引入axios
import Axios from ‘axios’
Vue.prototype.$axios = axios
配置连接
在src下新建文件夹server,在其中新建db.js文件,index.js文件,其中db是数据库配置,index是node后端服务配置
db.js内容
module.exports = {
mysql: {
host: 'localhost', // 新建数据库连接时的 主机名或ID地址 内容
user: 'name', // 连接的数据用户名
password: '***', // 密码
database: 'apitest', // 数据库名
port: '3306'
}
index.js内容
// node 后端服务器
const UserApi = require('./api/SysUser')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()
//采用设置所有均可访问的方法解决跨域问题
app.all("*", function(req, res, next) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
})
// 以json格式返回出去
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
// 后端api路由
app.use('/api/sysuser', UserApi)
// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')
创建api
在新建文件夹api,在api下新建文件SysUser.js文件,这个就是之后需要使用到的接口api
const models = require('../server/db')
const express = require('express')
const router = express.Router()
const mysql = require('mysql')
const crypto = require('crypto')
// 连接数据库
const conn = mysql.createConnection(models.mysql)
conn.connect()
const jsonWrite = function (res, ret) {
if (typeof ret === 'undefined') {
res.json({
code: '1', msg: '操作失败'
})
} else {
res.json(
ret
)
}
}
// 接口:增加信息sql,编辑修改信息sql1
router.post('/save', (req, res) => {
const md5 = crypto.createHash('md5')
const params = req.body
const sql = `insert into sys_user(sys_id,sys_username,sys_pwd,sys_nickname,sys_phone,sys_head_protrait,sys_usertype,sys_userlevel)
select 0,?,?,?,?,?,?,? FROM DUAL WHERE NOT EXISTS(SELECT sys_username FROM sys_user WHERE sys_username = ?)`
const sql1 = `update sys_user set sys_nickname = ?,sys_phone = ?,sys_userType = ? where sys_id = ?`
md5.update(params.pwd)
// params.pwd = md5.digest('hex')
if(params.id==0){
conn.query(sql, [params.username, md5.digest('hex'), params.nickname, params.phone, params.headProtrait, params.userType, params.level,params.username], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
}else{
conn.query(sql1, [params.nickname, params.phone, params.userType, params.id], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
}
})
// 接口:用户管理分页接口查询
router.get('/getlist', (req, res) => {
const params = req.query
const sql = `SELECT * FROM sys_user WHERE sys_username LIKE '%${params.keyword}%'
OR sys_phone LIKE '%${params.keyword}%' OR sys_nickname LIKE '%${params.keyword}%'
limit ${(params.pageIndex-1) * params.pageSize},${params.pageSize}`
const sql2 = `SELECT COUNT(*) as total FROM sys_user`
conn.query(sql, function (err, result) {
if (err) {
console.log(err)
}
if (result) {
conn.query(sql2,function(err, result2) {
if(err){
console.log(err)
}
if(result2){
let ret = {
data:result,
total:result2[0].total
}
jsonWrite(res, ret)
}
})
}
})
})
// 接口:删除单条数据
router.post('/del', (req, res) => {
const params = req.body
const sql = `DELETE FROM sys_user WHERE sys_id=${params.id}`
conn.query(sql, params, function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
// 接口:登录
router.post('/login', (req, res) => {
const md5 = crypto.createHash('md5')
const params = req.body
md5.update(params.password)
const sql = `SELECT * FROM sys_user WHERE sys_username=? AND sys_pwd=?`
conn.query(sql, [params.username, md5.digest('hex')], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
// 接口:查询用户信息
router.get('/get',(req, res) => {
const params = req.query
const sql= `select * from info_user a RIGHT JOIN (select sys_id from sys_user where sys_username = ?) b on a.sys_id = b.sys_id`
conn.query(sql,[params.username],function(err, result){
if(err){
console.log(err)
}
if(result){
jsonWrite(res,result)
}
})
})
// 接口:编辑修改更新用户信息
router.post('/alterinfo',(req,res)=>{
const params = req.body
const sql = `insert into info_user(info_id,sys_id,info_real_name,info_sex,info_age,info_addr,info_phone,info_education) value (0,?,?,?,?,?,?,?)`
const sql1 = `update info_user set info_real_name = ?,info_sex = ?,info_age = ?,info_addr = ?,info_phone = ?,info_education = ? where info_id = ?`
if(params.id==0||params.id==null){
conn.query(sql, [params.sid, params.realname, params.sex, params.age, params.addr, params.phone,params.education], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
}else{
conn.query(sql1, [params.realname, params.sex, params.age, params.addr, params.phone,params.education,params.id], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
}
})
// 接口:修改密码
router.post('/modifypwd',(req,res)=>{
const md5 = crypto.createHash('md5')
const mdx = crypto.createHash('md5')
const params = req.body
const sql = `UPDATE sys_user SET sys_pwd=? WHERE sys_id = ? AND sys_pwd = ?`
md5.update(params.oldPassword)
mdx.update(params.newPassword)
conn.query(sql,[mdx.digest('hex'),params.userId,md5.digest('hex')],function(err,result){
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
module.exports = router
api使用
在需要使用的界面调用api接口文章来源:https://www.toymoban.com/news/detail-785359.html
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="sys_username" label="登录账号" align="center"></el-table-column>
<el-table-column prop="sys_nickname" label="昵称" align="center"></el-table-column>
<el-table-column prop="sys_phone" label="手机号码" align="center"></el-table-column>
<el-table-column prop="sys_usertype" label="账号类型" align="center">
<template slot-scope="scope">
<span>{{scope.row.sys_usertype==1?'超级管理员':(scope.row.sys_usertype===2?'管理员':'用户')}}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
pageIndex: 1,
pageSize: 10,
tableData: [],
total: 0
}
},
created() {
this.getlist();
},
methods: {
getlist() {
let params = {
keyword: this.keyword,
pageIndex: this.pageIndex,
pageSize: this.pageSize
}
// 这里使用http://localhost:3000是因为配置地方监听的3000端口
// /api/sysuser 这一部分也是在index.js中引入配置的
// /getlist 是在api接口里面的方法
// 整个三部分组合成立通常使用的接口
// 其中 前面地址部分可以自己全局去定义,同样$http(axios)也可以封装
this.$http.get('http://localhost:3000/api/sysuser/getlist', { params: params })
.then(response => {
console.log(response);
if (response.status == 200) {
let datas = response.data
this.tableData = datas.data
this.total = datas.total
} else {
console.log(response)
}
})
.catch(error => {
console.log(error)
})
},
}
}
</script>
<style scoped>
</style>
以上就是整个内容,但要运行起来,除了运行vue项目外,还需要将配置的node后端运行起来,可以cmd或者用vscode的内置终端运行之前配置的server文件,进入到server文件夹位置,运行:node index出现以下内容即运行成功文章来源地址https://www.toymoban.com/news/detail-785359.html
到了这里,关于vue+mysql实现前端对接数据库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!