0.一个小Demo 就没有用到其它的技术了

格式如下

在这里插入图片描述

表文件

create table FinancingProduct
(id           varchar(50) not nullprimary key,risk         int         not null,income       varchar(50) not null,saleStarting datetime    not null,saleEnd      datetime    not null,end          datetime    not null
);

在这里插入图片描述

pom配置

  <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><!--mybatis-plus 是自己开发的，非官方的！--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.3.1.tmp</version></dependency><!--Mysql数据库！--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--mybatis-plus一键生成--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.4.1</version></dependency><dependency><groupId>org.apache.velocity</groupId><artifactId>velocity</artifactId><version>1.7</version></dependency><!--阿里巴巴下的连接池！--><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.2.8</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.1</version></dependency></dependencies>

application.yml配置


#设置端口号
server:port: 8080
#配置数据源
spring:datasource:username: rootpassword: newPassword#url中database为对应的数据库名称url: jdbc:mysql://IP地址/fina?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8driver-class-name: com.mysql.cj.jdbc.Driver#连接池type: com.alibaba.druid.pool.DruidDataSource#释放静态资源mvc:static-path-pattern: /static/**   #释放静态资源
#mybatis配置
mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl    #  数据库中如果有类似 如  user_name 等命名，会将 _后的字母大写，这里是为了和实体类对应#配置驼峰命名map-underscore-to-camel-case: true#映射器位置mapper-locations: classpath:mapping/*.xml #映射文件类#类型别名包type-aliases-package: com.hexu.demo666.entity   #实体类type-enums-package: com.hexu.demo666.entity.typeEnum  #枚举类pagehelper:helperDialect: mysqlreasonable: true  #开启优化，如果开启优化，在分页页码结果没有数据的时候,会显示有数据的页码数据supportMethodsArguments: true #是否支持接口参数来传递分页参数，默认falsepageSizeZero: false #pageSize=0 返回所有params: count=countSql#showSql
logging:level:com.hexu.springbootdemo02.mapper: debug

1.实体类

Financingproduct类

package com.hexu.demo666.entity;import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.hexu.demo666.entity.typeEnum.TypeEnum;
import lombok.Data;
import lombok.EqualsAndHashCode;import java.io.Serializable;
import java.time.LocalDateTime;/*** <p>* * </p>** @author hexu* @since 2021-12-28*/
@Data@EqualsAndHashCode(callSuper = false)@TableName("FinancingProduct")
public class Financingproduct implements Serializable {private static final long serialVersionUID = 1L;private String id;//跟枚举类对应private TypeEnum risk;private String income;@TableField("saleStarting")private LocalDateTime salestarting;@TableField("saleEnd")private LocalDateTime saleend;private LocalDateTime end;}

创建vo

FinancingproductVo类

package com.hexu.demo666.entity.vo;import lombok.Data;/*** @Classname FinancingproductVo* @Description TODO* @Author 86176* @Date 2021-12-28 9:18* @Version 1.0**/
@Data
public class FinancingproductVo {//条件Idprivate String id;//条件类型private String risk;//页码private Integer pageNum = 1;//数量private Integer pageSize = 3;
}

创建枚举

typeEnum类

package com.hexu.demo666.entity.typeEnum;import com.baomidou.mybatisplus.annotation.EnumValue;
import com.fasterxml.jackson.annotation.JsonValue;/*** <p>* </p>** @author yuxiaobin* @date 2018/8/31*/
public enum TypeEnum {YI(1, "R1"),ER(2, "R2"),SAN(3, "R3");@EnumValueprivate Integer key;@JsonValueprivate String display;TypeEnum(Integer key, String display) {this.key = key;this.display = display;}public Integer getKey() {return key;}public String getDisplay() {return display;}
}

2.持久层

创建mapper

FinancingproductMapper类

package com.hexu.demo666.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.hexu.demo666.entity.Financingproduct;/*** <p>*  Mapper 接口* </p>** @author hexu* @since 2021-12-28*/
public interface FinancingproductMapper extends BaseMapper<Financingproduct> {}

3.业务层

创建service

FinancingproductService类

package com.hexu.demo666.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.hexu.demo666.entity.Financingproduct;/*** <p>*  服务类* </p>** @author hexu* @since 2021-12-28*/
public interface FinancingproductService extends IService<Financingproduct> {}

实现类

package com.hexu.demo666.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.hexu.demo666.entity.Financingproduct;
import com.hexu.demo666.mapper.FinancingproductMapper;
import com.hexu.demo666.service.FinancingproductService;
import org.springframework.stereotype.Service;/*** <p>*  服务实现类* </p>** @author hexu* @since 2021-12-28*/
@Service
public class FinancingproductServiceImpl extends ServiceImpl<FinancingproductMapper, Financingproduct> implements FinancingproductService {}

4.工具类

ResponseMessage统一返回格式类

ResponseMessage类

package com.hexu.demo666.util;import java.util.HashMap;
import java.util.Map;/*** <p>项目文档： 响应数据封装</p>** @author <a href="https://github.com/laomu/laomu.github.io">大牧</a>* @version V1.0*/
public class ResponseMessage {private String errorCode;private String errorMsg;private Map<String, Object> objectMap = new HashMap<>();public String getErrorCode() {return errorCode;}public void setErrorCode(String errorCode) {this.errorCode = errorCode;}public String getErrorMsg() {return errorMsg;}public void setErrorMsg(String errorMsg) {this.errorMsg = errorMsg;}public Map<String, Object> getObjectMap() {return objectMap;}public void setObjectMap(Map<String, Object> objectMap) {this.objectMap = objectMap;}public ResponseMessage addObject(String key, Object value) {this.objectMap.put(key, value);return this;}public static ResponseMessage success() {ResponseMessage rm = new ResponseMessage();rm.setErrorCode("100");rm.setErrorMsg("处理成功");return rm;}public static ResponseMessage error() {ResponseMessage rm = new ResponseMessage();rm.setErrorCode("200");rm.setErrorMsg("处理失败");return rm;}
}

5.控制层

FinancingproductController类

package com.hexu.demo666.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hexu.demo666.entity.Financingproduct;
import com.hexu.demo666.entity.vo.FinancingproductVo;
import com.hexu.demo666.service.FinancingproductService;
import com.hexu.demo666.util.ResponseMessage;
import org.springframework.stereotype.Controller;
import org.springframework.util.Assert;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import java.util.List;/*** <p>*  前端控制器* </p>** @author hexu* @since 2021-12-28*/
@Controller
public class FinancingproductController {@Resourceprivate FinancingproductService financingproductService;/*** 根据条件查询** @param vo 条件类* @return*/@PostMapping("/getAllger")@ResponseBodypublic ResponseMessage getAllger(@RequestBody FinancingproductVo vo) {//分页设置PageHelper.startPage(vo.getPageNum(), vo.getPageSize());//进行条件查询QueryWrapper<Financingproduct> queryWrapper = new QueryWrapper<>();if (vo.getId() != null && !"".equals(vo.getId())) {queryWrapper.like("id", vo.getId());}if (vo.getRisk() != null && !"".equals(vo.getRisk())) {queryWrapper.eq("risk", vo.getRisk());}List<Financingproduct> list = financingproductService.list(queryWrapper);PageInfo<Financingproduct> pageInfo = new PageInfo<>(list);//统一返回格式return ResponseMessage.success().addObject("list", pageInfo);}/*** 根据Id删除** @param id* @return*/@GetMapping("/deleteById/{id}")@ResponseBodypublic ResponseMessage deleteById(@PathVariable Integer id) {Assert.notNull(id, "不能为null");boolean b = financingproductService.removeById(id);return b ? ResponseMessage.success() : ResponseMessage.error();}/*** 增加* @param financingproduct* @return*/@PostMapping("/addAll")@ResponseBodypublic ResponseMessage addAll(@RequestBody Financingproduct financingproduct) {boolean save = financingproductService.save(financingproduct);return save ? ResponseMessage.success() : ResponseMessage.error();}/*** 根据Id查询** @param id* @return*/@PostMapping("/getById/{id}")@ResponseBodypublic ResponseMessage getById(@PathVariable Integer id) {Assert.notNull(id, "不能为null");Financingproduct byId = financingproductService.getById(id);return ResponseMessage.success().addObject("list", byId);}/*** 根据Id修改* @param financingproduct* @return*/@PostMapping("/updateById")@ResponseBodypublic ResponseMessage updateById(@RequestBody Financingproduct financingproduct) {boolean b = financingproductService.updateById(financingproduct);return b ? ResponseMessage.success() : ResponseMessage.error();}//以下是跳转@RequestMapping("/in")public String index() {return "index";}@RequestMapping("/update")public String update() {return "update";}@RequestMapping("/add")public String add() {return "add";}}

前端

前端index页面

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="div"><!--条件查询-->产品代码  <input type="text" v-model="vo.id">风险评级<select v-model="vo.risk"><option value="">请选择</option><option value="1">R1</option><option value="2">R2</option><option value="3">R3</option></select><input type="button" @click="btm()" value="搜索">
<!--渲染页面--><table border="2"><tr><td>产品代码</td><td>风险评级</td><td>预期收益</td><td>起始日</td><td>截止日</td><td>到期日</td><td>操作</td></tr><tr v-for="fina in list1.list"><td>{{fina.id}}</td><td>{{fina.risk}}</td><td>{{fina.income}}</td><td>{{finasalestarting}}</td><td>{{fina.saleend}}</td><td>{{fina.end}}</td><td @click="del(fina.id)">删除</td><td @click="upe(fina.id)">修改</td></tr></table><a href="/add">增加</a><!--分页操作--><span>{{list1.pageNum}} / {{list1.pages}}</span><span @click="page(list1.nextPage)">下一页</span><span @click="page(list1.prePage)">上一页</span><span><input type="text" size="2" v-model="aaa"><input type="button" value="Go" @click="page(aaa)"></span><span @click="page(1)">第一页</span><span @click="page(list1.pages)">最后一页</span>
</div>
<script type="text/javascript"  src="/static/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/static/vue.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script>var arr = new Vue({el: "#div",data() {return {/*获取后端传来的数据*/list1: [],//获取条件参数vo: {},}},mounted() {/*初始化*/this.list();},methods: {list() {axios.post("/getAllger", this.vo).then(res => {if (res.data.errorCode === "100") {this.list1 = res.data.objectMap.list}})},/*删除*/del(id) {alert(id)axios.get("/deleteById/" + id).then(data => {if (data.data.errorCode === "100") {alert("删除成功")this.list();}})},/*分页*/page(id) {this.vo.pageNum = id;this.list()},//修改页面upe(id) {location.href = "/update?id=" + id;},/*条件查询*/btm() {arr.list();}}})
</script>
</body>
</html>

add页面

add.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="div">产品代码<input type="text" v-model="financingproduct.id">风险评级<select v-model="financingproduct.risk"><option value="R1">R1</option><option value="R2">R2</option><option value="R3">R3</option>
</select>预期收益<input type="text" v-model="financingproduct.income">起始日<input type="datetime-local" v-model="financingproduct.salestarting">截止日<input type="datetime-local" v-model="financingproduct.saleend">到期日<input type="datetime-local" v-model="financingproduct.end"><input type="button" @click="add()" value="提交"><p>{{financingproduct}}</p>
</div>
<script type="text/javascript" src="/static/vue.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script>new Vue({el: "#div",data: {/*获取绑定对象*/financingproduct: {},},mounted() {},methods: {add() {axios.post("/addAll", this.financingproduct).then(res => {if (res.data.errorCode === "100") {alert("增加成功")location.href = "/in"}})}}})</script>
</body>
</html>

update页面

update.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="div"><!--条件查询-->产品代码<input type="text" v-model="financingproduct.id">风险评级<select v-model="financingproduct.risk"><option value="R1">R1</option><option value="R2">R2</option><option value="R3">R3</option></select>预期收益<input type="text" v-model="financingproduct.income">起始日<input type="text" v-model="financingproduct.salestarting">截止日<input type="text" v-model="financingproduct.saleend">到期日<input type="text" v-model="financingproduct.end"><input type="button" @click="upeById()" value="提交">
</div>
<script type="text/javascript" src="/static/vue.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script>new Vue({el: "#div",data: {//用来接收绑定的数据financingproduct: {},},mounted() {//初始化渲染this.getById();},methods: {getById() {// 获得idvar arr = location.href.split("?id=")var id = arr[1];alert(id)axios.post("/getById/" + id).then(res => {if (res.data.errorCode === "100") {this.financingproduct = res.data.objectMap.list;}})},upeById() {axios.post("/updateById", this.financingproduct).then(res => {if (res.data.errorCode === "100") {alert("修改成功")location.href = "/in"}})}}})</script>
</body>
</html>

前后端分离跨域为解决

/*** @Classname CorsConfig* @Description TODO* @Author 86176* @Date 2021-12-18 9:30* @Version 1.0**/
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowCredentials(true).allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH").maxAge(3600);}
}