前后端增删改查在前段页面显示

run

@SpringBootApplication
@MapperScan("com.jt.mapper") //Spring容器内部为接口创建代理对象//JDK的动态代理对象
public class SpringBootRun {//标准写法public static void main(String[] args) {SpringApplication.run(SpringBootRun.class, args);}
}

pojo

@Data
@Accessors(chain = true)
@TableName("demo_user")
public class User implements Serializable {//主键自增@TableId(type=IdType.AUTO)private Integer id;//@TableField("name")//如果属性与字段同名(包括驼峰规则)注解可以省略private String name;private Integer age;private String sex;
}

controller

@RestController
@CrossOrigin
@RequestMapping("/vue") //包含全部类型
public class VueController {@Autowiredprivate UserService userService;/***  需求: 查询用户表的所有数据*  url: /vue/getUserList*  参数: 不要参数*  返回值: List集合*/@GetMapping("/getUserList")private List<User> getUserList(){return userService.getUserList();}/*** 实现用户数据新增* 网址: /vue/insertUser* 参数: 传递的是一个对象的JSON串* 类型: post请求类型* 返回值: void*/@PostMapping("/insertUser")public void insertUser(@RequestBody User user){//@RequestBody在form表单中无需添加注解userService.insertUser(user);}/*** 删除用户数据* URL: http://localhost:8090/vue/deleteUser?id=1* 参数: id = 1* 返回值: void*/@DeleteMapping("/deleteUser")public void deleteUser(Integer id){userService.deleteUser(id);}/*** 修改用户信息* URL: /vue/updateUser* 参数: 对象的JSON串* 返回值: void*/@PutMapping("/updateUser")public void updateUser(@RequestBody User user){userService.updateUser(user);}
}

service

public interface UserService {List<User> getUserList();void updateUser(User user);void deleteUser(Integer id);void insertUser(User user);
}@Service
public class UserServiceImpl implements UserService{@Autowiredprivate UserMapper userMapper;@Overridepublic List<User> getUserList() {return userMapper.selectList(null);}@Overridepublic void updateUser(User user) {userMapper.updateById(user);}@Overridepublic void deleteUser(Integer id) {userMapper.deleteById(id);}@Overridepublic void insertUser(User user) {userMapper.insert(user);}
}

mapper(dao)

public interface UserMapper extends BaseMapper<User> {//用的mp//   List<User> getAll();   //用整合mybatis的方式查询表
}

application.yml

server:port: 8090spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=trueusername: rootpassword: root#SpringBoot整合MP
mybatis-plus:type-aliases-package: com.jt.pojomapper-locations: classpath:/mybatis/*.xmlconfiguration:map-underscore-to-camel-case: true# Mapper接口执行  打印Sql日志
logging:level:com.jt.mapper: debug

UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--规则: namespace必须与接口一一对应  -->
<mapper namespace="com.jt.mapper.UserMapper"><!--CRUD定义别名包: 添加了别名包之后可以简化resultType编辑.-->//<select id="getAll" resultType="User">
//        select * from demo_user
//    </select>
//用整合mybatis的方式查询表</mapper>

前端页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>VUE-Axios练习</title></head><body><!-- 定义VUE根标签 --><div id="app"><div align="center"><h1 align="center">用户新增</h1>名称: <input type="text" v-model.trim="addUser.name"/>年龄: <input type="text" v-model.number="addUser.age"/>性别: <input type="text" v-model.trim="addUser.sex"/><button @click="addUserMe">新增</button></div><hr /><div align="center"><!-- 需求: ID是修改操作的必备参数,用户不可以修改 disabled="false" JS规范如果设定true 可以简化为key--><h1 align="center">用户修改</h1>编号: <input type="text" v-model.trim="updateUser.id"  disabled />名称: <input type="text" v-model.trim="updateUser.name"/>年龄: <input type="text" v-model.number="updateUser.age"/>性别: <input type="text" v-model.trim="updateUser.sex"/><!-- 当用户修改完成之后,点击提交按钮时发起ajax请求. --><button @click="updateUserMe">提交</button></div><hr /><table id="tab1" border="1px" align="center" width="80%"><tr><td colspan="5" align="center"><h1>用户列表</h1></td></tr><tr align="center"><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td></tr><!-- 指令: 可以循环数据+标签  v-for --><tr align="center" v-for="user in userList"><td v-text="user.id"></td><td v-text="user.name"></td><td v-text="user.age"></td><td v-text="user.sex"></td><td><!-- 为修改按钮添加点击事件 传递当前行对象 --><button @click="updateUserBtn(user)">修改</button><!-- 为当前user对象绑定点击事件 --><button @click="deleteUser(user)">删除</button></td></tr></table></div><!-- 1.引入VUE.js --><script src="../js/vue.js"></script><!-- 2.引入Axios.js --><script src="../js/axios.js"></script><!-- 需求分析1:1.当用户打开页面时就应该发起Ajax请求获取userList数据.2.将userList数据 在页面中展现  2.1页面中的数据必须在data中定义2.2 ajax请求的结果赋值给data属性3.利用v-for指令实现数据遍历需求分析2:  用户数据入库操作1.在页面中准备用户新增文本框/按钮2.准备双向数据绑定的规则3.为按钮添加事件,实现数据新增入库.--><script>//设定axios请求前缀axios.defaults.baseURL = "http://localhost:8090"const app = new Vue({el: "#app",data: {//1.定义集合数据 nulluserList: [],//2.定义addUser对象  新增的用户数据addUser: {name: '',age: 0,sex: ''},//定义一个修改的数据封装体updateUser: {id: '',name: '',age: 0,sex: ''}},methods: {//1.定义getuserList方法 获取后台服务器数据async getUserList(){let{data: result} = await axios.get("/vue/getUserList")//ajax调用之后,将数据给属性.this.userList = result},//新增操作 请求类型: post  接收时需要使用json方式处理async addUserMe(){//不需要返回值await axios.post("/vue/insertUser",this.addUser)//将列表页面重新刷新this.getUserList()this.addUser = {}},async deleteUser(user){//console.log(user)//只需要获取用户的ID 就可以完成删除的操作.//方法选择 ?id=xx 拼接    |  restFul结构let id = user.idawait axios.delete("/vue/deleteUser?id="+id)alert("删除数据成功!!!")//需要重新获取列表数据this.getUserList()/* await axios.delete(`/vue/deleteUser?id=${id}`) */},//点击修改按钮时触发事件updateUserBtn(user){//console.log(user)//用户传递的User对象应该动态的传递给双向数据绑定的key updateUserthis.updateUser = user},//1.是否发起ajax请求 2.参数是谁? updateUser 3.什么请求类型PUT//this.updateUser是JS对象 传递到后端JSON串 @RequestBodyasync updateUserMe(){await axios.put("/vue/updateUser",this.updateUser)//如果操作成功,则应该清空修改的对象this.updateUser = {}//如果操作成功,则重新获取列表信息,保证数据完整性this.getUserList()alert("修改操作成功!!!!")}},//调用生命周期函数 8个mounted(){//console.log("vue对象实例化成功!!!!")//初始化时调用getUserList()this.getUserList()}})</script></body>
</html>

数据库

/*
SQLyog 企业版 - MySQL GUI v8.14
MySQL - 5.5.5-10.3.7-MariaDB
*********************************************************************
*/
/*!40101 SET NAMES utf8 */;create table `demo_user` (`id` double ,`name` varchar (120),`age` double ,`sex` varchar (120)
);
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('1','黑熊精','3000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('3','金角大王','3000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('4','银角大王','4000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('5','唐僧','30','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('6','孙悟空','500','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('7','白龙驴','2000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('8','八戒','502','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('9','沙悟净','503','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('11','小乔','17','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('12','貂蝉','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('16','黄月英','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('17','孙尚香','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('18','甄姬c','20','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('21','孙尚香D','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('22','刘备','40','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('23','潘凤','35','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('24','陆逊','33','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('25','关羽','40','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('27','阿科','20','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('31','王昭君','19','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('38','貂蝉','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('39','西施','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('40','严真煌','16','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('41','白骨精','3000','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('43','小乔','19','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('44','大乔','19','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('46','不知火舞','18','女');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('49','小兰兰','18','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('50','柳鹏林','18','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('51','妲己','18','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('52','如花','17','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('53','小明','18','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('55','金刚葫芦娃','7','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('58','马云','46','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('62','赵云','18','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('66','诺克赛斯之手','100','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('68','复仇炎魂','2000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('173','年兽','5000','公');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('182','霸波尔奔','4000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('194','齐天大圣','600','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('196','猪八戒','8000','男');
insert into `demo_user` (`id`, `name`, `age`, `sex`) values('227','小法','20','男');

pom

 <!--1.parent标签  2.依赖信息  3.build插件--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.2</version><relativePath/></parent><properties><java.version>1.8</java.version><!--跳过测试类打包--><skipTests>true</skipTests></properties><!--原则: 按需导入  --><dependencies><dependency><groupId>org.springframework.boot</groupId><!--springboot启动项(器)在包的内部SpringBoot已经完成了项目的"整合"(配置) 用户拿来就用web导入SpringMVC--><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--支持热部署 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency><!--添加lombok依赖--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><!--引入数据库驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--springBoot数据库连接  --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><!--导入MP包之后,删除原有的Mybatis的包 --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-core</artifactId><version>3.4.3</version><scope>compile</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.5.2</version></plugin></plugins></build>

前后端增删改查在前段页面显示相关推荐

Django前后端增删改查
改的功能我没完全实现. 用先删后增可以实现页面的"改"功能完整工程如下: https://gitee.com/fastsource/django_front_end
仿联想商城laravel实战---5、无刷新的增删改查（动态页面更新的三种方式（html））...
仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面用双向绑定插件比如vue ...
增删改查 HTML表格页面,表格增删改查.html
表格增删改查 body{ background:#dddddd; text-align:center; } .list { display: inline-block; margin-top: 20p ...
使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)
目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习h ...
sqlLite数据库实现对数据的增删改查以及用list显示出数据内容
效果图: 1 .创建class:BlackNumberDBHelper 黑名单数据库的DBHelp import android.content.Context; import android.dat ...
springboot/vue前后端分离后台管理系统增删改查
1.需求分析一个音乐管理系统包括: 1.用户信息管理:该模块主要由管理员进行操作,将所有用户的用户名.密码.邮箱.创建时间以及用户状态列在一张表,管理员可以进行增加.删除(批量删除).修改以及查询用 ...
实现简单的增删改查（Asp.Net MVC+Layui）
实现简单的增删改查(Asp.Net MVC+Layui) 一.页面效果二.前期准备 1.新建项目 2. 在项目中新建文件夹(设置mvc的雏形) 3.连接数据库(SqlServer) JdbcUtil ...
python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查（纯layui实现）...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
基于localstorage实现增删改查功能
本文以英雄联盟英雄列表中英雄的增删改查为例,介绍localstorage的增删改查功能该图显示了增差功能,由于我将图片和英雄名字设置为相同的,所以这里输入英雄名字(我将其命名为1~100的数字)图片 ...

前后端增删改查在前段页面显示

前后端增删改查在前段页面显示相关推荐

最新文章

热门文章