springboot+thymeleaf+vue页⾯开发
title: springboot+thymeleaf+vue页⾯开发
copyright: true
categories: springmvc和springboot
tags: [springboot,VUE]
password:
springboot推荐的页⾯模板是thymeleaf，在前后端不分离的情况下，springboot推荐⽤html做页⾯，然后⽤thymeleaf做模板引擎，做数据渲染，但是这种⽅式还是要⽤js或者jquery⼿动去操作dom，很难受，研究了⼀下，可以⽤springboot也可以⽤vue，如下：
⽂章⽬录
⼀、thymeleaf的修改
1、thymeleaf默认的校验规则是HTML5，但是这种规则太严格，需要改成LEGACYHTML5
2、需要引⼊⼀个jar包
<dependency>
<groupId>kohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
NekoHTML 是⼀个简单地HTML扫描器和标签补偿器(tag balancer) ，使得程序能解析HTML⽂档并⽤标准的XML接⼝来访问其中的信息。这个解析器能投扫描HTML⽂件并“修正”许多作者（⼈或机器）在编写HTML⽂档过程中常犯的错误。NekoHTML 能增补缺失的⽗元素、⾃动⽤结束标签关闭相应的元素，以及不匹配的内嵌元素标签。NekoHTML 的开发使⽤了Xerces
Native Interface (XNI)，后者是Xerces2的实现基础。
⼆、引⼊vue和iview
vue是⼀套js框架，虚拟dom，数据双向绑定
iView 是⼀套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界⾯的中后台产品。
页⾯代码如下所⽰：
<!DOCTYPE HTML>
<html lang="en"
th="">
<head include="console/header">
</head>
<body>
<script type="text/javascript"inline="javascript">
var dealMeasureEnum =[[${dealMeasureEnum}]];
</script>
<style type="text/css">
th.demo-table-info-column{
text-align: center !important;
}
td.demo-table-info-column{
text-align: center !important;
}
span.item{
span.item{
margin-left: 10px;
}
</style>
<!-- import Vue.js -->
<script src="cdn.bootcss/vue/2.5.16/vue.min.js"></script>
<!-- import stylesheet -->
<link href="cdn.bootcss/iview/2.14.0/styles/iview.css" rel="stylesheet">
<!-- import iView -->
<script src="cdn.bootcss/iview/2.14.0/iview.min.js"></script>
<div include="console/footer"></div>
<div id="app">
<div>
<blockquote class="layui-elem-quote">
<h1>商家违规管理</h1>
<!--<small> 销售报表</small>-->
</blockquote>
<hr/>
</div>
<div >
<i-input v-model="phone" placeholder="请输⼊⼿机号" ></i-input>
<label >处罚分类:</label>
<i-select v-model="dealMeasure" >
<i-option value="">全部</i-option>
<i-option each="e,eStat:${dealMeasureEnum}"
value="${e.code}"text="${e.desc}"></i-option>
</i-select>
<date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss"
placeholder="申请开始时间"
@on-change="dealTimeStartDataChange"/>
<date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss"
placeholder="申请结束时间"
@on-change="dealTimeEndDataChange"/>
<i-button type="primary" @click="getDataList">搜索</i-button>
</div>
<hr >
<i-button @click="add">添加</i-button>
<i-table :data="tableData" :columns="tableColumns" border stripe></i-table>
<div >
<div >
<page :total="totalElements" :page-size="size" show-sizer @on-page-size-change="changePageSizeFun"                  @on-change="changePagesFun"></page>
</div>
</div>
<modal v-model="myModal" title="添加/修改违规信息" @on-ok="ok" :loading="loading" width="600px">
<i-form :model="addFormData" :label-width="80">
<form-item label="商家⼿机号:">
<i-input v-model="addFormData.phone" placeholder="请输⼊⼿机号" ></i-input>
<i-button @click="see" >查询</i-button>
</form-item>
<hr >
<div>
<div >
<span class="item">该商家当前扣分:{{addFormData.deductPointAlready}},</span>
<span class="item">账户余额:{{addFormData.accountBalance}},</span>
<span class="item">账户余额:{{addFormData.accountBalance}},</span>
<span class="item">冻结⾦额:{{addFormData.freezeMoney}}</span>
</div>
<form-item label="处罚分类:">
<i-select v-model="addFormData.dealMeasure" >
<i-option v-for="item in dealMeasureEnum" :value="de" :key="de">
{{ item.desc }}
</i-option>
</i-select>
</form-item>
<form-item label="扣分:">
<input-number v-model="addFormData.deductPoint" precision="0"></input-number>
<date-picker type="date" format="yyyy-MM-dd" v-model="addFormData.deadLineTimeStamp"                                placeholder="扣分有效期"
@on-change="(data)=>addFormData.deadLineTime=data"/>
<span>默认⼀个⽉</span>
</form-item>
<form-item label="扣款:">
<input-number v-model="addFormData.deductFee" step="0.01"
:formatter="value=>decimal(value)"></input-number>
元
</form-item>
<form-item label="违规说明:">
<i-input v-model="ason" type="textarea" :autosize="{minRows: 2,maxRows: 5}"                            placeholder="请输⼊处罚原因"></i-input>
</form-item>
</div>
</i-form>
</modal>
</div>
</body>
<script type="text/javascript">
/*<![CDATA[*/
let app =new Vue({
el:'#app',
data(){
return{
page:0,
size:10,
totalElements:0,
dealMeasureEnum: dealMeasureEnum,
loading:false,
addFormData:{
deadLineTimeStamp:'',
phone:'',
deductPoint:0,
deductPointAlready:0,
accountBalance:0,
freezeMoney:0,
dealMeasure:'',
deadLineTime:'',
deductFee:0,
reason:''
},
myModal:false,
phone:'',
dealMeasure:'',
dealTimeStart:'',
dealTimeEnd:'',
tableColumns:[],
tableData:[],
}
}
},
created(){
},
methods:{
see(){
var self =this;
$.get("/console/sp/get?phone="+ self.addFormData.phone,{},function(res){
if(res && res.status){
let data = res.data;
self.addFormData.deductPointAlready = data.userRecord.deductPoint;
self.addFormData.accountBalance = FenToYuan(data.userAccount.accountBalance);
self.addFormData.freezeMoney = FenToYuan(data.userAccount.freezeMoney);
}
})
},
decimal(value){
var value = String();
value = place(/[^\d.]/g,"");//清除"数字"和"."以外的字符
value = place(/^\./g,"");//验证第⼀个字符是数字
value = place(/\.{2,}/g,".");//只保留第⼀个, 清除多余的
value = place(".","$#$").replace(/\./g,"").replace("$#$",".");
value = place(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输⼊两个⼩数
return value;
}
,
changePagesFun(page){
// The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server this.page = page -1;
}
,
changePageSizeFun(size){
// The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server this.size = size;
}
,
dealTimeStartDataChange(data){
this.dealTimeStart = data;
}
,
dealTimeEndDataChange(data){
this.dealTimeEnd = data;
}
,
add(){
this.addFormData ={
deadLineTimeStamp:'',
phone:'',
deductPoint:0,
deductPointAlready:0,
accountBalance:0,
freezeMoney:0,
dealMeasure:'',
deadLineTime:'',
deductFee:0,
reason:''
};
}
,
edit(row){
var self =this;
$.get("/console/sp/get?sellerId="+ row.sellerId,{},function(res){
if(res && res.status){
let data = res.data;
self.addFormData ={
id: row.id,
phone: her.phone,
deductPoint: row.deductPoint,
deductPointAlready: data.userRecord.deductPoint,
accountBalance: FenToYuan(data.userAccount.accountBalance),
html 网页 模板 引导
freezeMoney: FenToYuan(data.userAccount.freezeMoney),
dealMeasure: row.dealMeasure,
deadLineTime: self.timeFormatter(row.deadLineTime),
deadLineTimeStamp:new Date(row.deadLineTime),
deductFee: FenToYuan(row.deductFee),
deductFee: FenToYuan(row.deductFee),
reason: ason
};
}
})
}
,
ok(){
var self =this;
$.post("/console/sp/addAndEdit",this.addFormData,function(data){ if(data && data.status){
self.$Message.success('成功');
}else{
self.$(data.msg);
}
});
}
,
getTableColumns(){
let self =this;
this.tableColumns =[
{
title:'创建时间',
key:'createTime',
className:'demo-table-info-column',
render:function(h, params){
var row = w;
return h("div", self.ateTime))
}
},
{
title:'⼿机号',
key:'-',
className:'demo-table-info-column',
render:function(h, params){
var row = w;
return h("div", her.phone)
}
},
{
title:'处罚分类',
key:'dealMeasure',
className:'demo-table-info-column',
render:function(h, params){
var row = w;
return h("div",getDealMeasure(row.dealMeasure))
}
},
{
title:'扣分',
key:'deductPoint',
className:'demo-table-info-column',
render:function(h, params){
var row = w;
return h("div", row.deductPoint)
}
},
{
title:'状态',
key:'deadLineTime',
className:'demo-table-info-column',
render:function(h, params){
var row = w;
var deadLineTime = row.deadLineTime;
if(deadLineTime >new Date()){
return h("div","已⽣效");
}
return h("div","已过期");
}
},
{
title:'说明',
key:'reason',
className:'demo-table-info-column',
render:function(h, params){
var row = w;
return h("div", ason)
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。