Flask+d3.js地图开发：JSON读取方法及world.json 404问题解决

嘿，我来帮你搞定这个Flask结合d3.js做地图可视化时遇到的问题！先看你的错误日志：

127.0.0.1 - - [29/Apr/2019 14:33:41] "GET /world.json HTTP/1.1" 404 -

这个404是因为Flask找不到world.json的正确访问路径，结合你的文件位置和代码配置，咱们一步步拆解解决：

一、先搞定world.json的404问题 #

你说world.json存在temp文件夹里，但你的Flask app初始化代码写的是：

app = Flask(__name__, static_url_path = "/tmp", static_folder = "tmp")

这里有两个明显的问题：

1. 你的实际文件夹叫temp，但配置里写的是static_folder = "tmp"（少了一个字母e），路径不匹配，Flask肯定找不到文件；
2. 就算路径对了，当前配置下，静态文件的访问URL应该是/tmp/world.json，而不是你现在请求的/world.json，这也是触发404的原因。

修正方案选其一就行： #

方案1：调整静态文件夹配置（推荐）

如果想把world.json这类静态资源放在temp文件夹，修改app初始化代码：

# 把static_folder改成实际的"temp"，static_url_path设为常规的"/static"更易维护
app = Flask(__name__, static_url_path="/static", static_folder="temp")

之后在d3.js里访问这个文件的路径就要改成：

d3.json("/static/world.json").then(function(mapData) {
  // 这里处理地图数据渲染逻辑
});

方案2：新增专门路由返回world.json

如果不想调整静态文件夹配置，也可以写一个简单的路由直接读取并返回这个JSON文件：

import json

@app.route('/world.json')
def return_world_map_data():
    with open('temp/world.json', 'r', encoding='utf-8') as f:
        map_data = json.load(f)
    return jsonify(map_data)

这样d3.js里直接用d3.json("/world.json")就能正常请求到数据了，不用改其他配置。

二、Flask环境中JS读取JSON的两种常用方式 #

1. 直接访问静态JSON文件（适合固定资源，比如地图底图数据） #

就像上面方案1那样，把JSON放在Flask配置的静态文件夹里，JS通过对应的URL直接请求，优点是简单直接，不需要额外写路由逻辑。

2. 通过Flask动态接口返回JSON（适合动态生成的数据，比如你的file.json） #

比如你在kuch函数里生成的adminWorkOutput/file.json，可以写一个接口路由返回它：

@app.route('/api/get-similar-data')
def get_similar_news_data():
    with open('adminWorkOutput/file.json', 'r', encoding='utf-8') as f:
        similar_data = json.load(f)
    return jsonify(similar_data)

然后在JS里请求这个接口：

d3.json("/api/get-similar-data").then(function(data) {
  // 处理相似新闻的数据，关联到地图上
});

三、给你提两个小细节建议 #

1. 你的kuch函数里，else分支里直接用tfidf = models.TfidfModel(corpus)，但这里corpus还没初始化，运行到这里会报错，记得补充生成corpus和dictionary的逻辑；
2. 尽量遵循Flask的默认规范，把静态资源放在项目根目录的static文件夹下，这样可以不用额外配置static_folder，访问路径就是/static/xxx，更不容易踩路径坑。

调整完之后重启Flask服务，再测试地图可视化功能，应该就能正常加载world.json了！

内容的提问来源于stack exchange，提问作者Muhammad Hämzah