使用node爬蟲作了一個vue小項目記錄使用筆記

vue-backend-system

github地址

一直想把之前所學的相關知識進行總結概括，方便之後查看複習，正好最近最近抽時間研究點東西，打算是作先後臺的，對後臺這塊不熟悉，原本是打算用node加mongodb實現，數據本身弄的不是很清楚，就乾脆爬下本身的博客，主要是研究下先後臺一塊兒結合着來作的整個流程。

步驟

下載項目

git clone 或者直接下載文件

安裝依賴

cd到項目根目錄下運行 npm install安裝依賴 使用淘寶鏡像 cnpm install(須要先安裝淘寶淘寶鏡像，運行npm install -g cnpm --registry=https://registry.npm.taobao.org)

運行vue項目

npm run dev(開發環境運行，訪問localhost:8081/) npm run server(運行後臺服務，後臺端口是8888)

記錄筆記

簡單總結下本身遇到的問題，學習到的東西，主要是根據這個項目進行簡單的總結，一個是vue相關的內容，另外一個是node相關的知識。

Vue相關總結

Vue總結筆記

這個主要是記錄Vue的相關內容，主要是根據這個項目，在項目中用到的知識，進行一個 大體的總結，以方便之後進行復習查看，你們看的話，最好把相關的文檔都大體看下，我這裏只是簡單介紹下記錄下大體的步驟，方便本身之後複習來用的，稍微深點的只是都須要你們自行閱讀相關的文檔。

參考文檔

• vue2.0中文文檔
• vuex中文文檔
• element-ui官方文檔
• axios使用說明
• vue-router使用

技術點

• vue
• vuex
• vue-router
• axios
• element-ui
• echarts

步驟

####創建項目

項目直接使用了vue-cli快速搭建了項目結構

vue-cli腳手架安裝使用

1. cnpm install vue-cli -g (全局安裝vue-cli)

2. vue (運行vue查看是否安裝成功)

3. vue init webpack 項目名稱 (建立webpack模板項目，這一步是快速建立vue項目，按照提示一步步完成安裝)

D:\shanll\js\vue\vue-all-system>vue init webpack vue-backend-system 建立項目
A newer version of vue-cli is available.
latest: 2.9.3
installed: 2.9.1
? Project name vue-backend-system 這個是項目名稱
? Project description 項目描述 項目描述
? Author 做者 做者
? Install vue-router? Yes 項目路由我用到了選擇了yes，能夠選擇no創建項目後在安裝路由
? Use ESLint to lint your code? No 代碼檢查
? Set up unit tests No 單元測試
? Setup e2e tests with Nightwatch? No 自動化測試
? Should we run npm install for you after the project has been created? (recommended) no 這個是是否如今就安裝依賴
vue-cli · Generated "test".
# Project initialization finished!
# ========================
To get started: 接下來要執行的步驟
cd vue-backend-system
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at
https://vuejs-templates.github.io/webpack

4. cd vue-backend-system (到項目跟目錄下)
5. cnpm install (安裝依賴)
6. npm run dev (運行項目, 默認訪問localhost:8080/)

到此項目的基本架構創建完成

路由

作的是一個後臺管理的項目，首先是頁面的結構，根據頁面的結構設計路由。

1. 設計頁面結構

2. 最終的路由結構參考 src/router/index.js

   # 引入vue 和vue-router
   # Vue.use(Router)註冊路由插件
   # export default router 導出router對象
   # src/main.js 中實例化Vue時傳入router對象
   # router是實例化的路由對象，路由配置都在這個對象中
   
   複製代碼

   router對象中的參數:

   path路由路徑，name路由的名稱,component路由變量(引入的路由模塊),children子路由,meta路由傳遞的信息(通常在這裏的信息能夠處理訪問權限等)

3. 頁面解析 主頁面是views/Index/index.vue,一些樣式直接使用element-ui的樣式,element-ui的使用參考src/main.js的全局引入並註冊。分爲頂部、左側導航欄，右側的主題三部分，在該index.vue中使用了router-view標籤，大體至關於一個容器，渲染路由對應的組件，在這個項目中大體就至關於router.js的router的childredn下的路由匹配的組件,transition是過分標籤，具體的使用能夠參考官網

4. 能夠根據路由和頁面參考佈局，基礎的概念和知識能夠參考下方官方文檔連接。

---

編寫代碼的過程記錄

1. 過程當中使用了element-ui作ui上面的處理，安裝element-ui

cnpm install --save element-ui而後引入插件，使用Vue.use(ElementUI)註冊使用,下面就能夠在各個組件中進行使用了。

2. 各個組件中的參數傳遞

使用vuex進行各個組件之間進行參數傳遞cnpm install --save vuex，我把vuex相關代碼寫入 src/vuex/文件夾下，你們能夠參考 使用，最後只要把store.js進入到main.js中，而後在vue實例化中引入就ok，能夠參考main.js中的使用，在vuex中使用了vuex-presist插件，這個主要是解決緩存的問題.

關於上面的vuex-presist使用的緣由

關於頁面的設計左側的導航欄對應不一樣的路由，切換不一樣的頁面，也有對應的active樣式，這些是一一對應的，你們參考router.js中的參數配置，meta字段中有個index是爲了控制頁面左側導航欄對應的地址和active樣式，可是每次刷新active都會是默認的初始值，爲了解決這個問題就要使用緩存，因此引入了vuex-presist插件，而後把active對應的字段和index字段創建聯繫就ok了，就是經過vuex把數據傳遞給導航欄對應的active.vuex-presist的具體使用能夠參考sotre.js的使用方法。

3. 關於vuex項目中只使用到了定義state和賦值mutations

使用vuex的過程當中，最簡單的就是直接使用state屬性，而後在各個組件中引入vuex進行使用，參考views/Index/left.vue文件,引入import { mapMutations, mapState } from 'vuex',使用的話能夠再computed和mathods中使用。使用的話可使用數組的方式，這種方法的話名字必須和store.js的變量名字同樣,views/Index/left.vue文件中的...mapState。另外一種方式是使用對象的方式，像views/Index/left.vue文件中的...mapMutations,要使用mapMutations中的變量改變state的值，必須使用$store.commit()進行使用，能夠參考vuex文檔。

4. 最初的設計是隻有/首頁頁面的是不用登錄的，其他頁面是須要登陸才能訪問的，所以須要作權限判斷，這裏只是模仿了登陸的效果，登陸固定只有admin才能登陸，重點是在如何處理token,登陸權限判斷。

參考router.js在路由的配置用有meta.login判斷是否須要登陸訪問，router有個路由守衛，能夠在組件中分開寫也能夠在全局中寫，這裏用的是全局路由守衛beforeEach,to即將進入的頁面，from從哪一個頁面過來，具體的能夠看下stroe.js中的代碼。其中登陸超時的判斷是在前臺進行判斷的，在登陸的時候設置一個時間點，每次切換路由或者刷新頁面的時候一個新的時間點，這之間的時間段來進行判斷是否超時，固然通常這個超時有後臺判斷更合適點，後臺判斷是否超時來返回不一樣的字段就ok。爲登陸狀況也作了處理，對象中的query跟的參數是爲了返回從哪一個頁面過來的，在login頁面進行登陸成功的處理就行了。

5. 頁面的數據問題

組件的頁面數據來源於個人git page博客，想來熟悉node的使用，以前用過node寫點東西，因此就乾脆用node的爬蟲來爬去下個人這個頁面，根據爬取到的數據做爲請求的數據返回給本地的請求。本地請求用的是axios,安裝插件並在main.js中引入，而後在vue的原型中定義一個屬性來引入使用axios，另外因爲請求的服務是在8888端口，所以會出現跨域的問題，所以用到了vue的代理請求的方式處理跨域問題，參考config/index.js下面的屬性proxyTable，匹配全部/node請求，target代理的地址，pathRewrite是把全部的/node替換爲空，就是前臺的請求接口比着後臺的接口是要少/node字段的。

總結: 到這裏vue的簡單構建項目差很少就寫完了，主要是走一個總體的流程，通常項目這樣就算是能開頭了，後續就是加功能，完善業務，而後就是一些具體的處理。

接口上的處理就是下一篇文章了主要是node相關的內容你們參考node的學習記錄

• Node相關總結

node的相關知識總結

這裏主要是node相關的知識，簡單的介紹下node的服務建立，請求的接口的寫法，因爲數據來源問題，最後 採用的是爬蟲的方式來獲取數據，順便記錄下node是怎麼實現爬蟲的。

參考連接

node中文文檔 express官方文檔 superagent中文參考文檔 cheerio的參考文檔

起步創建服務

全部接口和爬蟲內容都在server目錄下，你們能夠自行參考，這裏使用的是express框架創建服務，關於express的詳細內容你們能夠參考上面的連接，這裏簡單介紹下這個項目使用時代碼編寫的過程.

// index.js

const express = require('express')
const app = express()

app.listen(8888)
console.log('node server is running at port 8888')

複製代碼

在該目錄下運行node index.js啓動服務,在這個項目中能夠運行npm run server來啓動服務，由於在package.json中的script屬性中進行了配置，可以使用快捷啓動服務,配置用使用的是nodemon這個事一個插件，全局安裝就ok主要是能夠實時啓動服務，不用每次修改保存都要手動重啓服務，插件會保存的時候自動重啓服務。

在這裏把各個功能的部分進行了單獨文件模塊化，引入各個模塊，而後使用app.use(模塊名)註冊使用模塊。

主要接口模塊

api.js這是主要的文章接口模塊，對文章列表和分類進行爬蟲，而後而後編寫相應接口進行接口註冊。把不一樣功能的接口進行模塊化，主要是介紹怎麼在接口比較多的時候如何進行處理。

api接口的通常模板參照server/api.js

// server/api.js
const express = require('express')
const router = express.Router()

// 路由中間件的使用，就是可使用router.use來調用相關處理的中間件，其實至關於一系列的函數
router.use((req, res, next) => {
    next()
})

module.exports = router
複製代碼

對外包路router對象，在server/index.js中引入router對象,經過app.use進行註冊使用。

get請求

// server/api.js

router.get('請求接口', (req, res) => {
    // callback
})

複製代碼

superagent，cheerio請求和處理網站數據

使用superagent插件請求網絡數據，根據返回的網站信息獲取網站代碼，分析網站代碼獲取本身想要的信息，進行提取。通常的爬蟲規則就是基於此種狀況，這是最簡單的爬蟲，操做手法都是相同的，後續是處理爬取到的內容進行數據處理。

使用cheerio對請求回來的出去進行處理，其api和jQuery的api基本一致，會使用jQuery能夠直接使用。

通常使用:

// server/api.js

// 引入
const superagent = require('superagent')

// 使用
superagent.get(請求地址).end((err, response) => {
    if(err){
        // 處理錯誤
    }
    // 這裏對獲取的內容進行處理,使用cheerio定義一個變量，能夠參考cheerio的使用 
    let $ = cheerio.load(reponse.text)

    // 下面就是對獲取的內容進行處理了，獲取本身想要的數據保存到一個變量中
    let obj = {}

    // 這步是把數據返回給請求的接口，這是前端可以拿到的數據
    res.send({data: obj})

})


複製代碼

其中server/userInfo.js這裏面的代碼是和上面一至的，請求頁面獲取不一樣的信息，返回給前端。這樣一來經過接口就能調取到想要的數據，前端拿到數據，將數據渲染到頁面。

到這裏關於這個項目裏面用到的node的東西都說的差很少了，只是簡單介紹下，是怎麼處理先後臺的關係的，這種是先後臺分開來作的，後臺處理業務邏輯server文件夾下的，前端進行頁面方面的處理，前端通常不對數據進行處理，拿來就行進渲染。這裏也能夠把爬蟲獲取的數據換掉，使用mongodb進行後臺數據庫的操做，效果是同樣的，以前作過這方面的嘗試，複雜的業務邏輯很差寫，一些簡單的增刪改查仍是很容易的，須要的能夠參考我以前寫的項目vue-node-mongodb