0.一个小Demo 就没有用到其它的技术了
格式如下
表文件
create table FinancingProduct
(
id varchar ( 50 ) not null
primary 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: root
password: newPassword
#url中database为对应的数据库名称
url: jdbc: mysql: / / IP 地址/ fina? useSSL= false & useUnicode= true & characterEncoding= utf- 8 & serverTimezone= GMT % 2 B8
driver- class - name: com. mysql. cj. jdbc. Driver
#连接池
type: com. alibaba. druid. pool. DruidDataSource
#释放静态资源
mvc:
static - path- pattern: / static
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;
@Data
@EqualsAndHashCode ( callSuper = false )
@TableName ( "FinancingProduct" )
public class Financingproduct implements Serializable {
private static final long serialVersionUID = 1 L;
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;
@Data
public class FinancingproductVo {
private 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;
public enum TypeEnum {
YI ( 1 , "R1" ) ,
ER ( 2 , "R2" ) ,
SAN ( 3 , "R3" ) ;
@EnumValue
private Integer key;
@JsonValue
private 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;
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;
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;
@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;
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;
@Controller
public class FinancingproductController {
@Resource
private FinancingproductService financingproductService;
@PostMapping ( "/getAllger" )
@ResponseBody
public 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) ;
}
@GetMapping ( "/deleteById/{id}" )
@ResponseBody
public ResponseMessage deleteById ( @PathVariable Integer id ) {
Assert. notNull ( id, "不能为null" ) ;
boolean b = financingproductService. removeById ( id) ;
return b ? ResponseMessage. success ( ) : ResponseMessage. error ( ) ;
}
@PostMapping ( "/addAll" )
@ResponseBody
public ResponseMessage addAll ( @RequestBody Financingproduct financingproduct ) {
boolean save = financingproductService. save ( financingproduct) ;
return save ? ResponseMessage. success ( ) : ResponseMessage. error ( ) ;
}
@PostMapping ( "/getById/{id}" )
@ResponseBody
public ResponseMessage getById ( @PathVariable Integer id ) {
Assert. notNull ( id, "不能为null" ) ;
Financingproduct byId = financingproductService. getById ( id) ;
return ResponseMessage. success ( ) . addObject ( "list" , byId) ;
}
@PostMapping ( "/updateById" )
@ResponseBody
public 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 ( ) {
var 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>
前后端分离跨域为解决
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings ( CorsRegistry registry ) {
registry. addMapping ( "/**" )
. allowedOriginPatterns ( "*" )
. allowCredentials ( true )
. allowedMethods ( "GET" , "POST" , "DELETE" , "PUT" , "PATCH" )
. maxAge ( 3600 ) ;
}
}