![](https://img-blog.csdnimg.cn/20190831194007843.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发
文章平均质量分 53
戴翔的技术博客
高校教师,研究生在读,前端开发工程师,中国计算机学会教育专业委员会委员,CSDN程序员研修院讲师,CSDN博客专家,创业公司项目经理。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,青年大学习数据分析系统、防艾检测云平台“快乐速检”、锋火云疫情病原体检测移动登记系统、自助提货平台“我要提货”项目负责人。
展开
-
前端本地存储Cookie、LocalStorage、SessionStorage
1.CookieCookie是浏览器存储数据的一种方式;存储在用户本地,而不是存储在服务器上;可以随着浏览器每次请求发送到服务器端。1.1 Cookie的用法1.1.1 写入 Cookiedocument.cookie = 'username=zs';document.cookie = 'age=18';cookie的名称或值如果包含非英文字母,则写入时需要使用encodeURIComponent编码,读取时需要使用解码。document.cookie = `username=${e原创 2021-11-08 09:17:39 · 381 阅读 · 0 评论 -
JavaScript中Webpack的使用
0.什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。1.Webpack的使用1.初始化项目npm init2.安装Webpack需要的包npm install --save-dev webpack-cli webpack3.配置Webpack在 package.json 文件添加执行编译的命令 "scripts": { "webpack": "webpack" //原创 2021-10-26 18:30:51 · 1324 阅读 · 0 评论 -
JavaScript中使用 Babel 的流程
0.什么是BabelBabel 是一个 JavaScript 编译器,具有以下特性。Babel 本身可以编译 ES6 的大部分语法;ES6 Module 语法一般需要使用 Webpack 来处理;Babel 本身不能编译 ES6 新增的 API,需要借助其它的模块。1.使用 Babel 的流程1.安装 Node.js(https://nodejs.org/en/),在项目根目录初始化项目,生成 package.json 文件。cmdC:\Users\Daixiang\Desktop\de原创 2021-10-24 21:09:11 · 3494 阅读 · 0 评论 -
JavaScript ES6 Module模块
0.什么是Module历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。ES6 模块的设计思想是尽量的静态化,使得编译原创 2021-10-23 20:09:59 · 331 阅读 · 0 评论 -
JavaScript ES6 Class的基本用法
0.Class 的基本用法class Person { // 构造函数 constructor(name, sex) { this.name = name; this.sex = sex; } say() { console.log(`我是${this.name},性别:${this.sex}`); }}const zs = new Person('张三', '男');console.log(zs.name);zs.原创 2021-10-22 08:30:00 · 212 阅读 · 0 评论 -
JavaScript ES6 Promise对象及其应用
0.Promise是什么ES 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。Promise 是异步操作的一种解决方案;Promise 一般用来解决层层嵌套的回调函数的问题;Promise 解决的不是回调函数,而是回调地狱。1.Promise的状态Promise 对象有三种状态:pending: 初始状态,不是成功或失败状态。resolved/fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。原创 2021-10-21 10:44:15 · 242 阅读 · 0 评论 -
JavaScript中Set、Map的应用
0 什么是Set、MapSet是一系列无序、没有重复值的数据集合。你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。Map是一系列键值对的集合。Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。1 Set的应用1.1 数组去重例1:JavaScript中的Set,利用其特性,将数组[1, 2, 3, 3, 2, 1]去重后返回。console.log([...new Set([1, 2, 3, 3原创 2021-10-20 17:30:00 · 462 阅读 · 1 评论 -
JavaScript ES6中的解构赋值
0.什么是解构赋值解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。没有解构赋值之前,将数组中的值分别赋给变量a、b、c需要使用数组下标取值:const arr = [1, 2, 3];let a = arr[0];let b = arr[1];let c = arr[2];console.log(a, b, c); // 1 2 3有了解构赋值之后,将数组中的值分别赋给变量a、b、c不需要使用数组下标:const a原创 2021-10-19 21:23:20 · 410 阅读 · 0 评论 -
JavaScript中var、let、const的区别
1.重复声明var支持重复声明,let、const不支持重复声明。1.1 varvar a = 1;var a = 2;console.log(a);输出结果:21.2 letlet b = 3;let b = 4;console.log(b);输出结果:Uncaught SyntaxError: Identifier 'b' has already been declared1.3 constconst c = 5;const c = 6;console.log(原创 2021-10-18 21:00:00 · 226 阅读 · 2 评论 -
JavaScript事件委托批量添加事件监听
0.什么是事件委托事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有:减少DOM操作,提高性能。随时可以添加子元素,添加的子元素会自动有相应的处理事件。1.事件委托的原理事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件。举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,原创 2021-10-17 08:40:13 · 615 阅读 · 0 评论 -
JavaScript函数上下文规则
1.规则1:对象.方法()对象.方法()对象打点调用它的方法函数,则函数的上下文是这个打点的对象。1.1 案例1function fn() { console.log(this.a + this.b);}var obj = { a: 66, b: 33, fn: fn}obj.fn();输出结果:991.2 案例2var obj1 = { a: 66, b: 33, fn: function () { con原创 2021-10-16 09:25:52 · 353 阅读 · 0 评论 -
JavaScript通过原型链实现继承
JavaScript通过原型链实现继承原创 2021-10-15 08:12:49 · 222 阅读 · 0 评论 -
JavaScript数组及非数组对象的深浅克隆
0.什么是浅克隆、深克隆浅克隆:直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址。深克隆:将数据赋值给对应的变量,从而产生一个与源数据不相干的新数据(数据地址已变化)。即对象各个层级的属性。JavaScript中基本数据类型使用符号“=”可以进行克隆,引用数据类型使用符号“=”只是改变了变量的指向,并没有进行真正的克隆操作。1.对数组进行克隆1.1 浅克隆使用for循环进行浅克隆。var arr1 = ['demo', 1, 2];v原创 2021-10-14 19:15:00 · 276 阅读 · 0 评论 -
JavaScript制作楼层导航效果
0. 本期目标使用JavaScript制作楼层导航效果,实现两个功能:楼层跳转楼层监听1. 功能实现1.1 结构层<div id="box" class="box"> <ul class="list"> <li class="content-part" data-n="栏目一">栏目一</li> <li class="content-part" data-n="栏目二">栏目二</li&原创 2021-10-14 09:44:21 · 1620 阅读 · 0 评论 -
JavaScript函数节流锁
0. 实现步骤在函数外部设置锁的初始状态;需要加锁的函数内部,判断锁状态;需要加锁的函数内部,关锁;需要加锁的函数内部,定时器开锁;1. 实现代码实现代码如下所示:var oBtn = document.getElementById('btn');var oList = document.getElementById('list');// 设置锁的初始状态var lock = true;oBtn.onclick = function () { // 需要加锁的函数内部,判断原创 2021-10-12 16:46:16 · 579 阅读 · 0 评论 -
JavaScript通过键盘方向键控制盒子移动
0. 效果图1. 实现代码html<head><style> .box { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; background-color: orange; }</style></head><body>原创 2021-10-12 20:15:00 · 1110 阅读 · 0 评论 -
JavaScript DOM获取元素节点兼容IE6
0. 子节点返回元素的所有子节点(兼容到IE6)function getChildren(node) { var children = []; for (var i = 0; i < node.childNodes.length; i++) { if (node.childNodes[i].nodeType == 1) { children.push(node.childNodes[i]); } } retur原创 2021-10-12 20:00:00 · 279 阅读 · 0 评论 -
几个简单的算法题
0. 累加求值由用户输入数字n,请计算下面算式的值:3/2+4/3+5/4+…+(n+1)/nvar n = Number(prompt('请输入n值:'));var sum = 0;for (var i = 2; i <= n; i++) { sum += (i + 1) / i;}console.log(sum);1. 计算圆周率∏圆周率∏可以由下面的莱布尼茨级数公式计算出来,请由用户输入参数n,计算圆周率∏∏/2=1+1/3+(12)/(35)+(123)/(357)原创 2021-10-11 20:39:05 · 690 阅读 · 0 评论 -
html+css实现常见的网页特效
0. 效果预览1. 文字遮罩html<li class="big-grid havehover"> <a href=""> <div class="mask"> </div> <div class="circle"> <p> 城市 </p> <p> CityWalk </p> </div> <div class=原创 2021-10-09 21:25:47 · 2625 阅读 · 1 评论 -
制作网页下拉三角形的方法
0. 效果预览1. 方法1:使用两个盒子构造三角箭头.head nav ul li.have-menu-1 .arrow{ position: absolute; width: 10px; height: 10px; top: 50%; right: 15px; margin-top: -5px; transition: transform .5s ease 0s;}.head nav ul li.have-menu-1 .arrow b{原创 2021-10-08 21:59:34 · 1165 阅读 · 2 评论 -
微信小程序云开发开源项目:在线提货系统
1.效果图示2.使用方式2.1 普通用户2.1.1 提货扫描上图中的小程序码,或者微信搜索“我要提货”,进入小程序;点击小程序首页“扫码提货”按钮,扫描下图中的二维码;进入提货信息填写页面,填写完成提交后即可完成提货。2.1.2 查看订单点击首页“我的订单”按钮或者直接点击导航栏中“我的”菜单;2.1.3 查看物流接上步,点击订单列表中的订单,即可跳转到物流信息页面。如订单状态为“待发货”,则触发系统提示,不进入物流信息页面。2.2 商家2.2.1 生成卡密该功能未完成原创 2021-09-15 19:56:26 · 1930 阅读 · 2 评论 -
微信小程序云开发开源项目:在线捐赠功德箱
环境说明开发工具:微信开发者工具调试基础库:2.19.2目录说明Project├─cloudfunctions 云函数文件夹│ ├─payCallback 微信支付回调函数│ ├─quickstartFunctions│ │ ├─createCollection│ │ ├─getMiniProgramCode│ │ ├─getSwitch 获取显示开关函数│ │ ├─selectSubject原创 2021-08-26 09:17:17 · 5934 阅读 · 2 评论 -
js获取URL中GET方式传递的参数并自动填入input
输入框<input type="text" placeholder="输入订单号" id="OrderNo" name="OrderNo"><input type="text" placeholder="请输入邮箱" id="Email" name="Email">获取GET参数<script type="text/javascript">function getQueryVariable() { let query = window.location原创 2021-05-07 14:42:23 · 1589 阅读 · 0 评论 -
表单的单项处理与批量处理操作
单项处理单项(单行)处理时,只需将数据行的主键id值作为入参传入处理函数即可。需要注意的是,添加c:if判断以避免重复处理。<td class="center"> <c:if test="${item.approvalStatus == 'INITIAL'}"> <a class="btn btn-xs btn-success review" title="审核" οnclick="review('${item.id}');"> <i class=.原创 2021-04-20 21:41:18 · 491 阅读 · 0 评论 -
jsp页面日期格式化
< fmt:formatDate value="" pattern="">value: 要显示的日期,pattern: 自定义格式模式。<fmt:formatDate value="${item.taskTime}" pattern="yyyy-MM-dd HH:mm:ss"/>原创 2021-04-20 10:12:16 · 1095 阅读 · 2 评论 -
jsp状态选择下拉框
jsp页码<td style="vertical-align:top;padding-left:2px;"> <select class="" name="status" id="status" data-placeholder="审核状态" style=""> <option value=""></option> <option value="">全部</option> <option <c:if tes.原创 2021-04-15 17:43:00 · 9962 阅读 · 0 评论 -
jsp返回上一页
history.back(-1) // 直接返回当前页的上一页,表单数据全部消失,是个新页面history.go(-1) // 返回当前页的上一页,不过表单里的数据全部还在<td style="text-align: center;" colspan="10"> <a class="btn btn-mini btn-primary" οnclick="save();">提交</a> <a class="btn btn-mini btn-d.原创 2021-04-15 17:36:39 · 1827 阅读 · 0 评论 -
人人商城提示“百度未授权地图API”
问题描述微擎人人商城报错:百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥解决方法出现这个问题的原因是源代码里面的百度地图AK失效了,这个时候可以去百度地图直接重新申请一个AK,然后将原来项目里面的AK替换掉。申请地址:http://lbsyun.baidu.com/解决无果替换AK后依旧有提示时,需要注意以下几点:注意申请的AK类型是 “浏览器端"确认访问的程序页面AK是被替换了的可以快速的验证下,这个路径下项目名\data\tpl\app\ewei_转载 2021-02-16 19:41:53 · 3413 阅读 · 6 评论 -
微信小程序数组修改后渲染到前端
问题再现今天在写小程序时发现一个问题:由于C#特性,数据类型没有Date类型,所以取出来的数据想要显示成Date还必须自己再处理。由于后端用的linq查询,不支持在查询语句里使用函数,于是我的解决方案是数据拿到前端用js的substr()函数进行处理,处理前的前端效果如图1所示。图1. 处理前的数据显示要想动态修改数据就必须使用setData,但新手使用setData就容易遇到如下所示的问题(标红,报错):解决方案在修改数组和对象的时候就直接将要修改的参数名写成对应字符串就可以了,然后使用[]原创 2020-12-12 10:41:52 · 2024 阅读 · 0 评论 -
微信小程序长按与点击事件冲突解决方案
问题再现对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件,然后触发点击事件。通过测试,我们发现,小程序中事件执行的顺序是点击:touchstart → touchend → tap长按 touchstart → longtap → touchend → tap解决方案abc.wxml<view bindtouchstart="bindTouchStart" bindtouchend="bindTouchEnd" bindlongt转载 2020-12-08 23:24:02 · 1733 阅读 · 0 评论 -
微信小程序data-*取自定义值
abc.wxml<view data-id='{{item.id}}' data-name='{{item.name}}' data-address='{{item.address}}' data-remarks='{{item.remarks}}' data-phone='{{item.phoneNumber}}' bindtap="deliver" bindlongtap="delList">bindlongtap长按事件取值 e.currentTarget.d原创 2020-12-08 22:24:10 · 1404 阅读 · 0 评论 -
@Html.DropDownList不更新回传原数据更新则回传新数据
通过@Html.DropDownList非强类型进行BookType的选择,初始显示原来的BookType 值,通过点选下拉列表再点击“更新”按钮进行数据的更新,即“不更新回传原数据、更新则回传新数据”。bookindex.cshtml 部分代码:@foreach (var item in Model) { <tr> <td> @Html.DropDownList("detail.booktype", db.bll.listHelp原创 2020-11-19 17:06:11 · 272 阅读 · 0 评论 -
JSON.parse() 和JSON.stringify()的区别
在进行微信小程序开发时,前端经常需要使用到 JSON.parse() 和 JSON.stringify() 两个方法,他们的区别是:JSON.parse() 方法用于将一个 JSON 字符串转换为对象。JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。参考资料:菜鸟教程JavaScript JSON.parse()菜鸟教程JavaScript JSON.stringify()...原创 2020-11-09 12:31:38 · 340 阅读 · 1 评论 -
微信小程序开发从入门到精通·学习路线
1.HTML(基础)html和css是前端的基础,是前端的入门级知识,必须掌握。学习地址:https://www.runoob.com/html/html-tutorial.html2.CSS(基础)html和css是前端的基础,是前端的入门级知识,必须掌握。学习地址:https://www.runoob.com/css/css-tutorial.html3.JavaScript(基础...原创 2020-03-15 15:39:18 · 8003 阅读 · 0 评论 -
LayUI数据表格查询与重载
查询功能模块的工作流程是:在输入框中输入关键字,点击查询按钮,数据传输到服务端。服务端接收到数据,进行查询后将数据拼接成前端框架所需要的json类型。服务端返回查询结果,前端数据表格方法级渲染的重载。如果未输入数据点击查询按钮,弹窗提示用户输入数据。前端数据展示与重载编写输入框与查询按钮,监听按钮点击事件。<div class="layui-inline layui-sho...原创 2020-02-10 15:14:41 · 5472 阅读 · 2 评论 -
PHP+MySQL+LayUI分页查询显示
html构建前端样式,AJAX异步请求数据,再使用layui.table数据表格的方法渲染。html 文件<div class="layui-card-body "> <table id="demo" class="layui-hide"></table> <div id="pageUD"></div&g...原创 2020-02-10 10:25:36 · 3423 阅读 · 3 评论 -
PHP语言实现网站登录功能
使用PHP链接MySQL数据库进行登录验证。创建数据表首先,在数据库中创建登录功能所需要用到的数据表。该表应该包含用户名、密码、登录次数、最近一次登录时间、最近一次登录IP等字段。创建代码如下:DROP TABLE IF EXISTS `user`;CREATE TABLE `user` ( `user_name` varchar(30) CHARACTER SET utf8 COL...原创 2020-02-09 09:29:56 · 6835 阅读 · 10 评论 -
QQ微信等分享链接时系统提取的标题和图片代码
有的时候,在我们写好网页后,需要通过QQ/微信等即时通讯工具分享出去,这时候,系统会提取网页的标题和图片,默认提取title和网页的第一张图片。当然,我们也可以指定分享的文字和图片。以图片为例,代码如下:<meta itemprop="image" content="https://qingyunsi.org.cn/wuhan2020/img/title.jpeg" />效果如...原创 2020-02-03 10:32:56 · 3103 阅读 · 0 评论 -
JavaWeb项目WebContent下的资源文件无法引用
写在前面JavaWeb项目引用资源的时候尽量使用绝对路径。问题引入作者在帮助同学完善其JavaWeb项目端页面的时候,css样式文件怎么也引用不了。第一个想到的是:是不是文件路径写错了?然而检查之后发现文件路径没有问题,就是引用不了。项目截图如下所示: 图1.项目截图 之后,作者甚至换了绝对路径,然而,依旧无法引用资源。&amp;lt;link rel=&quot;styleshee...原创 2018-09-03 10:19:01 · 6018 阅读 · 0 评论 -
使用layui框架迅速搭建后台管理页面
写在前面layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信...原创 2018-09-01 08:52:26 · 12980 阅读 · 1 评论