非前后分離項目，后端(duan)(duan)頁面想使(shi)用前端(duan)(duan)vue的mvvm思想，想使(shi)用iview強大的交(jiao)互性，這時，可以使(shi)用thymeleaf+vue來實現(xian)，thymeleaf提供了后端(duan)(duan)頁面引(yin)擎，vue支持在html頁面上(shang)直接編譯(yi)執行。

后端依賴

<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="width: 200px"
                                />
                            </FormItem>
                            <FormItem label="郵箱" prop="email">
                                <Input
                                        type="text"
                                        v-model="searchForm.email"
                                        clearable
                                        placeholder="請輸入郵箱"
                                        style="width: 200px"
                                />
                            </FormItem>
                            <FormItem label="性別" prop="sex">
                                <Select v-model="searchForm.sex" placeholder="請選擇" clearable style="width: 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="width: 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",
                        width: 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>

截圖