用Vue.js搭建一个小说阅读网站

目录

1.简介

2.如何使用vue.js

3.部署api服务器

4.vue.js路由配置

5.实现页面加载数据

6.测试vue项目

7.在正式环境部署

 

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即可

 

 

 

 

 

 

关键词:vue 项目 js 一个 我们 页面 数据 小说 api npm

相关推荐:

Vue.js-05:第五章 - 计算属性与监听器

SVN 客户端的使用

记录自己使用GitHub的点点滴滴

js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)

vue2.0+Element-ui实战案例

Vuex的基本概念、项目搭建、入坑点

分布式系统监视zabbix讲解三之用户和用户组--技术流ken

Monent.js:强大的日期处理类库

zabbix-------通过阿里云语音服务实现电话报警

Webstrom 中写Vue没有代码提示如何解决?