可转债列表页与日频交易数据呈现：fastapi+antV G2

百天计划之第36篇，关于“AI量化智能投研平台”建设。

目标可以很大，行动要聚焦且具体。

把一件件小事做成，做出价值点就可以了。

好奇心可以很重，也可以探索很多新鲜的知识，但需要围绕一个主线。

好比明星可以各种参加综艺，体验生活，但长线看一定要有代表作一样。

前面的文章，我们介绍了把可转债基础数据和交易数据采集并入mongo，qlib数据库。

在这个基础上，我们可以开始做一些基础的投资分析了。

今天的主要内容：fastapi后端渲染模板，可转债列表页和详细页。这是分析任何投资标的的第一步。

01 fastapi后端渲染模板

当前流行“前后端分离”的开发模式，前端是vue/react这样的框架，后端仅提供api。为了极简（与投资研究相关度低的技术简化），我们选择后端渲染与前端驱动并行（不使用node.js，但可以使用vuejs）。

fastapi使用jinja2，安装命令如下：

pip install jinja2 pip install aiofiles # 适用于FastAPI

当前根目录新建文件夹templates，其实可以叫任意名字，只是flask约定叫这个，这样做大家看起来更熟悉。

app = FastAPI()
templates = Jinja2Templates(directory="templates") # 实例化Jinja2对象，并将文件夹路径设置为以templates命令的文件夹

在templeates新建index.html。

@app.get("/")
def index(request: Request):
    return templates.TemplateResponse(
        'index.html',
        {
            'request': request,  # 注意，返回模板响应时，必须有request键值对，且值为Request请求对象
            'name': 'Fastapi!!!'
        }
    )

这里使用起来与Flask差不多，只是Flask内置了Jinja2，约定了模板目录，而Fastpapi需要安装一下并且导入功能。

02 Fastapi里使用static

根目录下新建static文件夹，把需要引用的静态文件拷贝进来，css， js，images，fonts之类的。

static目录需要挂载：

app.mount("/static", StaticFiles(directory="static"), name="static")

其余的用法与flask类似，可以继承和扩展extends。

url_for的指令需要注意， 在flask里是filename，而fastapi里是path，其余都一样

一个基于boostrap的网页就呈现出来了：

fastapi背后的框架starlette，可能参考如下地址的说明：

https://www.starlette.io/templates/

03 可转债列表页

使用表格把可转债列表呈现出来，做投资第一步，我们至少了解一下有多少支标的可以交易。

04 可转债详情页——交易序列

详情页里最基础功能，就是可视化交易时间序列。

时间序列我们选择antV里的G2，纯粹感觉比echart好看。

官方文档如下：

https://g2.antv.vision/zh

通过cdn的方式引入，直接使用G2的折线图，用jquery的$.ajax功能读远程数据：

小结：

投资第一步，把投资标的列表和交易序列先呈现出来。

明天继续针对列表做横向的分析，比如当下可交易的有多少支，低价的有多少支等等进行筛选。

我们会发现，数据是不够的，比如我们还需要“正股价”，“转股价”。

需要查询400支可转债的动量时，就需要qlib的数据库功能等等，我们按需求来一步步开发。

最近文章：

fastapi定时任务，增量构建可转债交易数据入mongo和qlib

fastapi+mongo+qlib：体系化构建AI量化投研平台

持续行动，做成一件件小事

关于作者：

飞狐，科技公司CTO，用AI技术做量化投资；以投资视角观历史，解时事；专注个人成长与财富自由。