前后端交互基本使用

最新推荐文章于 2024-07-24 16:11:19 发布

Fengkx518

最新推荐文章于 2024-07-24 16:11:19 发布

阅读量551

点赞数

分类专栏：前后端交互demo 文章标签： mysql java html ajax vue.js

本文链接：https://blog.csdn.net/Fengkx518/article/details/122887101

版权

前后端交互demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.数据库

创建一个数据库，创建一个user表，设置四个字段 id为主键 name , sex , class

插入一些数据

2.HTML前端页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="1000px">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>班级</td>
					<td>操作</td>
					</tr>
				<!--
					v-for表示循环遍历vue中的属性
					v-text 动态获取数据 如果没有解析,则不展现
				 -->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.sex"></td>
					<td v-text="user.userClass"></td>
					<td><button @click="insertUserById(user.id)">新增</button>
					<button @click="deleteUserById(user.id)">删除</button></td>
				</tr>
				
			</table>
		</div>
		<script src="js/axios.js"></script>
		<script src="js/vue.js"></script>
		
		<script>
			/*
							案例1: 
								1.url地址:http://localhost:8090/user/findAll
								2.获取数据之后 要求页面表格展现
								3.要求使用vue.js的循环遍历标签完成任务
						 */
			axios.defaults.baseURL="http://localhost:8090/user"
			const app = new Vue({
				el: "#app",
				data: {
					//1.定义属性，接收Ajax返回的结果
					userList:[]
				},
				methods: {
					async findUser(){
						let{data:result} = await axios.get("/findAll")
						console.log(result)
						//Ajax返回的结果，赋值给vue.js的属性，之后利用属性在页面显示
						this.userList = result;
					},
					
				},
				
				//生命周期函数，由系统自动调用
				mounted(){//vue对象初始化成功，可以被用户使用了
					this.findUser();
					
				}
			})
		</script>
		
	</body>
</html>

页面展示

3.后端java代码

controller层

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController //交给spring容器管理
@RequestMapping("/user")//抽取共性的/user
@CrossOrigin//解决跨域问题
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * URL: localhost:8090/user/findAll
     * 参数: User
     * 返回值结果: 多个结果 用list<>接收
     */
    @GetMapping("/findAll")
    public List<User> findAll(User user) {

      return userService.findAll(user);
    }
}

mapper层

package com.jt.mapper;

import com.jt.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserMapper {
//    @Select("select * from user")
    List<User> findAll(User user);
}

pojo

package com.jt.pojo;

import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;

@Data//重写了get，set，，方法
@Accessors(chain = true)//实现了链式连接
public class User implements Serializable {
    private Integer id;
    private String name;
    private String sex;
    private String userClass;
}

service层

接口

package com.jt.service;

import com.jt.pojo.User;

import java.util.List;

public interface UserService {
    List<User> findAll(User  user);
}

接口实现类

package com.jt.service;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;


    @Override
    public List<User> findAll(User user) {

        return userMapper.findAll(user);
    }
}

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="com.jt.mapper.UserMapper">
<select id="findAll" resultMap="userRM">
    select * from user
</select>
<resultMap id="userRM" type="User" autoMapping="true">
    <id column="id" property="id"></id>
    <result column="name" property="name"></result>
    <result column="sex" property="sex"></result>
    <result column="class" property="userClass"></result>

</resultMap>
</mapper>

主启动类

package com.jt;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}