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 --save crypto

在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接口

<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出现以下内容即运行成功

 

 获取数据效果展示：