拓展
文章目录
- 拓展
- 拓展一:jdk1.8循环list集合
- 拓展二:加密
- 拓展三:反编译,查看源代码
- 拓展四:响应式写法
- 拓展五:简历模板(HTML)(自适应)
- 拓展六:手机端
- 拓展七:ajax参数
- 拓展八:Html滚动
- 拓展九:页面组装(电脑端)
- 拓展十:前端布局
- 拓展十一:oracle报错ora-01033
- 拓展十二:SpringBoot验证码
- 简易版三级菜单
- es6结构解析
- 三级菜单
- Vue所有方法
- Vue子组件向父组件发送时间
- 前后端分离实现-跨域
- Mybatis-plus
- validation
拓展一:jdk1.8循环list集合
jdk1.8中的循环list集合可以更换方式
List<String> list=new ArrayList<String>();
list.put("zs");
list.put("ls");
list.put("ww");
//循环结果同foreach一样
list.forEach(System.out::println);
拓展二:加密
Java String类型 getBytes() 方法,可以通过此方法对密码、身份证、电话进行加密处理
String Str1 = new String("runoob");
byte[] Str2 = Str1.getBytes();
System.out.println("返回值:" + Str2 );
拓展三:反编译,查看源代码
jdk编译插件 ,查看源码
<!-- jdk编译插件 -->
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
</plugins>
</build>
拓展四:响应式写法
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
使用:
/*
页面大小小于500px时,使用下面样式
*/
@media(max-width: 500px){
/*
书写样式例如
*/
*{
padding:0;
margin:0;
}
};
拓展五:简历模板(HTML)(自适应)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>简历信息(HTML)</title>
<style>
*{
box-sizing: border-box;
}
body{
background-color: #eee;
}
article{
width: 21cm;
min-height: 29.7cm;
background-color: white;
margin: 0 auto;
overflow: hidden;
padding: 1em;
}
/*响应式*/
@media(max-width: 500px){
article{
width: 10cm;
}
};
</style>
</head>
<body>
<!--<article> 标签规定独立的自包含内容。-->
<article>
<!--<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。-->
<section>
<h1>主页信息</h1>
<p>做事不需要人人都理解,只需尽职尽责,问心无愧;做人不需要人人都喜欢,只需尽心尽力,心安理得。</p>
</section>
</article>
</body>
</html>
拓展六:手机端
淘宝源代码中获取,用于页面在手机店的运行,替换掉页面原有的meta就可以
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
拓展七:ajax参数
ajax参数太多
$("form").serialize()
拓展八:Html滚动
<marquee direction="滚动方向">滚动文字</marquee>
拓展九:页面组装(电脑端)
移动端最好不要这样使用
关键字:frameset、frame
注意:frameset、frame两个不能单独使用
页面多余的代码都要删掉,只需要html
body,meta,title都不需要
<!DOCTYPE html>
<html lang="zh">
<frameset cols="25%,50%,25%">
<frame src="index.html">
<frame src="https://www.w3school.com.cn/example/html/frame_b.html" name="main">
<frame src="https://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</html>
如果想实现,点击第一个frame的导航栏,让第二个frame变成页面
步骤:
1.在第二个frame中添加name标签
2.在a标签中url也要去的地址,target=“frame的name值”,index.html:
<a href="main.html" target="main" >学习Flex布局One</a>
拓展十:前端布局
display: grid;
grid-template-columns: auto auto auto auto;
text-align: center;
display: flex;
justify-content:space-around;
text-align: center;
align-items: center;
/*允许折行*/
flex-wrap: wrap;
拓展十一:oracle报错ora-01033
空
拓展十二:SpringBoot验证码
pom.xml
<dependency>
<groupId>com.github.axet</groupId>
<artifactId>kaptcha</artifactId>
<version>0.0.9</version>
</dependency>
KaptchaConfig
配置文件
package com.swj.config;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.Properties;
@Configuration
public class KaptchaConfig {
@Bean
public DefaultKaptcha defaultKaptcha() {
Properties properties=new Properties();
properties.put("kaptcha.border","no");
properties.put("kaptcha.textproducer.font.color","black");
properties.put("kaptcha.textproducer.char.space",5);
Config config=new Config(properties);
DefaultKaptcha defaultKaptcha=new DefaultKaptcha();
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
Controller
类
@GetMapping("captcha.jpg")
public void captcha(HttpServletResponse response, HttpServletRequest request) throws Exception{
response.setHeader("Cache-Control","no-store,no-cache");
response.setContentType("image/jpeg");
String text = producer.createText();
System.out.println(text);
BufferedImage image = producer.createImage(text);
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY,text);
ServletOutputStream outputStream=response.getOutputStream();
ImageIO.write(image,"jpg",outputStream);
IOUtils.closeQuietly(outputStream);
}
- 测试
整合Swagger
- 页面展示
<img src="../captcha.jpg" id="kaptchaImage" width="300px" height="50px" style="padding-top: 25px; "/>
简易版三级菜单
List<SysMenu> sysMenus = sysMenuService.querySysMenuByRoleId(role);
List<SysMenu> list = new ArrayList<>();
for (SysMenu n1 : sysMenus) {
if (n1.getPid()==0){
list.add(n1);
}
for (SysMenu n2 : sysMenus) {
if (n1.getId()==n2.getPid()&&n2.getPids().length()<=8){
n1.getChildren().add(n2);
}
}
}
es6结构解析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlStSBWt-1607650901102)(E:\笔记\Spring Cloud\images\es6.png)]
三级菜单
Vue所有方法
Vue子组件向父组件发送时间
例如:点击子组件按钮,刷新父组件的table表格数据
在子组件中向父组件传递时间
子:button.vue
this.$emit("事件名",传递参数);
//
例如:this.$emit("onclick",data);
父组件:table.vue
<!--注册子组件,绑定子组件时间-->
<button @子组件事件名="自定义方法"></button>
//
例如:<button @οnclick="click"></button>
在methods中自定义click方法,此时父节点可以感知到子节点
methods:{
click(data){
//输出信息
}
}
前后端分离实现-跨域
Mybatis-plus
使用Mybatis-Plus做逻辑删除(修改数据库中属性,1显示0不显示),在Mybatis-Plus官方文档中有解释
逻辑删除@TableLogin(value="",delval=""):value显示,delval不显示,软删除,自动修改数据库信息
validation
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
实体类
@Data
public class Student implements Serializable {
/**
* 新增不能有id
* 修改必须有id
*/
@NotNull(groups = {UpdateVaild.class},message = "对不起,修改必须携带id")
@Null(groups = {SaveVaild.class},message = "对不起,新增不能携带id")
private Long uid;
/**
用户名不能为空
*/
@NotBlank(message = "对不起,输入名称不合法")
private String username;
}
全局异常处理
package com.swj.com.swj.exception;
import lombok.extern.slf4j.Slf4j;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
/*
集中处理异常
@ControllerAdvice
com.swj.com.swj.controller:这个包下的所有异常
*/
@Slf4j
@ResponseBody
//扫描包
@ControllerAdvice(basePackages = "com.swj.com.swj.controller")
public class HandleStudentValidException {
/*
* 处理所有异常
*/
@ExceptionHandler(value = MethodArgumentNotValidException.class)
public String ExceptionHandler(MethodArgumentNotValidException e){
BindingResult bindingResult = e.getBindingResult();
if (bindingResult.hasErrors()){
bindingResult.getFieldErrors().forEach((item)->{
//返回异常
item.getField(); //属性:name,id
item.getDefaultMessage(); //异常信息,注解标注信息
});
}
return "出现异常"+e.getMessage();
}
}
使用分组:新增不能携带id,修改信息必须携带id,在实体类注解中定义**groups
**
创建两个接口用于分辨那个方法是新增,那个方法是修改
//新增
public interface SaveVaild {
}
//修改
public interface UpdateVaild {
}
控制器
@RestController
public class StudentController {
/**
当前控制器是实现新增,不能携带id
*/
@RequestMapping("/user/student")
public String getStudent(@Validated(SaveVaild.class) @RequestBody Student student){
return "正常";
}
}