非前后分离项目，后端页面想使用前端vue的mvvm思想，想使用iview强大的交互性，这时，可以使用thymeleaf+vue来实现，thymeleaf提供了后端页面引擎，vue支持在html页面上直接编译执行。
后端依赖
<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>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
后端控制器
@Controller
@RequestMapping("user")
public class UserController {
@GetMapping("list")
public String list(Model model) {
List<UserVo> userVoList = new ArrayList<>();
userVoList.add(UserVo.builder().name("zzl").age(38).address("beijing").date(Date.from(Instant.now())).build());
userVoList.add(UserVo.builder().name("zhz").age(12).address("beijing").date(Date.from(Instant.now())).build());
userVoList.add(UserVo.builder().name("zql").age(41).address("hebei").date(Date.from(Instant.now())).build());
model.addAttribute("list", userVoList);
return "user/list";
}
}
/template/user/list.html页面
<div id="app">
<i-layout>
<i-content :style="{margin: '20px', minHeight: '220px'}">
<div class="search">
<Card @keydown.enter.native="handleSearch">
<Row>
<Form ref="searchForm" inline :label-width="70">
<FormItem label="手机号" prop="mobile">
<Input
type="text"
v-model="searchForm.mobile"
clearable
placeholder="请输入手机号"
style=" 200px"
/>
</FormItem>
<FormItem label="邮箱" prop="email">
<Input
type="text"
v-model="searchForm.email"
clearable
placeholder="请输入邮箱"
style=" 200px"
/>
</FormItem>
<FormItem label="性别" prop="sex">
<Select v-model="searchForm.sex" placeholder="请选择" clearable style=" 200px">
<Option v-for="(item, i) in dictSex" :key="i" :value="item.value">{{item.title}}
</Option>
</Select>
</FormItem>
<FormItem label="登录账号" prop="username">
<Input
type="text"
v-model="searchForm.username"
clearable
placeholder="请输入登录账号"
style=" 200px"
/>
</FormItem>
<FormItem>
<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
</FormItem>
</Form>
</Row>
</Card>
</div>
<i-table border :columns="columns" :data="data"></i-table>
</i-content>
</i-layout>
</div>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var myHome = new Vue({
el: '#app',
data() {
return {
dictSex: [{title: "男", value: "0"}, {title: "女", value: "1"}],
searchForm: {
username: "",
mobile: "",
email: "",
sex: "0"
},
columns: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: "操作",
key: "action",
200,
align: "center",
fixed: "right",
render: (h, params) => {
let enableOrDisable = "";
if (params.row.age % 2 == 0) {
enableOrDisable = h(
"Button",
{
props: {
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.disable(params.row);
}
}
},
"禁用"
);
} else {
enableOrDisable = h(
"Button",
{
props: {
type: "success",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.enable(params.row);
}
}
},
"启用"
);
}
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.edit(params.row);
}
}
},
"编辑"
),
enableOrDisable,
h(
"Button",
{
props: {
type: "error",
size: "small"
},
on: {
click: () => {
this.remove(params.row);
}
}
},
"删除"
)
]);
}
}
],
data: [[${list}]] // 后端的集合
}
},
methods: {
edit(v) {
this.$Modal.confirm({
title: "确认启用",
content: "您确认要启用用户 " + v.username + " ?",
loading: true,
onOk: () => {
this.$Modal.remove();
this.$Message.success("操作成功");
}
});
},
remove(v) {
this.$Message.success("操作成功");
},
enable(v) {
this.$Message.success("操作成功");
},
disable(v) {
this.$Message.success("操作成功");
},
handleSearch() {
this.$Message.success("操作成功");
}
}
})
/*]]>*/
</script>
截图
