【个人项目实战】2，springboot集成（Html+vue.js）前端框架

[【个人项目实战】1，搭建springboot+mybatis框架项目](https://blog.csdn.net/weixin_46401390/article/details/116430840)文章目录前言总结前言由于之前有使用springMVC做了一个个人的项目，但是想重构成springboot+mybatis框架的项目，因此借此机会顺便记录下搭建一套简单的springboot+myba

weixin_46401390

2772人浏览 · 2021-05-05 22:16:44

weixin_46401390 · 2021-05-05 22:16:44 发布

前言

上一篇：【个人项目实战】1，搭建springboot+mybatis框架项目

为了减少项目部署简单，因此将前端与后端写在同一项目中，但风格仍是前后端分离的方式，前端使用的vue.js的框架来实现前端页面开发，后端采用的json报文的接口方式。

使用vue的好处：
1，它帮我完成了变量的双向绑定，自动赋值
2，样式统一且美观

一，导入VUE组件库

js文件可从https://unpkg.com里进行下载，然后放置项目本地

<!--https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css-->
    <!--https://unpkg.com/element-ui@1.4.13/lib/theme-default/fonts/element-icons.woff-->
<link rel="stylesheet" href="../../css/index.css">

<!-- import Vue before Element -->
<script src="../../js/vue.js"></script>
<script src="../../js/axios.js"></script>

<!-- import JavaScript -->
<script src="../../js/index.js"></script>

二，springboot引入html

1，springboot配置文件中配置静态资源

在这里插入图片描述

2，编写一个html

在这里插入图片描述
通过相对路径来访问html页面。
http://localhost:8086/html/doctor/ylCard.html
（还未精修）：

3，关键代码

（1）引入饿了么CSS

<head>
    <meta charset="UTF-8">
    <title>
        医疗账户管理
    </title>
    <!-- import CSS -->
    <!--https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css-->
    <!--https://unpkg.com/element-ui@1.4.13/lib/theme-default/fonts/element-icons.woff-->
    <link rel="stylesheet" href="../../css/index.css">
</head>

（2）引入关键JS

<!-- import Vue before Element -->
<script src="../../js/vue.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/httpUtil.js"></script>
<!-- import JavaScript -->
<script src="../../js/index.js"></script>

（3）编写页面body内容

<body>
<div id="app" v-cloak>
    <div style="padding: 20px;">
        <div>
            <div class="commonCss">
                <el-row>
                    <el-col :span="3" class="firstCol line-height-32" style="text-align: right;">
                        医疗账号：
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="ylCard" style="border:0px;"></el-input>
                    </el-col>
                    <el-col :span="3" class="firstCol line-height-32" style="text-align: right;">
                        户主姓名：
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="master" style="border:0px;"></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                    </el-col>
                    <el-col :span="2">
                        <el-button size="small" type="info" plain @click="clear">
                            重 置
                        </el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button size="small" type="primary" icon="el-icon-search" :loading="loading"
                                   @click="queryClick">
                            <b>查 询</b>
                        </el-button>
                    </el-col>
                </el-row>
                <el-row class="fromHeader">
                    <el-col :span=3>
                        <span class="titleTop"></span>
                        <span class="headerText">
                            查询结果
                          </span>
                    </el-col>
                </el-row>
            </div>
            <el-table ref="singleTable" :data="migrationResultList" v-loading="loading" :border=true
                      tooltip-effect="dark"
                      highlight-current-row max-height="500" style="width: 100%;"
                      :default-sort="{prop: 'createDate', order: 'descending'}">
                <el-table-column prop="ylCard" label="医疗账号" show-overflow-tooltip width="500">
                </el-table-column>
                <el-table-column prop="master" label="户主姓名" show-overflow-tooltip width="400">
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip sortable width="400">
                </el-table-column>
            </el-table>
            <div class="pagination-block">
                <el-pagination :current-page="currentPage" :page-sizes="pageSizes" :total="total"
                               :page-size="currentPageSize"
                               layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"/>
            </div>
        </div>
    </div>
</div>
</body>

（4）编写变量与事件方法

<script type="module">
    new Vue({
        el: '#app',
        data: function () {
            return {
                migrationResultList: [],
                ylCard: '',
                master: '',
                createDate: '',
                currentPage: 1,
                total: 0,

                currentPageSize: 10,
                pageSizes: [10, 50, 100, 200, 300],
                loading: false
            }
        },
        methods: {
            handleSizeChange(pageSize) {
                this.currentPage = 1;
                this.currentPageSize = pageSize;
                this.queryClick();
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.queryClick();
            },
            clear() {
                this.ylCard = '';
                this.master = '';
            },
            queryClick() {
                this.loading = true;
                alert("出发查询按钮单击事件");
                const params = {
                    'epmMigrationResultBo.createdBy': this.createdBy,
                    'epmMigrationResultBo.pageData.pageNum': this.currentPage,
                    'epmMigrationResultBo.pageData.pageSize': this.currentPageSize
                };
                // 调用后端--查询接口
                httpUtil.httpPost("",params).then(result => {
                    if (result.code == '0000') {
                        this.migrationResultList = result.rows.map(item => {
                            return item;
                        });
                        this.total = result.total;
                    } else {
                        alert(result.msg);
                    }
                    this.loading = false;
                });
            }

        }
    })
</script>

三，踩过的坑

1，页面的部门图标显示方框（错误）

原因是找不到框架的特殊符号编码
后来发现是由于下边的两个文件的版本和index.css，index.js的版本不一致导致的。
在这里插入图片描述
解决方法：
取同一版本的文件即可，比如我这里是从https://unpkg.com/browse/element-ui@2.14.1/lib/
取的这四个文件，重新导入后启动项目正常了

总结

html集成vue.js组件总而言之就是导入关键的几个js和css，然后剩下的工作是就从饿了么组件库选取自己想要的元素标签来做前端：https://element.eleme.cn/#/zh-CN/component/installation

下一篇：【个人项目实战】3，springboot集成mybatis分页插件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^