二十、Spring Boot - element-ui - 部门管理系统（2）

已于 2024-07-29 22:52:53 修改
阅读量1.1k 收藏
点赞数 1
分类专栏： # 计算机（Java进阶）中级 进阶阶段 文章标签： 1024程序员节 java spring boot vue.js
于 2022-10-24 22:28:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42171159/article/details/127484162
版权

🌻🌻 目录

一、前后端数据交互

1.1 修改前端页面 pageOne.vue

1.1.1 修改前端表结构

element-ui 表模板代码

在这里插入图片描述

拷贝 element-ui代码相应代码替换 PageOne.vue，做细微调整代码显示如下所示：

PageOne.vue

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="deptno"
      label="部门编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="dname"
      label="部门姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="dloc"
      label="部门地址"
      width="120">
    </el-table-column>

    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }, {
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }, {
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }]
      }
    }
  }
</script>

在这里插入图片描述

1.1.2 添加分页显示

element-ui 分页模板代码

在这里插入图片描述
添加分页代码（注：要添加 div标签 ）

<el-pagination
  background
  layout="prev, pager, next"
  :page-size="10"
  :total="100">
</el-pagination>

在这里插入图片描述

最终显示：

在这里插入图片描述

1.1.3 给分页添加一个事件

在这里插入图片描述

最终显示

在这里插入图片描述

1.2 数据交互分页实现

  1. 像数据库表 myproject 中添加测试字段，参考如下
    在这里插入图片描述

  2. 后台测试分页

在这里插入图片描述
3. 前台测试分页

在这里插入图片描述

浏览器输入 http://localhost:8080/dept/PageOne

在这里插入图片描述

  1. 前台显示数据库数据

在这里插入图片描述

最终显示： http://localhost:8080/dept/PageOne#/PageOne

在这里插入图片描述

  1. 修改后端 DeptController.java
package com.zql.controller;

import com.zql.pojo.Dept;
import com.zql.repository.DeptRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.persistence.criteria.CriteriaBuilder;
import java.util.List;

/**
 * @Author:Daniel
 * @Version 1.0
 */
@RestController
@RequestMapping("/dept")
public class DeptController {

    @Autowired
    private DeptRepository deptRepository;

    @GetMapping("/findAll/{pageSize}/{size}")
    public Page<Dept> findAll(@PathVariable("pageSize") Integer pageSize, @PathVariable("size") Integer size){

        PageRequest pageRequest = PageRequest.of(pageSize, size);

        return deptRepository.findAll(pageRequest);
    }

}

在这里插入图片描述
6. 修改前端 PageOne.vue

在这里插入图片描述

完整代码：

<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="deptno"
      label="部门编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="dname"
      label="部门姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="dloc"
      label="部门地址"
      width="120">
    </el-table-column>

    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

    <br>
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size=pageSize
    :total=total
    @current-change="page">
  </el-pagination>
  </div>

</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },
      page:function (currentPage) {  //currentPage点击得页数
        //alert(currentPage)

        this.$http.get("http://localhost:8081/dept/findAll/"+(currentPage-1)+"/6").then(resp=>{

          console.log(resp)

          this.tableData = resp.data.content;

          this.pageSize = resp.data.size;

          this.total = resp.data.totalElements;

        })

      }
    },

    data() {
      return {

        pageSize:'11',//每页显示条数
        total:'22',//总条数

        tableData: [{
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }, {
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }, {
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }]
      }
    },
    created() {

    }
  }
</script>

最终显示：

在这里插入图片描述

二、部门数据添加

2.1 修改命名导入添加页面

2.1.1 修改命名

在这里插入图片描述

2.1.2 导入添加页面

Element-ui 表单验证

在这里插入图片描述
导入到 AddDept.vue显示如下

在这里插入图片描述
修改代码：

<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="部门名称" prop="dname">
    <el-input v-model="ruleForm.dname"></el-input>
  </el-form-item>

  <el-form-item label="部门地址" prop="dloc">
    <el-input v-model="ruleForm.dloc"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          dname: '',
          dloc: '',
        },
        rules: {
          dname: [
            { required: true, message: '请输入部门名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          dloc: [
            { required: true, message: '请输入部门地址', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            console.log(this.ruleForm);
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

在这里插入图片描述

在这里插入图片描述

2.2 后端开发

  1. 测试是否存在添加得方法

在这里插入图片描述

@Test
void addDept() {

    Dept dept = new Dept();

    dept.setDname("研发部步");
    dept.setDloc("澳门");

    Dept save = deptRepository.save(dept);
    System.out.println(save);

}
  1. 报错：

在这里插入图片描述

解决（添加注解）：

在这里插入图片描述
添加成功显示

在这里插入图片描述

  1. 编写后端接口
    DeptController.java
@PostMapping("/save")
    public String save(@RequestBody Dept dept){

        Dept result = deptRepository.save(dept);

        if(result != null){

            return "sucess";
        }else {

            return "error";
        }
}

前端对接：
element-ui 的弹出界面

this.$http.post("http://localhost:8081/dept/save",this.ruleForm).then(resp=>{
	 if(resp.data != null){
	   //alert("添加成功");
	   this.$alert('添加成功', '消息', {
	     confirmButtonText: '确定',
	     callback: action => {
	       this.$router.push('/DeptManager')
	     }
	   });
	 }else{
	   alert("添加失败")
	 }
})

在这里插入图片描述

测试得：http://localhost:8080/dept/#/DeptManager

（1）仅弹出
在这里插入图片描述

（2）引入了element-ui 的弹出界面

在这里插入图片描述

（3）添加成功如下显示

先成功添加到数据库，后同步显示到页面
在这里插入图片描述
在这里插入图片描述

三、修改部门数据

3.1 修改页面引入

  1. 将来上述添加页面拷贝一份作为修改页面
    在这里插入图片描述

  2. 简单修改 DeptManager.vue（获取部门编号，跳转到修改页）

在这里插入图片描述

3.2 前后接口交互

  1. 后端代码：
@GetMapping("/findById/{deptno}")
public Dept findById(@PathVariable("deptno") Integer deptno){

   return deptRepository.findById(deptno).get();
}

@PutMapping("/update")
public String update(@RequestBody  Dept dept){

    Dept result = deptRepository.save(dept);

    if(result != null){

        return "sucess";
    }else{
        return "error";
    }
}
  1. 前端修改
    在这里插入图片描述

在这里插入图片描述

  1. 前端完整代码 UpdateDept.vue
<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

    <el-form-item label="部门编号" prop="deptno" readonly>
      <el-input v-model="ruleForm.deptno"></el-input>
    </el-form-item>

    <el-form-item label="部门名称" prop="dname">
      <el-input v-model="ruleForm.dname"></el-input>
    </el-form-item>

    <el-form-item label="部门地址" prop="dloc">
      <el-input v-model="ruleForm.dloc"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          deptno:'',
          dname: '22',
          dloc: '23',
        },
        rules: {
          dname: [
            { required: true, message: '请输入部门名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          dloc: [
            { required: true, message: '请输入部门地址', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            //console.log(this.ruleForm);

            this.$http.put("http://localhost:8081/dept/update",this.ruleForm).then(resp=>{

              if(resp.data != null){
                //alert("添加成功");
                this.$alert('修改成功', '消息', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$router.push('/DeptManager')
                  }
                });
              }else{
                alert("修改失败")
              }

            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created() {

      //alert(this.$route.query.deptno);

      this.$http.get("http://localhost:8081/dept/findById/"+
        this.$route.query.deptno).then(resp=>{

        this.ruleForm = resp.data;
      })
    }
  }
</script>
  1. 最终显示：http://localhost:8080/dept/

在这里插入图片描述
在这里插入图片描述

四、删除部门数据

4.1 后端接口

@DeleteMapping("/delete/{deptno}")
public void delete(@PathVariable("deptno") Integer deptno){

  deptRepository.deleteById(deptno);
}

4.2 前后端接口对接

在这里插入图片描述

完整代码 DeptManager.vue

<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="deptno"
      label="部门编号"
      width="140">
    </el-table-column>
    <el-table-column
      prop="dname"
      label="部门姓名"
      width="160">
    </el-table-column>
    <el-table-column
      prop="dloc"
      label="部门地址"
      width="160">
    </el-table-column>

    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="delete1(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <br>
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size=pageSize
    :total=total
    @current-change="page">
  </el-pagination>
  </div>

</template>

<script>
  export default {
    methods: {

      delete1(row){
        this.$http.delete("http://localhost:8081/dept/delete/"
          +row.deptno).then(resp=>{

          this.$alert('删除成功', '消息', {
            confirmButtonText: '确定',
            callback: action => {
              //this.$router.push('/DeptManager')
              window.location.reload();
            }
          });

        })
      },


      edit(row) {
        //alert(row.deptno);
        this.$router.push({
          path:'/update',
          query:{
            deptno:row.deptno
          }
        });
      },
      page:function (currentPage) {  //currentPage点击得页数
        //alert(currentPage)

        this.$http.get("http://localhost:8081/dept/findAll/"+(currentPage-1)+"/6").then(resp=>{

          console.log(resp)

          this.tableData = resp.data.content;

          this.pageSize = resp.data.size;

          this.total = resp.data.totalElements;

        })

      }
    },

    data() {
      return {

        pageSize: '11',//每页显示条数
        total: '22',//总条数

        tableData: [{
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }, {
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }, {
          deptno: '2016-05-02',
          dname: '王小虎',
          dloc: '上海'
        }]
      }
    },
    created() {

    }

  }
</script>

在这里插入图片描述

删除成功显示：

在这里插入图片描述

案例完整源码

Daniel521-Spark
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Spring Boot部门开发(一）
weixin_44766908的博客
09-14 286
第一节、 字典模块 任务1.1：创建字典类型表实体 任务描述 将字典类型表转换为实体； 任务实施 将自动生成的实体类放入对应包中； package com.common.platform.sys.modular.system.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisp
基于spring boot + element-ui的后台管理系统.zip
08-31
综上所述，"基于Spring Boot + Element-UI的后台管理系统"结合了强大的后端开发框架和优雅的前端组件库，能够构建出高效、稳定的管理平台。开发者在实践中，应深入理解Spring Boot的自动配置原理、Element-UI的组件...
springboot 使用session实现一个简单的部门管理系统
原罪的博客
02-28 976
系统描述 具体实现 Department类代码 其中springboot通过注解的方式实现对参数的验证并用拦截器拦截抛出自定义json的细节可以参考这篇 @AllArgsConstructor @NoArgsConstructor @Data public class Department{ public interface Add extends Default { } ...
基于Vue+ElementUI框架实现学生管理系统前端页面设计
最新发布
小谷同学的博客
06-27 928
通过Vue.js和ElementUI框架搭建一个简单的学生管理系统的前端页面骨架，适合新手来初步学习搭建项目。
简单的部门管理系统
weixin_53126056的博客
01-15 993
表结构 emp表 EMPNO | ENAME | JOB | MGR | HIREDATE | SAL | | DEPTNO | dept表 DEPTNO | DNAME | LOC public class JDBC_XITONG { public static void main(String[] args)throws Exception { Connection conn =null; PreparedStatement
element ui 多个子组件_基于 ElementUI 的 VUE 组件库
weixin_39655362的博客
11-20 430
介绍基于VUE和Element自定义小程序功能商品SKU截图安装npm install openants -Soryarn add openants快速开始OpenAnts组件是基于Element开发，所以在你安装安装OpenAnts我们将自动帮你安装ElementUI，而无需你自己安装，我们建议elementUI全局引入！全局使用OpenAntsmain.js中的配置import Vue fro...
JavaWeb——010SpringBootWeb综合案例（部门管理 & 员工管理）
pangyaqi的博客
03-01 1247
前面我们已经完了基础的分页查询，大家会发现：分页查询功能编写起来比较繁琐。查询总记录数指定页码的数据列表在Service当中，调用Mapper接口的两个方法，分别获取：总记录数、查询结果列表，然后在将获取的数据结果封装到PageBean对象中。大家思考下：在未来开发其他项目，只要涉及到分页查询功能(例：订单、用户、支付、商品)，都必须按照以上操作完成功能开发结论：原始方式的分页查询，存在着"步骤固定"、"代码频繁"的问题解决方案：可以使用一些现成的分页插件完成。
基于spring-boot+vuejs+element-ui的新闻发布管理系统.zip
10-15
基于spring-boot+vuejs+element-ui的新闻发布管理系统 基于spring-boot+vuejs+element-ui的新闻发布管理系统 基于spring-boot+vuejs+element-ui的新闻发布管理系统 基于spring-boot+vuejs+element-ui的新闻发布管理...
毕设源码-基于spring boot + element-ui的后台管理系统.zip
08-31
毕设源码-基于spring boot + element-ui的后台管理系统.zip毕设源码-基于spring boot + element-ui的后台管理系统.zip毕设源码-基于spring boot + element-ui的后台管理系统.zip毕设源码-基于spring boot + element-...
毕业设计-基于spring-boot+vuejs+element-ui的新闻发布管理系统源码.zip
08-31
毕业设计-基于spring-boot+vuejs+element-ui的新闻发布管理系统源码.zip毕业设计-基于spring-boot+vuejs+element-ui的新闻发布管理系统源码.zip毕业设计-基于spring-boot+vuejs+element-ui的新闻发布管理系统源码....
【SpringBoot+Vue】完结——小型部门管理系统
lht964249279的博客
02-01 2504
《Vue+Spring Boot前后端分离开发实战》完结，对SpringBoot+Vue的了解更加深刻，但未来路还很长，还有很多东西要学滴~~~我太难了，除夕夜被bug搞，被自己的无知搞，呜呜呜QAQ，这次加个最近的电脑壁纸作封面吧~
基于ElementUI的后台管理系统
08-09
基于ElementUI的后台管理系统
基于elementUI的vue后台管理系统
07-23
基于elementUI的vue后台管理系统，下载之后先npm install 然后npm run dev 直接可以使用。使用简单
基于Vuejs2x系列ElementUI的后台管理系统解决方案
08-12
基于Vue.js 2.x系列 Element UI 的后台管理系统解决方案
itsys-ui:IT部门信息管理系统前端代码
03-11
IT部门信息管理系统前端代码 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
Vue.js 2.0 + Element UI实现后台管理系统
07-18
Vue.js 2.0 + Element UI实现后台管理系统
前后端分离项目
热门推荐
贝西奇谈
04-06 1万+
前后端分离项目 博客地址：https://blog.csdn.net/beixishuo 一、解读前后端分离 1、前后端不分 前后端不分，jsp是一个典型写法，jsp和java代码结合起来，刚开始，确实提高了开发效率，但时间长了，大伙发现jsp存在的问题，对于后端程序员来说不懂前端， 所以开发流程一般是这样的：前端设计页面–>后端把页面改造成jsp(把后台数据塞到jsp页面)–>后端发...
vue-elementUI后台管理系统
2201_76092588的博客
12-27 3681
首先，我们要了解Vue.js是什么？Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。简单小巧是指Vue体量轻，压缩后大小仅有33KB；
vue-elementUI后台管理系统，已实现用户管理、菜单管理、角色管理、公司管理、权限管理、支付管理等
Python代码大全
12-22 4243
vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont。如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍。或者您可以 “follow” 一下，我会不断开源更多的有趣的项目。为了方便后期修改使用，模拟数据在页面中，具体修改看下面【强调】把模拟数据开始到结束注释掉，下面解除注释即可，开发环境 w7 Chrome 61。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Daniel521-Spark

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值