CGB2105-07-08笔记

最新推荐文章于 2024-07-24 17:27:32 发布
最新推荐文章于 2024-07-24 17:27:32 发布
阅读量133 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XHH_3344/article/details/119211505
版权

1、后端项目搭建

1.1 创建项目

在这里插入图片描述

1.2 SpringMVC参数传递方式

1.2.1 简单的传递

编辑Controller代码
URL地址：http://localhost:8090/getUserByid
在这里插入图片描述

1.2.2 对象的传递方式

URL：http://localhost:8090/getUser?id=100&name=貂蝉&age=18
后台代码说明：
在这里插入图片描述

1.2.3 restFul风格

特点：

  1. 参数需要使用/进行分割
  2. 参数的位置是固定的
  3. restFul请求方法路径不能出现动词
    作用：
    用户可以通过一个URL请求的地址,可以实现不同的业务操作
    知识回顾：
    查询: http://localhost:8090/getUserById?id=100 类型:get
    新增: http://localhost:8090/insertUser 类型:post
    更新: http://localhost:8090/updateUser 类型:post
    删除: http://localhost:8090/deleteUserById?id=200 类型:get
    意图明显: 常规的请求的方式其中包含了动词,导致操作的意图非常明显.

RestFul风格实现CURD操作:

  1. 查询: http://localhost:8090/user/100 type:GET
  2. 新增: http://localhost:8090/user/tomcat/18/男 type:POST
  3. 删除: http://localhost:8090/user/100 type:DELETE
  4. 更新: http://localhost:8090/user/mysql/100 type:PUT

1.2.4 RestFul风格-简单参数接受

入门案例：

 /**
     * 1.restFul实现用户查询
     * URL: http://localhost:8090/user/100
     * type: GET
     * RequestMapping 默认的可以接收所有的请求类型
     * RestFul语法:
     *      1.参数的位置固定.
     *      2.参数必须使用{}包裹
     *      3.必须使用@PathVariable 动态的接收参数
     *      注意事项: {参数名称}必须与方法中的名称一致.
     */
    @GetMapping("/user/{id}")
    public String RestFul(@PathVariable Integer id)
    {
        return "RestFul接收的参数"+id;
    }

1.2.5 RestFul风格-对象参数接收

入门案例：

/**
     * 需求: 查询name=tomcat age=18 sex=女的用户
     * 要求使用:restFul
     * URL: http://localhost:8090/user/tomcat/18/女
     * restFul的优化:
     *  如果{参数名称}与对象中的属性名称一致,
     *      则SpringMVC动态的为对象赋值,
     *      @PathVariable 可以省略
     * 注意事项:
     *      前后端的参数的传递必须保持一致!!!!
     */
    @GetMapping("/user/{name}/{age}/{sex}")
    public User RestFulUser(User user)
    {
        return user;
    }

2、Axios学习

2.1 Axios介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特点：

  1. 从浏览器中创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

结构说明：

  1. JS中原生提供了Ajax操作. 弊端: 操作特别的复杂 易用性较差.
  2. jQuery中的Ajax 封装了原生的JS Ajax 提高了开发的效率
  3. Axios是VUE中默认支持的Ajax的请求的方式.
    ** 特点: 调用简洁 解决了 “回调地狱问题”!!!**

2.2 回调地狱问题

说明: 前端中如果需要发起大量的Ajax请求,并且Ajax 请求有嵌套的关系.则可能引发回调地狱问题.
例子: 请求 参数A --1–结果B/参数B—2–结果C/参数C—3— 结果D
在这里插入图片描述

2.3 Axios 入门案例

2.3.1 编辑后台代码

在这里插入图片描述

2.3.2 Axios调用步骤

  1. 导入Axios文件
  2. 发起Ajax请求
  3. 解析返回值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<script src="../js/axios.js"></script>
		<script>
		/**
		* 注意事项:
		* 	 1.Axios将原来的嵌套的结构,改为链式加载方式
		*    2.回调函数中的data,不是服务器的返回值,是promise对象
		* 发起Ajax请求:
		* 	1. GET请求获取数据
		*/
			axios.get("http://localhost:8090/axios/getUser")
				 .then(function(result){ //promise对象
				 //获取服务器返回值  promise.data
					 console.log(result)
					 console.log(result.data)
				 })
		</script>
	</body>
</html>

promise对象说明: 其中data表示服务器的返回值
在这里插入图片描述

2.4 Axios-GET-简单参数

2.4.1 前端Ajax请求

在这里插入图片描述

2.4.2 后端Controller代码

在这里插入图片描述

2.5 Axios-GET-RestFul结构

2.5.1 前端Ajax请求

在这里插入图片描述
在这里插入图片描述

2.5.2 编辑后端Controller代码

在这里插入图片描述

2.6 Axios-Get对象传参（Day_8）

2.6.1 入门案例 需求说明

说明：如果用户查询数据 其中包含了多个参数,可以使用restFul风格(少量参数)/可以使用对象封装(多个参数)
如果参数较多则建议使用对象的方式封装.
案例：查询name=“李知恩” age=22 sex="女"的用户 要求使用对象的方式封装参数

2.6.2 编辑前端Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios-get</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * 需求: 实现对象方式的数据传递
			 * url:  http://localhost:8090/axios/user/getUserObj
			 * 语法: axios.get("url","参数").then(回调函数)
			 * 业务需求:  查询name="李知恩" age=22   sex="女"的用户
			 */
			let user = {
				name: '李憨憨',
				age: 18,
				sex: '女'
			}
			axios.get("http://localhost:8090/axios/user/getUserObj",{
				params: user
			}).then(function(result){
				console.log(result.data)
			})
		</script>
	</body>
</html>

2.6.3 编辑后端Controller代码

在这里插入图片描述

2.7 Axios-Delete请求

2.7.1 Delete请求说明

一般用户通过Delete请求做删除操作，删除的语法与Get请求的语法一致的.

2.7.2 Delete请求方式说明 了解delete代码结构

  1. 不带参数的删除
    axios.delete(“url地址”).then(function(result){ … })

  2. 携带个别参数 ?name=李知恩
    axios.delete(“url地址?id=100”).then(function(result){ … })

  3. RestFul结构
    可以使用模版字符串的方式简化代码结构
    axios.delete("url地址/xxx/xxx/xxx").then(function(result){ … })

  4. 采用对象的方式进行参数传递
    const/let 对象 = {xxx:xxx,xxx:xxx,xxx:xxx}
    axios.delete("url地址/xxx/xxx/xxx",{params: 封装后的对象}).then(function(result){ … })

2.8 Axios-post请求

2.8.1 编辑前端页面Ajax

const user = {
	name: 'POST请求',
	age: 18,
	sex: '女'
}
const url = "http://localhost:8090/axios/insertUser"
axios.post(url,user).then(function(result){
	console.log(result.data)
})

2.8.2 参数的数据结构

在这里插入图片描述

2.8.3 编辑后端Controller

在这里插入图片描述

2.9 关于前后端调用细节说明

2.9.1 请求类型

HTTP/1.1协议中共定义了八种方法（有时也叫“动作”），来表明Request-URL指定的资源不同的操作方式
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
在这里插入图片描述
说明：
1、OPTIONS
返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2、HEAD
向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
3、GET
向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中，例如在Web Application中，其中一个原因是GET可能会被网络蜘蛛等随意访问。Loadrunner中对应get请求函数：web_link和web_url
4、POST
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 Loadrunner中对应POST请求函数：web_submit_data,web_submit_form
5、PUT
向指定资源位置上传其最新内容
6、DELETE
请求服务器删除Request-URL所标识的资源
注意：
1）方法名称是区分大小写的，当某个请求所针对的资源不支持对应的请求方法的时候，服务器应当返回状态码405（Mothod Not Allowed）；当服务器不认识或者不支持对应的请求方法时，应返回状态码501（Not Implemented）。
2）HTTP服务器至少应该实现GET和HEAD/POST方法，其他方法都是可选的，此外除上述方法，特定的HTTP服务器支持扩展自定义的方法。

请求的类型是由程序员手动控制

  1. 分类
    1. Get 请求类型 查询
    2. delete 请求类型 删除
  2. 分类B
    1. post 请求类型 form表单提交 新增操作
    2. put 请求类型 更新操作

2.9.2 关于PSOT请求说明

浏览器解析数据结构
在这里插入图片描述
说明： 数据在进行参数传递时，数据需要转化
在这里插入图片描述

2.9.3 jQuery中的post请求/Axios中的post对比/RestFul风格

  1. Ajax中的post请求格式
    在这里插入图片描述
    如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象

  2. jQuery中的post请求格式
    如果采用form表单的方式提交,则可以直接采用对象的方式接收
    name=xxx&age=xx&sex=xx
    在这里插入图片描述

  3. restFul的格式是将参数拼接到URL中 采用特殊的方式获取数据
    在这里插入图片描述

2.10 Axios-Post-RestFul结构

2.10.1 编辑前端JS

/**
* post请求 restFul的写法
* 实现用户新增入库
* url: http://localhost:8090/axios/user/name/age/sex
*/
let url2 = "http://localhost:8090/axios/user/redis/18/男"
axios.post(url2)
	.then(function(result){
		console.log(result.data)
})

2.10.2 编辑后端Controller代码

在这里插入图片描述

2.11 asyuc-await用法-箭头函数

2.11.1 概念解释

  1. async/await 是ES7引入的新语法 可以更加方便的进行异步操作
  2. async 关键字用在函数上. 返回值是一个promise对象
  3. await 关键字用在async 函数中

2.11.2 箭头函数案例

/**
* axios的get请求语法
* 知识点:
* 		1.箭头函数 主要简化回调函数的写法
* 		思路: 重复的 固定的可以简化
* 		规则: 如果参数只有一个则括号可以省略
*  	
* 		2.async-await简化  解构赋值
* 		2.1 async 需要标识函数
* 		2.2 await 需要标识ajax请求
*    上述的操作可以将多行js 封装为一行执行 简化代码操作
*/
axios.get("http://localhost:8090/axios/getUserByName?name=李知恩")
	.then(result =>{
		alert(result.data)
})

2.11.3 async-await 操作

 // 定义ajax基本请求路径  为ajax添加前缀
axios.defaults.baseURL = "http://localhost:8090"
			 
// 1、定义方法
async function getUserByName(){
const url = "/axios/getUserByName?name=李知恩"
//2.发起ajax请求  获取promise对象
const {data: resultData,status: code} = await axios.get(url)
	console.log(resultData)
	console.log(code)
}
// 2、调用方法
 getUserByName()

2.11.4 Axios配置信息

说明：可以通过下列的配置简化 Ajax请求的路径

// 定义ajax基本请求路径  为ajax添加前缀
axios.defaults.baseURL = "http://localhost:8090"

使用案例：
在这里插入图片描述

3、关于Axios练习

3.1 VUE + Axios 需求分析

说明：

  1. 利用VUE.js构建页面
  2. 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
  3. 完成页面数据的删除操作
  4. 完成页面数据的修改操作

3.2 编写前端页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h1 align="center">用户新增</h1>
				姓名：<input type="text" v-model.trim="insertuser.name" />
				年龄：<input type="text" v-model.number="insertuser.age" />
				性别：<input type="text" v-model.trim="insertuser.sex" />
				<button @click="addUser">新增</button>
			</div>
			<hr>
			<table border="1px" cellpadding="0px" cellspacing="0px" align="center" width="80%">
				<tr align="center">
					<td colspan="5"><h1>用户列表</h1></td>
				</tr>
				<tr align="center">
					<td>编号</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/vue.js"></script>
		<script src="../js/axios.js"></script>
		<!-- 
			需求分析1:
			1.当用户打开页面时就应该发起Ajax请求获取userList数据.
			2.将userList数据 在页面中展现  
				2.1页面中的数据必须在data中定义
				2.2 ajax请求的结果赋值给data属性
			3.利用v-for指令实现数据遍历
					
			需求分析2:  用户数据入库操作
				1.在页面中准备用户新增文本框/按钮
				2.准备双向数据绑定的规则
				3.为按钮添加事件,实现数据新增入库.
		 -->
		<script>
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: '#app',
				data: {
					userList: [],
					insertuser: {
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					async getUserList(){
						const {data: result} = await axios.get("/vue/getUserList")
						this.userList = result
					},
					async addUser(){
						const{data: result} = await axios.post("/vue/insertUser",this.insertuser)
					}
				},
				mounted(){
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

3.3 实现userLiset查询

3.3.1 编辑VueController

在这里插入图片描述

3.3.2 编辑UserService

在这里插入图片描述

3.3.3 编辑UserServiceImpl

在这里插入图片描述

3.4 实现用户入库操作

3.4.1 编辑VueController

在这里插入图片描述

3.4.2 编辑UserServiceImpl

在这里插入图片描述

直男编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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.
cgb08-09班级面试题.docx
03-22
数据库、Java、Linux 等多种技术知识点总结 在今天的面试中，我们将探讨数据库、Java、Linux 等多种技术知识点，涵盖了数据库查询、Java 编程、Linux 命令等方面。下面是今天的知识点总结： 数据库查询 ...
H3CGB0-713云计算NE.pdf
02-16
H3CGB0-713云计算NE 云计算解决方案包含ABCDA。CAS云计算管理平台、UIS服务器、UIS存储、UIS网络等组件。这些组件共同构成了云计算解决方案，提供了强大且灵活的云计算环境。 链路聚合是指将多个物理链路聚合成一...
12. Hibernate 模板设计模式
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
07-22 1104
如何运用模板设计模式重构 Hibernate 操作流程；持久化对象与序列化接口；OOP中有一个编码原则 ：写仅写一次。翻译过来就是，不要重复，要重用。答案是：使用模板设计模式进一步封装Hibernate的操作。在真实项目中，Hibernate仅仅只是完成项目中的一部分工作，需要和其它，如Spring等框架联合工作，一起承担整体项目的开发。Spring框架中就提供的有Hibernate模板对象。一个常规的、频繁的操作代码中，大部分代码不需要变动，只有小部分代码需要根据需求变动。
redis+spring面试题
github_36510643的博客
07-21 353
redis+spring面试题
Java-Lambda
lizhiwei21的博客
07-21 420
lambda表达式可以理解为对匿名内部类的一种简化 , 但是本质是有区别的面向对象思想 :强调的是用对象去完成某些功能函数式编程思想 :强调的是结果 , 而不是怎么去做。
Promise 详解（原理篇）
山重水复疑无路，柳暗花明又一村。
07-20 752
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件
最新发布
weixin_43561432的博客
07-24 90
【代码】Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件。
java算法day19
TOMOT77的博客
07-20 312
我第一时间想到的方法是遍历二叉树+哈希。哈希用来统计数字出现的次数。之后遍历map收集结果。利用了BST的性质，即BST的中序序列是有序序列。
华为OD机试 - 分披萨 - 递归（Java 2024 D卷 200分）
学Java，找哪吒
07-21 958
递归算法通过函数调用自身解决问题，每次递归调用都处理问题的一个子部分，直到达到基准条件，从而构建最终解。
【Java并发编程之美 | 第三篇】Java 并发包中锁原理剖析之AQS、ReentrantLock独占可重入锁
踢桃的成长之路
07-21 808
Java 并发包中锁原理剖析之AQS、ReentrantLock独占可重入锁
4.Jmeter接口性能测试
weixin_43444329的博客
07-23 440
系统用户数：软件系统注册的用户总数（要注意初始化环境）在线用户数：某段视角内访问用户数，这些用户只是咋先，不一定同时做某一件事情。（初始化环境（warm up热机：让系统接近运行的系统，让系统运行更快 磁盘->内存））并发用户数：某一个时间同时向系统提交请求的用户数，场景不一定是同一个。：测试web系统的性能，支持多少并发？在确定并发用户数之前，必须先对用户的业务进行分解，分析出其中的典型业务场景（用户最常用、最关注的业务操作）然后基于场景获得其并发用户数。
学习笔记---java篇（0723）
m0_70630166的博客
07-23 616
java、数据类型、循环、选择等
java包装类型缓存简单探究-Integer为例
保存我对一些技术的思考
07-22 690
java包装类缓存机制-Integer为例
Java的集合框架（Collection Framework）中的Iterator接口详解
m0_49013185的博客
07-22 611
在Java中，将Iterator定义为接口是一种设计上的选择，目的是提供一个统一的迭代机制，使不同类型的集合都能以一致的方式进行遍历。以下是将Iterator以下是IteratorE next();将Iterator定义为接口的主要目的是提供一个统一、灵活且可扩展的迭代机制。通过这种方式，Java集合框架能够支持多种类型的集合，并且客户端代码能够以一致的方式使用这些集合。这种设计不仅简化了集合的使用，还提高了代码的可维护性和可扩展性。
Java反序列化漏洞CC2利用链注入内存马
道阻且长，行则将至。
07-20 652
本文从 0 到 1 介绍了 TemplatesImpl 链的基础原理，同时介绍其在 Fastjson 反序列化漏洞利用过程中的应用，最后介绍了 Java 反序列化漏洞 CC2 链中对 TemplatesImpl 链的集成，以及如何通过 CC2 链注入恶意类与 Java 内存马。
mysql表设计
wwwwwww31311的博客
07-23 120
status 状态 java代码中用一个枚举类，比如我的请假表还处于草稿状态，可以是新建态，提交后处于待审批状态，审批完成则是成功态，审批拒绝就是拒绝态。start_time 开始时间 dateTime类型。end_time 起始时间 dateTime类型。employee_id 外键，和员工信息表想管理。type 请假类型，对应一个枚举类，病假，事假。create_time 请假记录的创建时间。如果让你设计一个请假表，如何设计？approve_id 外键。
H3CGB0-190题库：中小企业网络建设宝典
该题库专注于H3CGB0-190中文考试，主要关注于中小企业网络建设的相关知识和技能。版本更新至V2.01，由TestInside公司提供，其目标是帮助考生通过任何IT考试，确保他们在考试环境中熟练掌握理论和实践。 TestInside ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

直男编程

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

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

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

打赏作者

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

抵扣说明：

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

余额充值