前后端调用

最新推荐文章于 2024-02-09 08:47:10 发布

我心向明月_X

最新推荐文章于 2024-02-09 08:47:10 发布

阅读量240

点赞数

分类专栏： axios vue mybtais 文章标签： vue.js html

本文链接：https://blog.csdn.net/weixin_47460942/article/details/119965566

版权

axios 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

mybtais

3 篇文章 0 订阅

订阅专栏

前后端调用

请求类型说明

1.GET/DELETE 用法一致.
2.POST/PUT 用法一致.

@ResponseBody与@RequestBody

POST/PUT 需将json 转为 user对象加@RequestBody

json 互转 user对象

* 1. user对象转化为json @ResponseBody

* 2. json转化为user对象 @RequestBody

@PathVariable注解使用

restFul参数接收

@PathVariable是spring3.0的一个新功能：接收请求路径中占位符的值

定义axios的请求前缀

说明：请求的url的前缀相当相似所以提出来整合一下。

//配置基本请求路径
axios.defaults.baseURL = "http://localhost:8080"

用户列表展现

getUserList() 查询数据

通过axios 获取到控制台的数据，传给vue 的data。

定义userList: [] 回调函数中 this.userList = promise.data进行二次调用。
需求：点进去网页就加载出来数据

用VUE生命周期函数，实现效果。注意函数的选择

编辑html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UserAdmin</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 新增div -->
			<div align="center">
				<h3 >用户新增</h3>
				<hr />
				姓名：<input type="text" v-model="addUser.name"/>
				年龄：<input type="number" v-model="addUser.age"/>
				性别：<input type="text" v-model="addUser.sex"/>
				<!-- 点击调用入库函数 -->
				<button @click="addUserBten">新增</button>
			</div>
			<hr />
			<!-- 修改div -->
			<div align="center">
				<h3 >用户修改</h3>
				<hr />
				编号：<input type="number" disabled="false"/>
				姓名：<input type="text" v-model.lazy="updateUser.name" /><br />
				年龄：<input type="number" v-model.lazy="updateUser.age"/>
				性别：<input type="text" v-model.lazy="updateUser.sex"/><br />
				<button @click="updateUserBC">保存修改</button>
			</div>
			<hr />
			<!-- 展现数据 -->
			<h2 align="center">用户列表</h2>
			<table align="center" border="1.5px" bgcolor="rosybrown"  width="90%">
				<!-- 标题 -->
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<!-- 利用循环遍历实现数据的展现 -->
				<tr align="center" v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age">></th>
					<th v-text="user.sex">></th>
					<th width="20%">
					<button @click="updateUserBten(user)">修改</button>
					<!-- 获取到对象调用方法将对象传递 -->
					<button @click="deleteUserBten(user)">删除</button>
					</th>
				</tr>
			</table>
		</div>
		
		<script>
			 //定义axios请求的前缀
			axios.defaults.baseURL = "http://localhost:8080/vue"
			new Vue({
				el: "#app",
				data: {
					userList: [],
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id : '',
						name: '',
						age: '',
						sex: ''
						
					}
					
				},
				methods: {
					//查询
					getUserList(){
						axios.get("/findAll")
								.then(promise => {
									console.log(promise.data)
									this.userList = promise.data
								})
					},
					//新增
					addUserBten(){
						axios.post("/saveUser",this.addUser)
								.then(promise => {
									alert(promise.data)
									this.getUserList()
									this.userList = {}
								})
						
					},
					//删除
					deleteUserBten(user){
						axios.delete(`/deleteById/${user.id}`)
								.then(promise => {
									alert(promise.data)
									this.getUserList()
								})
					},
					//修改
					updateUserBten(user){
						this.updateUser = user
					},
					//保存修改
					updateUserBC(){
						axios.put("updateUser",this.updateUser)
						.then(promise => {
							alert(promise.data)
							this.getUserList()
							this.updateUser = {}
						})
					}
					
					
					
				},
				 //利用生命周期函数触发ajax
				created() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

编辑VueController

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.*;

import java.util.List;

@RestController
@RequestMapping("/vue")
@CrossOrigin
public class VueController {
    @Autowired
    private UserService userService;

    /**
     * 需求: 查询所有的用户数据
     * URL: http://localhost:8000/vue/findAll
     * 参数: null
     * 返回值: List<User>
     */
    @GetMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
    //添加
    /**
     * 实现用户的入库
     * 参数：User对象的JSON
     * 返回值：成功信息*/
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        userService.saveUser(user);
        return "入库成功";
    }
    /**
     * 业务：根据id删除数据
     * url:`http://localhost:8000/vue/deleteById/${user.id}`
     *  RestFul风格
     * 返回值：删除成功*/
    @DeleteMapping("/deleteById/{id}")
    public String deleteById(@PathVariable Integer id){
        userService.deleteById(id);
        return "删除成功";
    }

    @PutMapping("/updateUser")
    public String updateUser(@RequestBody User user){
        userService.updateUser(user);
        return "修改成功";

    }


}

编辑UserserciveImpl

    @Override
    public List<User> getUser(User user) {
        return null;
    }

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

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

Vue和axios联系

说明: 当通过axios获取服务器端数据之后,应该将该数据传给vue.data的属性. Vue对象才可以对数据进行二次操作.

摘自：闪耀太阳

我心向明月_X

关注

0
点赞
踩
0

收藏

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

前后端调用请求类型说明1.GET/DELETE 用法一致.2.POST/PUT 用法一致.@ResponseBody与@RequestBodyPOST/PUT 需将json 转为 user对象加@RequestBodyjson 互转 user对象* 1. user对象转化为json @ResponseBody* 2. json转化为user对象 @RequestBody@PathVariable注解使用restFul参数接收@PathVariable是sprin..
复制链接

扫一扫