用V(′?_?`)ue.js搭建一個(gè)小說(shuō)??閱讀網(wǎng)站（看完不收藏的搭建讀網(wǎng)的都都是壞人）

目(′?ω?`)錄

1.簡(jiǎn)介

2.如何使用vue.js

3.部署api服務(wù)器

4.vue.js路由配置??

5.實(shí)現頁(yè)面加載數據

6.測試vue項( ?▽?)目

7.在正式環(huán)境部署

8.V??ue前端代碼下載

1.簡(jiǎn)介

這是一個(gè)使用vue.js + mint-u┐(′ー｀)┌i + .net core api的小說(shuō)網(wǎng)站。

最近在學(xué)習vue.js，說(shuō)┐(′д｀)┌閱收藏而拋開(kāi)實(shí)踐??(?Д?)的壞人學(xué)習都是在裝逼，所以結合實(shí)際，搭建讀網(wǎng)的都(???)準備做一個(gè)小說(shuō)網(wǎng)站，說(shuō)閱收藏這樣麻麻再也不用擔心我在看小說(shuō)時(shí)被不良信息侵擾了哈哈。壞人

首先說(shuō)明一下，搭建讀網(wǎng)的都小說(shuō)數據來(lái)源于網(wǎng)絡(luò )搜索，說(shuō)閱收藏并不直接存儲于自己的壞人服務(wù)器中，所以，搭建讀網(wǎng)(′?｀*)的都這是說(shuō)(′▽?zhuān)?閱收藏一個(gè)實(shí)時(shí)爬小說(shuō)數據的網(wǎng)站。

應為這里是壞人要說(shuō)vue.js的部署，所以具體的搭建讀網(wǎng)的都爬數據我是不會(huì )寫(xiě)出來(lái)的，當然了，說(shuō)閱收藏具體在哪里爬數據，壞人我也不會(huì )說(shuō)明，請大家諒解。

2.如何使用vue.js

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

1.(//ω//)直接引用js

2.用vue cli生成vue項目

我覺(jué)得啊，第一種比較簡(jiǎn)單，可以直接與現有項目??結合，因為前后端都在一個(gè)項目中，所以服務(wù)器也??只有一個(gè)。第二(er)種比(′?_?`)較復雜，需要安裝一些vue.js的環(huán)境，然后生成(╯°□°）╯︵ ┻━┻獨立的前端項目，所以(′?ω?`)部署的時(shí)候，需要一個(gè)前端服務(wù)器和一個(gè)后端api服務(wù)器，所以需要兩個(gè)服??務(wù)器。

不過(guò)，為了學(xué)習vue，我在這里用的是第二種方式。那么對于一個(gè)新手，我們要怎??么入門(mén)呢？

ps：博主使用的環(huán)境是windows 10

1.首先，我們安裝Visual Studio Code，用VsCode來(lái)開(kāi)(╬?益?)發(fā)vue項目，下載地址：https://code.visualstudio.com/

2.安裝Node.js，因為我們需要使用npm進(jìn)行編譯，下載地址：http:/(′ω｀)/nodejs.cn/downloa???d/

3.安裝完VsCode和N(′?｀)ode.js后，我們打開(kāi)VsCode，點(diǎn)擊“新建終端”，如下圖：

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

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

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

PS:這一步你會(huì )發(fā)現，在MyFirstVueProjec(′?｀*)t文件夾中，多出了許多文件，這些文件也就(jiu)構成了你的vue項目

6.進(jìn)入項目文件夾，在??終端中輸入命令：cd C:/??/MyF??irstVueProject

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

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

以上的步驟完成后，你就可以打開(kāi)VsC??ode，(′ω｀)開(kāi)始對你的vue項目開(kāi)發(fā)了(vue開(kāi)發(fā)文檔)。貼一張我的項目結構圖：

3.部署API服務(wù)器

因為前后端是兩個(gè)服務(wù)器，所以，這里我們還需要一個(gè)(ge)api項目，向前端提供數據支持，這里(′；д；`)我用的是.net core，代碼就不寫(xiě)了。

先看看項目結構和搜索功能的控制器吧：

所以，我其實(shí)只提供了3個(gè)api：

查詢(xún)： /api/SearchNovel??/{ text}

小說(shuō)目錄：/api/g??etcategory/{ category}/{ guid}

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

編譯完成后，部署到服務(wù)器中，如圖：

以上數據是后面會(huì )用到的。

4.vue.js路由配置

現在，我們繼續我們的vue開(kāi)發(fā)吧~

現在，我們要??配置路由，使u??rl匹配上頁(yè)面，讓頁(yè)面跳轉正常進(jìn)行(xing)。

具體配置如下：

在右邊的代碼中，我注釋掉了一個(gè)mode屬性，它的值是history。

一開(kāi)始使用history是因為url中會(huì )出現#符號，如下圖：

因為覺(jué)得這個(gè)難看，所以將mode值設置成了hist(╬?益?)ory。然而這么設置之后，又出現了新的問(wèn)題。在我閱讀小說(shuō)的時(shí)候，如果將該頁(yè)面保存成書(shū)簽，通過(guò)書(shū)簽再進(jìn)來(lái)，發(fā)現出現404錯誤，為(??-)?什么？

原來(lái)(′?｀*)是因為這個(gè)url是個(gè)假地址，直接通過(guò)url進(jìn)來(lái)，因為當前頁(yè)面沒(méi)有路由信息，所以會(huì )??導致404的問(wèn)題。于是乎，我將此段代碼注釋掉了。算了，難看就難看點(diǎn)吧。

還有一個(gè)要劃重點(diǎn)，那就(jiu)是代碼中s(′?ω?`)crollBehavior屬性，按照圖中設置，可以使頁(yè)面跳轉后，滾動(dòng)條始??終保持在頂端。

5.實(shí)現頁(yè)面加載數據

路由配置完了，說(shuō)明頁(yè)面可以正常跳轉了，接下來(lái)該是數據的顯示了，話(huà)不多說(shuō)(′?｀)，直接上圖，紅框標注重點(diǎn)??~，我們以小說(shuō)正文頁(yè)面為例：

created是頁(yè)面加載時(shí)會(huì )調用的方法，在這??里，我們去獲取數據就可以了。

但是在點(diǎn)擊下一頁(yè)后，頁(yè)面的位置好像不對，不是在最頂端，前面不是說(shuō)過(guò)在路由設置屬性就可以了嗎？其實(shí)還少了一步，如下圖：

6.測??試vue項目

這里，我們需要??將api服務(wù)器ip給設置一下，如下圖：

我們通??過(guò)proxyTable進(jìn)行請求轉發(fā)，將以/api/開(kāi)頭的請求，全部轉發(fā)到localhost:5┐(′ー｀)┌001上， 因為這個(gè)是https的，所以需要設置secure。

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

項目就能運行了，終端會(huì )出現網(wǎng)站地址。

7.在正式環(huán)境部署

正式環(huán)境與測試環(huán)境不同，正式環(huán)境不能使用(/ω＼)proxyTable，如此一來(lái)，我們要通過(guò)相同url來(lái)解決跨域，就需要用到一些請求轉發(fā)的工具，這里我用的是ヽ(′▽?zhuān)?ノn(???)ginx。

1.部署vue站點(diǎn)

1.先在IIS中配置一個(gè)站點(diǎn)

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

將項目的dist文件夾中的所有內容復制到站點(diǎn)根目錄。

2.使用ngin??x轉發(fā)ヽ(′▽?zhuān)?ノ請求

為什么要轉發(fā)(??-)?請求？

答：為了避免數據來(lái)源與頁(yè)面來(lái)源不一致，出現跨域的問(wèn)題。

PS：這里我并沒(méi)有(you)處理cookie的問(wèn)題，因(//ω//)為沒(méi)有用到，??有(?????)cookie需求請自行百度。

首先我們下載一個(gè)nginx的zip文??件，解壓。

修改conf文件夾下的配(′?_?`)置文件，如圖：

3.效果預覽

訪(fǎng)問(wèn)10.1.73.14:1800即可

8.Vue前端代碼(′?｀*)下載

你們不能怪我沒(méi)傳到博客園，這個(gè)要博客園背鍋，我( ?ω?)是有證據的??，如下圖??！