17.SpringBoot前后端分离项目之简要配置二

如何配置前端请求和后端响应（2）

登录接口

前端：

后端控制器：
在My3Controller

@RequestMapping("/login")
public @ResponseBody RestObject login(@RequestBody UserUI userUI){
   System.out.println("login方法"+userUI);
   RestObject restObject = new RestObject();
   restObject.setCode(1);
   restObject.setMsg("登录成功！！！");
   return restObject;
}

1
2
3
4
5
6
7
8
9

策略研究-市场表现研究-添加新策略接口

前端如何找入口

前端如何修改

后端如何搭建

JavaBean保存数据：SendSellUI

import lombok.Data;
@Data
public class SendSellUI {
   private String id;                  //策略编号
   private String name;            //策略名称
   private String region;          //上市区域
   private String[] date;             //上市时间 (0 开始日期，1 结束日期)
   private Double preUpper;   //前复权价（最高）
   private Double preLower;   //前复权价（最低）
   private Double chgUpper;  //涨跌幅（最高）
   private Double chgLower;  //涨跌幅（最低）
   private Double dealUpper; //成交额（最高）
   private Double dealLower;  //成交额（最低）
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

My3Controller

@RequestMapping("/sendSell")
public @ResponseBody RestObject sendSell(@RequestBody SendSellUI sendSellUI){
   System.out.println("sendSell方法"+sendSellUI);
   String randomID = UUID.randomUUID().toString().replaceAll("-", "");
   sendSellUI.setId(randomID);
   HashMap<String, String> map = new HashMap<>();
   map.put("id",randomID);
   RestObject restObject = new RestObject();
   restObject.setCode(1);
   restObject.setMsg("添加策略成功！！！");
   restObject.setData(map);
   return restObject;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

策略研究-市场表现研究-策略列表维护

前端如何找入口

还原策略列表
如果在策略添加栏目田间了多个策略，需要删除的简单操作

前端如何修改

后端如何搭建

创建可以数据封装的JavaBean

import lombok.Data;

import java.util.List;
@Data
public class SendSellTableUI {
   private String id;
   private String name;
   private List<SendSellTableItemUI> table;
}
1
2
3
4
5
6
7
8
9

import lombok.Data;

@Data
public class SendSellTableItemUI {
   private String label;
   private String prop;
   private Boolean sortable;
}


1
2
3
4
5
6
7
8
9
10

My3Controller

//策略列表：模拟通过数据库保存了多个策略
List<SendSellTableUI> SendSellTableUIList = new ArrayList<>();
@RequestMapping("/sendList")
public @ResponseBody RestObject sendList(@RequestBody SendSellTableUI sendSellTableUI){
   System.out.println("sendList方法"+sendSellTableUI);
   SendSellTableUIList.add(sendSellTableUI);
   System.out.println(SendSellTableUIList.size());
   RestObject restObject = new RestObject();
   restObject.setCode(1);
   restObject.setMsg("添加策略成功！！！");
   return restObject;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

策略研究-市场表现研究-列表托管展示

前端如何找入口

前端如何修改

// 请求策略推荐左侧列表接口
export async function leftList() {
	//从服务器获取策略列表
	let obj = await req.post('/my3/leftList');
	//如果服务器有策略列表，向服务器策略列表的头部添加乖离率
	if(obj.code==1 && obj.data.length>0){
		obj.data.unshift({
			"id": '000000',
			"name": 'BIAS乖离率推荐',
			"table": [{
				"label": "股票代码",
				"prop": "stockCode",
				"sortable": false,
			}, {
				"label": "股票名",
				"sortable": false,
				"prop": "name",
			}, {
				"label": "交易日期",
				"sortable": true,
				"prop": "date",
			}, {
				"label": "收盘价",
				"sortable": true,
				"prop": "closingPrice",
			}, {
				"label": "乖离率",
				"sortable": true,
				"prop": "bias",
			}]
		});
		//将最新的策略列表 同步到本地
		setStorage('leftList', obj.data);
	}
	//从浏览器本地获取策略列表的
	if (!localStorage['leftList']) {
		setStorage('leftList', [{
			"id": '000000',
			"name": 'BIAS乖离率推荐',
			"table": [{
				"label": "股票代码",
				"prop": "stockCode",
				"sortable": false,
			}, {
				"label": "股票名",
				"sortable": false,
				"prop": "name",
			}, {
				"label": "交易日期",
				"sortable": true,
				"prop": "date",
			}, {
				"label": "收盘价",
				"sortable": true,
				"prop": "closingPrice",
			}, {
				"label": "乖离率",
				"sortable": true,
				"prop": "bias",
			}],
		}]);
	}
	let arr = getStorage('leftList');
	return arr;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

后端如何搭建

@RequestMapping("/leftList")
public @ResponseBody RestObject leftList(){
   System.out.println("leftList方法");
   RestObject restObject = new RestObject();
   restObject.setCode(1);
   restObject.setMsg("查询策略列表成功！！！");
   restObject.setData(SendSellTableUIList);
   return restObject;
}

1
2
3
4
5
6
7
8
9
10

策略-乖离率推荐-分页

前端如何找入口

分页开始的入口部分：

前端如何修改

使用真数据接口

后端如何搭建

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class BIASUI {
   private String stockCode;
   private String name;
   private String date;
   private String closingPrice;
   private String bias;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

控制器：

//准备模拟分页的数据
private Random random = new Random();
private List<BIASUI> biasuiList = new ArrayList<>(5000);
{
   //向集合中，添加5000条数据
   for (int i = 0; i <5000 ; i++) {
       biasuiList.add(
               new BIASUI("SH"+i,"股票"+i,"2000/01/01",random.nextDouble()*10+"",random.nextDouble()+"")
       );
   }
}
//定义模拟分页的方法
public List<BIASUI> getBiasuiListByPage(Integer pageNum,Integer pageSize){
   List<BIASUI> list = new ArrayList<>();
   //专门有一个记录个数的变量count
   //模拟分页
   for (int i = (pageNum-1)*pageSize,count=0; count<pageSize; i++,count++) {
       try {
           list.add(biasuiList.get(i));
       } catch (Exception e) {
           //为了防止索引越界异常，出现了该异常，这里就忽略
       }
   }
   return list;
}
@RequestMapping("/gll")
public @ResponseBody RestObject gll(@RequestBody Map<String,Object> map){
   System.out.println("gll方法");
   System.out.println(map);
   //进行模拟分页
   List<BIASUI> list = getBiasuiListByPage(Integer.parseInt(map.get("pageNum").toString()), Integer.parseInt(map.get("pageSize").toString()));
   HashMap<String, Object> map2 = new HashMap<>();
   map2.put("rows",biasuiList.size());
   map2.put("list",list);
   RestObject restObject = new RestObject();
   restObject.setCode(1);
   restObject.setMsg("业务成功");
   restObject.setData(map2);
   return restObject;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

SpringBoot前后端分离项目之简要配置至此结束！！！