第六、七次作业：诗人信息列表增删改查操作

已于 2024-05-11 21:49:57 修改
阅读量474 收藏 7
点赞数 5
文章标签： java 数据库 开发语言
于 2024-05-11 21:07:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/As_Expected/article/details/138679679
版权

后端程序注意两点：

        1. controller返回值  —— success() or success(object)

        2. 实体类与数据表数据之间的转换与查询操作：

                - id: 这里采用别名方式，将p_id视作id        （非常非常非常易错还不容易发现）

                - gender：后端gender没有进行任何处理，由前端进行操作并显示，因此都为整型

以下是后端程序：

controller

package edu.wust.controller;

import edu.wust.pojo.Poet;
import edu.wust.pojo.Result;
import edu.wust.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class PoetController {
    @Autowired
    private PoetService poetService;

    //查询
    @GetMapping("/poets")
    public Result select(){
        return Result.success(poetService.selectData());
    }

    //新增
    @RequestMapping("/poet")
    public Result insert(@RequestBody Poet poet){
        poetService.insert(poet);
        return Result.success();
    }

    //删除
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable Integer id){
        poetService.delete(id);
        return Result.success();
    }


    //修改  先查询，再修改
    @RequestMapping("/poets/{id}")
    public Result getById(@PathVariable Integer id){
        Poet poet = poetService.getById(id);
        return Result.success(poet);
    }
    @PutMapping("/update")
    public Result update(@RequestBody Poet poet){
        poetService.update(poet);
        return Result.success();
    }
}

service实现类

package edu.wust.service.serviceImpl;

import edu.wust.mapper.PoetMapper;
import edu.wust.pojo.Poet;
import edu.wust.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class PoetService1 implements PoetService {
    @Autowired
    private PoetMapper poetMapper;
    public List<Poet> selectData(){
        return poetMapper.selectPoet();
    }


    public void insert(Poet poet){
        poetMapper.insert(poet);
    }


    public void delete(Integer id){
        poetMapper.delete(id);
    }


    public Poet getById(Integer id){
        return poetMapper.getById(id);
    }


    public void update(Poet poet){
        poetMapper.update(poet);
    }

}

mapper

package edu.wust.mapper;

import edu.wust.pojo.Poet;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface PoetMapper {
    @Select("select p_id as id, name, gender, dynasty, title, style from poet")
    List<Poet> selectPoet();

    @Insert("insert into poet (name, gender, dynasty, title, style) " +
            "values (#{name},#{gender},#{dynasty},#{title},#{style})")
    void insert(Poet poet);



    @Delete("delete from poet where p_id=#{id}")
    void delete(Integer id);


    @Select("select p_id as id, name, gender, dynasty, title, style from poet where p_id=#{id}")
    Poet getById(Integer id);
    @Update("update poet set " +
            "name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where p_id=#{id}")
    void update(Poet poet);

}

重点是前端程序：

显示页：

增删改查方法均在该页面上

删除操作：

根据id进行删除，删除前会有一个确定框 confirm ，确定后进行删除

新增操作;

添加一个新增按钮，点击后执行新增方法，跳转到一个空数据表单上，点击提交执行后端新增操作

修改操作：

先根据id进行查询，随后执行修改操作

点击修改按钮，跳转到修改数据表单上，表单数据由一个根据id查询方法获取并作为原始数据显示在表单上，点击提交调用修改操作，将修改后的数据上传，并返回原页面

最后有一个挂载方法，用于加载最终数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>诗人信息</title>
</head>

<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>

<body>

<h1 align="center">诗人信息列表展示</h1>
<div id="app" align="center">


  <table border="1" cellspacing="0" width="60%">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>朝代</th>
      <th>头衔</th>
      <th>风格</th>
      <th>操作  &nbsp;&nbsp;
        <button type="button" @click="insertPoet()">添加</button>
      </th>
    </tr>
    <tr align="center" v-for="poet in tableData">
      <td>{{poet.id}}</td>
      <td>{{poet.name}}</td>
      <td>{{poet.gender}}</td>
      <td>{{poet.dynasty}}</td>
      <td>{{poet.title}}</td>
      <td>{{poet.style}}</td>
      <td class="text-center">
<!--        删除操作：delete/id
            修改操作：poets/id   +  update -->
        <button type="button" @click="editPoet(poet.id)">修改</button>
        <button type="button" @click="deletePoet(poet.id)">删除</button>
      </td>
    </tr>
  </table>
</div>

</body>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: []
      }
    },

    methods: {
      // 删除操作
      deletePoet(id) {
        // 弹出确认对话框
        if (confirm('确定要删除这个诗人的信息吗？')) {
          // 如果用户点击了确定按钮，执行删除操作
          axios.delete('delete/' + id).then(res => {
            if (res.data.code) {
              alert('删除成功');
              this.loadData();
            } else {
              alert('删除失败');
            }
          });
        }
      },

      // 编辑操作
      editPoet(id) {
        // 跳转到编辑页面并传递诗人ID
        window.location.href = "poetview.html?id=" + id;
      },

      // 新增操作
      insertPoet(){
        // 跳转到新增页面上
        window.location.href = "poetinsert.html";
      },



      // 实时数据更新
      loadData() {
        axios.get('poets').then(res => {
          this.tableData = res.data.data;
          // 遍历tableData数组，处理性别字段
          for (let poet of this.tableData) {
            if (poet.gender === 1) {
              poet.gender = "男";
            } else if (poet.gender === 2) {
              poet.gender = "女";
            } else {
              poet.gender = "不明确";
            }
          }
        });
      }
    },


    mounted() {
        this.loadData();
    }
  });

</script>
</html>

修改表单页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑诗人信息</title>
</head>

<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>

<body>

<h1 align="center">编辑诗人信息</h1>
<div id="editApp" align="center">
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="editForm.name"><br><br>

        <label for="gender">性别：</label>
        <input type="radio" id="male" value="1" v-model="editForm.gender"> 男
        <input type="radio" id="female" value="2" v-model="editForm.gender"> 女
        <input type="radio" id="unknown" value="3" v-model="editForm.gender"> 不明确
        <br><br>

        <label for="dynasty">朝代：</label>
        <input type="text" id="dynasty" v-model="editForm.dynasty"><br><br>

        <label for="title">头衔：</label>
        <input type="text" id="title" v-model="editForm.title"><br><br>

        <label for="style">风格：</label>
        <input type="text" id="style" v-model="editForm.style"><br><br>

        <button type="button" @click.prevent="updatePoet">提交</button>
    </form>
</div>

</body>

<script>
    new Vue({
        el: "#editApp",
        data() {
            return {
                editForm: {
                    id: "",
                    name: "",
                    gender: "",
                    dynasty: "",
                    title: "",
                    style: ""
                }
            }
        },

        methods: {
            updatePoet() {
                // 数据上传
                axios.put('update', this.editForm).then(res => {
                    if (res.data.code) {
                        alert('数据修改成功');
                        // 修改成功后跳转到诗人信息列表页面
                        window.location.href = "poet.html";
                    } else {
                        alert('修改失败');
                    }
                });
            },

            // 根据诗人ID获取当前信息
            getPoetInfo(id) {
                axios.get('poets/' + id).then(res => {
                    if (res.data.code) {
                        this.editForm = res.data.data;
                    } else {
                        alert('获取诗人信息失败');
                    }
                });
            }

        },

        mounted() {
            var poetId = window.location.search.split('=')[1];
            this.getPoetInfo(poetId);
        },

    });

</script>
</html>

新增表单页：

大体和修改表单差不多，这里只给出方法：

        methods: {
            insertPoet() {
                // 数据上传
                axios.post('/poet', this.newForm).then(res => {
                    if (res.data.code) {
                        alert('数据添加成功');
                        // 添加成功后跳转到诗人信息列表页面
                        window.location.href = "poet.html";
                    } else {
                        alert('添加失败');
                    }
                });
            }
        }

运行：

查询：

新增：

修改：

删除：

后端反应：

debug了一天，没想到最后是查询操作没写好，后续命名应尽量采取驼峰命名，如果产生失误可由idea进行自动映射

使用element-ui渲染美化一下：

怡云_Expectancy
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值