SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...

最新推荐文章于 2025-04-14 09:55:25 发布

赤兔胭脂小吕布

最新推荐文章于 2025-04-14 09:55:25 发布

阅读量4.4k

点赞数 4

本文链接：https://blog.youkuaiyun.com/m0_52602967/article/details/126146273

版权

本文介绍了如何使用SpringBoot搭建前端页面，包括在resources的static目录下创建HTML文件，利用Element进行页面快速成型。接着，讨论了前端页面的编写，如使用Table展示数据，并实现了分页、增删改查功能。虽然前端实现细节未展开，但提到了涉及的代码层级，包括Controller、Service、Dao和Entity层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面的搭建

首先我们在resources包下新建一个文件夹static，SpringBoot默认会去把static包下的文件做一个路由

然后在static包下新建一个HTML File类型的文件，文件名为index.html(这是默认的)

在index.html文件中

<!DOCTYPE html>
<html lang="en">
//完整的html分为head(头)、body(身)
<head>
//head中一般写一些描述性的东西，或者引入一些样式
    <meta charset="UTF-8">
    //上面都不用管，实际上html就是xml格式的文件
    //首先我们把这里的一级标题修改一下
    <title>学生信息1</title>
</head>
<body>
//网页的内容在body中定义
//<h1>~<h6> -- 一级到六级标题
//实际上MarkDown和html可以相互转换
<h2>学生信息2</h2>
</body>
</html>

那么学生信息1和学生信息2有什么区别呢？？

#注在运行SpringBoot项目之后，index.html可以直接在文件夹中通过浏览器打开

在看完两个标题的区别之后，我们继续在index.html文件中添加内容

Element--网站快速成型工具

//刚刚的网页页面只有标题，光秃秃的很难看
//所以我们这边去加一些样式，这里需要用到前端的一些样式库
//在这里推荐前端框架Vue，基于它开发的有一个前端样式库element

将在前端样式库element中拉过来的模板修改之后覆盖之前index.html文件的内容

//前端页面的搭建
//(添加分页功能、前端页面的布局、新增和删除功能、编辑功能和搜索功能之前的)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="element.css">
</head>

<body>
<h2>学生信息</h2>
<div id="app">
//我们先把上半部分的el-table拉到index.html文件中，并做相应修改
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="clazz"
                label="班级">
        </el-table-column>
        <el-table-column
                prop="sumScore"
                label="总分">
        </el-table-column>
    </el-table>
</div>
</body>

<!-- 导入前端依赖库 -->
<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>

<script>
    new Vue({
    //这里的#app是jquery的语法，#表示查找id，那么#app就是取到上面<div id="app">这个标签
      el: '#app',
      data:{
      //在这个data后面加上上面表格需要展示的数据
        tableData: [],//先定义tableData的类型--list
      },
      //这边还可以加上created()方法，在它初始化的时候会默认调用这个方法
      created(){
        $.get("http://localhost:8080/stu").then(res=>{
                //这里面是赋值操作

最低0.47元/天解锁文章