vue+mysql实现前端对接数据库

下载引入相关依赖
1、cnpm install --save mysql

cnpm install --save axios

cnpm install --save body-parser

cnpm install --save express

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,编辑修改信息sql1router.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接口

以上就是整个内容，但要运行起来，除了运行vue项目外，还需要将配置的node后端运行起来，可以cmd或者用vscode的内置终端运行之前配置的server文件，进入到server文件夹位置，运行：node index出现以下内容即运行成功

来源地址：https://blog.csdn.net/qq_30871771/article/details/129488275