简易漫画网站搭建-漫画喵Server版

简易漫画网站搭建-漫画喵Server版本文实现了一个简单的个人漫画网站,配合之前的漫画爬虫使用。享受无处不在的漫画生活。github地址:https://github.com/miaoerduo/cartoon-cat-server

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

小喵的唠叨话:寒假的时候写了一个漫画爬虫,爬取了好几个漫画,不过一直没有找到合适的漫画阅读的工具。因此最近就试着自己写一个漫画的网站,放在公网上或者局域网里,这样就能随时随地用手机、Pad看漫画了。

 

先放上项目的地址:https://github.com/miaoerduo/cartoon-cat-server ,欢迎大家随时star、fork和指教。

关于漫画爬虫的内容,请参看之前的博客:http://www.miaoerduo.com/python/爬虫-漫画喵的100行逆袭.html

 

本文系原创,转载请注明出处~

小喵的博客:http://www.miaoerduo.com

博客原文:http://www.miaoerduo.com/nodejs/简易漫画网站搭建-漫画喵server版.html ‎

 

写在前面

这里,我们先试着思考几个问题:

1、为什么要做一个漫画网站,而不是APP呢?

小喵最开始其实是打算做一个QT的漫画阅读软件,这样能够在各种操作系统上用。开发了一小段时间之后,觉得用手机或者Pad看漫画的情况会更多。难道要给手机、平板甚至是PC都编写一套软件吗?这个小喵确实能力上达不到。其次是,如果是本地的APP的话,图片可能还是需要存到设备上,这样同样很麻烦。于是,漫画网站就成为最适合的选择,只要在联网的情况下(或者在同一个局域网中),只要有浏览器,就能够看漫画。这才是真正的跨平台,也是小喵要编写这个工具的原因。

2、那么,一个简单的漫画网站可以怎么去实现呢?

讲道理的话,其实单纯的静态的网页可能就足够了,给每个漫画图片编写一个页面,包含图片、下一页、上一页等部分就可以。页面的生成可以是一个脚本程序。不过这样的话,也有点麻烦,而且最终的页面的数目可能会很多。小喵不喜欢这种方式。
这里,小喵采用的方式是前、后端分离的方式。
整个网站由三个部分组成:

  • 数据:也就是漫画本身。
  • 后台:后台程序的功能是根据请求返回用户漫画的列表、章节和图片URL等信息。
  • 前端:调用后台的程序,得到漫画的信息并友好的进行显示。

3、最后,我们使用什么技术来实现呢?

前端的话,使用标准的Html,Css和Js就可以。后台是个API Server,Python + Flask 或者 Nodejs + Express 都是不错的选择(使用起来很简单。。。),小喵这里就选用 Nodejs + Express 的方式编写后台(一直写Js就可以了 :P )。另外,大型的漫画网站,漫画的信息应该会存到数据库中,这样会方便查找和管理。这里考虑到漫画数目比较少,就去掉了数据库这一步骤,直接通过文件操作来得到漫画信息,工作量也大大减少了。

 

先看一下最终的效果图(虽然界面很简单):

简易漫画网站搭建-漫画喵Server版

图1 网站的最终效果图

现在,喵粉们是不是已经迫不及待的想要动手写代码了呢?

一、目录结构

下面是小喵的目录结构:

$ tree blog -N -L 2
blog
├── README.md
├── main.js
├── package.json
└── public
    ├── api.html
    ├── cartoon.html
    ├── chapter.html
    ├── css
    ├── img
    ├── index.html
    ├── js
    └── store

main.js 这里就是后台API的程序。因为功能很简单,所以就放在一个文件中。

package.json 是nodejs的包管理器,在这里可以定义依赖。我们这里只依赖Express。

public 这个文件夹用来存放静态的资源,包括Html、Css、js、image以及漫画资源(store)。

二、后台程序

1. 依赖安装

原生的 Nodejs 就已经十分适合写API程序了,Express 只是让它更加的方便了而已(至少对于这个项目来说)。

Nodejs 的安装十分简单,在官网上 https://nodejs.org 有下载链接,服务器上使用 apt-get 等工具也很容易安装。

Express 的话,可以使用npm install express —save 来安装。这里小喵使用的package的方式来安装。在项目根目录新建package.json文件,写入配置信息:

{
  "name": "cartoon-cat-server",
  "version": "0.0.1",
  "dependencies": {
    "express": "visionmedia/express"
  }
}

之后使用 npm install 命令就可以完成安装。安装完成之后会发现根目录多了一个 node_modules 文件夹,里面就是我们的依赖库了。喵粉们如果下载了我的这个项目的话,第一步也是要进入项目目录然后输入 npm install

2. 漫画的文件结构

我们的漫画资源都是通过 漫画喵 这个爬虫工具下载下来的,因此漫画都是每个章节都是一个文件夹,每个章节的漫画图片都放在对应的文件夹中,而且按照页码来命名。

这样通过遍历文件夹似乎就能获取漫画的信息了!

漫画列表和章节中的图片列表都可以通过上述的方式来解决,但是章节的列表却不行。因为漫画的章节有时候并没有明确的顺序(比如突然出现一个番外篇啥的),这样遍历文件夹默认的顺序(按名称)就可能是错误的。

我们有两个解决办法:

  1. 按照文件夹的创建时间来显示文件名。这样有点不灵活。
  2. 在每个漫画的根目录建一个文本文件,用来存放章节的信息。

小喵选择第二种策略,创建这个list的方法十分简单粗暴,在漫画目录下面使用:

ls -t -r > index

ls 是linux上面的显示目录的工具,-t 表示按时间排序(最上面是最新的),-r 表示倒序,> 是重定向,最终输出到index这个文件。然后编辑这个文件,删掉index这一行(系统貌似是先生成index这个文件,然后再执行ls,最后把结果输入到文件中,因此文件里面多了一个index的文件名),再做一些必要的调整。

Windows上可以使用:

dir /OD /B > index

dir 是windows的查看目录的命令,/OD 表示按照时间排序,/B 表示只显示文件名,> 重定向到index。windows上的这个列表文件中也会出现index这个文件名(看来各种操作系统都一样)。另外需要注意的是windows的换行和linux或mac不一样。

这样,我们就可以通过读这个index文件来获取章节的信息了。

最终的漫画的结构(为了显示的方便,删除了很多图片和章节)如下:

$ tree store -N -L 3
store
├── 犬夜叉
│   ├── index
│   ├── 第1章
│   │   ├── 00001.jpg
│   │   └── 00002.jpg
│   └── 第2章
│       ├── 00001.jpg
│       └── 00002.jpg
└── 极黑的布伦希尔特
    ├── index
    ├── 第1章
    │   ├── 00001.jpg
    │   └── 00002.jpg
    └── 第2章
        ├── 00001.jpg
        └── 00002.jpg

3. API 编写

Express十分的容易使用。这里小喵给一个官网的Hello World的教程让大家看一下:

var express = require('express')
var app = express()

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

将上述代码保存成 main.js,使用 node main.js 就可以启动这个程序,然后用浏览器访问 http://localhost:3000 ,就能看到一个显示着 hello world 的页面。

require 语句用来引入依赖,app 是express的封装的对象。通过 app.get 方法就可以给指定的url(官方说法叫route)绑定相应的处理方法(GET方法的请求)。处理函数有2个参数 req 表示request,也就是用户的请求,通过这个对象我们可以获取用户的输入的参数,res 表示response,是一个向用户返回数据的对象。

listen 用来监听一个端口启动服务。

 

这里小喵先给出自己定义的一些辅助的函数,定义错误信息和参数校验,后面会使用到:

// 引入依赖
var express = require('express');
var fs = require("fs"); // 即file system,用来进行文件操作
var app = express();

/**
 * 错误提示
 */
var ErrorHelper = {
    'internal_error': function () {
        return {
            'msg': 'something wrong with server',
            'code': 1
        };
    },
    'missing_param': function (param) {
        return {
            'msg': 'missing param: ' + param,
            'code': 2
        };
    },
    'error_param': function (param, data) {
        return {
            'msg': 'the param ' + param + '(' + data + ') is illegal',
            'code': 3
        }
    },
    'not_found': function (param) {
        return {
            'msg': 'cannot find ' + param,
            'code': 4
        };
    }
};

/**
 * 检查参数格式,只能输入字母,数字和汉字
 */
function checkParam(param) {
    return /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(param);
}

1) get_cartoon_list

这个接口用来获取所有的漫画列表。

/**
 * 获取漫画列表
 */
app.get('/get_cartoon_list', function (req, res) {
    fs.readdir(__dirname + '/public/store', function (err , files) {
        if (err) {
            res.jsonp(ErrorHelper.internal_error());
        }
        res.jsonp({'cartoon': files, 'code': 0});
    });
});

这个函数十分的简单,通过 fs 读取store中的文件名,然后用json的格式返回回去。这里小喵用的jsonp,为了解决跨域请求的问题,不过我们的页面和服务是一台机器的,所以这部分并不需要。

2) get_chapter_list

这个接口用来获取漫画的章节的信息,所以需要输入参数,这里定为cartoon。

/**
 * 获取章节信息
 */
app.get('/get_chapter_list', function (req, res) {

    var cartoon = req.query.cartoon;
    if (!cartoon) {
        res.jsonp(ErrorHelper.missing_param('cartoon'));
        return;
    }

    if (!checkParam(cartoon)) {
        res.jsonp(ErrorHelper.error_param('cartoon', cartoon));
        return;
    }
    var cartoon_dir = __dirname + '/public/store/' + cartoon;
    fs.exists(cartoon_dir + '/index', function (exists) {
        if (!exists) {
            res.jsonp(ErrorHelper.not_found(cartoon));
            return;
        }
        fs.readFile(cartoon_dir + '/index', function (err, data) {
            if (err) {
                res.jsonp(ErrorHelper.internal_error());
                return;
            }

            var chapter_list = data.toString().split('\n').filter(function (d) {
                return d.length > 0;
            });

            res.jsonp({'chapter': chapter_list, 'code': 0});
        });
    });
});

首先判断输入的参数,之后判断对应漫画的文件夹中是否有index这个文件,如果有的话就读取然后返回给用户。

3) get_img_list

这个接口用来返回漫画的具体章节的图片的URL,用户需要输入漫画名(cartoon)和章节名(chapter)。注意要修改自己的HOST的地址。

var HOST = "localhost"; // 如果不是在本机上使用,请改成实际的ip地址
                        // 后面的图片的URL会使用这个变量来构造
var PORT = 3000;

app.get('/get_img_list', function (req, res) {

    var cartoon = req.query.cartoon;
    if (!cartoon) {
        res.jsonp(ErrorHelper.missing_param('cartoon'));
        return;
    }
    if (!checkParam(cartoon)) {
        res.jsonp(ErrorHelper.error_param('cartoon', cartoon));
        return;
    }
    var chapter = req.query.chapter;
    if (!chapter) {
        res.jsonp(ErrorHelper.missing_param('chapter'));
        return;
    }
    if (!checkParam(chapter)) {
        res.jsonp(ErrorHelper.error_param('chapter', chapter));
        return;
    }

    var cartoon_dir = __dirname + '/public/store/' + cartoon;
    fs.exists(cartoon_dir + '/index', function (exists) {
        if (!exists) {
            res.jsonp(ErrorHelper.not_found(cartoon));
            return;
        }
        fs.readdir(cartoon_dir + '/' + chapter, function (err, images) {
            if (err) {
                res.jsonp(ErrorHelper.error_param('chapter', chapter));
                return;
            }
            // 按名字排序
            images.sort(function (lhs, rhs) {
                return parseInt(lhs.split('.')[0]) - parseInt(rhs.split('.')[0]);
            });

            var urls = images.map(function (image) {
                return 'http://' + HOST + ':' + PORT + '/store/' + cartoon + '/' + chapter + '/' + image;
            });
            res.jsonp({'img': urls, 'code': 0});
        });
    });
});

这是目前最复杂的函数了,先检查参数,然后判断漫画是否存在,再判断章节是否存在,列出章节文件夹里面的图片名,并按数字的顺序排序。最终构造成URL,返回给用户。

4) 静态资源

public文件夹中的资源都是静态资源,用户可以通过URL访问。在这里Nodejs也是支持的:

app.use('/', express.static('public'));

不过Nodejs本身并不适这种静态资源的工作,所以如果是生产环境中,建议大家还是使用Nginx等工具,让Nodejs安心的处理业务逻辑吧。

5) 启动服务

var server = app.listen(PORT, function () {
    console.log("应用实例,访问地址为 http://%s:%s", HOST, PORT);
});

三、前端

1. Ajax

前端使用Ajax就可以很容易完成,相信即使是前端小白也能实现,而且还比小喵做的好看(无奈脸)。小喵使用了JQuery 来处理Ajax的内容,界面库使用了Metro,然而即使这样也没有提高网站的颜值。

源码可以从github上下载到,所以小喵就不重点介绍前端了。

2. 懒加载

有一点需要注意,在漫画图片的页面中,通常会出现大量的图片,如果只是简单的使用 img 标签的话,可能会导致浏览器同时加载所有的图片,如果网速不好的话,我们的体验也会相当的差(局域网请无视)。所以我们使用一种懒加载的策略,只有可见的图片才会加载。然后小喵就从github上找相关的插件,然后发现了一个使用比较方便的代码,还有详细的原理介绍,感兴趣的话大家可以看一下。

图片懒加载插件实战:http://www.cnblogs.com/beidan/p/5648240.html
插件的github:https://github.com/beidan/lazeLoadImg

四、写在后面

至此,我们就搭建好了一个可以随时玩耍的个人漫画网站了。喵粉们感兴趣可以star、fork这个项目,如果喜欢开发的话,能帮忙一起提高网站的颜值就更好了 O(∩_∩)O哈!

项目地址:https://github.com/miaoerduo/cartoon-cat-server ,欢迎大家随时star、fork和指教。

PS. 请搭配漫画喵爬虫版一起食用:https://github.com/miaoerduo/cartoon-cat

使用的话,按如下的流程:

git clone git@github.com:miaoerduo/cartoon-cat-server.git
cd cartoon-cat-server
npm install
node main.js

另外,为了避免程序突然崩掉,建议大家使用forever这个工具。上面的流程的最后一句node main.js就可以改成下面的。

npm install forever -g
forever start main.js

这样,我们的程序就更健壮了。

最后,小喵再说一句,这个项目有很多的缺陷,比如直接访问文件,Nodejs直接管理静态文件,需要提供奇怪的参数,没有验证用户等等。因此不适合真的生成中的使用。不过,自娱自乐应该是足够了。小喵自己是放在宿舍的树莓派里,睡前躺床上看会儿漫画。

 

觉得不错的话,请点个大大的推荐~~

 

希望小喵能和大家一起学习和进步~~ 

 

 

转载请注明出处~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168018.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号