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

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://www.cnblogs.com/zhuxiaoxiao/p/9933862.html

编辑于

wireboy编程加油站

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享

PDF.js专题

前言     英文是github上的原文,找不到中文资料,我根据自己理解翻译的,有些词意思拿不准就直接把单词留在原地了,看这个文档应该可以凑合着用了。 PDF....

1.5K10
来自专栏FreeBuf

一款短小精致的SSH后门分析

0x00. 引言 在《利用系统特性伪装成一个免密登陆后门》一文中,我介绍过利用系统特性伪装成一个ssh系统后门,不过,这个后门需要新开一个端口,而本文介绍的这个...

3344
来自专栏blackheart的专栏

[OIDC in Action] 1. 基于OIDC(OpenID Connect)的SSO

在[认证授权]系列博客中,分别对OAuth2和OIDC在理论概念方面进行了解释说明,其间虽然我有写过一个完整的示例(https://github.com/lin...

36210
来自专栏专知

Python网络爬虫与信息抽取笔记02 HTTP协议介绍

1332
来自专栏24K纯开源

Windows下程序打包发布时的小技巧

一、背景     Windows下开发的应用程序在发布时,需要将其依赖的一些动态链接库一起打进安装包里面去。这个时候,快速确定这个程序到底依赖哪些动态链接库变得...

2546
来自专栏运维

Nginx1.10.2稳定版本tcp四层负载安装配置过程略解

nginx1.10.2(2016.10.18)是最新稳定版,适合线上运行,最新开发版为1.11.8(2016.12.27)

1151
来自专栏互联网技术栈

Redis 队列

举例: 队列主要用在系统解耦、流量削峰、异步处理、数据顺序处理等场景。新手在使用时可能会犯一些常见的错误。下面讲一个新手容易犯的错误,在这个示例中把队列的入...

3675
来自专栏Coding迪斯尼

java开发操作系统:一个程序向另一个程序伸出的咸猪手

1634
来自专栏沈唁志

解决 TP3 框架 引入 Log.class.php 文件报错方法

朋友的这个问题真的很无语,可能会出现在使用 SVN 的情况下,使用 Git 进行团队开发忽略以后是不会出现这种问题的

2061
来自专栏漫漫全栈路

Nginx配置文件nginx.conf详解

最近折腾Ubuntu比较多,也基本原理了Windows和IIS了,论一个软狗的堕落史。既然换到Ubuntu系统上来,勉强算个web开发人员的我当然用的最多的就...

5957

扫码关注云+社区

领取腾讯云代金券