【web】第七次作业：基于springboot+mybatis+vue的项目实战之增删改查CRUD

于 2024-05-17 23:11:30 发布
阅读量957 收藏 23
点赞数 28
分类专栏： web 文章标签： 前端 spring boot mybatis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laen4102/article/details/139014460
版权

网页增删改查

整体页面

在这里插入图片描述

增加

在这里插入图片描述
点击提交
在这里插入图片描述
诗人信息界面
在这里插入图片描述

删除

在这里插入图片描述
删除后
在这里插入图片描述

修改

在这里插入图片描述
在这里插入图片描述
修改后
在这里插入图片描述

代码

在这里插入图片描述

controller

package com.wust.controller;

import com.wust.pojo.Poet;
import com.wust.pojo.Result;
import com.wust.service.serviceImpl.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();
    }
}

mapper

package com.wust.mapper;

import com.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);
}

pojo

package com.wust.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Poet {
    private Integer id;   //id（主键）
    private String name;  //姓名
    private Integer gender; //性别
    private String dynasty; //朝代
    private String title; //头衔
    private String style; //风格
}

package com.wust.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {

    Integer code;
    String msg;
    Object data;

    public static Result success(){
        return new Result(1,"success",null);
    }
    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    public static Result error(String msg){
        return new Result(0,msg,null);
    }
}

service

package com.wust.service.serviceImpl;


import com.wust.pojo.Poet;

import java.util.List;

public interface PoetService {
    List<Poet> selectData();

    void insert(Poet poet);

    void delete(Integer id);

    Poet getById(Integer id);

    void update(Poet poet);
}

package com.wust.service;

import com.wust.mapper.PoetMapper;
import com.wust.pojo.Poet;
import com.wust.service.serviceImpl.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);
    }

}

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="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="insertApp" align="center">
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="newForm.name"><br><br>

        <label for="gender">性别：</label>
        <input type="radio" id="male" value="1" v-model="newForm.gender"> 男
        <input type="radio" id="female" value="2" v-model="newForm.gender"> 女
        <br><br>

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

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

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

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

</body>

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

        methods: {
            insertPoet() {
                // 数据上传
                axios.post('/poet', this.newForm).then(res => {
                    if (res.data.code) {
                        alert('数据添加成功');
                        // 添加成功后跳转到诗人信息列表页面
                        window.location.href = "poet.html";
                    } else {
                        alert('添加失败');
                    }
                });
            }
        }
    });
</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"> 女
        <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>
Dlaen
关注
  • 28
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
外卖点餐系统，后端：springboot+mybatis+mybatis-plus 前端：vue+elmen
05-08
后端使用Spring Boot和MyBatis作为开发框架，而前端使用Vue和ElementUI作为开发工具。 后端开发框架 后端使用Spring Boot作为开发框架，Spring Boot是一个轻量级的框架，易于学习和使用，可以快速搭建项目。它提供...
毕设项目：基于SpringBoot+Mybatis+Vue实现的一个在线选课系统.zip
08-15
这是一个基于SpringBoot、Mybatis和Vue.js技术栈开发的在线选课系统项目，适用于毕业设计或课程设计。这个系统能够提供一个便捷的平台，让学生进行在线选课操作，同时可能包含教师管理课程、学生管理个人信息等功能...
（四）后端数据增删改查---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-17 5259
本次任务，我们在前面项目搭建完成的基础上，在后端实现用户数据的CRUD。通过本次任务，大家能够：（1）熟练掌握基于Navicat Premium 15的MySQL数据库、数据表创建；（2）熟练使用@Mapper注解实现数据CRUD；熟练使用SQL语句；（3）学会使用Postman做运行测试。
基于springboot+mybatis+vue的项目实战之增删改查CRUD
最新发布
wyhwust的博客
05-09 1291
目录结构目录结构Peot.java。
SpringBoot+Mybatis+Vue实现页面的简单增删改查
qq_62359860的博客
08-07 1056
注意：创建springboot项目时需要网络选择好后直接下一步然后完成创建，依赖直接在后面展示。
基于springboot的前后端分离的案列（一）
qq_67124455的博客
04-24 2853
练习案列
SpringBoot总结-基于SpringBoot实现Web开发
田宝宝的博客
03-12 1014
SpringBoot总结-基于SpringBoot实现Web开发
基于javaweb+mysql的springboot+mybatis高校科研项目管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax
毕业javaweb，一直在线，欢迎私信
01-28 264
基于javaweb+mysql的springboot+mybatis高校科研项目管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax)登录、注册、退出、用户模块、公告模块、项目模块、科研人员模块的增删改查管理。eclipse/idea/myeclipse/sts等均可配置运行。课程设计，大作业，毕业设计，项目练习，学习演示等。
毕设项目：基于springboot+mybatis的员工信息管理系统.zip
08-23
在员工信息管理系统中，MyBatis作为数据访问层，负责与数据库进行交互，实现数据的增删改查。 系统架构方面，基于SpringBoot的员工信息管理系统通常采用MVC（Model-View-Controller）设计模式。Model代表业务对象和...
毕设项目：基于SpringBoot+MyBatis-Plus 前后端分离的影院选座购票系统.zip
12-24
这是一个基于SpringBoot和MyBatis-Plus框架的前后端分离的影院选座购票系统的源码项目，适合于毕业设计或课程设计使用，同时也适合初学者进行学习和实践。以下是该项目中涉及的一些关键知识点： 1. **SpringBoot**...
基于SpringBoot + Mybatis实现SpringMVC Web项目
06-28
写的还是比较清晰的，拿来即可用
eclipse_springboot_mybatis3 web项目
10-06
eclipse创建springboot_mybatis3 web项目，测试已完成。
基于javaweb(springboot+mybatis)网上酒类商城项目设计和实现以及文档报告
m0_61044466的博客
03-22 325
系统客户端首页登录注册以及后台用户管理后台商品信息管理========功能选择====用户信息管理修改。
基于javaweb+mysql的springboot+mybatis网上商城项目(java+springboot+ssm+jsp+mysql+maven)
毕业javaweb，一直在线，欢迎私信
02-05 249
功能：网上商城系统，前台+后台管理，用户注册，登录, 上哦展示，分组展示，搜索，收货地址管理，购物车管 理，添加，购买，个人信息修改。项目技术： JSP +SpringBoot+Spring + SpringMVC + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui+ maven等等。基于javaweb+mysql的springboot+mybatis网上商城项目(java+springboot+ssm+jsp+mysql+maven)
SpringBoot+Mybatis搭建Web项目详细步骤-记录
Tui_GuiGe的专栏
04-25 3107
SpringBoot+Mybatis搭建Web项目详细步骤-记录
MyBatis + spring boot 搭建web项目
wenhao_1992的博客
11-26 1936
MyBatis + spring boot 搭建web项目MyBatis spring boot 搭建web项目 导语 介绍 工具 搭建项目 建立项目 配置数据源 建立实体类 建立映射器接口 OrderMapper 定义控制类 DemoController 设计数据表 启动项目 导语 整合spring boot 与mybatis，spring boot遵从约定式的java配置，没有让人抓狂的x
Spring Boot集成MyBatis开发Web项目
_夜渐凉
07-30 5262
1、Maven构建Spring Boot 创建Maven Web工程，引入spring-boot-starter-parent依赖 &lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=...
idea+springboot+Mybatis搭建web项目
weixin_30432579的博客
10-10 154
使用idea+springboot+Mybatis搭建一个简单的web项目。 首先新建一个项目； 在这里选择Maven项目也可以，但是IDEA为我们提供了一种更方便快捷的创建方法，即Spring Initializr。选择后点击Next； 把项目信息写好，Next； 按下面三张图勾选设置； 最后Finish。 等待Maven自动加载完成后，最初的项目结构如下...
信息管理系统(SpringBoot+Mybatis+POI+Vue+ElementUI)
11-02
1、后台技术：SpringBoot + MyBatis + POI 2、前端技术：Vue2 + ElementUI 实现了数据的导入、导出和基本的CRUD操作

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值