星光下的赶路人star
星光下的赶路人star

SpringBoot3---核心特性---2、Web开发III（模板引擎、国际化、错误处理）

在这里插入图片描述
                       星光下的赶路人star的个人主页

                      夏天就是吹拂着不可预期的风

文章目录

  • 1、模板引擎
    • 1.1 Thymeleaf
    • 1.2 基础语法
    • 1.3 属性设置
    • 1.4 遍历
    • 1.5 判断
    • 1.6 属性优先级
    • 1.7 行内写法
    • 1.8 变量选择
    • 1.9 模板布局
    • 1.10 devtools
  • 2、国家化
  • 3、错误处理
    • 3.1 默认机制
    • 3.2 自定义错误响应
    • 3.3 最佳实战

1、模板引擎

  • 由于SpringBoot使用了嵌入式Servlet容器。所以JSP默认是不能使用的。
  • 如果需要服务端页面渲染，优先考虑使用模板引擎。

SpringBoot3---核心特性---2、Web开发III（模板引擎、国际化、错误处理）_第1张图片
模板引擎页面默认放在src/main/resources/templates
SpringBoot包含以下模板引擎的自动配置

  • FreeMarker
  • Groovy
  • Thymeleaf
  • Mustache

Thymeleaf官网：https://www.thymeleaf.org/

DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Good Thymes Virtual Grocerytitle>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/gtvg.css}" />
head>
<body>
	<p th:text="#{home.welcome}">Welcome to our grocery store!p>
html>

1.1 Thymeleaf

导入依赖

<dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

自动配置原理
1、开启了org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration 自动配置。
2、属性绑定在ThymeleafProperties中，对应配置文件spring.thymeleaf内容
3、所以的模板页面默认在classpath:/templates文件夹下
4、默认效果

    • a、所有的模板页面在/classpath:/templates/下面找
    • b、找后缀名为.html的页面

1.2 基础语法

1、核心用法
th:xxx：动态渲染指定的html标签属性值、或者th指令（遍历、判断等）

  • th：text：标签体内文本值渲染
    • thutext:不会转义，显示为html原本的样子
  • th:属性：标签指定属性渲染
  • th:attr：标签任意属性渲染
  • th:if、th:each、…：其他th指令
  • 例如
<p th:text="${content}">原内容p>
<a th:href="${url}">登录a>
<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

表达式：用来动态取值

  • ${}：变量取值：使用model共享给页面的值都直接用${}
  • @{}：url路径
  • #{}：国际化消息
  • ~{}：片段引用
  • *{}：变量选择：需要配置th:object不到对象

系统工具&内置对象：详细文档
● param：请求参数对象
● session：session对象
● application：application对象
● #execInfo：模板执行信息
● #messages：国际化消息
● #uris：uri/url工具
● #conversions：类型转换工具
● #dates：日期工具，是java.util.Date对象的工具类
● #calendars：类似#dates，只不过是java.util.Calendar对象的工具类
● #temporals： JDK8+ java.time API 工具类
● #numbers：数字操作工具
● #strings：字符串操作
● #objects：对象操作
● #bools：bool操作
● #arrays：array工具
● #lists：list工具
● #sets：set工具
● #maps：map工具
● #aggregates：集合聚合工具（sum、avg）
● #ids：id生成工具

2、语法示例
表达式：

  • 变量取值：${…}
  • url取值：@{…}
  • 国际化消息：#{…}
  • 变量选择：*{…}
  • 片段引用：~{…}

常见：

  • 文本：‘one text’,‘another one’…
  • 数字:0，34，…
  • 布尔：true,false
  • null:null
  • 变量名：one,sometext,main，…

文本操作：

  • 拼串：+
  • 文本替换：|The name is ${name}|

布尔操作

  • 二进制运算：and,or
  • 取反：!,not

比较运算

  • 比较：>,<,<=,>=(gt,lt,ge,le)
  • 等值运算：=，！=

条件运算

  • if-then :(if)?(then)
  • if-then-else:(if)?(then):(else)

特殊操作

  • 无操作

所有以上都可以嵌套组合

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

1.3 属性设置

  1. th:href=“@{/product/list}”
  2. th:attr=“class=${active}”
  3. th:attr=“src=@{/images/gtvglogo.png},title=${logo},alt=#{logo}”
  4. th:checked=“${user.active}”
<p th:text="${content}">原内容p>
<a th:href="${url}">登录a>
<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

1.4 遍历

语法：th:each=“元素名，迭代状态：${集合}”

<tr th:each="prod : ${prods}">
  <td th:text="${prod.name}">Onionstd>
  <td th:text="${prod.price}">2.41td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yestd>
tr>

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
  <td th:text="${prod.name}">Onionstd>
  <td th:text="${prod.price}">2.41td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yestd>
tr>

iterStat有以下属性：
● ndex：当前遍历元素的索引，从0开始
● count：当前遍历元素的索引，从1开始
● size：需要遍历元素的总数量
● current：当前正在遍历的元素对象
● even/odd：是否偶数/奇数行
● first：是否第一个元素
● last：是否最后一个元素

1.5 判断

th:if

<a
  href="comments.html"
  th:href="@{/product/comments(prodId=${prod.id})}"
  th:if="${not #lists.isEmpty(prod.comments)}"
  >view

th:switch

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administratorp>
  <p th:case="#{roles.manager}">User is a managerp>
  <p th:case="*">User is some other thingp>
div>

1.6 属性优先级

  • 判断
  • 遍历
  • 判断
<ul>
  <li th:each="item : ${items}" th:text="${item.description}">Item description here...li>
ul>

Order Feature Attributes
1 片段包含 th:insert th:replace
2 遍历 th:each
3 判断 th:if th:unless th:switch th:case
4 定义本地变量 th:object th:with
5 通用方式属性修改 th:attr th:attrprepend th:attrappend
6 指定属性修改 th:value th:href th:src …
7 文本值 th:text th:utext
8 片段指定 th:fragment
9 片段移除 th:remove

1.7 行内写法

[[…]] or [(…)]

<p>Hello, [[${session.user.name}]]!p>

1.8 变量选择

<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastianspan>.p>
  <p>Surname: <span th:text="*{lastName}">Pepperspan>.p>
  <p>Nationality: <span th:text="*{nationality}">Saturnspan>.p>
div>

等同于

<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastianspan>.p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepperspan>.p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturnspan>.p>

1.9 模板布局

  • 定义模板：th：fragment
  • 引用模板：~{templatename::selector}
  • 插入模板：th:insert、th:replace
<footer th:fragment="copy">© 2011 The Good Thymes Virtual Groceryfooter>

<body>
  <div th:insert="~{footer :: copy}">div>
  <div th:replace="~{footer :: copy}">div>
body>
<body>
  结果：
  <body>
    <div>
      <footer>© 2011 The Good Thymes Virtual Groceryfooter>
    div>

    <footer>© 2011 The Good Thymes Virtual Groceryfooter>
  body>
body>

1.10 devtools

      <dependency>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-devtoolsartifactId>
      dependency>

修改页面后；ctrl+F9刷新效果；
java代码的修改，如果devtools热启动了，可能会引起一些bug，难以排查

2、国家化

国际化的自动配置参照MessageSourceAutoConfiguration

实现步骤：
1、Spring Boot在类路径根下查找messages资源绑定文件。文件名为：message.properties.
2、多语言可以定义多个消息文件，命名为message_区域代码.properties。如：

  • messages.properties：默认
  • messages_zh_CN.properties:中文环境
  • messages_en_US.properties：英文环境

3、在程序中自动注入MessageSource组件，获取国际化的配置项值
4、在页面中可以使用表达式#{}获取国际化的配置项值

    @Autowired  //国际化取消息用的组件
    MessageSource messageSource;
    @GetMapping("/haha")
    public String haha(HttpServletRequest request){

        Locale locale = request.getLocale();
        //利用代码的方式获取国际化配置文件中指定的配置项的值
        String login = messageSource.getMessage("login", null, locale);
        return login;
    }

3、错误处理

3.1 默认机制

错误处理的自动配置都在ErrorMvcAutoConfiguration中，两大核心机制：

  • SpringBoot会自适应处理错误，响应页面或JSON数据
  • SpringMVC的错位处理机制依然保留，MVC处理不了，才会交给Boot进行处理

SpringBoot3---核心特性---2、Web开发III（模板引擎、国际化、错误处理）_第2张图片

  • 发送错误以后，转发给/error路径，SpringBoot在底层写好应该BasicErrorController，专门处理这个请求
	@RequestMapping(produces = MediaType.TEXT_HTML_VALUE) //返回HTML
	public ModelAndView errorHtml(HttpServletRequest request, HttpServletResponse response) {
		HttpStatus status = getStatus(request);
		Map<String, Object> model = Collections
			.unmodifiableMap(getErrorAttributes(request, getErrorAttributeOptions(request, MediaType.TEXT_HTML)));
		response.setStatus(status.value());
		ModelAndView modelAndView = resolveErrorView(request, response, status, model);
		return (modelAndView != null) ? modelAndView : new ModelAndView("error", model);
	}

	@RequestMapping  //返回 ResponseEntity, JSON
	public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
		HttpStatus status = getStatus(request);
		if (status == HttpStatus.NO_CONTENT) {
			return new ResponseEntity<>(status);
		}
		Map<String, Object> body = getErrorAttributes(request, getErrorAttributeOptions(request, MediaType.ALL));
		return new ResponseEntity<>(body, status);
	}
  • 错误页面是这么解析的
//1、解析错误的自定义视图地址
ModelAndView modelAndView = resolveErrorView(request, response, status, model);
//2、如果解析不到错误页面的地址，默认的错误页就是 error
return (modelAndView != null) ? modelAndView : new ModelAndView("error", model);

容器中专门有一个错误视图解析器

@Bean
@ConditionalOnBean(DispatcherServlet.class)
@ConditionalOnMissingBean(ErrorViewResolver.class)
DefaultErrorViewResolver conventionErrorViewResolver() {
    return new DefaultErrorViewResolver(this.applicationContext, this.resources);
}

SpringBoot解析自定义错误页的默认规则

	@Override
	public ModelAndView resolveErrorView(HttpServletRequest request, HttpStatus status, Map<String, Object> model) {
		ModelAndView modelAndView = resolve(String.valueOf(status.value()), model);
		if (modelAndView == null && SERIES_VIEWS.containsKey(status.series())) {
			modelAndView = resolve(SERIES_VIEWS.get(status.series()), model);
		}
		return modelAndView;
	}

	private ModelAndView resolve(String viewName, Map<String, Object> model) {
		String errorViewName = "error/" + viewName;
		TemplateAvailabilityProvider provider = this.templateAvailabilityProviders.getProvider(errorViewName,
				this.applicationContext);
		if (provider != null) {
			return new ModelAndView(errorViewName, model);
		}
		return resolveResource(errorViewName, model);
	}

	private ModelAndView resolveResource(String viewName, Map<String, Object> model) {
		for (String location : this.resources.getStaticLocations()) {
			try {
				Resource resource = this.applicationContext.getResource(location);
				resource = resource.createRelative(viewName + ".html");
				if (resource.exists()) {
					return new ModelAndView(new HtmlResourceView(resource), model);
				}
			}
			catch (Exception ex) {
			}
		}
		return null;
	}

容器中有一个默认的名为error的view;提供了默认白页功能

@Bean(name = "error")
@ConditionalOnMissingBean(name = "error")
public View defaultErrorView() {
    return this.defaultErrorView;
}

封装了JSON格式的错误信息

	@Bean
	@ConditionalOnMissingBean(value = ErrorAttributes.class, search = SearchStrategy.CURRENT)
	public DefaultErrorAttributes errorAttributes() {
		return new DefaultErrorAttributes();
	}

规则：
1、解析一个错误页
（1）如果发生了500、404、503、403这些错误

  • 如果有模板引擎，默认在classpath:/templates/error/精确码.html
  • 如果没有模板引擎，在静态资源文件夹下找精确码.html
    （2）如果匹配不到精确码.html这些精确的错误页，就去找5xx.html,4xx.html模糊匹配
  • 如果有模板引擎，默认在classpath:/template/error/5xx.html
  • 如果没有模板引擎，在静态资源目录下找5xx.html

2、如果模板引擎路径templates下有error.html页面，就直接去渲染

3.2 自定义错误响应

1、自定义json响应
使用@ControllerAdvice+@ExceptionHandler进行统一异常处理

2、自定义页面响应
根据boot的错误页面规则，自定义页面模板

3.3 最佳实战

  • 前后分离
    • 后台发生的所有错误，@ControllerAdvice+@Exceptionhandler进行统一异常处理
  • 服务端页面渲染
    • 不可预知的一些，HTTP码表示的服务器或客户端错误
      • 给classpath:/templates/error/下面，放常用精确的错误码页面。500.html，404.html
    • 发生业务错误
      • 核心业务，每一种错误，都应该代码控制，跳转到自己定制的错误页
      • 通用业务,classpath:/templates/error.html页面，显示错误信息

页面,JSON，可用的Model数据如下
SpringBoot3---核心特性---2、Web开发III（模板引擎、国际化、错误处理）_第3张图片

在这里插入图片描述
                      您的支持是我创作的无限动力

在这里插入图片描述
                      希望我能为您的未来尽绵薄之力

在这里插入图片描述
                      如有错误，谢谢指正；若有收获，谢谢赞美

你可能感兴趣的:(SpringBoot3,前端,springboot,java,后端)

  • JavaScript随机数 凝霜月冷残-草木破白衣 接口自动化测试javascriptjson前端
    概念总结js产生随机数通常是使用javascript的Math.random()函数常用的几种方法：Math.random()表示:结果为0-1之间（包括0,不包括1）；Math.floor(Math.random()*10+1)表示结果为1-10之间的一个随机数Math.floor(Math.random()*24)表示结果为0-23间的随机数1.Math.random();返回0-1之间的随机
  • 华为OD机试题库大全【JAVA&Python&C++&JS题解】 步入烟尘 算法个人练习笔记python华为odjavajavascriptc++c语言
    OD机试是一项重要环节，用于评估应聘者的编程能力和算法理解程度。在申请OD岗位时，应聘者需要首先通过机试的考核，才有机会进入后续的面试环节。机试的内容主要包括算法和数据结构的应用，题型可能涵盖递归、分治、单调栈、并查集、滑动窗口、前缀和、查分、二分查找、BFS广搜以及DFS深搜等多种算法。考试形式为在线答题，题目难度和具体内容会根据不同的招聘岗位而有所调整。华为OD机试共有三道题，前两道题的总分是
  • Python 网络爬虫进阶：动态网页爬取与反爬机制应对 m0_74824534 python爬虫开发语言
    在上一篇文章中，我们学习了如何使用Python构建一个基本的网络爬虫。然而，在实际应用中，许多网站使用动态内容加载或实现反爬机制来阻止未经授权的抓取。因此，本篇文章将深入探讨以下进阶主题：如何处理动态加载的网页内容应对常见的反爬机制爬虫性能优化通过具体实例，我们将探讨更复杂的网络爬虫开发技巧。一、动态网页爬取现代网页通常通过JavaScript加载动态内容。直接使用requests获取的HTML可
  • 使用eclipse连接mysql数据库步骤 m0_67401134 面试学习路线阿里巴巴数据库mysqleclipse后端python
    1.导入连接MySQL数据库驱动包（例如mysql-connector-java-5.1.7-bin.jar），并测试。步骤：1）在eclipse里面点击右上角的图标，如下图所示。2）选中DatabaseConnections右键，点new。3）选择MySQL，点击next。4）如图所示：2.引用MySQL驱动包jar在项目右键一个文件夹lib,把驱动包复制进去，然后右键驱动包点BuildPath
  • 学习HTML5总结（一） 大学生努力学习 学习web前端html5
    目录Web的构成一、HTML——结构1、html基本的骨架和解释2、标签1、标签2、属性3、标签的分类4、实体字符5、列表6、超链接7、文件的路径3、选择器1、基础选择器2、复合选择器3、关系选择器4、属性选择器5、伪类选择器6、伪元素选择器3、html中的单位1、长度单位2、比例单位3、颜色单位4、CSS三大特征二、CSS——表现三、JavaScript——行为总结Web的构成一、HTML——结
  • 一个基于Spring Boot的简单网吧管理系统 鹿屿二向箔 springbootpython后端
    一个基于SpringBoot的简单网吧管理系统的案例代码。这个系统包括用户管理、电脑管理、上机记录管理等功能。代码结构清晰，适合初学者学习和参考。1.项目结构src/main/java/com/example/netbarmanagement├──controller│├──ComputerController.java│├──UserController.java│└──RecordContro
  • Java中的并发工具类：让多线程编程更轻松 莫非技术栈 javajava开发语言
    Java中的并发工具类：让多线程编程更轻松1.引言：多线程编程的“痛”多线程编程是Java开发中的一大难点，尤其是在高并发场景下，稍有不慎就会遇到线程安全问题、死锁、性能瓶颈等问题。比如：publicclassCounter{privateintcount=0;publicvoidincrement(){count++;//非线程安全！}publicintgetCount(){returncoun
  • Java中的Lambda表达式：让代码更“性感” 莫非技术栈 javajava开发语言
    Java中的Lambda表达式：让代码更“性感”1.引言：代码的“颜值”很重要作为一名程序员，我们不仅要写出功能正确的代码，还要追求代码的“颜值”。毕竟，谁愿意看一堆冗长、复杂的代码呢？比如下面这段代码：Listnames=newArrayList18){names.add(user.getName());}}虽然功能没问题，但看起来就像穿着一件臃肿的羽绒服，毫无美感。幸运的是，Java8引入了L
  • Java并发编程：线程池优化实战指南 莫非技术栈 javajava开发语言
    Java并发编程：线程池优化实战指南1.线程池的核心概念在Java并发编程中，线程池是管理线程的利器。它通过复用线程、减少线程创建和销毁的开销，显著提升了系统性能和资源利用率。Java的java.util.concurrent包提供了强大的线程池支持，尤其是ThreadPoolExecutor类，它是实现线程池的核心。1.1线程池的关键参数核心线程数（corePoolSize）：线程池中始终保持存
  • w162体育馆管理系统 卓怡学长 计算机毕业设计javaspringspringboot数据库intellij-ideamaven
    作者简介：多年一线开发工作经验，原创团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~赠送计算机毕业设计600个选题excel文件，帮助大学选题。赠送开题报告模板，帮助书写开题报告。作者完整代码目录供你选择：《Springboot网站项目》400套《ssm网站项目》800套《小程序项目》300套《App项目》500套《Python网站项目
  • 华为OD机试 - 返回矩阵中非1的元素个数 - 广度优先搜索BFS（Java 2024 E卷 200分） 哪 吒 华为od矩阵宽度优先广度优先搜索
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试（JAVA）真题（E卷+D卷+A卷+B卷+C卷）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新，全天CSDN在线答疑。一、题目描述存在一个m*n的二维数组Q，其成
  • Python+Requests接口分层自动化测试框架 丁鱼教育 Python自动化测试requestspython
    阅读本小节，需要读者具备如下前提条件：1.掌握一种编程语言基础，如java、python等。2.掌握一种单元测试框架，如java语言的testng框架、python的unittest框架。3.掌握目前主流的UI测试框架，移动端APP测试框架Appium，或者掌握Web端测试框架Selenium。4.如果是Appium框架，还需要掌握如何定位控件元素，原生页面可使用安卓SDK自带的uiautomat
  • 详细描述一下Elasticsearch索引文档的过程？ java1234_小锋 javaelasticsearch大数据搜索引擎
    大家好，我是锋哥。今天分享关于【详细描述一下Elasticsearch索引文档的过程？】面试题。希望对大家有帮助；详细描述一下Elasticsearch索引文档的过程？1000道互联网大厂Java工程师精选面试题-Java资源分享网Elasticsearch是一个开源的分布式搜索和分析引擎，广泛用于处理大规模数据。其核心功能之一就是索引文档，它通过特定的流程将数据存储在索引中，并使数据可被高效搜索
  • Spring Boot使用WebSocket 洗发水很好用 springbootwebsocket后端
    跟其他http的控制层类似，我们需要实现一个基本的WebSocket服务器端点。PlatformAsyncWebSocket.javapackagecom.rmeservice.platform.websocket;importlombok.extern.slf4j.Slf4j;importorg.springframework.stereotype.Component;importjavax.w
  • Java网络爬虫技术之路：从基础构建到实战应用 Yori_22 java爬虫开发语言
    在当今信息爆炸的时代，数据已成为一种宝贵的资源。如何从海量的网络数据中提取有价值的信息，成为了众多开发者和数据科学家的共同挑战。Java网络爬虫技术，作为一种自动化采集数据的工具，正逐渐成为解决这一问题的关键。本文将带您踏上Java网络爬虫技术之路，从基础构建到实战应用，一步步揭开其神秘面纱。一、Java网络爬虫技术基础网络爬虫，又称网络蜘蛛或网络机器人，是一种按照一定规则自动抓取互联网信息的程序
  • Spring Boot 全局异常处理 十二同学啊 SpringBootspringbootjava前端
      在开发任何应用程序时，异常处理都是至关重要的。一个良好的异常处理机制不仅能提高用户体验，还能帮助开发者更好地定位和修复问题。SpringBoot提供了强大的异常处理能力，使我们能够集中处理应用程序中抛出的各种异常，从而构建更健壮和可靠的系统。  本文将深入探讨SpringBoot中全局异常处理的最佳实践，包括如何创建全局异常处理器，如何自定义异常响应，以及如何处理不同类型的异常。为什么需要全局
  • Spring Boot 统一返回数据格式 十二同学啊 SpringBootspringbootjava
      在构建RESTfulAPI时，保持一致的返回数据格式至关重要。统一的返回格式不仅可以提高API的可读性，还能方便客户端解析和处理响应数据。SpringBoot提供了多种方式来实现统一的返回数据格式，本文将深入探讨如何在SpringBoot项目中实现这一目标，并提供代码示例和最佳实践。为什么需要统一的返回数据格式？提高API可读性:统一的格式可以让客户端更容易理解API的响应数据。简化客户端解析
  • 【华为OD-E卷 - 整数编码 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od（A+B+C+D+E卷）收录分享华为odpythonjavac++javascript
    【华为OD-E卷-整数编码100分（python、java、c++、js、c）】题目实现一种整数编码方法，使得待编码的数字越小，编码后所占用的字节数越小。编码规则如下:编码时7位一组，每个字节的低7位用于存储待编码数字的补码字节的最高位表示后续是否还有字节，置1表示后面还有更多的字节，置0表示当前字节为最后一个字节。采用小端序编码，低位和低字节放在低地址上。编码结果按16进制数的字符格式输出，小写
  • 基于 React 和 Vite 的前端项目自动化测试方案
    背景前端自动化测试在工程化的研发体系中不可或缺。前端领域的自动化测试常被忽略，原因在于人们认为编写测试用例成本高且意义不大，本质是觉得投资回报率低。但当收益大于支出时，引入前端自动化测试是必要的。例如在表单功能从简单到复杂的迭代过程中，手动测试成本会指数级增长且可能无法完成所有测试，此时引入自动化测试能提升效率、保证测试覆盖范围、减少误差和遗漏、实现用例重复使用等。成本初始成本，引入自动化测试框架
  • Web前端------HTML多媒体标签之图片标签 王da魔 HTML前端html
    一.图片标签介绍1.路径问题>.绝对路径从盘符开始的路径问题：改变了工程目录的位置后，绝对路径从盘符开始则不能使用了，考虑相对路径>.相对路径从当前位置（指从代码书写.html文件）开始如何表示当前位置------使用./如何表示上一级--------使用../2.图片标签的导入方式3.常见图片属性src：图片地址：1.网络路径2.绝对路径3.相对路径alt：图片加载失败时，提示信息width/h
  • 2025最新的陪玩小程序系统有哪些开源架构?如何完全的实现安全交付？ D矜持 架构安全前端框架交友uniapp系统架构
    一、开源架构前端框架：*Uni-app等前端框架使得开发者能够创建跨平台的应用程序，这些应用程序在不同操作系统和设备上具有一致的用户体验。这些框架提供了丰富的组件和工具，使得开发者能够快速构建出美观、易用的用户界面。*通过这些前端框架，用户可以轻松地浏览陪玩师资料、下单、支付以及进行实时通信等操作，从而提高用户满意度和忠诚度。实时通信技术：*WebSocket实时通信技术实现了用户与陪玩师之间的即
  • 你曾经star学习的项目现在能看懂了吗？ github阅读
    前言我有随时翻看GitHubStar的习惯，尤其是下载了GitHubApp后更加方便我查看了，后来我偶然翻到了自己曾经折腾过的项目LiteWebChat_Frame看了看文档忽然一个问题映入了我的脑海自己曾经因为没看懂而star的项目现在看懂了吗这也是我写文的缘由且也想和大家聊聊这件事三个阶段我又重新看了一遍我的Star，发现可分为三个阶段1.Minecraft及相关启动器2.命令行及后端3.前端
  • 告别CSS margin 和 padding 简写,拥抱更优雅的解决方案
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在前端开发中,CSS的外边距(margin)和内边距(padding)是使用频率极高的属性。多年来,开发者们习惯使用它们的简写形式,例如:margin:10px20px15px5px;padding:5px10px;这种简写方式看似简洁,实则暗藏玄机。随着项目规模的扩大和设计需求的频繁变更,这种简写方式逐渐显露出其局限性。首先,我们
  • 使用 Next 14 + NextAuth 4 + Strapi v4进行 Google 和凭据提供商身份验证的完整指南(01) 前端javascript
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读最近开始研究Strapi，这是一个无头CMS。由于它仅提供后端，前端部分包括身份验证流程需要你自己构建。显然，你不会想自己构建这些，而是使用市场上的某个身份验证库。我早已计划使用NextAuth，所以这是一个完美的机会来实现它。因此，我们的设置是Next+Strapi+NextAuth。作为NextAuth的新手，首先需要一些基础教
  • 作为前端，需要知道这些工具，解放我的重复劳动力
    本文首发于微信公众号：大迁世界,我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看GitHubhttps://github.com/qq449245884/xiaozhi，包含一线大厂面试完整考点、资料以及我的系列文章。快来免费体验ChatGptplus版本的，我们出的钱体验地址:https://chat.waixingyun.cn可以加入网站底部技
  • 玩转随机数：用 JavaScript 掌控不可预测的魔力！ 故梦867 前端八股总结javascript开发语言ecmascript
    玩转随机数：用JavaScript掌控不可预测的魔力！当计算机遇上“随机”，我们能做什么？你曾想过在生活中拥有“超能力”吗？比如，可以预测下一个天气变化，或是猜中下一个彩票号码？虽然我们无法真正预测未来，但在代码的世界里，随机性给了我们一股强大的魔力。通过使用JavaScript的随机数功能，我们能为程序增添更多不确定性和趣味性。你准备好了吗？从生成随机验证码，到设计一款随机事件发生的游戏，从数据
  • Java HTTP POST请求工具方法详解：架构、实践与最佳实践（可变参数） 码农阿豪@新空间代码工作室 好“物”分享javahttp架构
    个人名片作者简介：java领域优质创作者个人主页：码农阿豪工作室：新空间代码工作室（提供各种软件服务)个人邮箱：[[email protected]]个人微信：15279484656个人导航网站：www.forff.top座右铭：总有人要赢。为什么不能是我呢？专栏导航：码农阿豪系列专栏导航面试专栏：收集了java相关高频面试题，面试实战总结️Spring5系列专栏：整理了Spring5重要知识点与
  • 华为OD机试E卷 --最大报酬 --24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonjsc语言
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述小明每周上班都会拿到自己的工作清单，工作清单内包含n项工作，每项工作都有对应的耗时时间(单位h)和报酬，工作的总报酬为所有已完成工作的报酬之和，那么请你帮小明安排一下工作，保证小明在指定的工作时间内工作收入最大化。输入描述输入的第一行为两个正整数T，n。T代表工作时长(单位h
  • springboot 利用html模版导出word 经典1992 springboothtmlword
    1.maven配置                org.freemarker        freemarker        2.3.32        2.控制层业务代码@GetMapping("/exportConstructionLogDocx")@ApiOperation(value="Ai施工日志导出docx")publicvoidexportConstructionLogDocx(
  • 在淘客返利系统中实现多租户架构与管理 微赚淘客系统@聚娃科技 开发语言
    在淘客返利系统中实现多租户架构与管理大家好，我是微赚淘客返利系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！随着淘客返利系统的不断发展，支持多租户架构已经成为一种趋势。多租户架构允许多个租户（客户）共享同一个系统，但每个租户的数据是相互隔离的。本文将详细介绍如何在淘客返利系统中实现多租户架构与管理，并通过Java代码实例进行说明。一、多租户架构的基本概念多租户架构是指在同一个系统中支持多
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他