前后端数据交互

功能要求

简单实现 员工信息 从 后端 服务器 数据库 加载 并 动态渲染 在Web端,以及Web端新增 员工信息 发送给 后端服务器 写入 数据库 中,实现前后端的数据交互。

主要涉及框架

  • Bootstrap
  • Vue
  • ajax
  • Spring Boot

后端

新建项目

首先新建一个 Spring Starter Project 工程,勾选以下 4 个依赖
在这里插入图片描述
整个项目的包结构如下,可在 java 包下新建了3个包,分别用来存放控制器类、实体类和映射类,在 resources 包的 static 包下新建了一个 hr 页面,以及在这新建一个 js 文件夹用来存放写前端页面用到的 vue.js 和 axios.js 库,这样就可以从本地导入所需库,加快程序的部署与运行。
在这里插入图片描述

新建数据库

新建一个 hr 数据库,创建一个 员工表 employee,表结构如下
在这里插入图片描述
向表中插入几条数据
在这里插入图片描述
在配置文件 application.properties 中配置 数据源,MySQL的端口号默认是3306,但我电脑装了两个,这里避免冲突混淆,所以指定的端口号是5306,这里需要根据你自己的设定来配置。
在这里插入图片描述

编写实体类

entity 包下新建一个实体类Employee,对应上面创建的员工表

public class Employee {

	String name;
	char gender;
	String position;
	
	public Employee() {
	}
	
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public char getGender() {
		return gender;
	}

	public void setGender(char gender) {
		this.gender = gender;
	}

	public String getPosition() {
		return position;
	}

	public void setPosition(String position) {
		this.position = position;
	}

}

编写映射类

mapper包下新建一个接口EmployeeMapper,作为员工表的映射,记得加上注解 @Mapper 标记为映射,在里面声明两个方法,分别是查找所有员工信息和插入一条员工信息,分别用 @Select@Insert 注解标记

import java.util.List;

import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

// 员工表映射

@Mapper
public interface EmployeeMapper {
	
	/**
	 * 查找全部员工信息
	 * @return
	 */
	@Select("select name,gender,position from employee")
	List<Employee> findAll();
	
	/**
	 * 插入一条员工信息
	 * @param employee
	 */
	@Insert("insert into employee(name,gender,position) values(#{name},#{gender},#{position})")
	void save(Employee employee);
}

编写控制器

controller包下新建一个HomeController类,加上 @Controller 注解标记为控制器,当请求根目录时返回视图的名字

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {

	@RequestMapping("/")
	public String home() {
		return "hr.html";
	}
}

再新建一个EmployeeController 类,并标记为 @RestConroller ,这样请求 URL 时返回 JSON 数据而不是视图名,在里面维持一个EmployeeMapper的引用,并标记为自动加载 @Autowired,编写两个方法,分别是获取所有员工信息和新增员工信息,在方法里调用EmployeeMapper对象相应的方法,并加上HTTP 请求操作的注解 @GetMapping@PostMapping,由于 ajax 返回的是JSON数据,参数必须加上 @RequestBody注解

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

// 控制器

@RestController
public class EmployeeController {

	@Autowired
	public EmployeeMapper employeeMapper;
	
	// 查询
	@GetMapping("/employee")
	public List<Employee> find(){
		return employeeMapper.findAll();
	}
	
	// 插入
	@PostMapping("/employee")
	public void add(
			@RequestBody Employee employee) {
		employeeMapper.save(employee);
	}
}

前端

head

编写前端页面 hr.html,用到了 Bootstrap、Vue 和 axios 库,需要在头部导入相应的资源

<head>
    <title>人力资源管理</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Vue.js 本地库-->
    <script src="js/vue.js"></script>

    <!-- axios.js 本地库 -->
    <script src="js/axios.min.js"></script>

</head>

body

在 body 标签里编写内容,主要分为 两部分

1.用户接口 UI

<!-- 用户接口 -->
    <div id="app" class="container">

        <!-- 巨幕、展板 -->
        <div class="jumbotron">
            <h1 class="display-3">人力资源管理</h1>
            <p class="lead">员工管理</p>
        </div>

        <!-- 面包屑导航 -->
        <nav class="breadcrumb">
            <a class="breadcrumb-item" href="#">首页</a>
            <a class="breadcrumb-item" href="#">部门管理</a>
            <span class="breadcrumb-item active">员工管理</span>
            <a class="breadcrumb-item" href="#">考勤管理</a>
        </nav>

        <!-- 容器 -->
        <div class="container">

            <!-- 按钮 模态框 -->
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-outline-success btn-lg my-3" data-toggle="modal" data-target="#modelId">
              录入新员工
            </button>
            <!-- Modal -->
            <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">录入新员工</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="">姓名</label>
                                <!-- v-modal 数据的双向绑定-->
                                <input v-model="name" type="text" class="form-control" name="" id="" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label for="">性别</label>
                                <input v-model="gender" type="text" class="form-control" name="" id="" placeholder="请输入性别 (男 or 女)">
                            </div>
                            <div class="form-group">
                                <label for="">职位</label>
                                <input v-model="position" type="text" class="form-control" name="" id="" placeholder="请输入职位">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                            <!-- @click 点击事件绑定 -->
                            <button @click="add()" type="button" class="btn btn-success" data-dismiss="modal">新增</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <table class="table">
                <thead class="table-dark text-center">
                    <tr>
                        <th>
                            <input type="checkbox">
                        </th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>职位</th>
                        <th>技能</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- v-for 声明式渲染 表格 数据 -->
                    <tr v-for="(emp, index) in empList">
                        <td class="text-center">
                            <input type="checkbox">
                        </td>
                        <td>{{empList[index].name}}</td>
                        <td>{{empList[index].gender}}</td>
                        <td>{{empList[index].position}}</td>
                        <td>暂无</td>
                        <td>暂无</td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页 导航 -->
            <nav aria-label="Page navigation">
                <ul class="pagination pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>

    </div>

2. JS 交互

定义用户、网络的交互行为

    <script>
        let v = new Vue({
            el: '#app',
            data: {
                name: '',
                gender: '',
                position: '',
                empList: []
            },
            methods: {
                // 新增员工
                add: function() {
                    let p = {
                        'name': this.name,
                        'gender': this.gender,
                        'position': this.position
                    };

                    // 发送数据给服务器
                    axios.post('/employee', p)
                        .then(res => {
                            console.log(res)
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }
            },
            created() {
                console.log('---- created');
                // 从服务器获取数据
                axios.get('/employee')
                    .then(res => {
                        console.log("获取结果:" + res)
                        console.log(res.data);
                        this.empList = res.data;
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

        })
    </script>

运行测试

启动 Spring Boot App,随后通过浏览器访问 http://127.0.0.1:8080/ ,数据都被加载出来,并声明式的渲染到表格中
在这里插入图片描述
新增员工信息,通过点击录入新员工按钮,在弹出的模态框中填入信息并点击新增按钮。
在这里插入图片描述
刷新页面,可以看到新增的员工信息也被加载出来
在这里插入图片描述
再查看一下数据库,新增的信息也被插入到数据库中了
在这里插入图片描述

总结

到此为止,功能要求基本都实现了。通过请求 URL 返回页面,页面被创建时向服务器发出GET请求,获取所有员工信息,使用Vue框架的声明式渲染把数据动态填充到页面表格中。当新增员工信息时,向服务器发出POST请求,把JSON数据传给后端服务器,服务器写入数据库中。

  • 14
    点赞
  • 92
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前后端数据交互是指前端页面与后端服务器之间的数据传输和交流过程。在一个典型的应用中,前端负责展示数据和与用户交互,而后端则处理数据的存储、处理和逻辑运算。 以下是一种常见的前后端数据交互方式: 1. 客户端发送请求:前端通过发送HTTP请求向后端服务器请求数据或提交用户的操作。 2. 服务器处理请求:后端服务器接收到请求后,根据请求的类型和参数进行相应的处理。这可能包括查询数据库、计算、验证和其他业务逻辑。 3. 数据传输:后端服务器将处理结果封装成合适的数据格式(如JSON、XML等),通过HTTP响应返回给前端。 4. 客户端处理响应:前端接收到后端返回的数据后,进行解析和处理。可以根据需要更新页面内容、展示提示信息或执行其他操作。 在实际开发中,可以使用一些工具和技术来简化前后端数据交互的过程,例如: - 使用AJAX或Fetch API等技术实现异步请求,使页面能够在不刷新的情况下与后端交互。 - 前端框架(如React、Vue.js)和后端框架(如Spring Boot、Django)提供了一些便捷的函数和方法来处理数据交互。 - RESTful API设计规范可以约定前后端的接口规范,使双方能够更好地协作。 总之,前后端数据交互是实现一个完整应用的重要部分,通过合理的设计和技术选择,可以使前后端之间的数据传输更加高效和可靠。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值