devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：羊村懒王 | 2024-04-01 08:13:04

赞

踩

springboot 集成html和js

文章目录

前言

上一篇：【个人项目实战】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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

二，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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

（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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

三，踩过的坑

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分页插件

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/347886
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号