Youzi的知识库 - 前端
type: channel
link: https://knowledge.autisn.com/index.php/category/前端
items: Thymeleaf的简单使用
items: Vue父子组件传值
items: 超链接取值
items: 常用的正则
items: JavaScript Array join() 方法
items: JS 手机号码脱敏处理
items: jQuery on() 和 click() 的区别
items: Tomcat乱码问题
items: Excel导入和导出功能的实现
items: Datatables常用操作

Thymeleaf的简单使用
type: item
date: 2023-10-24T10:10:45+08:00
description: 1.引入jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>2.后端代码package com.atguigu.gulimall.product.web; import com.atguigu.gulimall.product.entity.CategoryEntity; import com.atguigu.gulimall.product.service.CategoryService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; import java.util.Map; @Controller public class IndexController { @Autowired CategoryService categoryService; @GetMapping({"/", "/index.html"}) public String indexPage(Model model) { //1.查出所有的一级分类 List<CategoryEntity> categoryEntities = categoryService.getLevel1Categorys(); model.addAttribute("categorys", categoryEntities); //视图解析器进行拼串 //"classpath:/templates/" +返回值+ ".html" return "index"; } }3.在resource下新建templates文件夹（页面都放进这里面） 谷粒商城2020 X 家用电器 Hi, 欢迎来到! 登录 注册 新人福利 PLUS会员 促销 公告 更多 全民纸巾大作战 家具建材满999减300元 黑科技冰箱，下单立减千元 抢102减101神券！ 关于召回普利司通（天津）轮胎有限公司2个规格乘用车轮胎的公告 物流推出配送员统一外呼电话"95056” 天府大件运营中心开仓公告 大件物流“送装一体”服务全面升级！ 话费 机票 酒店 游戏 企业购 加油卡 电影票 火车票 众筹 理财 礼品卡 白条 话费 机票 酒店 游戏 X 话费充值 流量充值 套餐变更 号码 面值 100元 20元 50元 10元 2元 ￥98.0-￥100.0 快速充值 抢99减50元话费 X 国际机票 国际/港澳 特惠活动 单程 往返 机票查询 当季热门特惠机票 X 国内港澳台 促销活动 酒店查询 订酒店到 X 点卡 QQ 页游 面值 面值 面值 面值 ￥0.00 直充 卡密 快速充值 吃鸡就要快人一步 4.简单语法示例，更多语法参考官网https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html Welcome to our grocery store! 5.修改Thymeleaf的文件后能及时在页面更新，则要关闭缓存spring: thymeleaf: cache: false6.如果resource下的static文件读取不到时，可以加入以下配置或者在pom文件中加入spring: mvc: static-path-pattern: /static/**或者在pom文件中加入以下配置<resources> <resource> <filtering>false</filtering> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> <include>**/*.yml</include> <include>static/**</include> </includes> </resource> </resources>

Vue父子组件传值
type: item
date: 2023-10-01T14:45:28+08:00
description: 子页面 <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeclick" :filter-node-method="filterNode" :highlight-current="true"></el-tree> <style scoped> 父页面 <el-row :gutter="20"> <el-col :span="6"> <category @tree-node-click="treenodeclick"></category> </el-col> <el-col :span="18"> </el-col> </el-row> <style scoped> 总结：父子组件传递数据子组件给父组件传递数据，事件机制；子组件给父组件发送一个事件，携带上数据。this.$emit("事件名",携带的数据...)

超链接取值
type: item
date: 2022-02-25T17:03:47+08:00
description: //获取传过来的值 function getParams(key) { var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null; }; var a_id = getParams("a_id");

常用的正则
type: item
date: 2022-01-11T10:20:00+08:00
description: 文件名不能包含的字符//params['name']是标签获取得到的值 var reg = new RegExp('[\\\\/:*?\"<>|]'); if (reg.test(params['name'])) { $.zkbr.alert("提示信息", '文件名不能包含下列任何字符?、╲、/、*、"、<、>、|'); return; }不给输入单引号字符var reg = new RegExp('^[^‘’'\s]+$'); if(reg.test(params['title'])){ $.zkbr.alert("提示信息", "文章标题不能输入单引号"); return; }

JavaScript Array join() 方法
type: item
date: 2022-01-07T14:06:00+08:00
description: 定义一个数组var fruits = ["Banana", "Orange", "Apple", "Mango"];使用join（）方法var energy = fruits.join();输出energy//Banana,Orange,Apple,Mango console.log(energy);总结JavaScript Array join() 方法可以使数组拼接成字符串，并自动用‘’ , ‘’拼接

JS 手机号码脱敏处理
type: item
date: 2021-12-31T10:32:15+08:00
description: 我们在开发前端项目时，一般会对用户敏感信息（如姓名、手机号码、身份证号码）进行脱敏处理。本文以手机号码脱敏处理为例进行说明。如 13366668888 脱敏处理后变成 133****8888。具体处理方法如下：/**手机号码脱敏处理 * @method phoneDesensitization * @param {String} phone 需要处理的手机号码 * @param {String} char 脱敏替换的字符 * @return {String} 脱敏处理后的手机号码 */ function phoneDesensitization(phone, char) { return phone.replace(/(\d{3})\d*(\d{4})/, `$1${new Array(5).join(char)}$2`) }需要调用的地方直接调用：console.info(phoneDesensitization('13366668888', '*')) // => 133****8888 console.info(phoneDesensitization('13366668888', '密')) // => 133密密密密8888说明：这里主要使用了正则表达式的 分组 和 $1,$2 的方法。通过 () 对字符串进行分组，$相当于下标从1开始的集合，$n相当于对应第n个索引的值。/(\d{3})\d*(\d{4})/ 相当于把字符串前3个和后4个字符分为两个集合，$1${new Array(5).join(char)}$2 相当于保留前3后4的字符后，替换剩下字符串为新字符串 new Array(5).join(char)。

jQuery on() 和 click() 的区别
type: item
date: 2021-12-30T13:29:59+08:00
description: on() 和 click() 的区别:二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。HTML 展示jQuery中on()和click()的区别 点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。 NewOn NewClick 原先的HTML元素on Delete 原先的HTML元素click Delete JS$("#newclick").click(function(){ $(".li").append(' 动态添加的HTML元素click Delete '); }); $("#newon").click(function(){ $(".li").append(' 动态添加的HTML元素on Delete '); }); $(".delete").click(function(){ $(this).parent().remove(); }); $(".li").on('click', ".deleteon", function(){ $(this).parent().remove(); }) $(".deleteclick").click(function(){ $(this).parent().remove(); });

Tomcat乱码问题
type: item
date: 2021-12-24T17:04:48+08:00
description: 修改Tomcat的server.xml文件，在Connector中加一句<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>完整的xml文件<?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to You under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <Server port="8005" shutdown="SHUTDOWN"> <Listener className="org.apache.catalina.startup.VersionLoggerListener"/> <!-- Security listener. Documentation at /docs/config/listeners.html <Listener className="org.apache.catalina.security.SecurityListener" /> --> <Listener SSLEngine="on" className="org.apache.catalina.core.AprLifecycleListener"/> <Listener className="org.apache.catalina.core.JasperListener"/> <Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener"/> <Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener"/> <Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener"/> <GlobalNamingResources> <Resource auth="Container" description="User database that can be updated and saved" factory="org.apache.catalina.users.MemoryUserDatabaseFactory" name="UserDatabase" pathname="conf/tomcat-users.xml" type="org.apache.catalina.UserDatabase"/> </GlobalNamingResources> <Service name="Catalina"> <!-- <Executor name="tomcatThreadPool" namePrefix="catalina-exec-" maxThreads=…

Excel导入和导出功能的实现
type: item
date: 2021-12-22T10:59:00+08:00
description: 导出功能1、Jsp(一个按钮) 导出 2、Js$("#export").click(function(){ window.location.href =path+"/gc/riskBadAssets/exportExcel?filter=" + encodeURIComponent(JSON.stringify(filter)); });3、Controllerpackage com.ctbr.applet.controller.manage; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.ctbr.applet.service.IMpRewardListService; import com.ctbr.baseFrame.core.BaseController; import com.ctbr.baseFrame.model.AjaxResult; import com.ctbr.baseFrame.model.PageResult; import com.ctbr.baseFrame.service.IExcelService; import com.ctbr.baseFrame.util.UserContext; import net.sf.json.JSONArray; /** * 业绩管理 */ @Controller @RequestMapping(value = "/appletManage/mpReward") public class MpRewardListController extends BaseController { private static Logger logger = Logger.getLogger(MpRewardListController.class); @Resource private IMpRewardListService service; @ResponseBody @RequestMapping(value="/exportExcel") public void exportExcel(HttpServletResponse response,HttpServletRequest request){ String filter = request.getParameter("filter"); Map<String,Object> map = new HashMap<String,Object>(); String vague = null; try { if(getFilter(JSONArray.fromObject(filter)) == null || getFilter(JSONArray.fromObject(filter)).equals("")) { vague = getFilter(JSONArray.fromObject(filter)); } else { vague = new String(getFilter(JSONArray.fromObject(filter)).getBytes("ISO8859-1"), "UTF-8"); } } catch (Exception e) { logger.info("根据模糊匹配时导出excel表格时发生异常", e); } map.put("filter", vague); String titleList[] = {"奖励明细编号" , "业务编号" , "客户名称" , "业务日期"…

Datatables常用操作
type: item
date: 2021-12-03T18:06:52+08:00
description: 1、jsp和对应的js文件1.1js//页面初始化就加载 $(function() { //表格列 /** *dataTables开始** */ dataTables = $('#articleListTable').DataTable({ "language": { "info": "当前 _START_ - _END_ 条 共 _TOTAL_ 条", "paginate": { "sFirst": "首页", "sPrevious": " < ", "sNext": " >", "sLast": " 尾页 " }, "emptyTable": "没有符合条件的记录!", "lengthMenu": "显示 _MENU_ 条", "sZeroRecords": "没有找到匹配的记录", "sInfoEmpty": "" }, "aLengthMenu": [10, 20, 50, 100], "pagingType": "full_numbers", // 用于指定分页器风格 // "full_numbers"" or // ""two_button""， // default // ""two_button"" "bAutoWidth": true, "scrollX": true, "ajax": { "url": path + "/appletManage/mpArticle/queryPage", "type": "POST", "dataType": "json", "data": { filter : filter } }, "processing": true, "serverSide": true, "bLengthChange": true, "bSort": false, // 排序功能 "searching": false, "bStateSave": false, // 保留分页信息 "resetPaging": false, "dom": '<"top">t<"bottom"lip><"clear">', "columns": [ //数据对应的内容 {"data": "ord"}, {"data": "status_flag_nm"}, {"data": "thumbnail_url"}, {"data": "title"}, //操作按钮，样式靠右 {"data": "","class": "align-right"} ], "columnDefs": [ { "render": function(data, type, row, meta) { //序号列 return meta.row + 1 + meta.settings._iDisplayStart; }, "orderable": false, //表示第一列 "targets": 0 }, { //如果表格中要显示图片，可以修改样式 "render": function(data, type, row) { var html = " "; //缩略图 return html; }, "orderable": false, "targets": 2 }, { "render":function(data,type,full){ return " "+data+" "; }, "targets": 3 },{ "render": function(data, type, row, meta) { var html = "";//编辑按钮 html += ' '; html += ' '; if(row.status_flag == "Y"){ html += ' '; }else{ html += ' '; } html += ' '; html += ' '; html += ' '; return html; }, "orderable": false, "targets": 4 }] }); });1.2jsp 序号 显示状态 缩略图 标题 操作 2、上移下移操作2.1、js文件/** * 上移下移 * */ function updateOrd(id,type,ord,rowIndex){ if(dataTables.rows()&& dataTables.rows().data()){ var data = dataTables.rows().data(); var nextIndex = 0; if(type == "up" && rowIndex == 0 ){ $.zkbr.alert("错误信息", "已经是第一条数据"); return false; } if(type == "down" && rowIndex =…