JAVA练习：前后端一起实现“增删改查”

最新推荐文章于 2024-08-29 13:00:12 发布
最新推荐文章于 2024-08-29 13:00:12 发布
阅读量5.3k 收藏 43
点赞数 6
分类专栏： 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42238554/article/details/95167858
版权

效果图：
在这里插入图片描述
前端代码如下：
前端请求用的是axios

"use strict";

import Vue from 'vue';
import qs from 'qs'//导入qs，用来对json数据进行解析
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
  
  //对传过来的json进行解析
  transformRequest: data => {
    let d = qs.stringify(data);
    console.log(`req params:${d}`);
    return d;
  },
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

//简化data
_axios.interceptors.response.use(
  function (response) {
    // Do something with response data
    return response.data;
  },
  function (error) {
    // Do something with response error
    console.log(`axios response error:${JSON.stringify(error)}`);
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      return Promise.reject({
        status: error.status || 504,
        description: "请求超时",
        data: error.message
      });
    }
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

vue页面代码如下：

<template>
  <div style="padding:20px;">
    <div class="search">
      <div>
        <span>姓名：</span>
        <input type="text" v-model="searchName" />
        <button @click="searchNameButton">搜索</button>
        <span>学校：</span>
        <select style="width:120px;">
          <option v-for="item in schools">{{item}}</option>
        </select>
        <span>分数：</span>
        <input type="text" />-
        <input type="text" />
      </div>
    </div>
    <button @click="addNews">新增</button>
    <table>
      <thead>
        <tr>
          <th>操作</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>省</th>
          <th>市</th>
          <th>学校</th>
          <th>分数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in allStudents" :keys="index">
          <td>
            <span @click="deletedUser(item.id)">删除</span>&nbsp;&nbsp;&nbsp;
            <span @click="editUser(item.id)">修改</span>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.province}}</td>
          <td>{{item.city}}</td>
          <td>{{item.school}}</td>
          <td>{{item.score}}</td>
        </tr>
      </tbody>
    </table>
    <div class="addnews" v-show="displayshow">
      <span @click="closed">关闭</span>
      <div>
        姓名：
        <input type="text" v-model="addStudent.name" />
      </div>
      <div>
        年龄
        <input type="text" v-model="addStudent.age" />
      </div>
      <div>
        省：
        <input type="text" v-model="addStudent.province" />
      </div>
      <div>
        市：
        <input type="text" v-model="addStudent.city" />
      </div>
      <div>
        学校：
        <input type="text" v-model="addStudent.school" />
      </div>
      <div>
        分数：
        <input type="text" v-model="addStudent.score" />
      </div>
      <button @click="sureButton">确定</button>
    </div>
  </div>
</template>
<script>
import { truncate } from "fs";
export default {
  data() {
    return {
      operationType: 1, //由于新增和修改用的是同一个按钮，所以设置1，2来判断当前需要执行新增还是修改。1新增 2 修改
      allStudents: [],
      schools: [],
      searchName: "",
      displayshow: false,
      nowID: "",
      addStudent: {
        name: "",
        age: "",
        province: "",
        city: "",
        school: "",
        score: ""
      }
    };
  },
  methods: {
    //修改用户信息
    editUser(itemId) {
      this.operationType = 2;//设置operationType为2
      this.displayshow = true;//显示弹出层
      //从所有的学生中顾虑出id为当前选中的id的学生
      var pitchOn = this.allStudents.filter(item => {
        return item.id == itemId;
      });
      //把当前行的学生的信息赋值给弹出层中的修改文本框中
      this.addStudent.name = pitchOn[0].name;
      this.addStudent.age = pitchOn[0].age;
      this.addStudent.province = pitchOn[0].province;
      this.addStudent.city = pitchOn[0].city;
      this.addStudent.school = pitchOn[0].school;
      this.addStudent.score = pitchOn[0].score;
      //存储当前修改的用户的id
      this.nowID = itemId;
    },
    //确定按钮，提交用户信息
    sureButton() {
      //当operationType等于1的时候，执行新增操作
      if (this.operationType == 1) {
        this.axios
          .post("/api/public/lisa/add", this.addStudent)
          .then(res => {
            this.findAll();//刷新表，从数据库中再获取一次数据学生信息
            this.displayshow = false;
          })
          .catch(err => {
            this.findAll();
          });
      } 
      //当operationType等于2的时候，执行修改操作
      else {
        this.axios
          .post("/api/public/lisa/editUser", {
            //把对应的信息属性字段传递给后台，告诉后台改后的信息
            id: this.nowID,
            ...this.addStudent
          })
          .then(res => {
            if (res.status == 200) {
              this.findAll();//刷新表
              this.displayshow = false;
            } else {
              console.log("失败",res);
            }
          });
      }
    },
    //关闭弹出框
    closed() {
      this.displayshow = false;
    },
    //新增学生
    addNews() {
      //将operationType转换为1，就是将确定按钮执行新增操作。
      this.operationType = 1;
      //显示弹出层
      this.displayshow = true;
      //将弹出层中的数据设置为空
      this.addStudent.name ="";
      this.addStudent.age = "";
      this.addStudent.province = "";
      this.addStudent.city = "";
      this.addStudent.school = "";
      this.addStudent.score = "";
    },
    //删除学生
    deletedUser(userid) {
      this.axios
        .post("/api/public/lisa/deletedUser", { id: userid })//输入请求后台的地址，要删除的学生的id
        .then(res => {
          if (res.status == 200) {
            this.findAll();
            console.log("删除成功！");
          } else {
            this.findAll();
            console.log(res);
          }
        });
    },
    //按姓名搜索学生
    searchNameButton() {
      this.axios
        .post("/api/public/lisa/findByName", { name: this.searchName })
        .then(res => {
          if (res.status == 200) {
            console.log(res.data);
            this.news = res.data;
          } else {
            console.log(res);
          }
        });
    },
    //查询所有学生信息
    findAll() {
      this.axios.post("/api/public/lisa/findAll").then(res => {
        this.allStudents = res.data;
      });
    },
    //搜索中，学校下拉框内容
    getSchoolOptions() {
      this.axios.post("/api/public/lisa/findAll").then(res => {
        this.schools = Array.from(
          new Set(
            res.data.map(item => {
              return item.school;
            })
          )
        );
      });
    }
  },
  mounted() {
    this.findAll();
    this.getSchoolOptions();
  }
};
</script>
<style lang="scss">
.search {
  line-height: 40px;
  text-align: left;
  clear: both;
  overflow: hidden;

  span {
    margin-left: 20px;
  }
}
table {
  background-color: #eee;
  border: 1px solid #ddd;
  width: 100%;
  td {
    background-color: #fff;
    line-height: 40px;
    padding: 10px;
  }
}
.addnews {
  position: absolute;
  z-index: 100;
  background-color: #eee;
  border: 1px solid #ddd;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
}
</style>

后端代码如下：
建立三个文件，两个类和一个接口，还有一个xml，通常查询会写到xml里面，其他的都直接可以写在class类的方法里面比较方便。
在这里插入图片描述
在这里插入图片描述
TTest类的内容：
定义了数据库中的一些字段以及字段类型，然后通过Generate生成Getter和Setter
在这里插入图片描述

package com.gnmro.vmi.lisa;
import org.hibernate.annotations.Where;
import javax.persistence.*;
@Entity
@Table(name = "t_test")
@Where(clause = "status < 99")//隐藏状态为99的用户信息
public class TTest {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String name;
    private Integer age;
    private String province;
    private String city;
    private String school;
    private Integer score;
    private Integer status;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public String getSchool() {
        return school;
    }
    public void setSchool(String school) {
        this.school = school;
    }
    public Integer getScore() {
        return score;
    }
    public void setScore(Integer score) {
        this.score = score;
    }
    public Integer getStatus() {
        return status;
    }
    public void setStatus(Integer status) {
        this.status = status;
    }
}

TTestController类的内容：

package com.gnmro.vmi.lisa;
import com.gnmro.vmi.base.AjaxResponse;
import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController//控制器注解，表示提供rest请求
@RequestMapping("/public/lisa")//当前控制器的请求基地址
public class TTestController {
    /**
     * 日志记录
     */
    private Logger logger = LoggerFactory.getLogger(this.getClass());
    @Autowired//自动装载程序启动时初始化的对象
    private TTestRepository tTestRepository;
    @Autowired
    private SqlSession sqlSession;
    @RequestMapping("/findAll")
//    @GetMapping("/findAll")//只允许以get请求方式获取数据
//    @PostMapping("/findAll")//只允许以post请求方式获取数据
    public AjaxResponse findAllRows() {
        this.logger.info("接收到查询数据请求");
        this.logger.warn("接收到查询数据请求");
        this.logger.error("接收到查询数据请求");
        return AjaxResponse.success(this.tTestRepository.findAll());
    }
//通过姓名查询
    @RequestMapping("/findByName")
    public AjaxResponse findByName(String name) {
        Map<String, String> params = new HashMap<>();
        params.put("name", name);
        return AjaxResponse.success(this.sqlSession.selectList("lisa.find", params));
    }
//通过前端传过来的id进行删除操作
    @RequestMapping("/deletedUser")
    public AjaxResponse deletedUser(Integer id) {
        if (id == null) {
            return AjaxResponse.error("id kong");
        }
        this.tTestRepository.deleteById(id);
        return AjaxResponse.success();
    }
//修改用户信息，String name,Integer age,String province,String city,String school,Integer score这些字段表示必须从前端传过来，需要修改的内容，不能为空，Integer id表示修改哪一个用户，这是主键用户信息唯一标示。
    @RequestMapping("/editUser")
    public AjaxResponse editUser(Integer id,String name,Integer age,String province,String city,String school,Integer score) {
        if (id == null) {//如果id为空
            return AjaxResponse.error("id kong");//报错
        }
        TTest item = this.tTestRepository.findById(id).orElse(null);
        if (item == null) {
            AjaxResponse.error("数据不存在");
        }
        //更新传过来的用户信息使用set+字段名称
        item.setName(name);
        item.setAge(age);
        item.setProvince(province);
        item.setCity(city);
        item.setSchool(school);
        item.setScore(score);
        this.tTestRepository.save(item);//保存修改后的信息
        return AjaxResponse.success();//执行成功
    }
    新增用户信息
    @PostMapping("/add")
    public AjaxResponse add(TTest item) {
        this.tTestRepository.save(item);
        return AjaxResponse.success();
    }

TTestRepository接口内容如下

package com.gnmro.vmi.lisa;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository//自动注入，程序启动时，自动装载当前接口，实例化一个对象
public interface TTestRepository extends JpaRepository<TTest, Integer> {
    List<TTest> findAllByNameLike(String name);
}

xml如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="lisa">
    <select id="find" resultType="java.util.Map">
        select *
        from t_test
        where 1=1
        <if test="name != null and name != ''">
            and name like "%"#{name}"%"
        </if>
    </select>
</mapper>

数据库如下：
在这里插入图片描述在这里插入图片描述

罗会
关注
专栏目录
java前后端分离（增删查改）
Seven_77_的博客
07-10 1345
练习10次掌握前后端分离
后端开发就是增删改查？
Java圈全能架构师的博客
07-10 4447
作为后端开发，永远重复着「增删改查」，这些基础的操作占据了自己大部分工作时间，看到其他人成为技术大牛，而个人技术水平永远停在原地，也会很迷茫...... 需要学习的仅仅如此吗？当你工作久了是否会发现你的代码越来越复杂？文件的上传下载怎么提高效率？消息推送的实时性怎么保证？同时使用人数过多，服务器爆炸怎么办......需要学习的太多了。 希望此文能重燃你的热情，更好的提升技术能力和判断力，站在更高的角度去看自己写的代码和技术方案，从中看到技术的亮点和价值。 浅谈CRUD 从CRUD的定义进行解读，CR
java小项目前后端实操练习完整代码legal.rar
05-15
java小项目练习，jQuery 前台开发实操项目练习。 前后台开发练习ssm架构小项目
Java-增删改查
最新发布
2301_81543552的博客
08-29 613
User类：表示用户的数据模型，包含用户的基本信息和相关操作。UserList类：使用LinkedList来管理用户，支持按顺序添加、查找、更新和删除用户。UserMap类：使用HashMap来管理用户，通过ID快速访问用户，适合大量数据的读写场景。Main类：演示如何利用上述类进行用户的创建、查询、更新和删除操作。
前后端交互-async练习
nanling0220的博客
04-06 289
<button>按钮一</button> <button>按钮二</button> <script> //客户端建立连接 let socket = io.connect("/"); socket.on("getData",(data)=>{ conso...
JavaWeb架构练习（增删改查）（一整套完整练习＜2＞）
qq_41476257的博客
02-20 938
Web核心概念 Web前端快速入门 MyBatis相关概念 Maven相关知识点 不涉及Web前端的练习，主要练习MyBatis和Maven框架 总体结构图： 数据库 -- 创建数据库 create database Brand; -- 删除tb_brand表 drop table if exists tb_brand; -- 创建tb_brand表 create table tb_brand( -- id 主键 id int primary key auto_increment, --
java操作xml文件（增删改查）
weixin_44565483的博客
02-26 476
创建XML文件 /** * 创建xml方法 */ public void createXml(String filePath){ try { // 创建解析器工厂 DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); ...
练习项目-Servlet实现数据库增删改查-新闻管理系统.zip
07-24
该项目是一个基于Java Web技术的新闻管理系统，主要使用Servlet作为服务器端处理组件，配合MySQL数据库进行数据的增删改查操作。对于初学者或正在进行毕业设计、课程设计的同学来说，这是一个很好的实践项目。以下是...
Spring&boot;mybatis;增删改查前后端分离分页demo
11-07
增删改查前后端分离分页demo" 展示了如何利用这两个框架实现一个基本的Web应用，该应用包含了数据的增删改查（CRUD）功能，并且实现了前后端分离以及分页显示数据。以下是这个 demo 的核心知识点： 1. **Spring ...
ajax练习-完成增删改查
02-17
这个"ajax练习-完成增删改查"的项目显然涉及到使用Ajax来实现Web应用的基本操作：添加（Add）、删除（Delete）、修改（Modify）和查询（Query）。在描述中提到的"数据库方面文件"暗示了此项目与数据库交互密切相关，...
JavaWeb实现简单对数据库的增删改查
热门推荐
Makonike的博客
03-13 1万+
通过JavaWeb实现简单的对数据库的增删改查
寒假答辩之JavaWeb后台信息的增删改查
HchildD
04-14 3087
每次写博客前总是喜欢写一段前言，这次的寒假答辩总结已经过去很久，我也迟迟没有去总结，如果不是组长的要求，我还不知道要拖到什么时候，这是一个不好的习惯。而对于这次的答辩，我也比较水，不上心吧，这是我的一个缺点，总是想说有时间好好做一下，可每次都是快到时间了，才去做，没有准备，没有提前了解，就直接随心所欲的去做，然后做的差不多了（其实很差），觉得“嗯，很麻烦，不想搞了，如果时间充足的话我要再做...
学生系统的增删查改
chuanlan9016的博客
12-18 298
设计并实现一个“学院学生信息管理”系统。系统采用字符界面，在出现的主界面中按提示输入相应字符以选择“增加”、“删除”、“修改”、“查找”等功能进行操作。记录的存储采用数组的方式。 提示： 为了实现该系统，首先要需要两个类；一个类为主界面服务，用于接收用户输入选择以及做出相关反应；一...
Java后端开发除了增删改查还有什么？
m0_57290404的博客
02-06 1053
接口稳定、架构合理、业务逻辑清晰、模块拆分合理、支持高并发等。软件本身归根到底都是由算法+数据结构构成的，进一步细化之后，其实就是通过一系列的增删改查操作，构成算法，对数据结构进行操作，赋予业务属性。
按钮动态添加删除input
weixin_30628077的博客
05-02 359
症状: 也就是实现，添加按钮不断添加新的输入框，以及删除按钮。 处方代码： <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/context/mytags.jsp"...
增删改查小案例-前后端联调
m0_65006010的博客
05-23 628
Apifox POST请求：（通过json格式传入参数值）终端日志输出：（数据库中id=141的成员信息被删除）
实现web端增删改查
兔的骄傲
06-11 2948
1.把该导入的jar包和jquery导入 2.主页的jsp代码： <%@ page contentType="text/html;charset=utf-8" language="java" %> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script s...
基于前后端分离的增删改查
心有—林夕的博客
08-20 810
实现前后端分离的增删改查
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值