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

小喵的唠叨话：寒假的时候写了一个漫画爬虫，爬取了好几个漫画，不过一直没有找到合适的漫画阅读的工具。因此最近就试着自己写一个漫画的网站，放在公网上或者局域网里，这样就能随时随地用手机、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 ）。另外，大型的漫画网站，漫画的信息应该会存到数据库中，这样会方便查找和管理。这里考虑到漫画数目比较少，就去掉了数据库这一步骤，直接通过文件操作来得到漫画信息，工作量也大大减少了。

 

先看一下最终的效果图（虽然界面很简单）：



图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": {
    "expres