- 博客(101)
- 收藏
- 关注
RSS订阅原创 cookie实现用户登录
案例说明用户访问一个网站时，第一次访问会记录该用户的登录信息，下次该用户访问同一个网站就不需要重新登录了，通过验证后就可以访问该网站的内容。保存用户登录信息的方式有很多种：直接将用户名和密码保存在cookie中，下次用户访问的时候对比cookie中的用户名和密码与数据库中的信息是否一致，但是这种方式不安全。将用户密码加密后保存在cookie中， 下次用户访问时，将该信息解密后再与数据库中的信息进行对比验证。将用户账号与访问时间戳，验证时只需要验证用户账号和时间戳即可。以上方法，用户每次访问该
2020-08-21 16:32:25
5369
原创 前端理解CDN
什么是CDN内容分发网络（Content delivery network或Content distribution network，缩写：CDN）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN服务商将源站的资源缓存到遍布全国的高性能加速节点上，当用户访问相应的业务资源时，用户会被调度至最接近的节点，最近的节点ip返回给用户，使内容能够传输的更快，更加稳定。可
2020-07-22 14:49:47
3230
原创 Vue+elementUI时间选择器的应用
DatePicker 日期选择器日期选择器基本用法可参照官网的案例，这里记录一下精确到日的一个需求的相关实现。需求说明：设置一个日期范围选择功能，默认显示近一个月的用户数据，不能选择当天。需要注意的点：虽然显示的是某一天，但是我们需要注意一种情况，举个例子：默认显示的是近一个月的用户数据，以今天2020.7.21为例，日期范围选择器上显示的就是2020.6.20~2020.7.20，页面上显示的数据是否包含6.20和7.20的数据呢？以用户的角度来说，应该是包含的，那么我们在向后端请求数据的时候，就需
2020-07-21 16:47:30
2872
1
原创 Vue公共组件的封装
Vue组件的三要素1. props参数2. slot定制插槽3. event自定义事件基本组件开发创建一个.vue文件，其中包含template、script以及style：<template> <div class="headComponent"> {{{ msg }} </div></template><script>export default { props:['data','type'],
2020-07-20 16:08:33
23399
3
原创 Javascript处理时间
一、区分几个时间相关的概念标准时间：GMT即「格林威治标准时间」(Greenwich Mean Time，简称G.M.T.)，由于地球的不规则自转，导致GMT时间有误差，因此目前已不被当作标准时间使用。UTC：UTC是最主要的世界时间标准。时间表示形式：Unix时间戳：前时间到1970年1月1日00:00:00 UTC对应的秒数JS中的时间戳：当前时间到1970年1月1日00:00:00 UTC对应的毫秒数...
2020-07-17 20:03:48
305
原创 vue+elementUI 显示表格指定列合计数据
明确需求下图来自elementUI官网根据合计行数据的来源可以分为两种情况：接口返回的数据只有表格中对应每个ID的数据，最后一行的合计是由前端来计算的表格中的合计行数据是从接口中返回的，不是由前端计算的，只需要将拿到的数据显示即可对于第一种情况，elementUI官网就有案例。在开发中遇到了第二种情况，来记录一下处理方案：1、明确返回数据结构以上述表格为例：res: { memberInfo: [ { ID: 123456, '姓名'：'王小虎', '数值1'
2020-07-16 17:23:35
10723
4
原创 windows下安装nodejs多版本管理工具nvm-windows
前言作为进入猪场一个月的实习生，刚被安排接需求还是感觉很幸福的，当前的需求会涉及到7个不同的后台管理系统，这与目前在熟悉的跨境系统存在较大差异，会需要多个不同的node版本，这种情况下，安装nodejs多版本管理工具是很有必要的，版本切换也很方便。但是，nvm是Linux下常用的一个nodejs多版本管理工具，不能再Windows使用，Google就找到了nvm-windows，这是GitHub上的一个可以让我们在Windows下对nodejs进行多版本管理的项目，地址是：https://github.
2020-07-03 11:40:04
767
原创 DOM事件理解
DOM事件级别分类DOM0级、DOM2级、DOM3级事件。DOM0级事件2步：1、先找到DOM节点2、把处理函数赋值给该节点对象的事件属性eg：<div id="box"></div><script> var box = document.getElementById('box') box.onclick = function () { console.log("1") } </script>
2020-06-15 11:58:13
273
原创 深拷贝与浅拷贝深入理解
1. 什么是深拷贝？什么是浅拷贝？不管是深拷贝还是浅拷贝，都是针对引用类型的。通俗的理解就是，深拷贝得到的对象不会受被拷贝对象影响，浅拷贝得到的对象与被拷贝对象之间相互影响。2. 深拷贝的实现方式一：手动深拷贝let school = { name: "milly" }let my = { age: { count: 18 }, name: "xy" }let newMy = { ...my, age: { ...my.age } }let all = { ...school, ...ne
2020-05-31 23:04:51
232
原创 JS-深入理解继承（非class方式与class继承）
从一个面试题目入手： 如何实现一个类？1. 类的三种属性：公有属性：使用__proto__访问的属性私有属性: 实例自带的属性静态方法 （es7中有了静态属性）2. 利用构造函数的方式模拟类// 父类function Parent() { // 构造函数中的this， 通过new调用的，那么this指代的是实例 // 私有属性 this.name = 'parent'}// 公有Parent.prototype.eat = function () {
2020-05-30 16:35:19
257
原创 牛客网刷题 --- 输入输出数据处理
正确处理输入输出格式常见的输入格式：预先不输入数据的组数 — 直接读到文件结尾预先输入数据的组数 — 读数据组数然后循环只有一组数据 — 直接读数据处理输出格式要注意细节，看题目的具体要求不要输出case数要输出case数每个case之间有空格每个case之后有空格具体的，在牛客网的刷题系统中，输入数据用readline()，输出结果用print() 或cons...
2020-04-22 22:43:45
2570
原创 eslint检测时报错
配置是这样的：安装的依赖："devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.0", "autoprefixer": "^9.7.5", "babel-core": "^6.26.3", "babel-eslint": "^10.1.0", "babel...
2020-04-04 22:02:32
4865
原创 06-用两个栈实现队列
题目：用两个栈来实现一个队列，完成队列的Push和Pop操作。 队列中的元素为int类型。第一次提交： 部分案例没通过，代码是这样的：// 创建两个栈var stackOne = [];var stackTwo = [];function push(node){ // write code here // 入栈 stackOne.push(node); ...
2020-03-30 14:28:03
110
原创 05-重建二叉树
题目：输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。首先，需要熟悉二叉树三种遍历方式的遍历过程：前序遍历：1.访问根节点2.前序遍历左子树3.前序遍历右子树中序遍历：1.中序遍历左子树2.访问...
2020-03-30 13:35:47
102
原创 04-Fibonacci
题目： 大家都知道斐波那契数列，现在要求输入一个整数n，请你输出斐波那契数列的第n项（从0开始，第0项为0）。n<=39根据题意，这个斐波那契数列应该是这样的: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, …]首先想到的方法是递归：function Fibonacci(n) { // write code here if (n < 2) {...
2020-03-30 00:05:38
119
原创 03-从尾到头打印链表
题目： 输入一个链表，按链表从尾到头的顺序返回一个ArrayList。第一次提交： （失败）代码是这样的：/*function ListNode(x){ this.val = x; this.next = null;}*/function printListFromTailToHead(head){ // write code here // 思路： 反...
2020-03-29 23:47:08
90
原创 02-替换空格
题目：请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。第一次提交：function replaceSpace(str){ // write code here // 思路： 使用str的replace方法结合正则 return str && s...
2020-03-29 22:29:17
76
原创 01-二维数组中的查找
刷题来源：牛客网的 剑指offer题目：在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。第一次提交：function Find(target, array){ // write code here // 思路: 循环嵌套进行遍历实现...
2020-03-29 22:23:14
105
原创 JS之继承方式
1. 原型链继承基本思路：利用原型让一个引用类型继承另一个引用类型的属性和方法。原型链继承的基本模式：function Parent() { // 超类构造函数 this.name = "xiaoming"; this.age = 18;}// 在原型上添加方法Parent.prototype.sayParentName = function () { c...
2020-03-25 14:47:40
100
原创 跨域
什么是跨域？由于浏览器端的同源策略限制所得来同源策略： “同源"指的是"三个相同”。协议相同、域名相同、端口相同。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是...
2020-03-21 22:21:02
106
原创 Ajax请求的步骤
1. ajax-get方式的请求步骤：// 1. 创建异步对象var xhr = new XMLHttpRequest();// 2. 设置 请求行 open(请求方式，请求url):xhr.open("get","test.php?username="+name);// 3. 设置请求（GET方式忽略此步骤）头// 4. 设置请求体 send() , get的参数在url拼接了，所以...
2020-03-21 14:13:08
173
原创 使用函数自调用实现将局部变量转换成全局变量
自调用函数或者叫立即执行函数—是一个一次性函数，声明的时候直接调用，页面加载后， 这个自调用函数的代码就执行完毕了。 (function (形参) { var num=10; // 局部变量 })(实参); console.log(num); // 报错局部变量变成全局变量的方法： 把局部变量给window就可以了 (function (win) { ...
2020-03-19 23:52:31
900
原创 DNS域名解析
DNS基本理论知识什么是DNS？DNS( Domain Name System)是“域名系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。DNS协议：DNS协议是用来将域名转换为IP地址的（也可以将IP地址转换为相应的域名地址）。ARP协议是用来将IP地址转换为MAC地址。DN...
2020-03-18 14:08:05
195
原创 HTTP状态码及含义
2XX （请求成功）表示成功处理了请求的状态代码200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。201 （已创建） 请求成功并且服务器创建了新的资源。202 （已接受） 服务器已接受请求，但尚未处理。203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。204 （无内容） 服务器成功处理了请求，但没有...
2020-03-17 23:44:06
100
转载 Git使用中报错fatal: The current branch master has no upstream branch.解决方案
在push代码时，出现“git master branch has no upstream branch”问题的原因是没有将本地的分支与远程仓库的分支进行关联。如下图所示：具体原因： 出现这种情况主要是由于远程仓库太多，且分支较多。在默认情况下，git push时一般会上传到origin下的master分支上，然而当repository和branch过多，而又没有设置关联时，git就会产生疑问...
2020-03-17 17:27:42
35023
1
原创 移动web-触摸事件touch
touch事件touch是移动端的触摸事件，而且是一组事件，比如：touchstart：当手指触摸屏幕的时候就触发touchmove：当手指在屏幕中来回滑动的时候触发touchend：当手指离开屏幕的时候触发touchcancel： 当被迫终止滑动的时候触发。（比如：来电，有消息弹出）利用touch相关事件实现移动端常见滑动事件和移动端常见的手势事件。touch的使用绑定事件...
2020-03-16 23:32:56
248
原创 移动web的适配问题
1. 适配问题移动设备屏幕尺寸不一样，不同型号的手机会有不同大小的屏幕，不同型号的平板也是，就算是我们的PC端也是会有不同大小的屏幕。将在PC端写好的饿页面直接拿到移动端去显示会是怎样的？默认不会出现滚动条，但是会出现缩放。解决方案：在《京东商城》移动站中用的是百分比自适应布局，也就是流式布局。同时，需要对移动端的viewport视口进行设置，就会达到适配的目的。2. 流式布局流式布局就...
2020-03-15 20:29:27
210
原创 使用正则表达式实现将浮点数点左边的数每三位添加一个逗号
题目： 如何将一个浮点数点左边的数每三位添加一个逗号。（使用正则表达式的方式实现）。function toMoney(num) { return num && num .toString() .replace(/(\d)(?=(\d{3})+\.)/g, function ($1, $2, $3) { console.lo...
2020-03-15 00:04:25
955
原创 JS中的内置对象 --- Math、Date、Array、String
1. 基本概念区分实例对象：通过构造函数创建出来，实例化对象。实例方法必须通过实例对象调用静态对象（内置对象）： 不需要创建， 直接就是一个对象，方法（静态方法）直接通过这个对象名调用。静态方法必须通过大写的对象调用。比如： var arr=new Array(1,2,3); // 实例化一个数组 arr.forEach(); // 通过实例对象arr来调用它的方法，...
2020-03-13 23:30:40
344
原创 判断用户输入的这个数是不是质数
判断一个数n是不是质数的思路： 从2开始的，将这个数从2到 n-1 除一遍，如果能除进，就说明不是质数，如果它的因式只有1和它本身，那就说明这是一个质数。声明一个函数： 判断用户输入的这个数是不是质数。 function primeNumber(num) { for (var i = 2; i < num; i++) { if (...
2020-03-13 16:36:38
751
原创 JS中的基本数据类型与引用数据类型
JS中的数据类型可以这样分类：原始数据类型： number, string ,boolean, undefined, null, object基本类型（简单类型），值类型： number，string，boolean， 空类型：null，undefined复杂类型（引用类型）：object基本数据类型JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boo...
2020-03-13 15:30:37
642
原创 JS基础04之对象
理解对象编程思想：把一些生活中做事的经验融入到程序中面向过程： 凡事都要亲力亲为，每件事的具体过程都要知道，注重的是过程面向对象：根据需求来找对象，所有的是都用对象来做，注重的是结果面向对象的特性： 封装，继承，多态（抽象性）js不是面向对象的语言，但是可以模拟面向对象的思想，js是一门基于对象的语言。！！！万物皆对象！！！理解什么是对象看得见，摸得到，！！！具体特指...
2020-03-13 11:46:15
157
原创 关于toString()与toLocaleString()的区别
引入今天在跟小伙伴讨论如何将一个数字num=123123123转换成金额对应的格式123,123,123的时候，学会了两种思路，先记录一下：我写的代码这样的：（把函数写死了，很挫，只能实现当前的要求，，，）function addD(num) { var sp = num.toString().split(""); for (var i = 0; i < sp.leng...
2020-03-13 09:36:36
420
原创 去哪儿-22-async-components
目标：学习Vue中异步组件的使用首先看，webpack打包生成的dist目录中包含的内容：有一个index.html文件，这个就是前端代码的入口的html文件；有一个static目录。里面会有一个css文件夹，css.map文件目的是帮助我们调试被压缩过的css代码，方便在开发的时候调试的使用，真正在线上有用的文件是这个css文件，里面是我们所有页面要用到的css，还有个js目录，有用的有3个文...
2020-03-13 08:26:40
91
原创 去哪儿-21-debuggiing-testing
目标： Vue项目的接口联调，真机测试与webpack打包上线1. Vue项目的接口联调之前我们在写代码的时候，使用的ajax数据都不是从后端返回的真实数据，而是我们自己通过接口mock模拟的假数据。当前端的代码已经编写完毕，后端的接口已经写好的时候，就需要把前端模拟的数据去掉，去尝试使用后端提供的数据，进行前后端的一个调试，这个过程就是前后端的联调。将mock当中的数据切换成后端提供的真实...
2020-03-13 08:25:29
119
原创 去哪儿-20-detail-animation
目标： 在项目中添加一个基础动画效果当点击详情页的图片轮播组件时，希望它能够显示出渐隐渐现的效果。创建一个公共的渐隐渐现的组件src/common/fade/FadeAnimation.vue，并搭建基础框架。单个组件的动画写法：<transition> <slot></slot></transition>其中slot是外部...
2020-03-13 08:24:55
105
原创 去哪儿-19-detail-ajax
目标： 使用ajax获取详情页面的数据数据形式：{ "ret": true, "data": { "sightName": "迪士尼小镇", "bannerImg": "http://img1.qunarzz.com/sight/p0/1707/82/821428e3bbf93bbaa3.water.jpg_600x330_2385695d.jpg", "gal...
2020-03-12 14:07:14
226
原创 去哪儿-18-detail-list
目标：使用递归组件实现详情页列表的开发准备阶段： 创建分支detail-list，创建组件List.vue，组件引入。第一层列表的实现：基本布局是：<div class="item"> <div class="item-title border-bottom"> <span class="item-title-icon">&l...
2020-03-12 14:06:38
608
原创 去哪儿-17-detail-header
目标： 实现详情页中header渐隐渐现效果当进入详情页的时候，详情页的左上角有一个返回的按钮，向下拉详情页的时候，返回箭头会慢慢消失，取而代之的是一个蓝色的header。创建Header.vue组件，完成基本的框架构建与引入操作返回箭头的基本布局与样式美化：<div> <div class="header-abs"> <div c...
2020-03-12 14:02:48
249
原创 去哪儿-16-detail-banner
目标： 完成详情页的开发当点击首页的热销推荐中的某一项，可以进入它对应的详情页。按照原来的思路，我们可以直接在li标签外面包裹一层<router-link to="/detail"></router-link>。 还是同样的问题，它会默认转换成一个a标签，里面的文字颜色就会被更改。在这里，我们换一种方式：直接将li变成router-link，然后再添加一个指示为li的...
2020-03-12 09:16:29
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人