CGB2107-Day08-前后端项目实现

最新推荐文章于 2024-07-13 13:55:40 发布
最新推荐文章于 2024-07-13 13:55:40 发布
阅读量110 收藏
点赞数
分类专栏： Mybatis+MybatisPlus 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guan1843036360/article/details/124234110
版权

CGB2107-Day08-前后端项目实现

1. Axios 学习(重点知识)

1.1 Axios-GET/DELETE

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.2 URL请求路径

在这里插入图片描述

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);
    }
1234567891011
1.1.2.4 编辑AxiosService

1.UserService接口

 List<User> findUserByNS(User user);

2.UserServiceImpl实现类

 @Override
    public List<User> findUserByNS(User user) {
        return userMapper.findUserByNS(user);
    }
1.1.2.5 编辑UserMapper
@Select("select * from demo_user where name=#{name} and sex=#{sex}")
List<User> findUserByNS(User user);

1.2 Axios-POST/PUT

1.2.1 编辑JS
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Post请求练习</title>
	</head>
	<body>
		<h1>Ajax项目前测试-POST</h1>
		<!-- 导入js jar包 -->
		<script src="../js/axios.js"></script>
		<script>
			
			/**
			 * 业务: 实现post请求入库操作 实现入库用户
			 * 知识点: 
			 * 		1.post请求中的参数 axios.post(url,user)
			 * 
			 */
			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>
	</body>
</html>
1.2.2 检查请求路径

参数在http协议中传输时,变成了json串.
在这里插入图片描述

1.2.3 编辑AxiosController
 /**
     * 业务:实现用户的新增
     * URL: http://localhost:8090/axios/saveUser
     * 参数: {"name":"国庆快乐","age":72,"sex":"女"} JSON串
     * 返回值: String 新增成功
     * 知识点: 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.4 编辑AxiosService
//框架整合mybatis之后,数据自动提交.
    @Override
    public void saveUser(User user) {
        userMapper.saveUser(user);
    }
12345
1.2.5 编辑AxiosMapper
    @Insert("insert into demo_user value(null,#{name},#{age},#{sex})")
    void saveUser(User user);
1.2.6 Axios简化操作
1.2.6.1 指定请求的前缀

说明: 由于项目中会有大量的Ajax请求,如果每个请求将路径写全,则较为繁琐.不方便扩展
例子:
1.http://www.jd.com/axios/saveUser
2.http://localhost:8090/axios/getUser

解决方案:

/* 指定公共的请求前缀 */
			axios.defaults.baseURL = "http://localhost:8090"
			
			axios.post("/axios/saveUser",user)
				 .then(function(promise){
					 console.log(promise.data)
				 })
1.2.6.2 async-await 关键字
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简化</title>
	</head>
	<body>
		<h1>async-await写法</h1>
		<!-- 导入js jar包 -->
		<script src="../js/axios.js"></script>
		<script>
			//1.指定请求前缀
			axios.defaults.baseURL = "http://localhost:8090"
			
			/**
			 * 需求: 要求ajax请求在一行完成!
			 * 解决方案: async-await
			 * 语法说明:
			 * 		1.async 必须标识函数方法
			 * 		2.await 必须标识ajax请求
			 *  实际意义:
			 * 		解决了ajax中的头号难题, "回调地狱"问题
			 */
			
			//1.定义函数
			async function getUser(){
				let promise = await axios.get("/getUser")
				console.log(promise.data)
				
				//解构赋值 固定写法 死记硬背
				let {data: result} = await axios.get("/getUser")
				console.log(result)
			}
			
			//2.调用函数
			getUser()
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简化</title>
	</head>
	<body>
		<h1>async-await写法</h1>
		<!-- 导入js jar包 -->
		<script src="../js/axios.js"></script>
		<script>
			//1.指定请求前缀
			axios.defaults.baseURL = "http://localhost:8090"
			
			/**
			 * 需求: 要求ajax请求在一行完成!
			 * 解决方案: async-await
			 * 语法说明:
			 * 		1.async 必须标识函数方法
			 * 		2.await 必须标识ajax请求
			 *  实际意义:
			 * 		解决了ajax中的头号难题, "回调地狱"问题
			 */
			
			//1.定义函数
			async function getUser(){
				let promise = await axios.get("/getUser")
				console.log(promise.data)
				
				//解构赋值 固定写法 死记硬背
				let {data: result} = await axios.get("/getUser")
				console.log(result)
			}
			
			//2.调用函数
			getUser()
		</script>
	</body>
</html>

1.3 前后端项目调用案例

1.3.1 案例功能说明

在这里插入图片描述

1.3.2 用户列表展现
1.3.2.1 需求说明

要求:用户只要一访问页面,就要发起Ajax请求,访问后端服务器获取用户列表数据.

1.3.2.2 编辑页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					用户名称: <input type="text" name="name"/>
					用户年龄: <input type="text" name="age"/>
					用户性别: <input type="text" name="sex"/>
					<button>新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id" disabled/>
						用户名称: <input type="text" name="name"/>
						用户年龄: <input type="text" name="age"/>
						用户性别: <input type="text" name="sex"/>
						<button>修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<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 v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button>修改</button>
						<button>删除</button>
					</td>
				</tr>
				
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//为axios执行前缀
			axios.defaults.baseURL="http://localhost:8090"

			const app = new Vue({
				el: "#app",
				data: {
					//3.定义数据列表
					userList: []
				},
				methods: {
					//2.定义获取列表数据的函数
					async getUserList(){
						let {data: result} = await axios.get("/axios/findAll")
						//console.log(result)
						//将ajax返回值传递给Vue
						this.userList = result
					}
				},
				mounted(){
					//1利用生命周期函数调用getUser函数
					this.getUserList()
				}
			})
			
		</script>
	</body>
</html>
1.3.2.3 编辑AxiosController
/**
     * 需求:获取user全部列表
     * URL: /axios/findAll
     * 参数: 没有
     * 返回值: List<User>
     */
    @GetMapping("/findAll")
    public List<User> findAll(){

        return userService.findAll();
    }
1.3.2.4 页面效果展现

在这里插入图片描述

1.3.3 用户新增
1.3.3.1 编辑页面html
<div align="center">
				<h3 align="center">用户新增</h3><br>
				<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>
  1. JS封装属性
    在这里插入图片描述
  2. JS方法实现
    在这里插入图片描述
1.3.4 用户修改
1.3.4.1 数据回显
  1. 编辑按钮点击事件
    在这里插入图片描述
  2. 定义更新对象
    在这里插入图片描述
1.3.4.2 数据更新
  1. 添加修改点击事件
    在这里插入图片描述
  2. 编辑修改函数
    在这里插入图片描述
1.3.5 修改后端实现
1.3.5.1 编辑AxiosController
 /**
     * 业务: 实现用户更新
     * URL: /axios/updateUser
     * 参数: json串
     * 返回值: 提示信息
     */
    @PutMapping("updateUser")
    public String updateUser(@RequestBody User user){

        userService.updateUser(user);
        return "更新操作成功!";
    }
1.3.5.2 编辑UserService

1.定义接口
在这里插入图片描述

2.编辑实现类

 @Override
    public void updateUser(User user) {

        userMapper.updateUser(user);
    }
12345
1.3.5.3 编辑UserMapper
 @Update("update demo_user set name=#{name},age=#{age},sex=#{sex} where id=#{id}")
 void updateUser(User user);
12

2. 京淘项目前端项目搭建

2.1 node.js 安装

说明: 根据博客文章安装node.js/ui工具.最终的效果如图即可
在这里插入图片描述

2.2 导入前端项目

2.2.1 前端资源文件

注意事项: 下载的文件一定是一个zip包文件.
路径:
在这里插入图片描述

2.2.2 解压文件

将资源文件的zip包 解压到第三阶段的课程项目路径下.
在这里插入图片描述

2.2.3 导入项目

在这里插入图片描述

2.2.4 项目运行

在这里插入图片描述

项目最终效果
在这里插入图片描述

管程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CGB2011-DAY13-14.html
03-30
CGB2011-DAY13-14.html
java第三阶段第八天--CureGuy
CureGuy的博客
09-30 84
1、axios-get-restful 2 、post-restful 3 、async-await简化操作
springboot -- 整合mybatis
qq_24271537的博客
08-05 80
一、 1、添加jar包文件 &lt;!--添加Mybatis --&gt; &lt;dependency&gt; &lt;groupId&gt;org.mybatis.spring.boot&lt;/groupId&gt; &lt;artifactId&gt;mybatis-spring-boot-starter&lt;/artifactId&gt; ...
GET与POST的区别
Cure The World的博客
08-23 3221
一、GET 方法 有关 GET 请求的其他一些注释： GET 请求从指定的资源请求数据 GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回数据 二、POST 方法 有关 POST 请求的其他一些注释： POST 请求向指定的资源提交要被处理的数据 POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求 三、G
curl get 请求传参数_开发当中curl简单使用
weixin_32616931的博客
01-28 8680
curl是linux上可以发送http请求的命令。当然Postman是一个很好的接口调用管理工具，但在验证一个linux服务器调用另外一个linux服务器API是否可用的场景下，非curl命令莫属。下面小明主要给大家介绍一下常用的curl命令场景，大家可以积累一些运维知识，并应用在日常开发工作中。打开一个网站curl www.mynamecoder.com发送POST 请求curl -d "use...
mybatis-plus的CRUD详细操作及实例
凡事不敷衍，才能被生活所厚待
04-24 5789
Mybatis-plus的基本增删改查操作 创建自己的service接口继承 com.baomidou.mybatisplus.extension.service.IService public interface UserService extends IService<User> {} @Service("userService") public class User...
CGB2011-DAY02.html
03-12
CGB2011-DAY02.html
H3CGB0-713华三.docx 文档
11-06
【H3CGB0-713华三云计算解决方案】文档涵盖了多个IT领域的知识点，主要集中在云计算、网络、存储和服务器技术方面。 1. **H3Cloud云计算解决方案**：包括了CAS云计算管理平台，UIS（统一基础设施系统）的服务器、...
H3CGB0-732.docx
03-14
"H3CGB0-732.docx"知识点总结 一、VLAN 和 Trunk * VLAN 的概念和作用 * Trunk 的概念和作用 * Trunk VLAN 的配置命令：[Switch-Ethernet0/1]port trunk pvid 10 * Trunk VLAN ID 的设置 二、路由器和交换机 * ...
h3cGB0-640.zip
02-13
h3cGB0-640.
console.log（）返回undefined
iceberg_sss的博客
09-05 5430
JavaScript：console.log()中返回数据为什么有一个undefined console.log（）定义 console.log是用来在控制台输出信息 本身是一个函数 函数是可以有返回值的，若不设置返回值，默认返回值为undefined 例子 浏览器控制台直接运行 控制台直接运行语句，会运行返回console.log本身的返回值undefined //情况1 console.log(console.log(1+1)) //先执行表达式1+1 结果为2 //再执行内层console..
Elsaticsearch java基本操作
最新发布
qq_62383709的博客
07-13 445
索引 基本操作 package com.orchids.elasticsearch.web.controller; import cn.hutool.core.collection.CollUtil; import cn.hutool.json.JSONUtil; import com.orchids.elasticsearch.web.po.User; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperatio
配置Java开发环境
Broken_x的博客
07-10 1501
Java开发环境配置
java版的上门家政系统和PHP版的上门家政有什么区别？
baina666的博客
07-12 479
综上所述，Java版和PHP版的上门家政系统各有优缺点，选择哪种语言主要取决于项目的具体需求、预算、开发团队的技术栈以及未来的扩展计划等因素。同时，由于Java生态系统的复杂性和多样性，也可能需要投入更多的时间和资源来学习和掌握相关的技术和工具。Java版：Java拥有庞大的生态系统和丰富的第三方库，这为家政系统的开发和扩展提供了强大的支持。Java版：由于Java的编译执行机制和高效的垃圾回收算法，Java版家政系统通常具有更高的运行效率和更好的性能表现，尤其是在处理高并发、大数据量等复杂场景时。
关于static定义初始化块和静态变量以及初始化块的执行顺序问题
你我约定有三的博客
07-08 468
第二步：在类加载的时候，按照从上到下执行static修饰的代码，此时执行static Test2 test1 = new Test2()，也就是创建出一个名为test1的对象。第六步：此时除了main方法，所有由static修饰的代码全部执行完毕(static修饰的代码只执行一次)，类初始化完成，开始执行main方法，main方法中只有一条语句(中的代码,此时输出aa以及a的值(由于第一步没赋初值，并且给了默认值为0 所以输出0)//首先输出a的值为10 然后输出bb，最后将a的值定义为11。
java Object 转 Integer
servepeople的博客
07-09 1479
在 Java 中，可以通过多种方法将一个Object转换为Integer。
已解决 javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！
小明的Java问道之路
07-08 2530
已解决 javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！
Java方法练习-双色球彩票系统
T1798218285的博客
07-11 271
红色球号码从1-33中选择；蓝色球号码从1-16中选择。投注号码由6个红色球号码和1个蓝色球号码组成。三等奖 5+1 / 5+0 3000。四等奖4+1 / 4+0 200。六等奖1+1 / 1+0 5。一等奖6+1 1000w。二等奖6+0 500w。五等奖3+1 / 2+1。
elk部署springboot
Chihirozy的博客
07-11 315
elk部署springboot。
使用Verilog-A实现常见nmos管的建模代码,要求详细的代码
05-26
Cgb = Cox*W*Leff/(Leff+W_eff); Cdb = Cox*Leff*L/(L+W_eff); gamma = sqrt(2*q*eps_si*nsub)/(Cox*Vt); lambda = 0; W_eff = W-gamma*(sqrt(phi_f-Vbs)-sqrt(phi_f)); L_eff = L-lambda*W_eff; VT = Vt*log((nsub)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值