趋势投资SpringCloud系列教材（三十五）- SpringCloud开发

趋势投资SpringCloud系列教材（三十四）- SpringCloud开发 - 模拟回测-切换指数

趋势投资SpringCloud系列教材（三十六）- SpringCloud开发 - 模拟回测-收益对比图

下载区
文件名	文件大小
请先登录	1m
增值内容	1m
	1m
使用站长秘制下载工具

工具版本兼容问题

21分58秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 1 : 先运行，看到效果，再学习
步骤 2 : 模仿和排错
步骤 3 : 日期需求
步骤 4 : BackTestController
步骤 5 : view.html
步骤 6 : data4Vue
步骤 7 : ajax 参数
步骤 8 : 获取开始和结束日期
步骤 9 : 调用刷新日期
步骤 10 : 两个changeParam函数
步骤 11 : 更新日期函数
步骤 12 : 日期控件的 html 代码
步骤 13 : 日期控件

步骤 1 :

先运行，看到效果，再学习

edit edit 顶折

纠问

增值内容，请先登录

完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈，从无到有涵盖全部59个知识点，379个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 2 :

模仿和排错

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 3 :

日期需求

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 4 :

BackTestController

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

package cn.how2j.trend.web; import cn.how2j.trend.pojo.IndexData; import cn.how2j.trend.service.BackTestService; import cn.hutool.core.date.DateUtil; import cn.hutool.core.util.StrUtil; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RestController; import java.util.*; @RestController public class BackTestController { @Autowired BackTestService backTestService; @GetMapping("/simulate/{code}/{startDate}/{endDate}") @CrossOrigin public Map<String,Object> backTest( @PathVariable("code") String code ,@PathVariable("startDate") String strStartDate ,@PathVariable("endDate") String strEndDate ) throws Exception { List<IndexData> allIndexDatas = backTestService.listIndexData(code); String indexStartDate = allIndexDatas.get(0).getDate(); String indexEndDate = allIndexDatas.get(allIndexDatas.size()-1).getDate(); allIndexDatas = filterByDateRange(allIndexDatas,strStartDate, strEndDate); Map<String,Object> result = new HashMap<>(); result.put("indexDatas", allIndexDatas); result.put("indexStartDate", indexStartDate); result.put("indexEndDate", indexEndDate); return result; } private List<IndexData> filterByDateRange(List<IndexData> allIndexDatas, String strStartDate, String strEndDate) { if(StrUtil.isBlankOrUndefined(strStartDate) || StrUtil.isBlankOrUndefined(strEndDate) ) return allIndexDatas; List<IndexData> result = new ArrayList<>(); Date startDate = DateUtil.parse(strStartDate); Date endDate = DateUtil.parse(strEndDate); for (IndexData indexData : allIndexDatas) { Date date =DateUtil.parse(indexData.getDate()); if( date.getTime()>=startDate.getTime() && date.getTime()<=endDate.getTime() ) { result.add(indexData); } } return result; } }

代码行数较多，请点击查看

package cn.how2j.trend.web;

import cn.how2j.trend.pojo.IndexData;
import cn.how2j.trend.service.BackTestService;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.StrUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.*;

@RestController
public class BackTestController {
	@Autowired BackTestService backTestService;

	@GetMapping("/simulate/{code}/{startDate}/{endDate}")
	@CrossOrigin
	public Map<String,Object> backTest(
	        @PathVariable("code") String code
            ,@PathVariable("startDate") String strStartDate
            ,@PathVariable("endDate") String strEndDate
    ) throws Exception {
		List<IndexData> allIndexDatas = backTestService.listIndexData(code);

		String indexStartDate = allIndexDatas.get(0).getDate();
		String indexEndDate = allIndexDatas.get(allIndexDatas.size()-1).getDate();

        allIndexDatas = filterByDateRange(allIndexDatas,strStartDate, strEndDate);

        Map<String,Object> result = new HashMap<>();
		result.put("indexDatas", allIndexDatas);
		result.put("indexStartDate", indexStartDate);
		result.put("indexEndDate", indexEndDate);

		return result;
	}

    private List<IndexData> filterByDateRange(List<IndexData> allIndexDatas, String strStartDate, String strEndDate) {
        if(StrUtil.isBlankOrUndefined(strStartDate) || StrUtil.isBlankOrUndefined(strEndDate) )
            return allIndexDatas;

        List<IndexData> result = new ArrayList<>();
        Date startDate = DateUtil.parse(strStartDate);
        Date endDate = DateUtil.parse(strEndDate);

        for (IndexData indexData : allIndexDatas) {
            Date date =DateUtil.parse(indexData.getDate());
            if(
                    date.getTime()>=startDate.getTime() &&
                            date.getTime()<=endDate.getTime()
                    ) {
                result.add(indexData);
            }
        }
        return result;
    }
}

步骤 5 :

view.html

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header::html('趋势投资模拟回测')" ></head>
<body >
<script>
    var chart4Profit = null;

    $(function(){
	        var data4Vue = {
                indexes: [],
                currentIndex: '000300',

                indexDatas:[],
                dates:[],
                closePoints:[],

                flushDate: true,

                indexStartDate: null,
                indexEndDate: null,
                startDate: null,
                endDate: null,

            };

            //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;
                            vue.$nextTick(function(){
                                vue.simulate();
                            });
                        });
                    },
                    simulate:function(){
                        var url =  "http://127.0.0.1:8031/api-backtest/simulate/"+vue.currentIndex+"/"+vue.startDate+"/"+vue.endDate+"/";
                        axios.get(url).then(function(response) {
                            //清空原数据
							vue.indexDatas = [];
                            vue.closePoints = [];
                            vue.dates = [];

							//获取返回数据

                            vue.indexDatas = response.data.indexDatas;
                            vue.dates = new Array();
                            vue.closePoints = new Array();

                            //日期
                            vue.indexStartDate = response.data.indexStartDate;
                            vue.indexEndDate = response.data.indexEndDate;

                            //指数数据
                            for(i in vue.indexDatas){
                                var indexData = vue.indexDatas[i];
                                vue.dates.push(indexData.date);
                                vue.closePoints.push(indexData.closePoint);
                            }

							//收益图表
                            chart4Profit.config.data.labels = vue.dates;
                            chart4Profit.config.data.datasets[0].label = vue.currentIndex;
                            chart4Profit.config.data.datasets[0].data = vue.closePoints;
                            chart4Profit.update();

                            if(vue.flushDate)
                                vue.updateDate();

                        });
                    },
                    changeParam:function(){
                        vue.flushDate = false;
                        vue.simulate();
                    },
                    changeParamWithFlushDate:function(){
                        vue.flushDate = true;
                        vue.startDate = null;
                        vue.endDate = null;
                        vue.simulate();
                    },
					updateDate:function(){
                        vue.startDate = vue.indexStartDate;
                        vue.endDate = vue.indexEndDate;

                        console.log("vue.indexStartDate："+vue.indexStartDate);

                        //需要先destroy，否则后续新的日期范围如果超出了前面的日期范围，会出冲突
                        $('#date4Start').datepicker("destroy");
                        $('#date4Start').datepicker({
                            "format": 'yyyy-mm-dd',
                            "language": "zh-CN",
                            autoclose: true,
                            startDate: vue.indexStartDate,
                            endDate: vue.indexEndDate,
                        }).on("changeDate",function(e){
                            var month = (e.date.getMonth()+1);
                            if(month <10)
                                month = '0'+month;
                            var day = (e.date.getDate());
                            if(day <10)
                                day = '0'+day;
                            vue.startDate = e.date.getFullYear()+"-"+month+"-"+day;

                            if(!vue.checkDateRange()){
                                $('#date4Start').datepicker('update', vue.indexStartDate);
                                return;
                            }

							vue.changeParam();
                        });

                        $('#date4End').datepicker("destroy");
                        $('#date4End').datepicker({
                            "format": 'yyyy-mm-dd',
                            "language": "zh-CN",
                            autoclose: true,
                            startDate: vue.indexStartDate,
                            endDate: vue.indexEndDate,
                        }).on("changeDate",function(e){
                            var month = (e.date.getMonth()+1);
                            if(month <10)
                                month = '0'+month;
                            var day = (e.date.getDate());
                            if(day <10)
                                day = '0'+day;
                            vue.endDate = e.date.getFullYear()+"-"+month+"-"+day;
                            if(!vue.checkDateRange()){
                                $('#date4End').datepicker('update', vue.indexEndDate);
                                return;
							}

                            vue.changeParam();

                        });

                        $('#date4Start').datepicker('update', vue.indexStartDate);
                        $('#date4End').datepicker('update', vue.indexEndDate);
                    },
					checkDateRange:function(){
					    if(null==vue.startDate || null==vue.endDate)
					        return true;

                        var strStartDate = vue.startDate.replace(/-/g, '/')
                        var startTime = new Date(strStartDate).getTime();
                        var strEndDate = vue.endDate.replace(/-/g, '/')
                        var endTime = new Date(strEndDate).getTime();
						if(startTime>endTime){
                            alert("开始日期不能大于日期！");
                            return false;
						}
						return true;

					}
                }
            });

        var ctx4Profit = $(".canvas4Profit")[0].getContext('2d');
        chart4Profit = new Chart(ctx4Profit, {
            type: 'line',
            data: {
                labels: '',
                datasets: [
                    {
                        label: '',
                        data: [],
                        borderColor: '#FF4040',
                        backgroundColor: '#FF4040',
                        borderWidth: 1.2,
                        pointRadius: 0,
                        fill: false,
                        lineTension: 0,
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: '指数趋势投资收益对比图'
                },
                responsive: true,
                responsiveAnimationDuration:3000,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false,
                        }
                    }]
                },
                tooltips: {
                    intersect: false,
                    mode: 'index',
// 	   					axis: 'y',
                    callbacks: {
                        label: function(tooltipItem, myData) {
                            var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += parseFloat(tooltipItem.value).toFixed(2);
                            return label;
                        }
                    }
                }
            }
        });

    });
    
</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 @change="changeParamWithFlushDate" v-model="currentIndex" class="indexSelect form-control">
					<option v-for="bean in indexes " :value="bean.code">{{bean.name}} - ( {{bean.code}} )</option>
				</select>
			</td>
			<td width="25%"></td>
			<td width="25%"></td>
		</tr>
		<tr>
			<td>
           				<span data-toggle="tooltip" data-placement="top" title="指定模拟回测的开始日期，默认是当前指数最开始的日期">
            				开始日期:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
			</td>
			<td>
				<div class="form-group">
					<div class="input-group date" id="date4Start">
						<input  type="text" readOnly="readOnly" class="form-control"  ><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					</div>
				</div>
			</td>
			<td>
           				<span data-toggle="tooltip" data-placement="top" title="指定模拟回测的结束日期，默认是当前指数最后的日期">
            				结束日期:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
			</td>
			<td>
				<div class="form-group">
					<div class="input-group date" id="date4End">
						<input type="text" readOnly="readOnly" class="form-control"  ><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					</div>
				</div>
			</td>

		</tr>
	</table>

	<div class="label label-warning">收益对比图</div>

	<div  class="div4chart" style="margin:0px auto; width:80%">
		<canvas class='canvas4Profit'></canvas>
	</div>
</div>

<div th:replace="include/footer::html" ></div>

</body>
</html>

步骤 6 :

data4Vue

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

                flushDate: true,

                indexStartDate: null,
                indexEndDate: null,
                startDate: null,
                endDate: null,

步骤 7 :

ajax 参数

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

以前的：
var url =  "http://127.0.0.1:8031/api-backtest/simulate/"+vue.currentIndex;
现在的：
var url =  "http://127.0.0.1:8031/api-backtest/simulate/"+vue.currentIndex+"/"+vue.startDate+"/"+vue.endDate+"/";

步骤 8 :

获取开始和结束日期

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

                            //日期
                            vue.indexStartDate = response.data.indexStartDate;
                            vue.indexEndDate = response.data.indexEndDate;

步骤 9 :

调用刷新日期

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

                            if(vue.flushDate)
                                vue.updateDate();

步骤 10 :

两个changeParam函数

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

                    changeParam:function(){
                        vue.flushDate = false;
                        vue.simulate();
                    },
                    changeParamWithFlushDate:function(){
                        vue.flushDate = true;
                        vue.startDate = null;
                        vue.endDate = null;
                        vue.simulate();
                    },

步骤 11 :

更新日期函数

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

updateDate:function(){ vue.startDate = vue.indexStartDate; vue.endDate = vue.indexEndDate; console.log("vue.indexStartDate："+vue.indexStartDate); //需要先destroy，否则后续新的日期范围如果超出了前面的日期范围，会出冲突 $('#date4Start').datepicker("destroy"); $('#date4Start').datepicker({ "format": 'yyyy-mm-dd', "language": "zh-CN", autoclose: true, startDate: vue.indexStartDate, endDate: vue.indexEndDate, }).on("changeDate",function(e){ var month = (e.date.getMonth()+1); if(month <10) month = '0'+month; var day = (e.date.getDate()); if(day <10) day = '0'+day; vue.startDate = e.date.getFullYear()+"-"+month+"-"+day; if(!vue.checkDateRange()){ $('#date4Start').datepicker('update', vue.indexStartDate); return; } vue.changeParam(); }); $('#date4End').datepicker("destroy"); $('#date4End').datepicker({ "format": 'yyyy-mm-dd', "language": "zh-CN", autoclose: true, startDate: vue.indexStartDate, endDate: vue.indexEndDate, }).on("changeDate",function(e){ var month = (e.date.getMonth()+1); if(month <10) month = '0'+month; var day = (e.date.getDate()); if(day <10) day = '0'+day; vue.endDate = e.date.getFullYear()+"-"+month+"-"+day; if(!vue.checkDateRange()){ $('#date4End').datepicker('update', vue.indexEndDate); return; } vue.changeParam(); }); $('#date4Start').datepicker('update', vue.indexStartDate); $('#date4End').datepicker('update', vue.indexEndDate); }, checkDateRange:function(){ if(null==vue.startDate || null==vue.endDate) return true; var strStartDate = vue.startDate.replace(/-/g, '/') var startTime = new Date(strStartDate).getTime(); var strEndDate = vue.endDate.replace(/-/g, '/') var endTime = new Date(strEndDate).getTime(); if(startTime>endTime){ alert("开始日期不能大于日期！"); return false; } return true; }

代码行数较多，请点击查看

					updateDate:function(){
                        vue.startDate = vue.indexStartDate;
                        vue.endDate = vue.indexEndDate;

                        console.log("vue.indexStartDate："+vue.indexStartDate);

                        //需要先destroy，否则后续新的日期范围如果超出了前面的日期范围，会出冲突
                        $('#date4Start').datepicker("destroy");
                        $('#date4Start').datepicker({
                            "format": 'yyyy-mm-dd',
                            "language": "zh-CN",
                            autoclose: true,
                            startDate: vue.indexStartDate,
                            endDate: vue.indexEndDate,
                        }).on("changeDate",function(e){
                            var month = (e.date.getMonth()+1);
                            if(month <10)
                                month = '0'+month;
                            var day = (e.date.getDate());
                            if(day <10)
                                day = '0'+day;
                            vue.startDate = e.date.getFullYear()+"-"+month+"-"+day;

                            if(!vue.checkDateRange()){
                                $('#date4Start').datepicker('update', vue.indexStartDate);
                                return;
                            }

							vue.changeParam();
                        });

                        $('#date4End').datepicker("destroy");
                        $('#date4End').datepicker({
                            "format": 'yyyy-mm-dd',
                            "language": "zh-CN",
                            autoclose: true,
                            startDate: vue.indexStartDate,
                            endDate: vue.indexEndDate,
                        }).on("changeDate",function(e){
                            var month = (e.date.getMonth()+1);
                            if(month <10)
                                month = '0'+month;
                            var day = (e.date.getDate());
                            if(day <10)
                                day = '0'+day;
                            vue.endDate = e.date.getFullYear()+"-"+month+"-"+day;
                            if(!vue.checkDateRange()){
                                $('#date4End').datepicker('update', vue.indexEndDate);
                                return;
							}

                            vue.changeParam();

                        });

                        $('#date4Start').datepicker('update', vue.indexStartDate);
                        $('#date4End').datepicker('update', vue.indexEndDate);
                    },
					checkDateRange:function(){
					    if(null==vue.startDate || null==vue.endDate)
					        return true;

                        var strStartDate = vue.startDate.replace(/-/g, '/')
                        var startTime = new Date(strStartDate).getTime();
                        var strEndDate = vue.endDate.replace(/-/g, '/')
                        var endTime = new Date(strEndDate).getTime();
						if(startTime>endTime){
                            alert("开始日期不能大于日期！");
                            return false;
						}
						return true;

					}

步骤 12 :

日期控件的 html 代码

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

		<tr>
			<td>
           				<span data-toggle="tooltip" data-placement="top" title="指定模拟回测的开始日期，默认是当前指数最开始的日期">
            				开始日期:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
			</td>
			<td>
				<div class="form-group">
					<div class="input-group date" id="date4Start">
						<input  type="text" readOnly="readOnly" class="form-control"  ><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					</div>
				</div>
			</td>
			<td>
           				<span data-toggle="tooltip" data-placement="top" title="指定模拟回测的结束日期，默认是当前指数最后的日期">
            				结束日期:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
			</td>
			<td>
				<div class="form-group">
					<div class="input-group date" id="date4End">
						<input type="text" readOnly="readOnly" class="form-control"  ><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					</div>
				</div>
			</td>

		</tr>

步骤 13 :

日期控件

edit edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

趋势投资SpringCloud系列教材（三十四）- SpringCloud开发 - 模拟回测-切换指数

趋势投资SpringCloud系列教材（三十六）- SpringCloud开发 - 模拟回测-收益对比图

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-趋势投资SpringCloud-模拟回测-日期的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 982790551

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图