承接上文

我们现在获取到的数据有：

• 游记 JSON 数据和游记图片
• 用户信息 JSON 数据和用户去过的地方 JSON 数据

数据是一切信息型网站的基础，这些数据已经足够我们完成一个基本的网站了。我们可以选择自己开发一套前端 UI 来完成数据的展示，也可以把蝉游记现有的结构套进去。毫无疑问，我选择后者，来尽可能展现蝉游记原貌。


项目选型上直接选择 Flask + Jinja2，简单高效。


第一阶段我们主要完成用户界面和游记页面的开发，跳转方式和蝉游记保持一致。

目录介绍

1
2
3
4
5
6
7
8
9

|____templates                  # 模板文件目录
| |____trip.html
| |____user.html
|____static                     # 资源文件目录
| |____xxxxxx.js                # 依赖文件等
| |____data                     # 用户数据目录
| | |____user_1
| | | |____trip_47891
|____application.py             # 项目主程序

前端改造

首先在在浏览器上分别保存两个网页源码到本地，然后对 HTML 中需要动态的部分使用 Jinja 语法修改为动态的内容，依赖文件下载到本地的 static 目录中，过程比较枯燥就不在这里赘述。简单讲几个遇到的问题：


1、动态替换进 HTML 内容后页面无法滚动。

A：原因是页面中有一些元素是需要使用 JS 动态加载的，而这部分又依赖一些数据，这部分数据是 API 中没有的，可以选择修改 application.js 中的逻辑，或者把这部分数据也爬下来，在展示的动态添加进模板中，我使用的是后者，爬取的内容存在 trip 的 script.js 中。


2、加密游记的获取与展示。

A：在爬取过程中，我们是可以抓到加密的游记的，理论上是可以展示的，但是唯一获取不到的就是上一个问题中的那部分 script，这部分必须要登录才可以获取到，为了美观，我暂时把加密游记过滤掉了，如果之后能解决第一个问题，那么这个问题也可以迎刃而解，或者也可以自己做一套 UI 来展示即可。


3、图片展示 URL 的处理。

A：使用 Jinja 编写一个 filter 将 JSON 中的 URL 修改到 static 目录中对应的地址。


4、数据文件的读取。

A：使用 Python 读取文件时，如果使用相对路径，那这个相对路径不是执行文件所在路径，而是执行脚本的路径。所以为了增强健壮性，最好使用绝对路径。可以使用如下方式来获取到绝对路径。

1
2

import os
root_path = os.path.split(os.path.realpath(__file__))[0]

其他分析

在分析数据的过程中，我发现蝉游记的私密游记实际上并没有做到完全的私密。也就是说数据是可以获取到的，是否展示由客户端来决定，如果是私密游记 API 会同时返回一个加密后的 password。经过对蝉游记 App 的反编译，我发现就是由用户 user_id + ‘_’ + password 然后取 hash 生成的，只要用户输入的密码经过计算与数据一致便可以显示，所以我们完全可以绕过这一步检测 =、=。

项目地址