Java - stage3 - day08 - 前后端项目实现

已于 2024-04-07 21:58:52 修改
阅读量52 收藏
点赞数
分类专栏： Java-stage3 文章标签： java restful
于 2021-09-30 11:09:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/taian1665/article/details/120560902
版权
本文详细介绍了Axios库在JavaScript中的应用，包括GET和POST请求的发送，RESTful参数提交方式，以及在Vue.js环境中如何发起HTTP请求。此外，还展示了用户列表的前端搭建过程，包括数据获取、用户新增和修改功能的实现。通过设置Axios的baseURL简化了请求路径，同时提供了控制器和Mapper的相应代码片段。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. Axios 重点知识

1.1 Axios - GET

1.1.1 请求方式说明

  1. http://localhost:8090/findUser?id=xxx&name=xxx
  2. 利用对象的方式进行数据封装 axios.get(url, {params: 封装的对象})
  3. RestFul 的参数提交方式

1.1.2 Axios - GET - RestFul

1.1.2.1 编辑页面JS
	/* 
	案例三: 利用restFul实现数据获取
	需求:  根据name/sex查询数据
	模板字符串: 语法ES7的写法 一对反引号进行数据拼接,通过${} 获取变量
 */	 
let name = "黑熊精"
let sex = "男"
//let url3 = "http://localhost:8090/axios/user/"+name+"/"+sex
let url3 = `http://localhost:8090/axios/user/${name}/${sex}`
axios.get(url3)
	 .then(function(promise){
		 console.log(promise.data)
	 })
1.1.2.3 编辑AxiosController
/**
     * 业务说明: 接收restFul请求
     * URL:http://localhost:8090/axios/user/${name}/${sex}
     * 参数: name/sex
     * 结果: List<User>
     */
    @GetMapping("/user/{name}/{sex}")
    public List<User> findUserByNS(User user){

        return userService.findUserByNS(user);
    }
1.1.2.4 编辑AxiosService
  1. UserService接口
List<User> findUserByNS(User user);
  1. UserServiceImpl实现类
 @Override
    public List<User> findUserByNS(User user) {
        return userMapper.findUserByNS(user);
    }

1.2 Axios - POST

1.2.1 编辑 JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script type="text/javascript">
		
		/**
		 * POST请求中的参数直接传递数据
		 */
		let url = "http://localhost:8090/axios/saveUser"
		let user = {
			name: "国庆快乐",
			age : 72,
			sex : "女"
		}
		axios.post(url, user)
			.then(function(promise){
				console.log(promise.data)
			})
		
	</script>
</html>

1.2.2 控制器

    /**
     *
     * @param user {"name":"国庆快乐","age":72,"sex":"女"}
     * 知识点：post请求传递对象时，传递的数据时一个json传，不能直接为User对象赋值
     * 解决方案：
     *        1.对象转化为JSON   @ResponseBody
     *        2.JSON转化为对象   @RequestBody
     */
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        userService.saveUser(user);
        return "用户入库成功";
    }

1.2.3 Mapper类

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

1.3 Axios简化操作

1.3.1 指定请求前缀

说明：由于项目中会有大量的Ajax请求，如果每个请求路径写全，较为繁琐，不方便扩展
例子：
解决方案：
配置baseURL
axios.defaults.baseURL

1.3.2

//指定baseURL
axios.defaults.baseURL = "http://localhost:8090";
let url = "/axios/saveUser"

2. 京淘前端项目搭建

2.1 node.js 安装

2.2 准备页面

<!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="500px">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td>{{user.age}}</td>
					<td>{{user.sex}}</td>
					<td>
						<button @click="updateBtn(user)">修改</button>
						<button>删除</button>
					</td>
				</tr>
			</table>
			<hr />
			<div>
				<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 @click="updateUserCommit(user)">修改</button>
				</p>
				<p>
					<!--看到input框想到双向数据绑定-->
					用户名称: <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>
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
		</script>
	</body>
</html>

2.3 用户列表

2.3.1 Javascript代码

axios.defaults.baseURL = "http://localhost:8090/axios"
			const app = new Vue({
				el: "#app",
				data: {
					//定义数据列表
					userList: []
				},
				methods: {
					//定义获取列表数据的函数
					async getUserList() {
						let {data: result} = await axios.get("/findAll")
						console.log(result)
						this.userList = result
					}
				},
				//利用生命周期函数初始化列表数据
				mounted() {
					this.getUserList()
				}
			})

2.3.2 编辑AxiosController

    @GetMapping("/findAll")
    public List<User> findAll() {
        return userService.findAll();
    }

2.4 用户新增

2.4.1 Javascript代码

axios.defaults.baseURL = "http://localhost:8090/axios"
const app = new Vue({
	el: "#app",
	data: {
		//定义数据列表
		userList: [],
		//指定新增对象
		addUser: {
			name: '',
			age: '',
			sex: ''
		}
	},
	methods: {
		//定义获取列表数据的函数
		async getUserList() {
			let {data: result} = await axios.get("/findAll")
			console.log(result)
			this.userList = result
		},
		async addUserBTN(){
			let {data: result} = await axios.post("/saveUser", this.addUser)
			console.log(result)
			//如果新增成功，应该重新获取列表信息
			alert(result)
			//清空原有数据
			this.addUser = {}
			this.getUserList()
		}
	},
	//利用生命周期函数初始化列表数据
	mounted() {
		this.getUserList()
	}
})

2.4.2 Controller

    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        userService.saveUser(user);
        return "用户入库成功";
    }

2.5 用户修改

2.5.1 Javascript

axios.defaults.baseURL = "http://localhost:8090/axios"
const app = new Vue({
	el: "#app",
	data: {
		//定义数据列表
		userList: [],
		//指定新增对象
		addUser: {
			name: '',
			age: '',
			sex: ''
		},
		updateUser: {
			id: '',
			name: '',
			age: '',
			sex: ''
		}
	},
	methods: {
		//定义获取列表数据的函数
		async getUserList() {
			let {data: result} = await axios.get("/findAll")
			console.log(result)
			this.userList = result
		},
		async addUserBTN(){
			let {data: result} = await axios.post("/saveUser", this.addUser)
			console.log(result)
			//如果新增成功，应该重新获取列表信息
			alert(result)
			//清空原有数据
			this.addUser = {}
			this.getUserList()
		},
		updateBtn(user) {
			//将用户点击的数据绑定到修改页面中
			this.updateUser = user
		},
		async updateUserCommit() {
			//实现数据的更新操作
			let {data: result} = await axios.put("/updateUser", this.updateUser)
			alert(result)
			this.updateUser = {}
			this.getUserList()
		}
	},
	//利用生命周期函数初始化列表数据
	mounted() {
		this.getUserList()
	}
})

2.5.2 后端代码

AxiosController

   @PutMapping("/updateUser")
    public String updateUser(@RequestBody User user) {

        userService.updateUser(user);
        return "更新操作成功";
    }

Mapper

@Update("update demo_user set name=#{name}, age=#{age}, sex=#{sex} where id=#{id}")
void updateUser(User user);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值