前后端分离 Vue + Springboot 实现用户列表单页面开发（建议收藏）-优快云博客

本文链接：https://blog.youkuaiyun.com/javadada1197/article/details/119414210

本文介绍了如何使用Vue.js前端框架和SpringBoot后端框架实现一个用户列表页面，包括用户查询、添加、修改和删除功能。详细讲解了前端HTML页面编写、SpringBoot项目创建、数据库连接、实体类编写以及前后端交互的实现步骤。

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

用户列表页面开发
项目介绍
1、前端html页面编写
2、springboot框架搭建
2.1、项目创建
2.2、连接数据库
2.3、项目完整依赖
3、编写entity层
4、查询用户信息
4.1、后端代码编写
4.2、前端代码编写
5、添加用户信息
5.1、后端代码编写
5.2、前端代码编写
6、修改用户信息
6.1、后端代码
6.2、前端代码
7、删除用户信息
7.1、后端代码
7.2、前端代码

用户列表页面开发

项目介绍
用户列表页面开发，可以实现简单的查询，删除，修改，和添加用户信息功能。前端使用vue框架，后端使用springboot框架，一个简单的vue+springboot前后端分离小项目。

本项目主要模块及技术点如图

1、前端html页面编写

页面：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div id="app">

        <div class="container-fluid">
            <!--标题行-->
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
            </div>
            <!--数据行-->
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <!--添加按钮-->
                    <a href="" class="btn-success btn-sm">添加</a>
                    <!--列表-->
                    <table class="table table-striped table-bordered" style="margin-top: 10px;">
                        <tr>
                            <td>编号</td>
                            <td>姓名</td>
                            <td>工资</td>
                            <td>年龄</td>
                            <td>个人简介</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="user in users">
                            <td>{
   {user.id}}</td>
                            <td>{
   {user.name}}</td>
                            <td>{
   {user.salary}}</td>
                            <td>{
   {user.age}}</td>
                            <td>{
   {user.description}}</td>
                            <td>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                                <a href="" class="btn btn-info btn-sm">修改</a>
                            </td>
                        </tr>

                    </table>
                    <!--添加 和 修改表单-->
                    <form>
                        <div class="form-group">
                            <label class="control-label">编号</label>
                            <div >
                                <p class="form-control-static">0001</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="salary">工资</label>
                            <input type="text" class="form-control" id="salary" placeholder="请输入工资">
                        </div>
                        <div class="form-group">
                            <label for="age">年龄</label>
                            <input type="text" class="form-control" id="age" placeholder="请输入年龄">
                        </div>
                        <div class="form-group">
                            <label for="description">个人简介</label>
                            <input type="text" class="form-control" id="description" placeholder="请输入个人简介">
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<!--引入vue-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",