前后端交互

最新推荐文章于 2022-03-28 19:52:22 发布

星是河的眼

最新推荐文章于 2022-03-28 19:52:22 发布

阅读量570

点赞数

分类专栏： SSM 文章标签：交互 java 开发语言

本文链接：https://blog.csdn.net/weixin_43770110/article/details/121148775

版权

SSM 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

1. Axios 知识补充
2 用户CURD操作

1. Axios 知识补充

1.1 Axios-Post请求

1.1.1 编辑页面JS

<script src="../js/axios.js"></script>
		<script>
			/**
			 *  完成用户入库操作
			 *  用法: axios.post(url地址,对象名称)
			 * 	      axios.put(url地址, 对象名称)
			 * 
			 * 		  axios.get(url地址,{params: 对象名称})
			 * 		  axios.delete(url地址,{params: 对象名称})
			 */
			let url1 = "http://localhost:8090/axios/saveUser"
			let user1 = {name: "tomcat",age: 18, sex: "女"}
			axios.post(url1,user1)
				.then(function(promise){
					console.log(promise.data)
				})
			
			
		</script>

1.1.2 页面参数说明

说明: 用户在js中写的是JS对象,经过浏览器解析发起Ajax请求时,js对象被解析为JSON串.
交互的媒介: HTTP协议协议中要求传递字符串
在这里插入图片描述

1.1.3 打印Sql语句

说明: 编辑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整合Mybatis
mybatis:
  #指定别名包
  type-aliases-package: com.jt.pojo
  #扫描指定路径下的映射文件
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true
  # 一二级缓存默认开始 所以可以简化

#打印mysql日志
logging:
  level:
    com.jt.mapper: debug

1.1.4 编辑AxiosController

@RestController
@CrossOrigin
@RequestMapping("/axios")   //抽取前缀
public class AxiosController {

    @Autowired
    private AxiosService axiosService;

    /**
     * 实现用户入库操作
     * url地址: http://localhost:8090/axios/saveUser
     * 参数:  JSON串 {"name":"tomcat","age":18,"sex":"女"}
     * 返回值: 成功消息
     * 难点:  前端传递的是JSON,后端不可以直接使用User对象接收.
     * 解决方案:
     *       1.对象可以转化为JSON串  @ResponseBody
     *       2.JSON串转化为对象     @RequestBody
     */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){

        axiosService.saveUser(user);
        return "用户新增成功!!";
    }
}

1.1.5 编辑AxiosService

@Service
public class AxiosServiceImpl implements AxiosService{

    @Autowired
    private AxiosMapper axiosMapper;

    @Override
    public void saveUser(User user) {

        axiosMapper.saveUser(user);
    }
}

1.1.6 编辑AxiosMapper

public interface AxiosMapper {

    @Insert("insert into demo_user(id,name,age,sex) value (null,#{name},#{age},#{sex})")
    void saveUser(User user);
}

1.2 IDEA 自动注入Mapper异常说明

旧版本
在这里插入图片描述
新版本

1.3 Ajax简化操作

1.3.1 简化Ajax前缀

// axios.defaults.baseURL = “http://localhost:8090” 用法

//定义axios请求的前缀
			axios.defaults.baseURL = "http://localhost:8090"
			//let url1 = "/axios/saveUser"
			let user1 = {name: "tomcat",age: 18, sex: "女"}
			axios.post("/axios/saveUser",user1)
				.then(function(promise){
					console.log(promise.data)
				})

1.3.2 关于promise对象的说明

概念: promise 是ajax发起请求之后,服务器返回信息封装到promise对象中.
引入promise对象,使得ajax调用在交互中变得简化.
在这里插入图片描述

1.4 Ajax "回调地狱"问题

1.4.1 回调地狱说明

缺点: 嵌套层级太深,不便于维护.
分析: 将ajax的2层方法,想办法封装到一层中.
在这里插入图片描述

1.4.2 解决回调地狱-async-await

/**
				 * 1.定义一个方法
				 * 关键字: 
				 * 		1. async 标识函数
				 *      2. await
				 */
				async function saveUser(){
					let user2 = {name: "axios",age: 18, sex: "男"}
					let promise = await axios.post("/axios/saveUser",user2)
					console.log(promise.data)
				}
				 
				//2.调用方法
				saveUser()

1.4.3 简化promise对象写法

/**
				 * 1.定义一个方法
				 * 关键字: 
				 * 		1. async 标识函数
				 *      2. await 标识ajax请求
				 */
				async function saveUser(){
					let user2 = {name: "axios",age: 18, sex: "男"}
					//let {conf: confv,data: datav,status: statusv} = await axios.post("/axios/saveUser",user2)
					let {data: result} = await axios.post("/axios/saveUser",user2)
					console.log(result)
				}

2 用户CURD操作

2.1 实现用户列表展现

2.1.1 需求说明

要求用户访问页面的时候, 初始化的时候就要求访问后台服务器.,发起Ajax请求. 实现用户列表页面的渲染.
解决方案: 使用mounted 函数

2.1.2 编辑页面JS

<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//指定公共的前缀
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					userList: []
				},
				methods: {
					async findUserList(){
						let {data: result} = await axios.get("/axios/findUserList")
						//如果需要将ajax请求与vue JS进行关联,则必须实现数据传递
						this.userList = result
					}
				},
				mounted(){
					//页面初始化完成之后调用
					this.findUserList()
				}
			})
		</script>

2.1.3 编辑AxiosController

/**
     * 需求: 查询所有的用户信息
     * URL: /axios/findUserList
     * 返回值: List<User>
     */
    @GetMapping("/findUserList")
    public List<User> findUserList(){

        return axiosService.findUserList();
    }

2.1.3 编辑AxiosService

  @Override
    public List<User> findUserList() {

        return axiosMapper.findUserList();
    }

2.1.4 编辑AxiosMapper

 	@Select("select * from demo_user")
    List<User> findUserList();

2.1.5 页面中回显数据

<!-- 遍历tr标签 展现数据 -->
				<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>修改</button>
						<button>删除</button>
					</td>
				</tr>

2.1.6 页面效果展现

在这里插入图片描述

2.2 用户新增操作

2.2.1 双向数据绑定

规则: 看到文本框,首先想到使用双向数据绑定.
用户输入框双向数据绑定:
页面名称

<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					用户名称: <input type="text" name="name" v-model="addUser.name"/>
					用户年龄: <input type="text" name="age"  v-model="addUser.age" />
					用户性别: <input type="text" name="sex"  v-model="addUser.sex" />
					<button @click="addUserBtn">新增</button>
				</p>
			</div>

编辑页面JS

data: {
	userList: [],
	//定义新增的user对象
	addUser: {
		id: null,
		name: '',
		age: '',
		sex: ''
	}
}

编辑提交函数

//实现用户数据的入库操作  this.addUser 传递封装的对象
					async addUserBtn(){
						let {data: result,status: status} 
								 = await axios.post("/axios/saveUser",this.addUser)
						if(status === 200){
							alert(result)
							//1.清空用户文本输入框
							this.addUser = {} 
							//2.刷新用户列表
							this.findUserList()
						}else{
							alert("用户新增失败!!!!")
						}
					}

2.3 用户修改操作

2.3.1 数据回显

在表格中按钮添加点击事件
在这里插入图片描述定义点击事件函数

	//用户修改事件
	updateClick(user){
		//将user对象传递给updateUser的属性
		this.updateUser = user
	}

定义页面数据双向数据绑定

<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id"   v-model="updateUser.id"  disabled/>
						用户名称: <input type="text" name="name" v-model="updateUser.name"/>
						用户年龄: <input type="text" name="age"  v-model="updateUser.age"/>
						用户性别: <input type="text" name="sex"  v-model="updateUser.sex"/>
						<button>修改</button>
				</p>
</div>

2.3.2 实现用户修改操作

编辑修改按钮
在这里插入图片描述
编辑修改页面JS

//定义修改操作函数  数据封装之后提交
async updateUserBtn(){
		let {data: result} = await axios.put("/axios/updateUser",this.updateUser)
		alert(result)
		this.updateUser = {}
		this.findUserList()
	}

2.3.3 编辑AxiosController

/**
     * 用户修改操作
     * URL: /axios/updateUser
     * 参数: JSON串
     * 返回值: String
     */
    @PutMapping("/updateUser")
    public String updateUser(@RequestBody User user){

        axiosService.updateUser(user);
        return "用户修改成功!!!";
    }

2.3.4 编辑AxiosService

@Override
    public void updateUser(User user) {

        axiosMapper.updateUser(user);
    }

2.3.5 编辑AxiosMapper

 	@Update("update demo_user set name=#{name},age=#{age},sex=#{sex} where id=#{id}")
    void updateUser(User user);

星是河的眼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前后端交互

文章目录1. Axios 知识补充1.1 Axios-Post请求1.1.1 编辑页面JS1.1.2 页面参数说明1.1.3 打印Sql语句1.1.4 编辑AxiosController1.1.5 编辑AxiosService1.1.6 编辑AxiosMapper1.2 IDEA 自动注入Mapper异常说明1.3 Ajax简化操作1.3.1 简化Ajax前缀1.3.2 关于promise对象的说明1.4 Ajax "回调地狱"问题1.4.1 回调地狱说明1.4.2 解决回调地狱-async-await1.
复制链接

扫一扫

专栏目录