大家都在用webpack,都在用webpack-dev-server的熱更新,也都知道webpack自帶server是node-express簡單服務(wù),那么問題來了,前端node想要搞自己的本地測試接口,如何不跨域?qū)崿F(xiàn)?要怎么做更為方便?
那么,本文將是告訴你如何去做~不要謝我!哈哈哈哈哈哈哈
first,
想要弄明白今天的改造,你要了解如下幾個(gè)知識(shí)點(diǎn):
No.1:你必須有會(huì)用webpack-dev-server,當(dāng)你npm/cnpm i webpack-dev-server --save-dev之后,它被放在哪兒?than,(U konw or don't konw webpack-dev-middleware,it's doesn't matter...)知不知道這個(gè)webpack-dev-middleware鬼好像也跟今天的話題沒什么特別大的關(guān)系。
No.2:你要騷騷懂一點(diǎn)node框架express,當(dāng)然你要是node大神,可以不用管這個(gè),直接強(qiáng)改也是很ok的。
No.3:因?yàn)榻裉熘饕獜膙ue-resource入手,所以,介個(gè)話題你應(yīng)該也要了解。
No.4:喜歡我!喜歡看我寫的東西!
that all,the next!
接上一節(jié)內(nèi)容(vue-cli + webpack-simple 集成 vue-router)
我們?cè)诮閭€(gè)單純又實(shí)惠的項(xiàng)目里面已經(jīng)有了webpack服務(wù)的集成,那么如何整改,是一個(gè)重點(diǎn)話題。
好像今天廢話有點(diǎn)多~~~~
下面是激情,不再廢話!
(一)、find node_modules >>> webpack-dev-server >>> lib >>> Server.js
你可以terminal 又或者cmd up to U。找到并打開他。然后你會(huì)發(fā)現(xiàn)這么一堆東西,看圖!
里面有express , fs , http 都是node server 會(huì)用到的東西,現(xiàn)在關(guān)鍵的是你要用到express,因?yàn)橐鼋涌诼铮M一下數(shù)據(jù)之類
(二)找到Server 類 >>> Init express server >>> app get 接口
可以看到function Server這個(gè)類,那我們繼續(xù)往下找,然后找到這么個(gè)鬼
好了,我們找到了該找到的地方,找到了可以寫接口的地方,
可以看到我圈起來的地方其實(shí)是我寫的一個(gè)get請(qǐng)求,返回對(duì)象的接口,頁面顯示是醬紫的
可以看到我們?cè)谶@里可以干很多的事情,可以加入任意接口,然后也可以直接返回你想要的,鏈接數(shù)據(jù)庫也是沒有問題。
再來看看,頁面是如何集成Vue-resource的呢?
(三)Vue 項(xiàng)目集成 Vue-resource
首先你需要安裝vue-resource的包,
npm i vue-resource --save-dev
然后...在你的main.js里面寫上這么一行代碼
讓Vue來集成Vue-resource
之后你就可以這么輕松愉快的做請(qǐng)求啦!
Vue-resource不要問我怎么用,百度一大堆
express接口要怎么寫,get,post,jsonp都很簡單的寫法~~send啥你就會(huì)拿到啥~~~
git :https://github.com/wulibaibao/simple-demo
sorry 這次給你git地址 你并不能拿到接口直接用。應(yīng)node_modules包太大,不喜上傳,所以大俠你要自己找自己加,
Attention,記得加好重啟服務(wù)~~~