vue从数据库读取数据失败

Question

1、vue页面是一张表格，表格数据从数据库读取，现在读不到数据。

2、数据库连接成功：

但是界面报错如下：

3、链接数据库代码结构和代码：

db.js

// 数据库连接配置
module.exports = {
    mysql: {
        host: '123.139.88.227',
        user: 'campus',
        password: 'root',
        database: '***',
        port: '33061'
    }
}

index.js

const userApi = require('./api/newStuApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 后端api路由
app.use('/api/newStu', userApi);

// 监听端口
app.listen(3306);
console.log('success listen at port:3306......');

sqlMap.js

/**
 * Created by Administrator on 2017-11-15.
 */
// sql语句
var sqlMap = {
    // 用户
    newStu: {
        search: 'select NAME,YEAR,ENROLL_TYPE,MAJOR_CODE,EXAM_NUMBER,MOBILE_PHONE,TELEPHONE,ADDRESS FROM EM_NEW_STUDENT '
    }
}

module.exports = sqlMap;

测试代码，在界面点击“查询”`

getList() {
                this.listLoading = true;
                var NAME = this.NAME;
                var YEAR = this.YEAR;
                var ENROLL_TYPE = this.ENROLL_TYPE;
                var MAJOR_CODE = this.MAJOR_CODE;
                var EXAM_NUMBER = this.EXAM_NUMBER;
                var MOBILE_PHONE = this.MOBILE_PHONE;
                var TELEPHONE = this.TELEPHONE;
                var ADDRESS = this.ADDRESS;
                this.$http.get('/api/newStu/searchNewStu', data => {
                    this.$set('NAME', data.NAME);
                    this.$set('YEAR', data.YEAR);
                    this.$set('ENROLL_TYPE', data.ENROLL_TYPE);
                    this.$set('MAJOR_CODE', data.MAJOR_CODE);
                    this.$set('EXAM_NUMBER', data.EXAM_NUMBER);
                    this.$set('MOBILE_PHONE', data.MOBILE_PHONE);
                    this.$set('TELEPHONE', data.TELEPHONE);
                    this.$set('ADDRESS', data.ADDRESS);
                }).then((response) => {
                    console.log(response);
                })
                /* fetchList(this.listQuery).then(response => {
                    this.list = response.data.items
                    this.total = response.data.total
                    this.listLoading = false
                })*/
            },
            /* 查询*/
            handleSearch() {
                this.listQuery.page = 1
                this.getList()
            },

Answer 1

如果你的API服务器和前端服务器用了不同的端口，注意跨域的问题。你的请求404说明至少是端口不对，目测你的服务器端口是3000。你发送的请求端口是7777

Answer 2

你的mysql启动了么？我记得mysql默认端口是3306，所以你得看你能不能连接数据库..然后你后台api是7777端口的，vue配置里面你有做转发到/api=>127.0.0.1:7777么...排查好这两个就好啦

Answer 3

我认为有问题的地方：

mysql db.js配置中host不需要http://
你配置的路由中只有一个/api/newStu 而没有/api/newStu/search
启动的时候是用 node index.js 而不是 node index

Answer 4

dev-server的地址是localhost:7777,API地址是localhost:3306,你请求的时候请求localhost:7777/api/newStu/searchNewStu应该就好了