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

下载引入相关依赖

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')

// 连接