![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 65
@大吉
爱好总结和记录,兴趣驱动的终身学习者
展开
-
JS Array map和Array filter区别
Array.map可以理解为根据条件重新映射原数组,并得到新数组;而Array.filter则可以理解为根据条件过滤原数组,并得到新数组;也就是说,如果你想对每个原数组的元素进行修改,那么请使用map,如果你想对每个原数组的元素根据某些规则删除(该删除去掉某些元素,也就是过滤),请使用filter它们都不会改变原生数组!原创 2022-04-16 21:52:56 · 1537 阅读 · 0 评论 -
Vue函数传参之event触发
介绍了什么是event,通过案例将html的event传递给处理该event的函数中。在elementUI中,经常能看到回调参数的类型为Event。原创 2022-04-11 20:51:34 · 3909 阅读 · 0 评论 -
【2022.3】尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查)
爆肝15天,本文共4万5千字,包含Vue.js理论到实战。知识点全部都能使用ctrl+f速查,可作为知识点速查笔记使用。原创 2022-03-22 11:21:52 · 24907 阅读 · 10 评论 -
SpringBoot修改SpringMVC配置类,不拦截静态图片资源
目录前言解决方案我的目录结构访问路径结论前言在使用Springboot低版本时,启动项目居然访问不到图片等静态资源解决方案编写SpringMVC 拦截器(也可能是配置类):/* 静态资源过滤 让静态资源图片能加载出来 */@Configurationpublic class InterceptorConfig extends WebMvcConfigurationSupport { @Override protected void addIntercepto原创 2021-07-22 17:53:51 · 510 阅读 · 0 评论 -
js + thymeleaf 直接获取model传来的值
目录需求后端Controller部分前端js脚本:前台界面:需求现在想在js脚本中直接接收 前端model传来的值后端Controller部分@Controllerpublic class TestWSXController { @RequestMapping(value = "/test") public String jumpToPayPage(@RequestParam Map<String,String> map, Model model){原创 2021-07-22 12:00:50 · 1054 阅读 · 1 评论 -
【Ajax】向Controller传递form表单(未提交)的值
目录需求实现第一个场景form表单部分实现第二个场景需求1、不提交form表单的情况,将form表单的一个input的值传到后台的Controller(此处用jQuery)2、后台的Controller接收到该值,Ajax的方式局部刷新页面某处(此处用thymeleaf实现)实现第一个场景form表单部分<form method="post" th:action="@{/gdsubmit}"> <select type="text" plac原创 2021-07-16 17:58:00 · 761 阅读 · 0 评论 -
解决org.thymeleaf.exceptions.TemplateInputException:Error resolving template,template might not exist
问题描述:之前在本地上跑的好好的项目,部署到Linux远程服务器上,有的请求可以访问到,有些请求访问不到,爆出500错误。一看后台,报错信息如下:原因分析:经过多方排查及上网搜寻,原因大致是以下几条:在controller层请求处理完了返回时,没有使用@RestController或@ResponseBody而返回了非json格式在你的controller层对应的方法返回html路径及名称时,在前面多加了一个/ 。笔者就是因为这个原因报错!写请求的返回值时手贱多加一个/解决方案:原创 2020-12-24 23:43:21 · 1428 阅读 · 0 评论 -
后端程序员常用的前端操作.
目录前言正文1.需求:如何让div透明,内容不透明2.需求:点击链接,在新窗口弹出页面。而不是覆盖当前窗口3.需求:居中对齐的属性4. thymeleaf的判断5. 在th: 标签内部嵌套使用if判断6. @PathVariable的应用7. 覆盖整个页面的背景图片:8. 调整链接/元素的文字 离着上下左右的边距:9. 不使用 ``` ```; 转而使用icon,或者button 提交form表单未完待续(随编码经验后续补充)前言作为一个后端开发程序员,虽然前端不用太懂,但是基本的前端操作是必不可少的,原创 2020-12-22 21:59:52 · 344 阅读 · 0 评论 -
thymeleaf+Ajax方式进行局部刷新时出错,使用Chrome开发者工具Debug
场景:有一个需求是使用Ajax配合thymeleaf来对html的某个部分进行局部刷新。但是却报了500错误(见下图)原因分析:报了500首先想到后台出了问题,但是反复调试后台,发现没有错误。然后想到可能前端写错了,于是经过上网搜寻,发现使用Chrome的调试工具可以查看前端局部刷新结果。发现右侧局部刷新结果根本就没显示全。于是问题定位到了前端,最后发现前端有一个thymeleaf的属性写错了,改正后问题解决经验教训:这是前端开发经验不足导致的,要善用Chrome开发者工具来进行Debug原创 2020-12-09 21:44:32 · 508 阅读 · 0 评论 -
HTML的【data-】字段:将自定义属性传值给js(含thymeleaf的动态赋值)
文章目录需求:一、给div赋值二、js代码接收值,并将值赋到其他html元素中去三、使用th:attr动态赋值需求:有时候我们有这么一个需求:写了一个div标签,然后想在这个div里面赋一些值,然后将这个div里的值传到下一个div(也可以是其他html元素)里去。解决方案:使用HTML的【data-】字段,一段js代码一、给div赋值<div class="actions"> <a data-commentid="1" data-commentnickname="大吉"原创 2020-12-09 12:14:00 · 3279 阅读 · 0 评论 -
thymeleaf的局部刷新(一个最简单的Demo实现,包括Controller和html)
现在我们有这样一个需求:提交表单后,只刷新某页面的一部分内容,不刷新整个页面。知识点:使用th:fragment前端代码:原创 2020-12-09 10:44:29 · 4174 阅读 · 5 评论 -
thymeleaf @{}和${}嵌套使用,以及字符串拼接
@{}和${}嵌套使用经过查阅网上大神的写法,嵌套使用应该是这样的://错误的写法<a th:href="@{/article/type/${typeId}}">上一页</a>//正确的写法<a th:href="@{/article/type/{typeId}(typeId=${typeId})}">上一页</a>问题及解决方案(字符串拼接)但是如果我想传递一个参数,众所周知thymeleaf是括号传参,但是我接着上面的写法想传递一个参数到C原创 2020-12-07 11:03:47 · 3829 阅读 · 1 评论 -
thymeleaf的th:each双层嵌套循环(一个最简单的Demo实现)
Controller层传给前端的东西List<Blog> blogQueries = blogService.queryAll();model.addAttribute("blogQueries", blogQueries);上面的代码,第一行 查询出一堆blog来,并将这一堆blog封装进一个名为blogQueries的List集合。第二行就是将该List集合传到前端去。Blog(博客)有三个字段:title – 标题(String类型)description – 摘要 (Str原创 2020-12-06 23:00:05 · 6579 阅读 · 4 评论 -
【分页查询】在SSM环境中使用PageHelper
文章目录前言一、导入jar包二、使用步骤三、常用配置order by 啥意思总结前言本文只讨论SSM框架下PageHelper的使用,不讨论SpringBoot提供的starter方式。一、导入jar包<!--pagehelper--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>page原创 2020-11-17 10:23:43 · 1969 阅读 · 0 评论 -
浅谈Request,Session和Model向前端传递数据
文章目录前言结论如下图所示:总结及应用前言为了弄清楚它们三个如何向前端如何传递数据,我花了半天时间编写Demo来实测,终于搞明白了他们之间的关系。结论如下图所示:对号代表前端能接收到从controller传来的数据,错号反之解释一下第一行和第二行:A页面通过Xcontroller,Xcontroller通过Ycontroller向B页面传递数据,Xcontroller传递数据给Ycontroller的行为,分为A. forward 和 B. redirect第三行:意思是A页面直接通过X原创 2020-11-15 16:32:35 · 3521 阅读 · 1 评论 -
model.addAttribute向前端(thymeleaf)传递对象并接收
文章目录一、应用场景二、Controller层编写三、前端页面接收一、应用场景在使用SpringMVC(Controller)和thymeleaf(html页面)进行交互时,可以使用model.addAttribute这个方法向前端传递键值对。model.addAttribute("key", value);键值对中的键,可以随便取名,值也能传很多种类型。传基本类型大家应该都会,本文就以一个例子抛砖引玉, 传一个对象到html,并用thymeleaf的方法进行接收。二、Controller层编原创 2020-11-12 21:30:31 · 12693 阅读 · 1 评论 -
在SpringMVC中使用forward和redirect
项目场景:在使用SpringMVC开发时,我想使用JavaWeb的方式传递数据(形如如下代码):request.getRequestDispatcher().forward(request,response)response.sendRedirect()发现SpringMVC通过视图解析器帮我们自动做了这一步,只需要在return语句中返回字符串形式就可以实现forward和redirect操作了。但是这个return语句应该怎么填才能被SpringMVC正确识别呢?原因分析:First of原创 2020-11-10 10:23:17 · 1909 阅读 · 0 评论 -
SpringMVC整合Thymeleaf中文乱码问题,html代码显示不全
文章目录前言一、如何编写SpringMVC的配置文件?二、启动服务器之后,页面html的代码显示不全总结前言SpringMVC和Thymeleaf组合在一起的问题,比较冷门,一般遇到的也比较少。因为大家在SSM阶段技术选型的时候,一般会选用jsp,学校老师也是这么教的。一般在SpringBoot阶段用到Thymeleaf模板引擎比较多,而且SpringBoot还有专门的Thymeleaf的启动器,帮我们省去了不少配置。但是我在搭建个人博客时,想练习一下SSM,又想摒弃jsp技术,就结合了一下Thy原创 2020-11-05 23:04:28 · 1388 阅读 · 2 评论 -
简单介绍RESTful风格
文章目录前言一、RESTful风格是什么?二、搭建环境:1. get.html2. post.html3. Controller.java三、@PathVariable简单介绍前言学完RESTful风格之后,一直想总结一下它的基本使用,下文以一个简单案例的形式,创建一个使用RESTful风格的基本场景。一、RESTful风格是什么?现在的大多数网页都在用RESTful风格,它是一种风格,而不是一种技术。利用这种风格设计路由比较简洁高效。RESTful风格特点:引自百度百科:1、每一个U原创 2020-10-24 00:02:56 · 999 阅读 · 0 评论 -
Vue-cli快速入门&集成idea
文章目录前言一、Vue-cli是什么?二、前置环境1.安装Node.js2.安装cnpm3.安装Vue-cli4.安装webpack打包工具三、搭建项目2.读入数据总结前言学习完Vue的基本使用之后, 笔者在学习使用Vue-cli搭建项目时遇到了不少问题。特此在这里记录Vue-cli的基本搭建步骤,和一些常见问题的排查。提示:以下是本篇文章正文内容,下面案例可供参考一、Vue-cli是什么?这里直接给出官网的介绍:https://cli.vuejs.org/zh/guide/Vue CLI原创 2020-10-19 11:13:52 · 752 阅读 · 0 评论 -
简单实现Vue的双向绑定
文章目录前言一、双向绑定是什么?二、实现双向绑定简易Demo1.编写Demo1.html2.编写Demo2.html前言学习完Vue.js的特性, 双向绑定是在开发中一个非常实用的点. 这次我以一个简易的Demo为切口, 谈一下我对双向绑定的理解. 一、双向绑定是什么?要说起双向绑定, 必须先谈一下单向绑定。所谓的单向绑定就是, 把Model绑定到View,就是我们之前MVC实现的方式。当Model更新时,View也会自动更新。那么双向绑定的意思就是,把Model绑定到View的同时,也将原创 2020-10-16 12:57:14 · 2684 阅读 · 1 评论 -
SpringMVC集成AJAX的基础配置
文章目录Ajax技术概述:搭建AJAX的基本配置1.导入jQuery坐标2.配置SpringMVC3.配置pom.xml4.JSON数据格式防乱码5.验证成功Ajax技术概述:Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个原创 2020-10-13 23:31:14 · 339 阅读 · 0 评论