【随手录】
1、计算机网络
https://blog.csdn.net/Biteht/article/details/124066038?spm=1001.2014.3001.5501
网络初识：
局域网、广域网、城域网：计算机覆盖范围，按网络覆盖范围大小划分。
网络通信基础：
IP地址，端口号，通信协议，五元组；
协议分层：
TCP/IP五层模型
应用层，传输层，网络层，数据链路层，物理层
物理设备所在分层，封装和分用。
2、springmvc 参数接收
简单参数传递
/**
* 需求: 接收参数 name=xxx age=xxx
* URL: http://localhost:8080/findUserByNA?name=tomcat&age=18
* 返回值: "数据正确:name:age"
* 知识点:
* 1.通过url中的key获取数据.
*/
@RequestMapping("/findUserByNA")
public String findUserByNA(String name,int age){
return "数据正确:"+name+":"+age;
}
对象方式传参
/**
* 需求: 接收参数 name=xxx age=xxx
* URL: http://localhost:8080/findUserByNA2?name=tomcat&age=18
* 返回值: user.toString 字符串
* 知识点:
* 1.通过url中的key获取数据.
* 2.如果参数众多,则可以使用对象的方式接收,要求必须有set方法
*/
@RequestMapping("/findUserByNA2")
public String findUserByNA2(User user){
return user.toString();
}
同名提交问题
/**
* URL:http://localhost:8080/hobby?hobby=敲代码,睡觉,打游戏,熬夜
* 参数: hobby=敲代码,睡觉,打游戏,熬夜
* 返回值: 获取的参数返回即可
* 知识点: 如果遇到同名提交问题.则SpringMVC可以采用数组接收.内部自动完成分割
* 底层实现: hobby.split(",");
*/
@RequestMapping("/hobby")
public String hobby(String[] hobby){
/* String[] array = hobby.split(",");
System.out.println(array[0]);*/
//数组转化为字符串
return Arrays.toString(hobby);
}
restFul风格
传统get方式提交
url1: http://localhost:8080/findUser?name=tomcat&age=18
url2: http://localhost:8080/findUser?name=tomcat&age=18&sex=男
需求: 上述的参数传递是否可以简化!
简化写法:
url3: http://localhost:8080/findUser/tomcat/18/男
restFul风格说明
案例: url3: http://localhost:8080/findUser/tomcat/18/男 (发送)
要求:
1. restFul的风格数据的位置一旦确定,不能修改.
2. 参数与参数之间使用"/"的方式分割.
3. restFul的风格适用于 get/post/put/delete 请求类型
请求类型种类: get/post/put/delete
restFul风格后端代码
/**
* URL地址:
* http://localhost:8080/findUser/tomcat/18/男 get类型
* 参数: name/age/sex
* 返回值: 返回值获取的数据
* restFul语法:
* 1. 参数与参数之间使用/分割
* 2. 需要接收的参数使用{}包裹
* 3. 参数接收时采用@PathVariable取值
*/
@RequestMapping("/findUser/{name}/{age}/{sex}")
public String findUser(@PathVariable String name,
@PathVariable int age,
@PathVariable String sex){
return name+":"+age+":"+sex;
}
返回json格式数据
/**
* URL: http://localhost:8080/findJSON?name=tomcat&age=18 get
* 参数: name=tomcat&age=18
* 返回值: User对象的JSON
* 知识点:
* 1.@ResponseBody //将返回值转化为JSON串 使用最多!!!
* 2.如果返回String类型,则@ResponseBody将字符串本身返回给前端.
*/
@RequestMapping("/findJSON")
@ResponseBody //将返回值转化为JSON串
public User findJSON(User user){
//在业务层扩展数据
user.setId(101);
user.setSex("男");
return user;
}
mvc restFul风格接收和json格式返回小结
1、restFul风格
特点:
1.参数写到url中使用/分割
2.接收时采用{xxxx} 使用@PathVariable注解获取
3.支持请求类型 post/put/get/delete
2、JSON串
格式: 1.对象格式 2.数组格式
嵌套格式: value可以嵌套
易错项: json格式必须添加""号
3、注解:
1.@ResponseBody 将返回值转化为JSON
2.@RestController 将当前类的所有返回值都转化为JSON
3、Ajax介绍
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率.
特点: 局部刷新,异步访问
组成部分:
-
用户
-
Ajax引擎–代理
-
服务器
异步的特点：
-
由Ajax引擎直接访问后端服务器。
-
在回调函数没有执行之前，用户可以执行自己的任务。 异步
Axios入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios测试</title>
<script src="../js/axios.js"></script>
</head>
<body>
<h1>Axios测试案例-1</h1>
<script>
/*
1.可以编辑Axios 发送ajax请求
2.不同的服务器之间发送ajax请求时会有"跨域"问题
3.解决跨域问题 通过注解搞定. @CrossOrigin
*/
var url = "http://localhost:8080/hello"
axios.get(url)
.then(function(result){ //回调函数!!!
console.log(result)
})
</script>
</body>
</html>
Axios-Get请求
package com.jt.controller;
import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
/**
* URL地址: http://localhost:8080/axios/getUserById?id=100
* 参数: id = 100
* 返回值: User对象的JSON 伪造一个User对象
*/
@RequestMapping("/getUserById")
public User getUserById(Integer id){
//根据ID查询数据库
User user = new User();
user.setId(id);
user.setName("好好学习");
user.setAge(1000);
user.setSex("男");
return user;
}
}
/**
* var 关键字 没有作用域的概念!!!!
* let 相当于var 有作用域 更加安全.
* const 定义常量的
* 关于axios数据返回值对象的说明:
* axios为了接收后端服务器数据,利用promise对象
* 封装参数
*/
let url1 = "http://localhost:8080/axios/getUserById?id=100"
axios.get(url1)
.then(function(promise){
console.log(promise.data)
})
Axios-Get-对象参数写法
/**
* URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
* 参数: id=xxx name=xxx
* 返回值: List [user1,user2]
*/
@RequestMapping("/getUserByNA")
public List<User> getUserByNA(User user){
List<User> list = new ArrayList<>();
list.add(user);//简化赋值操作 直接返回
list.add(user);
return list;
}
/**
* 1.get请求 对象传参
* 2.语法说明:
* 关键字: params : 对象信息
*/
let user2 = {name:"tomcat",age:100}
let url2 = "http://localhost:8080/axios/getUserByNA"
axios.get(url2,{params:user2})
.then(function(promise){
console.log(promise.data)
})
Axios-Get-restFul结构
/**
* URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
* 参数: name/sex
* 返回值: List<User>
*/
@RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
public List<User> findUserByNS(User user){
List<User> list = new ArrayList<>();
list.add(user);
list.add(user);
return list;
}
/**
* 需求: 利用restFul的风格实现前后端交互.
* URL: http://localhost:8080/axios/findUserByNS/tomcat/男
* 难点:
* 1.tomcat/男直接写死在url地址中. 后期扩展不方便
* 模版字符串写法:ES6引入的新功能
* 语法:
* 1. 使用反引号 ``
* 2. 作用: 1.可以保证字符串的格式
* 2.可以动态获取变量的值
*/
let user3 = {name: "tomcat", sex: "男"}
let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
let html = `<div>
<p>AAA</p>
<p>BBB</p>
</div>
`
axios.get(url3)
.then(function(promise){
console.log(promise.data)
})
Axios post请求
常见post请求种类
- form表单提交 method=“post” 同步（要素：页面是否刷新）
- axios.post() 异步操作.
axios post入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios测试</title>
<script src="../js/axios.js"></script>
</head>
<body>
<h1>Axios测试案例-2</h1>
<script>
/*
语法:
1.参数 axios.post(URL地址,数据对象)
2.注意事项: 与axios.get(url,{params:对象})请求写法不一样.
*/
let url1 = "http://localhost:8080/axios/saveUser"
let user1 = {id:100, name:"猫", age:2, sex: "母"}
axios.post(url1,user1)
.then(function(promise){
console.log(promise.data)
})
</script>
</body>
</html>
说明: axios.post请求中 如果传递了js对象.则发送到后端服务器的数据是 JSON串.
/**
* URL: "http://localhost:8080/axios/saveUser"
* 参数: {"id":100,"name":"猫","age":2,"sex":"母"} json串
* url1: http://xxx/axios/saveUser?id=xxx&name=xxx
* 返回值: "新增用户成功!!!"
* 难点:
* 1.Get请求数据是通过?key=value&key2=value2的方式获取
* post请求 数据是json串 数据结构不同. 所以不能使用User对象接收
* 2.JSON串想把法转化为User对象
* User转化为JSON串 @ResponseBody
* JSON串转化为User @RequestBody
* 3.JSON串转化 要求json串中的属性与对象中的属性一致,
* 并且赋值时调用对象的set方法
* 4.@RequestMapping可以支持任意类型的请求. 但是这样的写法不安全.
* 改进: 只能接收固定类型的请求
* @PostMapping("/saveUser")
* @GetMapping
* @PutMapping
* @DeleteMapping
*/
//@RequestMapping(value="/saveUser",method = RequestMethod.POST)
//@PostMapping("/saveUser")
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
System.out.println(user);
return "新增用户成功!!!";
}
关于请求常见异常
- 405 异常 ajax的请求类型与后端接收的请求类型不匹配.
- 400异常 参数类型不匹配
- 404异常 请求路径找不到
请求类型和业务关系
1.GET 查询操作
2.DELETE 删除操作 get/delete 用法相同
3.POST 1.表单数据提交 2.新增操作
4.PUT 修改操作 post/put 用法相同
修改操作
/**
* URL:http://localhost:8080/axios/updateUser
* 参数: JSON串
* 返回值: String
*/
@PutMapping("/updateUser")
public String updateUser(@RequestBody User user){
System.out.println(user);
return "修改成功!!!";
}
/**
* 业务需求:
* 完成用户的修改操作.
* 将ID=100的数据 name改为张三 age改为18 sex改为女
* URL: http://localhost:8080/axios/updateUser
* 返回值: 修改成功!!! 数据要求后端打印
*/
let url2="http://localhost:8080/axios/updateUser"
let user2={id:100,name:"张三",age:18,sex:"女"}
axios.put(url2,user2)
.then(function(promise){
console.log(promise.data)
})
正则检验是否为纯英文字符串
public boolean judgeContainsStr(String str) {
String regex=".*[a-zA-Z]+.*";
Matcher m= Pattern.compile(regex).matcher(str);
return m.matches();
}
4、html点名器
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
<title>随机点名器</title>
<style type="text/css">
div{
background-color:deepskyblue;
width: 400px;
height: 300px;
padding: 50PX;
margin-left: 30%;
margin-top: 100px;
box-sizing: border-box;
box-shadow:10px 10px 10px #B00000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px; }
h1{
width: 150px;
height: 80px;
background-color: orange;
margin-left: 70px;
padding-left: 15px;
padding-top: 20px;
box-sizing: border-box;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px; }
.bt{
width: 80px;
height: 40px;
margin-left: 110px;
font-size: 18px;
font-weight: bolder;
background-color:green;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px; }
</style>
</head>
<body >
<div class="random">
<h1 id="randomName"> 随机点名 </h1>
<input type="submit" id="btin" class="bt" value="开始" onclick="rName()" />
</div>
</body>
</html>
<script>
var flag;
function rName(){
var bt = document.getElementById("btin");
if(bt.value=="开始"){
bt.value="停止";
bt.style.backgroundColor="red";
//开始定时器
flag=window.setInterval("ranName()",50);
}else if(bt.value=="停止"){
window.clearInterval(flag);
bt.value="开始";
bt.style.backgroundColor="green";
}
}
function ranName(){
var arr = new Array("赵丽颖","刘昊然","李宇春","何炅","谢娜","吴尊","刘德华","毛不易","张一山","贾玲","杨幂","郭麒麟","郭德纲","杨紫","于斌","梁靖康","王俊凯","王源","关晓彤","周冬雨","王一博","肖战","路飞","易烊千玺","周深");
var name = document.getElementById("randomName");
var len = arr.length;
var rd = randomCode(0,len);
name.innerHTML=arr[rd]; } /*生成一个在某个范围内的随机数*/
function randomCode(min, max) {
return Math.floor(Math.random() * (max - min)) + min }
</script>
时间与字符串转换
//格式化
SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//获取当前时间戳
Date date = new Date(System.currentTimeMillis());
//将日期Date转为字符串
String format = formatter.format(date);
System.out.println(format);
//将字符串转为日期Date
Date parse = formatter.parse(format);
System.out.println(parse);
System.out.println(date);
扫一扫
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
