|
|
8分37秒 步骤 1 : 先运行，看到效果，再学习 步骤 2 : 模仿和排错 步骤 3 : 拓扑图点亮 步骤 4 : 创建子模块 步骤 5 : pom.xml 步骤 6 : application.yml 步骤 7 : TrendTradingBackTestViewApplication 步骤 8 : ViewController 步骤 9 : static 步骤 10 : header.html 步骤 11 : footer.html 步骤 12 : view.html
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>cn.how2j.trend</groupId>
<artifactId>trendParentProject</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>trend-trading-backtest-view</artifactId>
<dependencies>
<!-- springboot web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- eureka-client -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
</dependency>
</dependencies>
</project>
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
eureka:
client:
serviceUrl:
defaultZone: http://localhost:8761/eureka/
spring:
application:
name: trend-trading-backtest-view
thymeleaf:
mode: LEGACYHTML5
encoding: UTF-8
content-type: text/html
cache: false
eureka:
client:
serviceUrl:
defaultZone: http://localhost:8761/eureka/
spring:
application:
name: trend-trading-backtest-view
thymeleaf:
mode: LEGACYHTML5
encoding: UTF-8
content-type: text/html
cache: false
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
package cn.how2j.trend;
import java.util.Scanner;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.Future;
import java.util.concurrent.TimeUnit;
import java.util.concurrent.TimeoutException;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
import cn.hutool.core.convert.Convert;
import cn.hutool.core.thread.ThreadUtil;
import cn.hutool.core.util.NetUtil;
import cn.hutool.core.util.NumberUtil;
import cn.hutool.core.util.StrUtil;
@SpringBootApplication
@EnableEurekaClient
public class TrendTradingBackTestViewApplication {
public static void main(String[] args) {
int port = 0;
int defaultPort = 8041;
int eurekaServerPort = 8761;
if(NetUtil.isUsableLocalPort(eurekaServerPort)) {
System.err.printf("检查到端口%d 未启用，判断 eureka 服务器没有启动，本服务无法使用，故退出%n", eurekaServerPort );
System.exit(1);
}
if(null!=args && 0!=args.length) {
for (String arg : args) {
if(arg.startsWith("port=")) {
String strPort= StrUtil.subAfter(arg, "port=", true);
if(NumberUtil.isNumber(strPort)) {
port = Convert.toInt(strPort);
}
}
}
}
if(0==port) {
Future<Integer> future = ThreadUtil.execAsync(() ->{
int p = 0;
System.out.printf("请于5秒钟内输入端口号, 推荐 %d ,超过5秒将默认使用 %d ",defaultPort,defaultPort);
Scanner scanner = new Scanner(System.in);
while(true) {
String strPort = scanner.nextLine();
if(!NumberUtil.isInteger(strPort)) {
System.err.println("只能是数字");
continue;
}
else {
p = Convert.toInt(strPort);
scanner.close();
break;
}
}
return p;
});
try{
port=future.get(5,TimeUnit.SECONDS);
}
catch (InterruptedException | ExecutionException | TimeoutException e){
port = defaultPort;
}
}
if(!NetUtil.isUsableLocalPort(port)) {
System.err.printf("端口%d被占用了，无法启动%n", port );
System.exit(1);
}
new SpringApplicationBuilder(TrendTradingBackTestViewApplication.class).properties("server.port=" + port).run(args);
}
}
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
package cn.how2j.trend.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ViewController {
@GetMapping("/")
public String view() throws Exception {
return "view";
}
}
package cn.how2j.trend.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ViewController {
@GetMapping("/")
public String view() throws Exception {
return "view";
}
}
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<template th:fragment="html(title)" >
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker/1.8.0/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script src="js/vue/2.5.16/vue.min.js"></script>
<script src="js/chartjs/2.8.0/chart.min.js"></script>
<script src="js/axios/0.17.1/axios.min.js"></script>
<script src="js/bootstrap-datepicker/1.8.0/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker/1.8.0/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
function formatMoney(num){
num = new String(num);
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents);
}
function formatNumber(number, decimals, dec_point, thousands_sep) {
/*
* 参数说明：
* number：要格式化的数字
* decimals：保留几位小数
* dec_point：小数点符号
* thousands_sep：千分位符号
* */
number = (number + '').replace(/[^0-9+-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.ceil(n * k) / k;
};
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
var re = /(-?\d+)(\d{3})/;
while (re.test(s[0])) {
s[0] = s[0].replace(re, "$1" + sep + "$2");
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
Vue.filter("formatMoneyFilter", function(value){
return formatMoney(value);
});
Vue.filter("formatNumberFilter", function(value,decimal){
if(decimal==null)
decimal = 0;
return formatNumber(value,decimal, ".",",");
});
Vue.filter('formatDateFilter', function (value, formatString) {
if(null==value)
return "";
formatString = formatString || 'YYYY-MM-DD';
return moment(value).format(formatString);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title th:text="${title}" ></title>
</template>
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<div th:fragment="html">
<div style="margin:0px auto;text-align:center">
powered by <a href="http://how2j.cn">how2j.cn</a> version 1.0.1
</div>
</div>
<div th:fragment="html">
<div style="margin:0px auto;text-align:center">
powered by <a href="http://how2j.cn">how2j.cn</a> version 1.0.1
</div>
</div>
增值内容，请先登录
完整的 SpringCloud 趋势量化投资项目，使用 Springboot 、Vue.js、redis, Zipkin, RabbitMQ, SpringCloud 等一整套技术栈， 从无到有涵盖全部59个知识点，378个开发步骤, 充实 SpringCloud 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header::html('趋势投资模拟回测')" ></head>
<body >
<script>
$(function(){
var data4Vue = {
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.init();
},
methods: {
init:function(){
}
}
});
});
</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>
</div>
<div th:replace="include/footer::html" ></div>
</body>
</html>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-01-18
发现两个formatNumber函数的bug，详见代码
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-04-08
这个算是前后端分离吗？
2 个答案
lioubiao123 跳转到问题位置 答案时间：2022-02-15 前后端分离的意思时前端通过ajax直接调用接口拿到数据，然后js进行数据填充
前后端未分离的意思是服务端将整个html进行数据填充，然后吧html传到前段，前段进行渲染
区别在于后端要不要做页面的数据填充，跟你怎么写代码没关系。
how2j 跳转到问题位置 答案时间：2021-04-09 vue 是用来做数据交互的，仅仅有vue 没有 html 能做页面吗？
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-11-01
页面返回 “Whitelabel Error Page” 不可访问该页面
2020-08-25
不知道为啥无法加载出bootstrap样式
2020-02-06
遇到一个很让人头痛的问题，这里http://127.0.0.1:8041/能访问，http://127.0.0.1:8031/api-view/就报500了
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 3 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
