鍍金池/ 問答/數(shù)據(jù)庫  HTML/ vue從數(shù)據(jù)庫讀取數(shù)據(jù)失敗

vue從數(shù)據(jù)庫讀取數(shù)據(jù)失敗

1、vue頁面是一張表格,表格數(shù)據(jù)從數(shù)據(jù)庫讀取,現(xiàn)在讀不到數(shù)據(jù)。

2、數(shù)據(jù)庫連接成功:圖片描述

但是界面報錯如下:
圖片描述

3、鏈接數(shù)據(jù)庫代碼結(jié)構(gòu)和代碼:
圖片描述

db.js

// 數(shù)據(jù)庫連接配置
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);

// 監(jiān)聽端口
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()
            },
回答
編輯回答
孤客

dev-server的地址是localhost:7777,API地址是localhost:3306,你請求的時候請求localhost:7777/api/newStu/searchNewStu應(yīng)該就好了

2017年12月3日 07:36
編輯回答
毀了心

你的mysql啟動了么?我記得mysql默認端口是3306,所以你得看你能不能連接數(shù)據(jù)庫..然后你后臺api是7777端口的,vue配置里面你有做轉(zhuǎn)發(fā)到/api=>127.0.0.1:7777么...排查好這兩個就好啦

2017年9月5日 15:39
編輯回答
獨特范

如果你的API服務(wù)器和前端服務(wù)器用了不同的端口,注意跨域的問題。你的請求404說明至少是端口不對,目測你的服務(wù)器端口是3000。你發(fā)送的請求端口是7777

2017年7月23日 03:57
編輯回答
落殤

我認為有問題的地方:

mysql db.js配置中host不需要http://
你配置的路由中只有一個/api/newStu 而沒有/api/newStu/search
啟動的時候是用 node index.js 而不是 node index

2017年7月7日 14:42