|
|
|
步骤 2 : 模仿和排错 步骤 3 : 展示数据 步骤 4 : view.html 步骤 5 : 测试
老规矩，先下载右上角的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
先启动 EurekaServerApplication 然后启动 IndexCodesApplication 接着启动 TrendTradingBackTestViewApplication 下一步启动 TrendTradingBackTestServiceApplication 最后启动 IndexZuulServiceApplication 注： 记得运行redis-server.exe 以启动 redis 服务器 然后访问地址： http://127.0.0.1:8031/api-view/ 于是就可以看到在视图上获取到了从网关取到的数据了。
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
接下来就要在空白的 模拟回测视图 上增加内容了。
view.html 做了如下改动
1. data4Vue 增加了 indexes 和默认选中的指数 currentIndex var data4Vue = { indexes: [], currentIndex: '000300', }; 2. 修改 init 函数， 访问网关的 api-codes 获取所有指数代码 init:function(){ var url = "http://127.0.0.1:8031/api-codes/codes"; axios.get(url).then(function(response) { vue.indexes = response.data; }); } 3. 遍历这个指数代码集合 <table class="inputTable "> <tr> <td width="25%"> <span data-toggle="tooltip" data-placement="top" title="选择某一个指数进行模拟回测"> 请选择指数:<span class="glyphicon glyphicon-question-sign" > </span> </span> </td> <td width="25%"> <select v-model="currentIndex" class="indexSelect form-control"> <option v-for="bean in indexes " :value="bean.code">{{bean.name}} - ( {{bean.code}} )</option> </select> </td> <td></td> <td></td> </tr> </table> 4. 高亮 tooltips， 这个是bootstrap 里的 提示工具。 $("[data-toggle='tooltip']").tooltip(); <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header::html('趋势投资模拟回测')" ></head>
<body >
<script>
$(function(){
var data4Vue = {
indexes: [],
currentIndex: '000300',
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.init();
$("[data-toggle='tooltip']").tooltip();
},
methods: {
init:function(){
var url = "http://127.0.0.1:8031/api-codes/codes";
axios.get(url).then(function(response) {
vue.indexes = response.data;
});
}
}
});
});
</script>
<style>
table.inputTable{
width:100%;
}
table.inputTable td{
padding:20px 20px;
}
table{
margin:20px;
}
div#workingArea{
margin:50px;
}
</style>
<div id="workingArea">
<span class="label label-info">回测参数</span>
<table class="inputTable ">
<tr>
<td width="25%">
<span data-toggle="tooltip" data-placement="top" title="选择某一个指数进行模拟回测">
请选择指数:<span class="glyphicon glyphicon-question-sign" > </span>
</span>
</td>
<td width="25%">
<select v-model="currentIndex" class="indexSelect form-control">
<option v-for="bean in indexes " :value="bean.code">{{bean.name}} - ( {{bean.code}} )</option>
</select>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div th:replace="include/footer::html" ></div>
</body>
</html>
先启动 EurekaServerApplication
然后启动 IndexCodesApplication 接着启动 TrendTradingBackTestViewApplication 最后启动 IndexZuulServiceApplication 然后访问地址： http://127.0.0.1:8031/api-view/ 于是就可以看到在视图上获取到了从网关取到的数据了。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
