- 博客(46)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 nginx+云服务器配置前端项目
以我自己的项目为例子为了统一路由的和，可以这样写：打包完前端项目后需要将要打包好的dist里面的文件放到服务器上，然后再配置nginx因为我的项目用的是腾讯云服务器(centos6.5)，所以我就以这个举例子了参考：https://www.runoob.com/linux/nginx-install-setup.html先要安装 PCREPCRE 作用是让 Nginx 支持 Rewrite 功能。解压安装包进入安装目录编译安装查看pcre版本[外链图片转存失败,
2022-07-04 14:54:58
340
1
原创 【网络安全】前端程序员务必掌握的图片防盗链
在 协议请求中 里会带个 字段。通过图片服务器检查 是否来自规定的域名（白名单），而进行防盗链。 在浏览器中输入防盗链图片地址是能直接访问的。可以通过 nginx 配置白名单列表，不在白名单则返回 403 或者相应的处理（重定向到显示403的图片，等操作）以上所有来自 *.andyhu.com 域名和域名中包含 google 和 baidu 的站点都可以访问当前站点的文件资源。其他来源域（不在白名单列表）名访问则返回 。如果被注释的 则返回一张 的图片顺这浏览器能直接访问防盗链图片的思路，不难
2022-07-04 14:40:10
4651
原创 【踩坑】ElementUi中form组件的一些“坑”（注意事项or巧妙用法）
做项目用ElementUI组件的时候，因为有些业务需求，官方不可能有我们项目中业务所有的例子说明，所以在这里纪录了一下平常在写项目的时候遇到的一些问题。二、循环表单中的表单验证问题1、单层循环表单2、双层循环表单依此类推，多层循环表单也可以按照双层循环表单中 prop 属性的格式来写。如果有遇到组件中的其他问题或者注意事项可以在评论区留言，一起分享。未完待续…我是 AndyHu，目前暂时是一枚前端搬砖工程师。文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注呀😊未经许可.
2022-07-04 14:37:18
835
原创 【实用】Vue线上环境禁止打印console.log
在开发阶段经常用console.log 打印一些数据，但到生产环境需要去掉这些，如果一行一行的删除代码就非常麻烦了，这篇文章就记录一下如何通过几行代码禁止vue项目中打印console.log的内容
2022-07-04 14:30:11
2156
原创 【重点】快速记忆JavaScript的数组api
在学习JavaScript数组的时候经常感觉有些api很陌生，那有什么方法可以方便记忆这些api呢？记住所有api可能性不大，但通过对数组的api进行分类，记住这些分类总不难吧？然后要用到哪个api的时候就想想属于哪个分类，然后在那个分类的api里面找，应该就可以快速找到了。然后可以通过 MDN 网站来查找这些api的更加详细的用法和注意事项 通过阅读 《红宝书》 发现红宝书已经对他进行了分类，本文就根据红宝书对这些方法进行了分类。创建数组数组空位注意：由于行为不一致和存在性能隐患，因此实践中要避免
2022-07-04 14:24:40
254
原创 从零开始对接微信支付(H5、JSAPI、小程序)
前言微信支付业务，针对小程序、微信浏览器和非微信浏览器中的网页的三种场景，我们可以分别通过官方提供的 小程序支付、JSAPI支付、H5支付来开发。准备工作开通微信商户号、微信公众号然后按照步骤准备一堆资料审核，然后设置相关配置。所以最好提前准备资料审核以免耽误开发进度。配置的步骤：官方文档，直接按照官方文档配置就行了。需要特别注意的是配置商户号的支付授权目录和公众号的授权域名必须一致，不然会调起支付失败的！参考资料：JSAPI支付配置文档H5支付配置文档小程序支付JS-SDKH5 支
2022-05-17 14:56:27
1696
原创 laydate时间段选择控件
<input type="text" id='starttime' autocomplete="off" placeholder="开始时间" name='startTime' style="width: 120px;" class="form-control"/>~ <input type="text" id='endtime' autocomplete="off" placeholder="结束时间" name='endTime' ...
2020-05-18 00:27:18
793
原创 文字溢出显示指定行数，超出的显示省略号
属性：-webkit-line-clamp: 2; 表示显示两行， 根据自己需要显示的行数显示注意：height: fit-content;高度一定要刚好是显示文字的高度，需要固定高度，推荐fit-content, height: fit-content; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-box-pack: center; overflow: hidd
2020-05-17 01:28:29
326
原创 自定义radio（单选框）丶picker（下拉列表）样式
一.自定义radio（单选框）思路：先修改小程序自带的radio控件样式，让radio不占位置且隐藏起来，然后自己写样式和处理事件修改小程序自带的radio控件样式，让radio不占位置且隐藏起来/* radio未选中时样式 */radio .wx-radio-input { position: absolute; visibility: hidden; height: 0; width: 0;}/* 选中时的状态 */radio .wx-radio-input.wx-r
2020-05-17 01:10:24
840
原创 封装request方法
1.小程序封装requst请求在utils文件夹新建文件utils.js,封装代码如下：var sendRequest = function (url, method, data = {}, header = {} ) {//在传入的 header 加入 token 信息，这样就不再需要在每个 wx.request 中写重复的代码了 header['token'] = wx.token; // header.Authorization = wx.getStorageSync('token')
2020-05-17 00:35:55
1366
原创 js验证文件格式（图片丶视频）
function checkFile(fileValue,type) { console.log("fileValue==" + fileValue); var index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位 fileValueSuffix = fileValue.substring(...
2020-05-17 00:09:44
4375
原创 完美解决微信小程序scroll-view高度自适应机型宽度的问题
1.在onReady()中执行计算方法 设置scrll-view高度思路：计算实际高度=窗口高度（wx.getSystemInfoSync().windowHeight）- 不滑动界面的高度var obj = wx.createSelectorQuery(); obj.selectAll('.head,.bottom').boundingClientRect(function(re...
2020-05-10 23:24:52
805
原创 9.transition
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。资料来自黑马教程。image.pngimage.png...
2020-04-11 19:50:47
100
原创 8.before和after伪元素
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。默认是inline元素！默认是inline元素！默认是inline元素！重要的事说三遍！！！...
2020-04-11 18:24:18
111
原创 7.字体图标
一、字体图标的优点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药...二、字体图标的使用方法（重点）UI人员制作成svg格式的文件，然后我们去IcoMoon上把svg转格式使用步骤：https://blog.csdn....
2020-04-11 15:39:51
152
原创 6.实现页面上下分区效果(div盒子自动撑开边框带)阴影
重点代码（可以让div盒子自动撑开并且四周都有阴影以便实现页面上下布局）： min-width: 200px; max-width: 100%; min-height: 400px; max-height: 100%;1.先看实现的效果：当内容在一屏的范围内显示的效果图:页面上下分...
2020-03-31 22:49:39
395
原创 5、css精灵技术（背景图片）
一、背景：当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。二、精灵技术的使用CSS...
2020-03-30 16:10:08
401
原创 4、css定位(position)
一、 四种定位的总结定位模式是否脱标占有位置是否可以边偏移移动基准位置静态(static）否正常模式不可以正常模式相对定位(relative)不脱离标准流，占有位置可以相对自身位置移动绝对定位(absolute)完全脱离标准流，不占有位置可以相对父亲位置移动固定定位(fixed)完全脱离标准流可以相对浏览器位置移动二、各种定...
2020-03-30 09:03:29
81
原创 3、css3盒子阴影
文字可添加阴影，块盒子也可以添加阴影效果语法格式：box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影；1498467567011.png前两个属性是必须写的。其余的可以省略。默认是外阴影 (outset) ，但是不能写默认，内阴影 inset 可以写实例代码： h1{ font...
2020-03-27 00:03:59
92
原创 1、css3新增属性box-sizing:
css3新增属性box-sizing:可以改变盒子模型1.计算盒子大小公式：盒子的总宽度= width+左右padding+左右border盒子的总高度= width+上下padding+上下border做个测试:给两个div盒子加同样大小的padding和border，并给两个盒子不同的背景颜色(background-color)颜色加以区分 <div>conte...
2020-03-26 17:25:18
185
原创 2、相邻块元素垂直外边距的合并(塌陷)
image.pngimage.png可以看到里面的div margin被合并了有两种解决方案：1.给外面的div加个border: 1px red solid;image.png2.给父元素添加overflow: hidden;属性image.png...
2020-03-26 15:56:59
529
原创 html5新增标签-datalist
<input type="text" placeholder="明星" list="star" /><datalist id="star"> <option value="张学友">张学友</option> <option value="张杰">张杰</option> <option value="张三丰"...
2020-03-23 15:24:48
217
原创 lable标签的正确使用
lable标签为input元素定义标注(标签)用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点一.如何绑定元素呢？直接在要绑定的元素外套一个lable标签通过lable 标签的for属性与被绑定元素的id属性来关联 <label for="sex">男</label> <input type="radio" nam...
2020-03-23 14:50:53
587
原创 开始时间-结束时间控件bootstrap-datetimepicker
本人用的是bootstrap-datetimepicker插件一.引入相关资源 <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="...
2020-03-20 11:03:46
415
原创 解决github开源项目下载速度慢方法
1.步骤：把github项目导入到码云仓库再用码云的shh地址clone在本地修改配置文件关联到github方便代码提交到github2.具体实现把github项目导入到码云仓库image.png用码云的shh地址clone在本地修改配置文件关联到github方便代码提交到github1.png...
2020-03-08 12:57:10
193
原创 如何读一本书
标题讲究TIPS原则tool：工具性idea：理念性practicability：实用性scientific：科学性如何选书？看书的作用看出版社看作者的背景（教授、科学家经过很多年的研究写出来的书）书的参考文献（参考文献往往是很高的学术高度）看内容本身（看读书的选材、文笔等）如何提高阅读速度？多读书、提高理解力的池子（扩大理解池），书中的词语、典故就不会那...
2020-02-11 17:25:07
95
原创 javase基础概念
1.多态多态：父类引用指向子类对象2.包装类拆箱：从包装类对象转换成对应的基本类型装箱：从 基本类型转换成对应的包装类对象自动装箱与自动拆箱：基本类型与包装类型的装箱、拆箱动作可以自动完成。 Integer i = 2;//自动装箱。相当于Integer i = Integer.valueOf(2); i = i + 2;//等号右...
2020-01-17 10:48:51
152
原创 docker常用命令操作
image.pngimage.png1.Docker的基本操作容器操作docker [run|start|stop|restart|kill|rm|pause|unpause]· ps：查看容器列表（默认查看正在运行的容器，-a查看所有容器）· inspect[容器名]：查看容器配置元数据· exec -it [容器名] /bin/bash：进...
2020-01-10 17:00:47
98
原创 linux下安装git并且配置环境变量(centos7)
注意：如果你是centsos 7自带git1.8要自己先yum remove git 删除git1.8,此外去看下/etc/profile.d/git.sh 删干净1.下载gitsudo wget https://www.kernel.org/pub/software/scm/git/git-2.8.0.tar.gz2.安装git所需依赖sudo yum -y install zlib...
2020-01-10 12:02:37
2432
原创 Docker与Dockerfile 容器时区修改
1.在Dockerfile中设置 – 通过Dockerfile：ENV TZ=Asia/ShanghaiRUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezoneimage.png2.在docker容器内设置先加入容器交互模式：docker exec -...
2020-01-09 17:53:39
923
1
原创 docker配置加速器（阿里云，腾讯云，vm虚拟机上）
1.Docker Hub镜像加速器列表image.png图片来源于：https://juejin.im/post/5cd2cf01f265da0374189441vi /etc/docker/daemon.jsonimage.png2.因为阿里云的镜像需要登录，所以就介绍一下阿里云的服务器配置docker加速器image.png...
2020-01-08 11:52:31
794
原创 dockerfile制作tomcat镜像
1.准备需要的文件image.png2.编写Dockerfilevim Dockerfileimage.png3.制作镜像运行build指令（注意最后的.代表当前路径），制作镜像docker build -t supertomcat .查看镜像：docker imagesimage.png然后再运行容器：docker run -d -p...
2020-01-07 18:01:52
128
原创 阿里云docker部署springboot项目（.war方式）
maven打包命令：mvn package -Dmaven.test.skip=true1.先把阿里云服务器8080端口开启image.png2.安装dockersudo yum install docker查看docker版本：docker version或者docker info配置docker加速器：image.png传送门启动dockersu...
2020-01-06 18:05:50
889
3
原创 工作中99%能用到的git命令
分支操作：git branch 创建分支git branch -b 创建并切换到新建的分支上git checkout 切换分支git branch 查看分支列表git branch -v 查看所有分支的最后一次操作git branch -vv 查看当前分支git brabch -b 分支名 origin/分支名 创建远程分支到本地git branch --merged 查看别的分支...
2019-12-30 12:05:33
63
原创 jsp+hibernate+bootstrap实现图片轮播（一次轮播三张）
先用假数据在前端实现轮播图<html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device...
2019-12-29 13:19:17
866
原创 图片上传的实现的各种坑
注意String filePath = request.getSession().getServletContext().getRealPath("/");File dir = new File("filePath ");这段代码的意思：request.getSession().getServletContext() 获取的是Servlet容器对象，相当于tomcat容器了。getRealP...
2019-12-29 12:23:31
739
原创 关于textarea格式的各种坑
textarea只能显示基础的换行和空格。其它的格式就无能为力了!不过一般显示基础的没有图片的文章还是够了;格式化后端的数据：方法一：用js转义方法二：直接在textarea标签里的style里加text-indent:2em属性(方法二更简单)方法一：1.textarea标签和里面的内容一定要在一行<textarea id="description" style="whi...
2019-12-23 09:51:56
834
laydate.rar
2020-05-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人