- 博客(34)
- 收藏
- 关注
RSS订阅原创 node.js浅尝一下（本来不想学，但是有个面试官嘲讽我没有用过不是好前端）初试
node.js1.安装node，可以根据官网上的操作来一套行云流水2.其实你桌面见一个项目例如node项目，然后再建立一个项目例如hello.js，我们尝试一下看看node执行结束了没有，如果执行结束，那么接下来，我们node hello.js则可以展示出以下...
2022-05-12 17:37:08
250
原创 vue3.0+ts开发完整安装版本（通关秘诀）
VUE3.0首先，你得拥有vue2.0，然后我们在vue2.0的基础上去升级vue3.0，这一块创建3.0有两个方法，我一一记录。第一步：使用脚手架自动生成。//安装或者升级我们的clinpm install -g @vue/cli//这个时候可以查看我的cli的版本vue --version如果我的版本在4.5.0以上呢!就可以直接创建项目，如果不在的话，就需要小可爱们升个级。最后：vue create zhoulaoban-project选择vue 3.0的依赖这里有个注意点，如果
2022-02-18 10:27:04
3487
原创 更新我的vue3.0+ts的道路
安装首先桌面建立一个ts实验包，然后打开powershell的编辑输入,npm init vite-app demo,创建进入到文件夹下面，安装依赖npm install，进入到对应的页面，然后接下来，安装我们的ts，使用npm install typeScript,安装对应的ts安装包，打开项目文件，新建一个tsconfig.json,这个文件主要用来编译项目跟文件和编译选项，，参考的配置可以参考一下，// 配置参考https://www.tslang.cn/docs/handbook/tsconfi
2022-02-16 17:36:18
388
原创 前端的节流
节流是什么？某个时间段，在这个时间段内只触发一次。节流其实就是抢红包，举例子：每次手气红包你点击网不好，好像就卡住了，然后你拼命的点点点，你以为你快了很牛马上超过很多人，其实没有，只触发了一次。而且还是第一次，你点了个寂寞。节流的实现过程根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。之前我们说的防抖就是清除定时器
2021-10-20 17:56:07
430
原创 神策埋点的接入使用方法
神策埋点一.什么是神策埋点？埋点，大实话，就是理解为埋在地里的检测器，检测用户点击的按钮，做的某些操作。并且通过第三方去记录。这里的第三方我们特指神策的用户平台查看数据二.神策埋点模块全局埋点操作步骤：首先会给你两个本地的js文件，我们姑且成为1.js和sensors.js1.js：大概就是神策那边的本地包，我们通过触发本地包然后达成记录功效sensors.js：是我们用来记录埋点的地方的文件一般sensors.js我们会在全局main.js中引入然后去使用这边神策还会给你两个文档关于对接的
2021-10-20 16:21:36
8610
7
原创 前端的防抖和节流的应用场景以及使用
防抖和节流1.什么是防抖防抖：顾明思议，一次只有单一的请求，我们举个例子，例如：喜欢打王者荣耀的朋友都知道，我打王者荣耀好家伙没血了，我要回城，这个时候我点击一次，就开始我的进度条回城，但是中途万一不小心重新点击，那回城就又开始重头算。要是中间突然有个人打你一下，你也回不了城。js中有哪些页面使用场景是关于防抖的呢(第一个经常遇到)：1.登陆，发短信（倒计时），防止用户点击过快，以至于发送多次请求，然后这里不是吐槽后端啊！本人亲测没错登陆接口单击20次，服务器挂了。。。当然这个是老项目。所以我们为了
2021-08-09 10:36:20
1169
原创 记录一下app的开发（内网开发）
app这个项目呢，是一个关于保理的一个项目，首先我先说一下这个内网开发的恶心，首先之前在某东的时候的内网只是说安装软件是有要求，没有密码不给你装，这个跳槽之后的某软也是，用的自己的内部网落，开发，然后安装完成之后连内网才能提交东西，对外网还不给连接的权限。和使用的机会。现在菜的抠脚的我，决心开始记录现在的一个开发的流程。...
2021-07-22 17:34:10
1229
原创 开始记录一下小程序的开发（uniapp）
这里是一个第三方的开发原生的咱也不会啊！！！！今天开始入手小程序的开发，小程序+HBuildx的开发，首先使用的是蓝色的，不对绿色的开发软件，下载完毕之后，就是要安装小程序的插件，再hbuildx里面安装，安装比较重要的就是小城的预编译，你可以选择sass和less，还有一些小程序的内核插件的安装，装的八九不离十，然后我们再去把新建项目，至于要安装些什么具体看下一个文章，，，这里只是开个头。。我最近接手了一个小程序的开发，着实也好烦，因为不想做。。...
2021-05-24 09:27:22
101
原创 菜鸡必看的项目开发流程
项目昨天和一个后端交流，基本将一个项目改做的设置做了一个分析：首先是将项目创建好，不要急着写项目页面，而是，将页面公共组件进行一个分装，分装好的页面，进行一个二次封装，然后分析页面，将页面拆成一个个的模块，最后再接上接口，完成页面的布局，进行测试，联调，如果当项目已经开发完成，就i要开始进行打包首先要知道前端的打包也是静态的一个打包//有这样几个命令，打包时候会用到npm run build//生成一个dist文件通常我们可以借助第三方腾讯云里对象存储，第一次的话需要的是，配置文件，但是后期
2021-05-11 10:08:46
106
原创 token能做什么
tokentoken，是一个令牌，就好像你开门时候的钥匙。有的人才能进，没有的人就进不去1.用户登录后，服务器会通过一定算法，把用户的信息加密成一个字符串，并返回给到前端2.前端需要将token的字段存到本地，下次请求的时候携带。这一步呢就是根据接口文档来写，token值一般都是动态设置的在api/user.js里面去封装请求的方法。 //在这里去获取用户的身份信息 export const getUserInfo=()=>{ return http({ me
2021-05-08 15:35:43
357
原创 style和scoped的区别（经常被问）
style和scoped的区别一.langlang是用来约定当前的语言来写什么样式。这里区别对待三个第一，css原生的<style></style>第二，less预编译css,先写less，再转换成为css，<style lang="less"></style>第三，sass预编译css，先写sass，再转换成为css, <style lang="sass"></style>scoped作用域如果设置了这一项，则当
2021-05-08 13:37:42
1160
原创 作为一个前端必须学的封装
封装为什么要封装？1.接口请求可能要复用，实际工作中接口也容易发生变动，代码写到后面越来越多，冗余的也会越多，后米娜如果一旦发生改变，对于我们的代码是极其不友好的，现在解决的唯一方法，就是将请求分装到api里面去。接下来就是一个请求的简单分装首先文件夹里面新键一个文件夹，src/api/user.js,封装请求登录的方法。//封装用户的相关操作// 这里是基于原先的axios存在了request里面这里在把接口做一个封装import http from '@/utils/request.j
2021-05-08 11:46:30
481
原创 补充两个知识点（关于登录的时候会涉及到的）
正则校验（可以查阅官方文档）验证的字段有：required：内容验证是否为非空，pattern正则表达式，例如手机的格式，校验的邮箱格式，range使用min和max属于定义范围，对于字符串和数组类型，根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max。记得不要忘记使用prop传值自定义校验：支持一个函数，进行自定义校验的配置：rules:{...agree:[{validator:校验函数，提高个人："change"} ]}//这里我完整的写一个自定义的校验。作
2021-05-08 11:21:20
167
原创 项目的路由配置
项目的路由配置（login登录页）首先在views文件下面新建页面，命名为login.vue,随意输入进行一个测试页面，然后点击router文件夹，对index.js进行配置。import Vue from 'vue'import VueRouter from 'vue-router'import Login from '../views/login.vue'Vue.use(VueRouter)//这里就是配置的登录页面进行操作const routes = [ { path: '
2021-05-08 09:30:37
422
2
原创 项目的流程配置（三）
项目的流程（续）之前的项目的话，我已经搭建好了文件夹，以及清理接下来的重点，就是页面的路由问题，和简单的封装。一. 最简单的封装这里新建的utils封装方法的，这里是最简单的封装，将axios，封装称自己的request请求然后进行发送请求。// 如果你不做这个封装当然也是可以直接使用，就直接使用axiosimport axios from 'axios'const request = axios.create({ //基准地址 baseURL:"这里是一个基准地址(http
2021-05-07 18:08:38
127
原创 vue项目的创建（二）
vue项目的创建（续）首先确保你的powershell,安装成功，其次是，要了解powershell和cmd的区别，cmd只是执行对应的代码命令，但是powershell是面向对象的，这就意味着功能更加强大，基于.net去开发的，所以还是装一个powershell比较ok,准确来说就是powershell能做的，cmd,不能做，cmd不能做的，powershell还可以一.搭建项目安装好powershell之后，就开始，编辑命令行，按住shift+右键，打开命令面板，接下去就是创建新的项目。//创建
2021-05-07 14:40:20
240
原创 vue2.0项目的创建以及知识点（一）
一. 如何自学vue开发（PC和移动端）首先准备好一台电脑，其次能用。。。。。好的开始，首先从安装开始，我们需要准备一下软件：谷歌浏览器，PS（用来切图）也可以使用fireWorks，编辑器可以使用两种，一个是webStrom或者是VScode。接下去就是给对应的编辑器安装对应的辅助插件例如：中文（chinese），这一块按自己的需求去看是否需要安装。前提：你已经具备写html和css3的语法，一些简单的浮动定位，以及布局方式都需要去了解，在了解的基础上开始做项目，当然还需要了解ajax请求。二.
2021-05-07 11:13:05
165
原创 今天是整理项目的一天（虽然也修改了bug）
代码的世界就是很多bug今天想整理的是，如果当需求以及接口的数据发生变化，原来的数据发生也变化，前端如何快速的解决，找到对应的接口，打印查看增加了哪些字段值，模板渲染一下就可以看到了。然后对接口里的数据进行操作。。...
2021-04-13 14:16:40
65
原创 v-for的使用
v-for举一个例子：做成点击下拉框的效果，首先发送请求拿到对应的数据。其次使用v-for,循环遍历出数据。循环这个li<li v-for="(item,index)in list" :key="index.message"> 里面是循环的内容</li>计算属性将list分割成为两个列表得出一个列表，需要将一个数组切割出来。这样写computed:{listSH(){ return this.list.slice(0,26)}，listQG(){retur
2021-03-25 11:20:11
223
原创 :class绑定样式的使用
：class绑定的是样式例子：：class="[item.isShow?'go':'aa']"data（）{ isShow:false }go和aa里面分别写上一开始的样式，当item.ishow有值得时候 进入的是样式判断如果这个值为true，就做动画也是可以的
2021-03-25 10:41:22
363
原创 创建项目的大坑（空格）
谁能想到女开发在这里晕倒在我运行项目的时候，突然发现，10:9 error Newline required at end of file but not found eol-last这个错误真的绝了，找了老半天踩踩如何解决eslink的坑，是因为最后export default router这里一定要给个回车空出一行规范代码，从你做起，否则码农两行泪...
2021-03-24 15:30:27
39
原创 我只知用来记录某个瞬间
遇到Eslink和格式化问题冲突的时候，应该怎么解决1.新建两个文件.eslintrc.js和.prettierrc2.在文件.prettierrc中，添加这样一段代码{“semi”: false,“singleQuote”: true,“printWidth”: 200}3.在文件.eslintrc.js,添加这样一段代码module.exports = {root: true,env: {node: true},extends: [‘plugin:vue/essentia
2021-03-24 15:08:07
51
原创 2021-02-25
时间戳问题1.获取当前日期如何操作：当点击的时候就需要处理时间，获取当前的时间，和某个时间对比，这里对比的时间表格里面的时间。代码如下： var date=new date(); this.date=date.getFullYear()+ "-"+`${date.getMonth()+1}`+ '-'date.getDate()+ '-'date.getHours()+
2021-02-25 15:04:33
49
原创 2021-02-10
多页面开发的注意点第一周（欢迎大家补充）一、菜鸡重构一个项目并且是多页面开发用vue去开发？项目情况：刚刚拿到这个项目是用jq和原生js去写的，公司给了一天的时间，熟悉代码，我基本就看了三个点：第一，就是接口（注：公司没有接口文档，因为项目是个老项目）算是混合开发吧，第二：之前的页面逻辑以及ui图，第三个：看之前封装的东西，看看有没有可以复用。二、第一天安装各种代码和包由于是内网开发，确实诸多不便，我的vscode没有插件，由于之前一直使用语法校验eslink，导致我依赖用它来寻找错误
2021-02-10 11:52:26
79
原创 h5的新增哪些特性
1.语义化标签：header Nav section article aside footer2.多媒体标签：video audio3.表单控件：number search email tel date file time url4.本地离线存储localStorgae长期储存数据，改变浏览器不会丢失，sessionionStorage浏览器关闭数据会丢失5.自定义属性data6.画布canvas7.拖拽（Drap and Drap）API ondrop8.新的技术文本 webworker9
2020-11-27 09:41:58
900
原创 什么是重绘和重排
重排：重排: 当DOM元素影响了元素的几何属性（例如宽和高），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。重绘: 完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为“重绘”。当我们改变DOM的大小，增加删除都会导致重排，当给DOM元素改变颜色的时候，会导致重绘，重排一定会重绘，重绘不会重排。重排会影响性能，所以我们尽快能的减少重排的操作下面是我个人的解释，更加通俗重
2020-11-26 16:45:39
3344
1
原创 flex常用的属性
flex常用的容器属性flex-direction：设置容量的主轴方向flex-warp：项目在主轴方向是否换行显示justify-content：设置容器中的项目在主轴上的对齐方式align-items:单行项目在侧周上的排列方式align-content：多行项目侧首上的对齐方式flex-flow:是flex-direction和flex-wrap的合写，默认值为row，nowrap....
2020-11-26 16:22:18
81
原创 px,em,rem的区别
px,em,rem的区别px是固定单位，em是相对单位，相当于当前文字的大小，如果没有就找父元素，rem相对于html的fontsize的大小，
2020-11-26 16:16:34
63
原创 css的优先级
css的优先级（重要）这里经常会作为面试的问你这些问题：css选择符有哪些，哪些属性可以继承，优先级算法如何计算？内联合important哪个优先级高？所以我们需要了解其中原理：首先，我们要知道优先级的排序！important>行内样式>id选择器>类，属性，伪类选择器>伪元素、标签选择器>通配符选择器可以继承的样式：font-size，font-family，color，ul，li,dd,dt.不可以继承的样式：border padding margin widt
2020-11-26 16:04:37
62
原创 三角形用css如何写一个
用css如何写一个三角形div {width: 0;height: 0;border: 20px solid transparent;border-width: 40px 20px 0 0;border-right-color: #f99;}代码如上
2020-11-26 15:50:10
55
原创 如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中第一个方法：我们使用定位给父元素positon：relative，定位到中间div{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}注释：子绝父相（子元素绝对定位，父元素相对定位）第二个方法：通过flex布局div {display: flex;justify-content:center; //子元素水平居中（主轴）align-items:center
2020-11-26 15:47:46
1509
原创 盒子塌陷的原因？解决方法
导致塌陷的主谋----浮动原因一：浮动的脱落标准流原因二：嵌套的两个盒子，子盒子设置margin-top会导致父盒子一下子下移解决方法第一：清除浮动第二：给父盒子加高度第三：给父元素添加overflow：hidden针对原因一：1.可以给父元素加上边框2.可以给父元素添加overflow:hidden...
2020-11-26 15:11:42
2311
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人