百天計劃之第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，其餘都一樣
<!-- Bootstrap -->
<link href="{{url_for('static',path='css/bootstrap.min.css')}}" rel="stylesheet"> 一個基于boostrap的網頁就呈現出來了：
fastapi背後的架構starlette，可能參考如下位址的說明：
https://www.starlette.io/templates/
03 可轉債清單頁
使用表格把可轉債清單呈現出來，做投資第一步，我們至少了解一下有多少支标的可以交易。
04 可轉債詳情頁——交易序列
詳情頁裡最基礎功能，就是可視化交易時間序列。
時間序列我們選擇antV裡的G2，純粹感覺比echart好看。
官方文檔如下：
https://g2.antv.vision/zh
通過cdn的方式引入，直接使用G2的折線圖，用jquery的$.ajax功能讀遠端資料：
<script src="{{ url_for('static',path= 'js/g2.min.js')}}"></script>
<script>
$.ajax({
// 後端程式的url位址
url: '/bond_daily/{{bond.ts_code}}',
// 也可以使用method，送出資料的方式，預設是'GET'，常用的還有'POST'
type: 'get',
dataType: 'json', // 傳回的資料格式，常用的有是'json','html',"jsonp"
})
.done(function(resp) { // 請求成功以後的操作
console.log(resp);
var chart = new G2.Chart({
container: 'daily_quotes',
autoFit: true,
height: 300,
padding: [30, 20, 70, 30]
});
chart.data(resp);
chart.legend({
custom: true,
items: [
{ name: 'close', value: 'close', marker: { symbol: 'line', style: { stroke: '#1890ff', lineWidth: 2 } } },
],
});
chart.line().position('date*close').color('#1890ff');
chart.render();
})
.fail(function(error) { // 請求失敗以後的操作
console.log(error);
});
</script> 小結：
投資第一步，把投資标的清單和交易序列先呈現出來。
明天繼續針對清單做橫向的分析，比如當下可交易的有多少支，低價的有多少支等等進行篩選。
我們會發現，資料是不夠的，比如我們還需要“正股價”，“轉股價”。
需要查詢400支可轉債的動量時，就需要qlib的資料庫功能等等，我們按需求來一步步開發。
最近文章：
fastapi定時任務，增量建構可轉債交易資料入mongo和qlib
fastapi+mongo+qlib：體系化建構AI量化投研平台
持續行動，做成一件件小事
關于作者：
飛狐，科技公司CTO，用AI技術做量化投資；以投資視角觀曆史，解時事；專注個人成長與财富自由。