在已經(jīng)創(chuàng)建好的vue項目中執(zhí)行以下步驟
1扎酷、下載安裝需要的插件
下載express
npm install express
下載cors，用于處理接口跨域問題
npm install cors
下載mysql
npm install mysql
下載axios
npm install axios
2.在項目中創(chuàng)建server文件夾酪捡，用于搭建本地服務(wù)器
新建/server/app.js，用于配置服務(wù)器相關(guān)信息
let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
app.use(bodyParser.json());? //配置解析纳账，用于解析json和urlencoded格式的數(shù)據(jù)
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())? ? ? ? ? ? ? //配置跨域逛薇，必須在路由之前
app.listen(80, () => {
? ? console.log('服務(wù)器啟動成功');
})
新建/server/db/index.js，用于配置數(shù)據(jù)庫相關(guān)信息
let mysql = require('mysql')
let db = mysql.createPool({
? ? host: '127.0.0.1',? ? //數(shù)據(jù)庫IP地址
? ? user: 'root',? ? ? ? ? //數(shù)據(jù)庫登錄賬號
? ? password: 'root',? ? ? //數(shù)據(jù)庫登錄密碼
? ? database: 'test'? ? ? //要操作的數(shù)據(jù)庫
})
module.exports = db
新建/server/API/user.js疏虫，用于操作數(shù)據(jù)庫
let db = require('../db/index')
exports.get = (req, res) => {
? ? var sql = 'select * from user'
? ? db.query(sql, (err, data) => {
? ? ? ? if(err) {
? ? ? ? ? ? return res.send('錯誤：' + err.message)
? ? ? ? }
? ? ? ? res.send(data)
? ? })
}
新建/server/router.js永罚，用于配置對應(yīng)路由
let express = require('express')
let router = express.Router()
let user = require('./API/user')
router.get('/user', user.get)
module.exports = router
在/server/app.js中導(dǎo)入路由配置
let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')
app.use(bodyParser.json());? //配置解析，用于解析json和urlencoded格式的數(shù)據(jù)
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())? ? ? ? ? ? ? //配置跨域
app.use(router)? ? ? ? ? ? ? //配置路由
app.listen(80, () => {
? ? console.log('服務(wù)器啟動成功');
})
測試服務(wù)器是否搭建成功
server文件夾下執(zhí)行
node app.js
提示“服務(wù)器啟動成功”卧秘，瀏覽器打開http://127.0.0.1/user呢袱，可看見user數(shù)據(jù)表中對應(yīng)的數(shù)據(jù)，表示服務(wù)器搭建成功翅敌。
這樣項目就搭建成功了羞福，（ps:數(shù)據(jù)庫要調(diào)好才能訪問鏈接）
