環(huán)境搭建好了，開始寫業(yè)務(wù)和后端接口代碼，這一篇講的內(nèi)容也比較簡(jiǎn)單，只適合小白參考；

環(huán)境搭建請(qǐng)參考 《手動(dòng)搭建vue+node單頁(yè)面（一）》：https://segmentfault.com/a/11...

項(xiàng)目地址：https://github.com/liubingyan...

內(nèi)容提要：
1.jsonp獲取baidu搜索框內(nèi)容；
2.node調(diào)用juejin接口獲取前端文章列表；

開發(fā)過程中不會(huì)講的太細(xì)，有疑問多百度；

一、獲取baidu搜索框內(nèi)容
就是輸入的同時(shí)下來框展示的內(nèi)容；

在用node調(diào)用百度接口時(shí)候發(fā)現(xiàn)返回的是gbk格式的內(nèi)容，node解析遇到困難，所以改用jsonp的方式；

首先在控制臺(tái)分析接口：

返回值：

很容易看出內(nèi)容中json數(shù)據(jù)的‘s’就是我們想要的內(nèi)容；

接口地址的url內(nèi)容過長(zhǎng)，我們將這個(gè)地址復(fù)制到地址欄中經(jīng)過反復(fù)測(cè)試，最終得到：

對(duì)我們有用的參數(shù)只有兩個(gè):wd(輸入框的內(nèi)容)和cb（返回時(shí)調(diào)用的方法名），接下來就可以開發(fā)了；

這個(gè)小功能的開發(fā)涉及的：
1.app.vue：將導(dǎo)航和路由寫在其中，并做簡(jiǎn)單布局；
改之前在src目錄下創(chuàng)建common文件夾，存放公共樣式和方法（base.css等）：
比如：

//base.css
//...
.fl{float:left}
.fr{float:right}
//...
//類似這樣的預(yù)定義樣式

app.vue做如下修改：（之后的樣式都不再做詳細(xì)說明）

看效果之前先引入路由，不然頁(yè)面沒東西，src/router文件夾下創(chuàng)建index.js,創(chuàng)建router文件夾的原因還是模塊化開發(fā)的思想，將作用相同的代碼放在一起，利于維護(hù)和開發(fā)；

//router/index.js
import Vue from "vue"
import Router from "vue-router"
import Home from "../views/home"

Vue.use(Router)

export default new Router({
    routes: [{
        path: "/",
        name: "home",
        component: Home
    }]
})

別忘了安裝插件

npm i vue-router -save

main.js引入路由配置

//main.js
import Vue from "vue"
import App from "./app"

import router from "./router"http://默認(rèn)加載index文件
new Vue({
    el: "#app",
    router,//注冊(cè)到vue實(shí)例
    render: h => h(App)
})

效果如下：

導(dǎo)航和路由頁(yè)面放在左邊，右邊欄留著放小插件；

3.根據(jù)導(dǎo)航最起碼要有一個(gè)首頁(yè)，一個(gè)論壇頁(yè)，先做首頁(yè)，在src下創(chuàng)建home.vue；
home頁(yè)內(nèi)容有兩個(gè)，搜索框和juejin拿到的列表，先做搜索框；

//home.vue

編寫搜索框組件，在src/views下創(chuàng)建search.vue

//search.vue

在src/common下創(chuàng)建base.js添加公共方法（vue有自己的方式將自定義函數(shù)屬性添加到實(shí)例上，自己百度學(xué)習(xí)吧，是通過組件的方式引入，然后通過vue.的方式調(diào)用），這里東西不多，我們就簡(jiǎn)單粗暴點(diǎn)兒，直接在windows下添加方法，調(diào)用也簡(jiǎn)單；

//src/common/base.js代碼比較簡(jiǎn)單，不多解釋了
window.log=console.log;

window.searchFunction = function(val) {
    window.searchInfo = val
    //將搜索結(jié)果保存在searchInfo 中
};

window.creatScript=function(url) {
//選擇promise是它的then方法用起來方便
    return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.id = "removeScript";
        script.src = url;
        document.body.appendChild(script);
        script.onload = function() {
            resolve(window.searchInfo);
            document.body.removeChild(document.getElementById("removeScript"));
        }
    });    
};    

在main.js中引入

import "./common/base" 

再看頁(yè)面，效果出來了：

二、獲取juejin文章列表

到目前為止還是沒有寫后端代碼，接下來通過調(diào)用juejin接口來看看一個(gè)簡(jiǎn)單接口怎么寫

寫之前先整理下思路：要寫個(gè)展示組件，一個(gè)后端接口，在把它們聯(lián)系起來;

1.寫組件，在src/views下創(chuàng)建juejinResources.vue文件

//juejinResources.vue(業(yè)務(wù)代碼不再贅述)
  

安裝vue-resource插件

npm i vue-resource -save

將vue-resource注冊(cè)到vue中，修改main.js

//main.js
//....
import VueResource from "vue-resource" 
Vue.use(VueResource)
//....

2.寫后端接口，在service目錄下創(chuàng)建juejinResources.js

//juejinResources.js
var http = require("http");
var log = console.log;
var express = require("express");
var router = express.Router();

//這樣的地址獲取方式跟baidu的一樣，慢慢試；
var url = "http://timeline-merger-ms.juejin.im/v1/get_entry_by_rank?src=web&limit=20&category=5562b415e4b00c57d9b94ac8";

//express自帶路由分配
router.get("/", function(req, res) {
    http.get(url, function(resquest) {
        var html = "";
        resquest.setEncoding("utf-8"); //防止中文亂碼

        //監(jiān)聽data事件，每次取一塊數(shù)據(jù)
        resquest.on("data", function(chunk) {
            html += chunk;
        });

        //監(jiān)聽end事件，如果接口返回獲取完畢，就執(zhí)行回調(diào)函數(shù)
        resquest.on("end", function() {
            //接口返回的是字符串，中文是unicode碼，做了處理才返回給前端
            html=JSON.parse(unescape(html.replace(/u/g, "%u")))
            res.status(200)
            res.json(html)
        })
    })
})

module.exports=router;

3.接口寫好以后就把它們聯(lián)系起來，修改server.js

//server.js
//....在代碼最后添加
//node分配路由的方式，多個(gè)服務(wù)就多寫幾個(gè)分配就行了
//juejinResources.js中用的router.git("/")會(huì)自動(dòng)把"/juejinResources"拼在前面
app.use("/juejinResources",require("./service/juejinResources"))

其實(shí)挺簡(jiǎn)單，來看看效果:

如果接口是https請(qǐng)求，node環(huán)境可能會(huì)出現(xiàn)這樣的報(bào)錯(cuò)：

解決辦法網(wǎng)上有很多，但不一定有效，我的就不知道怎么解決了，所以都改成了http請(qǐng)求；

到這里：?jiǎn)雾?yè)面組件-路由-后端接口-服務(wù)就都有了，開發(fā)模式，生產(chǎn)模式也都具備，爬蟲也是用http或則https多次訪問，獲取方式跟這個(gè)其實(shí)是一樣的，拿到數(shù)據(jù)想怎么玩都可以，放到自己數(shù)據(jù)庫(kù)都沒問題。

這個(gè)demo項(xiàng)目還不完整，缺少數(shù)據(jù)庫(kù)和admin后臺(tái)管理，結(jié)構(gòu)已經(jīng)有了，剩下的基本上就是板磚了，不再贅述。

到目前為止的目錄結(jié)構(gòu)：