Vue实战之实现员工列表案例（结合后端服务接口）

原创

已于 2023-03-10 05:24:14 修改

· 1.1k 阅读

4 ·

版权

文章标签：

#vue

于 2021-07-30 16:34:37 首次发布

本文展示了使用Spring Boot后端服务接口与Vue.js前端页面进行数据交互的案例。包括查询、添加、删除和更新员工信息的功能实现，前端使用Vue进行表格展示、表单操作，并通过axios库处理HTTP请求。

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

文章目录

–

案例演示

在这里插入图片描述

后端服务接口

@RestController
@CrossOrigin
public class EmpController {
   
    private static final Logger log = LoggerFactory.getLogger(EmpController.class);
    /**
     * 服务对象
     */
    @Resource
    private EmpService empService;

    /**
     * 通过主键查询单条数据
     * @param id 主键
     * @return 单条数据
     */
    @GetMapping("/emp/{id}")
    public Emp emp(@PathVariable("id") Integer id) {
   
        return this.empService.queryById(id);
    }

    //查询所有员工信息
    @GetMapping("/emp")
    public List<Emp> emps() {
   
        List<Emp> emps = empService.queryAllByLimit(0, Integer.MAX_VALUE);
        log.info("查询数据库员工列表条数：{}", emps.size());
        return emps;
    }

    //保存员工信息
    @PostMapping("/emp")
    public void update(@RequestBody Emp emp) {
   
        log.info("当前保存或修改员工信息：{}", emp.toString());
        if (StringUtils.isEmpty(emp.getId())) {
   //保存
            empService.insert(emp);
        } else {
   
            empService.update(emp);
        }
    }

    //根据员工id删除员工信息
    @DeleteMapping("/emp/{id}")
    public void delete(@PathVariable("id") Integer id) {
   
        log.info("要删除的员工id：{}", id);
        empService.deleteById(id);
    }
}

前端 vue 代码

<!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"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin