1.簡介

這是一個使用vue.js + mint-ui + .net core api的小說網站。

最近在學習vue.js，而拋開實踐的學習都是在裝逼，所以結合實際，準備做一個小說網站，這樣麻麻再也不用擔心我在看小說時被不良資訊侵擾了哈哈。

首先說明一下，小說資料來源於網路搜尋，並不直接儲存於自己的伺服器中，所以，這是一個實時爬小說資料的網站。

應為這裡是要說vue.js的部署，所以具體的爬資料我是不會寫出來的，當然了，具體在哪裡爬資料，我也不會說明，請大家諒解。

2.如何使用vue.js

vue.js的使用有兩種方式：

1.直接引用js

2.用vue cli生成vue專案

我覺得啊，第一種比較簡單，可以直接與現有專案結合，因為前後端都在一個專案中，所以伺服器也只有一個。第二種比較複雜，需要安裝一些vue.js的環境，然後生成獨立的前端專案，所以部署的時候，需要一個前端伺服器和一個後端api伺服器，所以需要兩個伺服器。

不過，為了學習vue，我在這裡用的是第二種方式。那麼對於一個新手，我們要怎麼入門呢？

ps：博主使用的環境是windows 10

1.首先，我們安裝Visual Studio Code，用VsCode來開發vue專案，下載地址：https://code.visualstudio.com/

3.安裝完VsCode和Node.js後，我們開啟VsCode，點選“新建終端”，如下圖：

在終端命令列中輸入命令安裝cnpm（中國的npm映象）：npm install -g cnpm --registry=https://registry.npm.taobao.org

ps：如果下面的命令無法執行，請將所有npm改為cnpm。

4.安裝vue編譯器vue-cli，在終端中輸入命令：npm install -g vue-cli

5.安裝webpack並初始化目錄，在終端中輸入命令：vue init webpack C://MyFirstVueProject

PS:這一步你會發現，在MyFirstVueProject資料夾中，多出了許多檔案，這些檔案也就構成了你的vue專案

6.進入專案資料夾，在終端中輸入命令：cd C://MyFirstVueProject

7.安裝mint-ui，在終端中輸入命令：npm i mint-ui --save

8.更新所有npm包，在終端中輸入命令：npm install

以上的步驟完成後，你就可以開啟VsCode，開始對你的vue專案開發了(

3.部署API伺服器

因為前後端是兩個伺服器，所以，這裡我們還需要一個api專案，向前端提供資料支援，這裡我用的是.net core，程式碼就不寫了。

先看看專案結構和搜尋功能的控制器吧：

所以，我其實只提供了3個api：

查詢： /api/SearchNovel/{text}

小說目錄：/api/getcategory/{category}/{guid}

正文：/api/readnovel/{category}/{guid}/{pageGuid}

編譯完成後，部署到伺服器中，如圖：

以上資料是後面會用到的。

4.vue.js路由配置

現在，我們繼續我們的vue開發吧~

看到上面我的vue專案結構了吧，已經有了一些vue頁面了

現在，我們要配置路由，使url匹配上頁面，讓頁面跳轉正常進行。

具體配置如下：

在右邊的程式碼中，我註釋掉了一個mode屬性，它的值是history。

一開始使用history是因為url中會出現#符號，如下圖：

因為覺得這個難看，所以將mode值設定成了history。然而這麼設定之後，又出現了新的問題。在我閱讀小說的時候，如果將該頁面儲存成書籤，通過書籤再進來，發現出現404錯誤，為什麼？

原來是因為這個url是個假地址，直接通過url進來，因為當前頁面沒有路由資訊，所以會導致404的問題。於是乎，我將此段程式碼註釋掉了。算了，難看就難看點吧。

還有一個要劃重點，那就是程式碼中scrollBehavior屬性，按照圖中設定，可以使頁面跳轉後，滾動條始終保持在頂端。

5.實現頁面載入資料

路由配置完了，說明頁面可以正常跳轉了，接下來該是資料的顯示了，話不多說，直接上圖，紅框標註重點~，我們以小說正文頁面為例：

created是頁面載入時會呼叫的方法，在這裡，我們去獲取資料就可以了。

但是在點選下一頁後，頁面的位置好像不對，不是在最頂端，前面不是說過在路由設定屬性就可以了嗎？其實還少了一步，如下圖：

6.測試vue專案

這裡，我們需要將api伺服器ip給設定一下，如下圖：

我們通過proxyTable進行請求轉發，將以/api/開頭的請求，全部轉發到localhost:5001上， 因為這個是https的，所以需要設定secure。

然後在終端中輸入命令：npm run dev

專案就能運行了，終端會出現網站地址。

7.在正式環境部署

正式環境與測試環境不同，正式環境不能使用proxyTable，如此一來，我們要通過相同url來解決跨域，就需要用到一些請求轉發的工具，這裡我用的是nginx。

1.部署vue站點

1.先在IIS中配置一個站點

在終端中輸入命令：npm run build

將專案的dist資料夾中的所有內容複製到站點根目錄。

2.使用nginx轉發請求

為什麼要轉發請求？

答：為了避免資料來源與頁面來源不一致，出現跨域的問題。

PS：這裡我並沒有處理cookie的問題，因為沒有用到，有cookie需求請自行百度。

首先我們下載一個nginx的zip檔案，解壓。

修改conf資料夾下的配置檔案，如圖：

3.效果預覽

訪問10.1.73.14:1800即可