vue+springboot练手demo（四）——新增和修改功能的实现

目录

vue+springboot练手demo（一）——环境搭建
vue+springboot练手demo（二）——查询功能的实现
vue+springboot练手demo（三）——删除功能的实现
vue+springboot练手demo（四）——新增和修改功能的实现
vue+springboot练手demo（五）——校验功能
vue+springboot练手demo（六）——Swagger、Druid监控和日志
vue+springboot练手demo（七）——Excel导出和导入

页面开发

模态框

由于添加操作和修改操作所涉及的到信息差不多，这里就合在一起写了。构建一个对话框，对话框中包含一个表单加上两个按钮（一个用于重置信息，一个用于提交信息）。

    <!--对话框开发-->
    <el-dialog
      :visible.sync="EmpDialog"
    >
      <h1 align="center"><span v-text="EmpOptions"></span>员工信息</h1>
      <div style="width: 90%">
        <el-form :model="EmpForm" ref="EmpForm" class="demo-ruleForm">
          <el-form-item label="员工姓名：" prop="ename" :label-width="formLabelWidth">
            <el-input v-model="EmpForm.ename" autocomplete="off" :disabled="editname"></el-input>
          </el-form-item>
          <el-form-item label="员工邮箱：" prop="eemail" :label-width="formLabelWidth">
            <el-input v-model="EmpForm.eemail" autocomplete="off" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="员工性别：" prop="esex" :label-width="formLabelWidth">
            <el-radio-group v-model="EmpForm.esex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="员工电话：" prop="ephone" :label-width="formLabelWidth">
            <el-input v-model="EmpForm.ephone" autocomplete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="员工出生日期：" prop="eDate" :label-width="formLabelWidth">
            <el-date-picker
              v-model="EmpForm.eDate"
              type="date"
              placeholder="请输入出生日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="员工部门：" prop="dname" :label-width="formLabelWidth">
            <el-select v-model="EmpForm.dId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.dId"
                :label="item.dName"
                :value="item.dId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-left: 30%">
          <el-button @click="resetForm()" style="margin-right: 90px;margin-top: 20px">重 置</el-button>
          <el-button type="primary" @click="EmpInfoBtn">提 交</el-button>
        </div>
      </div>
    </el-dialog>
    <!--对话框中所涉及到的数据，这里先使用的假数据模拟一下。-->
    data() {
      return {
       EmpOptions: '',
       EmpDialog: false,
       editname: false,
       EmpForm: {
         eName: '张三丰',
         eEmail: '35131351@qq.com',
         eSex: '',
         ePhone: '1351364313',
         eDate: '1997-07-01',
         dname: '',
       },
       options: [{
       did: '选项1',
       dname: '技术部'
       }, {
       did: '选项2',
       dname: '开发部'
       }, {
       did: '选项3',
       dname: '财务部'
       }],
       did: '',
       formLabelWidth: '140px',
      }
    }

为添加按钮和修改按钮分别绑定对应的方法，其中修改按钮的方法中要传入被选择行的职工id。在方法中操作模拟数据达到预期的效果

#  添加方法（模拟数据测试）
#     1.弹出模态框
#     2.标题为添加职工信息
#     3.除了性别默认被选为“男”，其他的信息均为空
      AddEmpBtn() {
        this.EmpOptions = '添加';
        this.EmpForm.eName = '';
        this.EmpForm.eDate = '';
        this.EmpForm.ePhone = '';
        this.EmpForm.eEmail = '';
        this.EmpForm.eSex = '男';
        this.EmpForm.dname = '';
        this.EmpDialog = true;
      }
#  修改方法（模拟数据测试）
#     1.弹出模态框
#     2.标题为修改方法
#     3.所有信息栏均有从数据库中查询过来的结果可以修改，其中姓名行为不能修改的状态
      EditEmp(id) {
        this.EmpOptions = '修改';
        this.editname = true;
        this.EmpForm.eName = '张三丰';
        this.EmpForm.eDate= '1997-07-01';
        this.EmpForm.ePhone = '1351364313';
        this.EmpForm.eEmail = '35131351@qq.com';
        this.EmpForm.eSex = '男';
        this.EmpForm.dname = 'Development';
        this.EmpDialog = true;
      }

添加效果图如下所示。


4-1 添加测试.png

修改效果图如下所示。

4-2 修改测试.png

后面我们就可以通过判断姓名输入框的状态来区分添加操作和修改操作！

获取部门信息

由于公司的部门可能是会变化的，因此现将部门的选择框改为从数据库中获取而来的动态数据。

前端开发

在<select>标签对中添加@focus="findDept"。

4-3 获取部门信息(1).png

随即便是编写这个方法的实现。

findDept(){
    this.$http.get("/Dept/findall").then(result => {
    this.options = result.data.extend.deptinfo;
  })
}

并将此方法放入create()中，使其在页面加载时就获取部门信息。

后端开发

省略dao，service层的编写

    #sql语句
    <select id="findall" resultType="com.feng.employees.entity.Dept">
        select d_id,d_name from dept
    </select>

controller层编写

@RestController
@RequestMapping("/Dept")
@CrossOrigin
@Slf4j
public class DeptController {
    @Autowired
    private DeptService deptService;

    @GetMapping("/findall")
    public Msg findall(){
        List<Dept> deptList = deptService.findall();
        return Msg.success().add("deptinfo",deptList);
    }
}

动态部门信息功能达成！

新增功能的实现

点击“添加”按钮，按要求输入相应的信息，点击提交即可添加信息。

前端开发

前端开发较为简单，主要就是判断是否是添加方法，如果是添加方法则发送rest请求，将信息传入后台。然后关闭模态框、显示提示信息和页面跳转至最后一页(方便查看刚刚添加的信息)。

if (!this.editname){
  this.$http.post("/Emps/Emps",this.EmpForm).then(result => {
    //模态框关闭
    this.EmpDialog = false;
    //提示信息
    this.$message({
      message: '添加成功！',
      type: 'success'
    });
    //重新加载数据
    this.findPage(this.endpage);
  });
}

修改原始的添加按钮方法

      AddEmpBtn() {
        this.EmpOptions = '添加';
        this.EmpForm.eName='';
        this.EmpForm.eEmail='';
        this.EmpForm.eDate='';
        this.EmpForm.ePhone='';
        this.EmpForm.eSex='';
        this.EmpForm.dId='';
        this.EmpForm.eSex = '男';
        this.EmpDialog = true;
      }

后端开发

首先在Emp的实体类中一个新的构造方法，用于新增操作。

    public Emps(String eName, String eEmail, String eSex, String ePhone, Date eDate, Integer did) {
        this.eName = eName;
        this.eEmail = eEmail;
        this.eSex = eSex;
        this.ePhone = ePhone;
        this.eDate = eDate;
        this.did = did;
    }

随后在mapper中编写新增方法的sql语句。

    <insert id="AddEmp">
        insert into emps (e_name,e_email,e_sex,e_phone,e_date,d_id)
        values (#{eName},#{eEmail},#{eSex},#{ePhone},#{eDate},#{dId})
    </insert>

省略dao层和service层，来到controller层中编写添加操作的方法。

    @PostMapping("/Emps")
    public Msg AddEmp(@RequestBody Emps emps){
        empsService.AddEmp(emps);
        return Msg.success();
    }

重启服务，测试功能。

4-4 添加职工信息(1).png

4-5 添加职工信息(2).png

\color{#FF0000}{信息添加成功！}

修改功能的实现

修改功能的步骤分为先获取到被选中的职工的职工信息，然后在原有的信息上进行修改

根据id获取职工信息

在页面上选择某个员工信息，点击“编辑按钮”弹出模态框，模态框中显示的是员工原来的信息。这次我们从后端开始写起。

后端开发

sql语句编写

    <select id="GetEmpsById" resultType="com.feng.employees.entity.Emps">
        select e_id,e_name,e_email,e_sex,e_phone,e_date,emps.d_id,dept.d_id,dept.d_name from emps,dept where emps.e_id=#{id} and emps.d_id=dept.d_id
    </select>

省略dao层、service层，来到controller层编写方法。

    @GetMapping("/Emps/{id}")
    public Msg GetEmpByid(@PathVariable("id") Integer id){
        Emps emps = empsService.GetEmpsById(id);
        return Msg.success().add("empinfo",emps);
    }

至此后端开发结束

前端开发

点击编辑按钮后获取员工信息并显示在模态框中。方法实现如下

      EditEmp(id) {
        this.EmpDialog = true;
        this.EmpOptions = '修改';
        this.editname = true;
        this.$http.get("/Emps/Emps/" + id).then(result => {
          this.EmpForm=result.data.extend.empinfo;
          //为了日后修改方便，这里只用dept的id进行交互。而为了在获取信息的时候显示部门名，因此需要将id暂时赋值成部门名
          this.EmpForm.dId=result.data.extend.empinfo.deptList[0].dName;
        })
      }

效果图如下所示。


4-6 根据id获取职工信息.png

修改职工信息

前端开发

修改好信息后点击提交，向后台发送修改请求，后台理后返回提示信息。在提交方法中增加以下代码

else {
  //由于部门信息可能不会被修改，而原始的部门信息不是id值而是name值，所以这里要做一个判断。当id值不为数字时使其赋值为员工信息中部门信息的id值
  if(isNaN(this.EmpForm.dId)){
    this.EmpForm.dId=this.EmpForm.deptList[0].dId;
    console.log(this.EmpForm.dId)
  }
  this.$http.put("/Emps/Emps",this.EmpForm).then(result => {
    //模态框关闭
    this.EmpDialog = false;
    //提示信息
    this.$message({
      message: '修改成功！',
      type: 'success'
    });
  //修改成功后，刷新本页
  this.findPage(this.currentpage);
  });
}

后台开发

省略dao、service层。

    #sql语句如下
    <update id="UpdateById">
        update emps
        <trim prefix="set" suffixOverrides=",">
            <if test="eEmail!=null">e_email=#{eEmail},</if>
            <if test="eSex!=null">e_sex=#{eSex},</if>
            <if test="ePhone!=null">e_phone=#{ePhone},</if>
            <if test="eDate!=null">e_date=#{eDate},</if>
            <if test="did!=null">d_id=#{did},</if>
        </trim>
        where e_id=#{eId}
    </update>
    #controller层中的方法
    @PutMapping("Emps")
    public Msg UpdateEmp(@RequestBody Emps emps){
        empsService.UpdateById(emps);
        return Msg.success();
    }

测试。


4-8 修改前.png

4-9 修改信息.png

4-10 修改后.png

现在新增和修改的基本功能已经实现了，但是对于信息没有做任何的校验，下一章将会添加信息校验功能，使功能更完善！希望大家喜欢！谢谢！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351