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

最新推荐文章于 2022-12-03 01:12:24 发布

萌新zys

最新推荐文章于 2022-12-03 01:12:24 发布

阅读量316

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_58679791/article/details/119354149

版权

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 {
    @Autowired
    private 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{
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> getUserList() {
        return userMapper.selectList(null);
    }

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }

    @Override
    public void deleteUser(Integer id) {
        userMapper.deleteById(id);
    }

    @Override
    public void insertUser(User user) {
        userMapper.insert(user);
    }
}

mapper(dao)

public interface UserMapper extends BaseMapper<User> {//用的mp

 //   List<User> getAll();   //用整合mybatis的方式查询表
}

application.yml

server:
  port: 8090

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

#SpringBoot整合MP
mybatis-plus:
  type-aliases-package: com.jt.pojo
  mapper-locations: classpath:/mybatis/*.xml
  configuration:
    map-underscore-to-camel-case: true


# Mapper接口执行  打印Sql日志
logging:
  level:
    com.jt.mapper: debug

UserMapper.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">
<!--规则: 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.定义集合数据 null
				userList: [],
				//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.id
						await axios.delete("/vue/deleteUser?id="+id)
						alert("删除数据成功!!!")
						//需要重新获取列表数据
						this.getUserList()
						/* await axios.delete(`/vue/deleteUser?id=${id}`) */
				},
				//点击修改按钮时触发事件
				updateUserBtn(user){
					//console.log(user)
					//用户传递的User对象应该动态的传递给双向数据绑定的key updateUser
					this.updateUser = user
				},
				//1.是否发起ajax请求 2.参数是谁? updateUser 3.什么请求类型PUT
				//this.updateUser是JS对象 传递到后端JSON串 @RequestBody
				async 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>

萌新zys

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前后端增删改查在前段页面显示

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

扫一扫