用Vue.js搭建一个小说阅读网站
目录
1. 简介
2. 如何使用 vue.js
3. 部署 api 服务器
4.vue.js 路由配置
5. 实现页面加载数据
6. 测试 vue 项目
7. 在正式环境部署
8.Vue 前端代码下载
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/
2. 安装 Node.js，因为我们需要使用 npm 进行编译，下载地址：http://nodejs.cn/download/
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 项目开发了 (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 即可
8.Vue 前端代码下载
你们不能怪我没传到博客园，这个要博客园背锅，我是有证据的，如下图！
然后我就去 csdn 传了，需要 1 积分下载，嗯，这也不能怪我，csdn 去背锅吧！
下载地址：https://download.csdn.net/download/u010418661/10776344
我的博客即将同步至腾讯云 + 社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3ckelci0aw4kk