module.exports = {

  mysql: {

    host: 'localhost', // 新建数据库连接时的 主机名或ID地址 内容

    user: 'name', // 连接的数据用户名

    password: '***', // 密码

    database: 'apitest', // 数据库名

    port: '3306'

  }

}

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

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