一恼琼、 初始化并創(chuàng)建一個(gè)項(xiàng)目
使用?Vue?寫項(xiàng)目肯定會(huì)遇到一個(gè)問題，如何模擬服務(wù)端請(qǐng)求數(shù)據(jù)，那這就需要用到node.js?了暂论。這篇我們講解一下如何使用?node.js?模擬服務(wù)器端請(qǐng)求數(shù)據(jù)篙顺。
一偶芍、 初始化并創(chuàng)建一個(gè)項(xiàng)目
vue init webpack-simple node-demo
cd node-demo
npm i
cnpm i vuex axios -S
二、寫接口
在?build?文件下的?webpack.dev.conf.js?文件中加入
「express」?基于?node.js?后端框架德玫，負(fù)責(zé)路由匪蟀，業(yè)務(wù)邏輯，數(shù)據(jù)庫操作宰僧，頁面和數(shù)據(jù)響應(yīng)材彪。
即架構(gòu)中的業(yè)務(wù)層，對(duì)前端的請(qǐng)求進(jìn)行響應(yīng)琴儿，需要數(shù)據(jù)庫的拉取數(shù)據(jù)庫內(nèi)容段化，需要判斷處理的返回處理結(jié)果，請(qǐng)求頁面文件的返回html文件
...constexpress =require('express')
// 通過 node 訪問模擬數(shù)據(jù)
constapp = express();
// 使用 express 框架啟動(dòng)一個(gè)服務(wù)器
// 1. 讀取文件
varappData =require('../data.json')
varseller = appData.seller
vargoods = appData.goods
varratings = appData.ratings
// 2. 使用 express 來配置路由造成，指定借口請(qǐng)求
varapiRoutes = express.Router()
//定義一個(gè)路由
// 暴露 API 接口
app.use('/api',apiRoutes)...
在?build?文件下的?webpack.dev.conf.js?文件中的?devServer?中加入
...// 添加接口數(shù)據(jù)
before(app){
// 配置請(qǐng)求路由和響應(yīng)
app.get('/api/seller', (req, res) => {?
?res.json({?
?errno:0,//錯(cuò)誤碼
data: seller
?})
?})
?app.get('/api/goods', (req, res) => {
?res.json({?
?errno:0,//錯(cuò)誤碼
data: goods?
?})
?})?
?app.get('/api/ratings', (req, res) => {
?res.json({
?errno:0,//錯(cuò)誤碼
data: ratings })
?})
?}...
三显熏、使用?axios?請(qǐng)求數(shù)據(jù)
在組件中直接請(qǐng)求數(shù)據(jù)就好了
