web开发
怎样过不是过
做就对了,其他都是☁️
展开
-
熟悉 import 和 import {} 和export const 和 export default 和 export { default as } 等等的使用
这些是属于ES6的用法,作用是导入导出,可以导出变量、函数、对象,可以导入变量、函数、对象、文件总是有点混乱,这次就详细的整理下这几个导入导出的区别和具体的使用1、最简单 导出一个变量这是index.js文件export const hh = 123;export const h1 = 111;这是index.vue文件import wwJS from "./importexport.js" ❌打印: wwJS undefined 连文件里的代码都不直接返...原创 2022-05-16 17:10:58 · 1483 阅读 · 0 评论 -
在原有项目中使用eslint的demo以及基础的rules配置
项目:vue cli3框架 、nuxt官方文档:List of available rules - ESLint中文一:在原有的项目中引入eslint你可以使用 npm 安装 ESLint:$ npm install eslint --save-dev紧接着你应该设置一个配置文件:$ ./node_modules/.bin/eslint --init之后会生成下面这个文件 会生成这个文件 .eslintrc.js.eslintrc.js 文件如下module....原创 2022-02-22 14:20:04 · 1671 阅读 · 0 评论 -
vue中.render的使用,element-ui里el-table组件动态渲染,jsx语法
难易程度 最易⭐️ 难⭐️⭐️⭐️⭐️⭐️一:demo的使用:方式一:(⭐️正常写死)<h3>方式一</h3> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄">&l...原创 2022-02-10 13:32:58 · 8668 阅读 · 5 评论 -
OSS 图片水印使用,以及如何针对markdown上传的图片做批量水印添加
一:几个dome的入门熟悉下:h0: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图片.jpg?x-oss-process=image/watermark,image_b25saW5lL3dhdGVybWFyay96aDEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfOTA=",h1: "https://zydmall-test.oss-cn-shenzhen.aliyuncs.com/我的图原创 2022-02-08 15:39:30 · 1426 阅读 · 0 评论 -
vue框架cli3和cli4配置axios接口请求+代理
1、cnpm i axios --save2、新建js文件 src/utils/axois/index.jsimport axios from 'axios';import apiConfig from "./api.js";import Vue from 'vue'axios.defaults.baseURL = "/api"; let service = axios.create({ timeout: 60000, headers: { ...原创 2021-07-22 09:43:06 · 377 阅读 · 0 评论 -
第一次学习typescript的基础笔记(1)
首先先建一个页Runbood.ts (Tips: 是以.ts)然后就可以直接在里面写,会有各种写法错误时候的提示,可以直接把我写的文件复制过去 就会看到有想过的错误提示了// 任意类型 let hht: any = 1; hht = 'I am who I am'; hht = false; let arrayList: any[] = [1, false, 'fine'];// 字符串的使用let myname: string = "Runoob";let ...原创 2021-06-01 05:40:11 · 329 阅读 · 0 评论 -
《node.js + webpack实战》书籍 —— 学习笔记一
第一章:基础知识基于chrome v8的引擎js运行环境简单的说Node.js就是运行在服务端的JavaScript。第三章:node编程基础什么是后端的node,什么是前端的node?三\1 npm安装依赖的使用npm inpm i -g 全局npm i --save-dev 开发依赖 小范围的安装在devDependenciesnpm i --save 生产依赖 Dependencies 大范围的npm run 执行package.json里script定义的命令...原创 2021-05-06 21:52:10 · 235 阅读 · 0 评论 -
nuxt seo项目配置请求和具体使用示例,服务端请求携带cookie/客户端携带cookie,使用中间件,配axios的header
????问题:清除服务端接口cookie 获取cookie nuxt添加cookie nuxt的middleware添加cookie值得参考的文:https://blog.csdn.net/Py1807A/article/details/105380224https://www.jianshu.com/p/d16919f01288https://www.jianshu.com/p/95fbd8d7d2fenuxt.config.jsrouter: { middleware: 'a...原创 2021-04-26 16:50:06 · 849 阅读 · 0 评论 -
nuxt项目点击跳转没问题,但刷新页面会出现接口错误aysncData, Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afte
问题:nuxt正常点击跳转没问题。但是刷新页面会出现接口错误。asyncData 没有使用async asyncData方法去请求后台地址刷新页面就没问题,如果使用了该方法去请求后台刷新页面就报上面的异常。排查一:然后我就打印下error,发现是出现错误是Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect[此时运行的访问链接还是http://localhost:3000/]然后我排查二:搜索Erro.原创 2021-04-22 13:07:20 · 2597 阅读 · 0 评论 -
在nuxt中使用swiper 整理和报错解决
在nuxt中使用swiper1、安装npm install swiper vue-awesome-swiper --save (swiper是必须要vue-awesome-swiper是为了使用vue的写法)2、在plugins目录下新建文件swiper.jsimport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// import 'swiper/css/swiper.css'; //使用...原创 2021-04-15 15:17:09 · 2113 阅读 · 0 评论 -
nginx 的mac本地配置踩坑、样式渲染不出来、运行一个html+vue.js的项目
一:搜索的关键词是 mac安装nginx这篇文章写的关于nginx本地的使用不错,解决了我安装使用的所有问题https://blog.csdn.net/zz00008888/article/details/109114904cd ../ ../ 到/目录下 然后定位到cd一(2)发现问题:[warn] the "user" directive makes sense only if the master process runs with super-user privileges...原创 2021-04-09 09:55:54 · 577 阅读 · 0 评论 -
vue项目 添加全局水印或某个指定页面水印 源码
vue项目的页面添加水印,效果如图index.vueimport watermark from "./watermark";mounted() { watermark.set('我是水印啦');},destroyed() { watermark.set(''); //为了清除页面返回时,其它页面也有水印},watermark.jslet watermark = {} let setWatermark = (str) => { let id = '..原创 2021-03-29 17:01:05 · 1444 阅读 · 5 评论 -
3天一个小型活动到上线的逻辑和源码,使用到vue-cli3、vue、vue-router、vant-ui、微信sdk
最近半个月都好忙,连着4、5个活动,都没啥自己的时间了,今天整理下其中一个比较小的活动代码吧包含的功能点:(进入正题,下面这个花了大概3天的时间包括项目切分支新建、ui样式还原、接口对接、测试、测试bug修改、上线)技术栈:vue、vue-router、vant-ui、微信sdk,还引入了flexible.js和pxtorem字体大小自适应<这块代码没列出来>一全局:分享功能、百度统计二首页:距离截止日期倒计时、若是已经申请的话从首页自动跳审核页、点申请跳申请页三申请页:表单必填原创 2021-03-23 11:12:45 · 174 阅读 · 0 评论 -
使用轻量级的vue小项目不需要用到vuex状态管理,通过install方法定义全局的变量、函数
一:state.js (在vue项目中新建一个文件libs,然后创建一些全局的需要用到文件,例如router.js common.js state.js)import Vue from 'vue';import common from "./common"; // 可以根据情况引入需要的import Api from './api.js'; // 可以根据情况引入需要的import axios from "axios"; // 可以根据情况引入需要的 Vue.use(Api) ...原创 2021-03-02 11:00:55 · 600 阅读 · 0 评论 -
用一个个小例子解释:什么是原型?什么是原型链?什么是原型继承?一篇文章让你搞懂原型和原型链
转载自:葡萄城技术团队原创 https://www.cnblogs.com/powertoolsteam/p/14009110.html真的超赞,简洁明了转载 2021-02-27 18:17:32 · 233 阅读 · 0 评论 -
pc端基于element-ui的文件上传,移动端Vue项目用plupload直传阿里云oss,图片上传后再合成动态海报
基于element-ui的文件上传功能<el-upload class="upload-demo" :before-upload="beforeUpload" drag action multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>...原创 2021-02-27 10:32:27 · 696 阅读 · 1 评论 -
直播间赠送礼物动效、选礼物列表、赠送数量,礼物连发排队处理,Vue项目
1、可以选择送的是礼物列表的哪一个、可以选择送的数量x1x2x32、礼物做了排队展示的处理,可以解决礼物连续发送、监听到别人发送礼物接口数据回调的排队问题,不会冲刷掉礼物动效下面是一个完整的送礼物动效页,可以直接copy到vue项目运行打开<template> <div> <div class="test_box" v-if="giftAnimation"> <img v-if="showGiftList.length"...原创 2021-02-27 09:51:34 · 2885 阅读 · 1 评论 -
web前端学会使用图片轮播
内容是转自http://www.cnblogs.com/goody9807/archive/2006/11/06/551964.html怎样过不是过 : 20170211 内容的目标: web前端学会使用图片轮播 面向的对象:刚刚学习轮播图的同学学习的步骤:@初级1 . 先学会单纯鼠标点击图片,进行切换 @初级2 . 随时间图片轮流切换,不处理鼠标事件 ..(未完 正在一边学原创 2017-02-12 17:05:25 · 3096 阅读 · 0 评论 -
git操作:如何使用git命令回滚到某个指定分支,以及新开一个分支,又回滚回来最新的分支
需求:如何使用git命令回滚到某个指定分支,以及新开一个分支,又回滚回来最新的分支0、准备开始操作版本号1、git log 获取曾经提交过的版本2、git reset --hard 8b***18 切换到指定的这个8b***18版本号 <拓展 git reset --hard HEAD^ 适用于返回一个版本的情况 >3、git checkout -b dev 在8b***18这个版本号下切换一个新的分支 (然后提交git push origin dev到远程分...原创 2021-02-19 18:22:17 · 1437 阅读 · 0 评论 -
原生javascript基础知识的回顾初版
1、输出 document.write(); 写入到html里 document.getElementById("id").innerHTML = ''; 写入到某个元素里2、语句 for..in.. 对数组 或 对象的属性 做循环 throw 抛出异常 break 跳出循环3、变量 局部变量 eg: function hh() { var name = "xl"; } 的name为局部变量,即使用的是var 变量 start-》被声明时开始 |..原创 2021-02-18 17:31:42 · 132 阅读 · 0 评论 -
yarn的安装和失败问题解决、nuxt的单页head的使用方式两种写法
我又来了,哈哈哈新建一个nuxt项目的步骤重新温习一遍吧,差不多忘记了【】看到用的新的技能点yarn来安装项目和依赖,所以我打算看下yarn要如何使用yarn的好处是为了弥补npm的一些缺陷而出现的。 《目的:善用包管理工具npm 和 yarn 》【】mac的软件包管理工具Homebrew,查看我的homebrew的版本号,安装包 brew install yarn ???? 最开始就遇到这个问题,一直停留在updating Homebrew ,错误方式一:直接关闭b...原创 2021-02-18 16:23:17 · 694 阅读 · 0 评论 -
vue的搭建1、创建 2、引入vue-router 3、vant+sass+axios+js-md5 4、引入common+过滤5、引入pxtorem+flexible字体兼容 6、引入全局变量和函数
第一步:创建vue项目的几种方式哈哈,我还是找到了最简单的一种方式 vue create hhh 然后 npm run serve 哈哈 就是这么简单第二步:引入路由 vue-router### 1、cnpm i vue-router --save### 2、app.vue<div id="app"> <!-- 路由出口 路由匹配的组件渲染的位置 --> <router-view></router-view> <...原创 2021-01-24 21:24:54 · 190 阅读 · 0 评论 -
利器——钉钉提供的内网穿透工具
原始链接:https://github.com/mzlogin/ding-tunnelHTTP 穿透 下载工具 git clone https://github.com/open-dingtalk/pierced.git 执行命令./ding -config=./ding.cfg -subdomain=域名前缀 端口。 以 Mac 为例: cd mac_64chmod 777 ./ding./ding -config=./ding.cfg -subdomain=..原创 2020-11-23 09:48:47 · 772 阅读 · 0 评论 -
微信中“下单账号和支付账号不一致,请核实后再支付”原因及解决办法 hideMenuItems 复制链接
如果你出现了如下问题,且你的需求是需要保留分享的功能,但是不想用户支付出现这个问题,那么如下方案可以解决例如:原始A链接 http://***/index.html?activityId=5&staffId=503880用户进入后授权登录后 就会授权后的B链接 http://***/index.html?activityId=5&staffId=503880&code=071R8ZZv3iSXIU221Y2w3Hd6Ia1R8ZZ6&state=..原创 2020-11-11 10:15:04 · 12235 阅读 · 0 评论 -
转盘活动的一些积累素材
转盘具备要求:1、需要选择第一次后,第二次可以无缝衔接,没有明显需要恢复到原位置再旋转的bug2、转速要先快后慢,体验感好的过渡,而不是慢起慢停3、有字有图片demo0.这是体验,我觉得不错的,https://www.99cankao.com/numbers/spin-to-win.php#topAnchor优点: 可以动态插入更多的选项电子书,缺点是没代码1、https://hehaibao.github.io/lottery2/index.html2、http.原创 2020-11-24 09:43:59 · 114 阅读 · 0 评论 -
yapi的搭建内网部署 和 外网部署 以及bug的修复
# 前置条件一:确保环境是满足要求的 确保 node 版本=> 7.6,请运行 node -v 查看版本号 确保 mongodb 版本 => 2.6,请运行 mongo --version 查看版本号 确保安装了 npm, 运行 npm -v 查看版本号 确保安装了 git,运行 git --version 查看版本号 ### 前置条件二:官网安装方式第一种:全局安装yapi-cli1、sudo npm install -g yapi-cli --re原创 2020-07-17 10:56:14 · 1187 阅读 · 0 评论 -
es6数组的方法示例整理 push、pop、unshift、shift、concat、splice、join、filter、some
示例:arr = [1, 2, 3] 通过各种方法看原数组和等于的值的变化原创 2020-01-14 21:08:05 · 3135 阅读 · 0 评论 -
es6模块化基础知识点
1、为何需要模块化: 因为随着前端的代码复杂度越来越高,代码之间会容易有这三个问题(全局变量冲突、函数命名冲突、依赖关系混乱)2、模块化规范的进阶历史 commonJS 、 AMD 、 CMD 到现在的 es6模块3、最初最简单的模块化源码(jquery大量使用的也是这种方式) var module_special = ( function() {...原创 2020-01-08 15:44:53 · 206 阅读 · 0 评论 -
nuxt项目搭建(最基础简单款)
一: npx create-nuxt-app <name> 进行一系列配置二:运行项目 npm run dev三:打开浏览器访问http://localhost:3000/,看到这个出来数据就是已经构建好一个项目了拓展一:看下项目的目录四:实际开发拉,例如:我新开一个文件test,写入代码到index.vue中,浏览器访问的路由...原创 2020-01-08 11:42:53 · 537 阅读 · 0 评论 -
jquery面试常问的一些方法整理
获取元素 $(‘#id') $(‘.calss') $(‘[href]') $(‘p:first') 获取内容 $().tex() $().html() $().val() ...原创 2020-01-07 16:11:45 · 128 阅读 · 0 评论 -
git使用整理:pull、提交、切换分支 、合并merge、解决冲突、删除本地远程分支、撤销
一:git的使用:然后介绍下Git基础命令的含义;clone 克隆远程仓库init 初始化仓库remote 连接远程仓库pull 从远程仓库下拉获取新数据push 将本地仓库新增或修改文件上传到远程仓库add 添加文件或者修改文件,commit以及push之前使用log 当前仓库提交过的日志信息status 当前仓库版本状态commit 提交到当前仓库中...原创 2019-06-15 18:14:27 · 938 阅读 · 0 评论 -
事件冒泡,捕获的理解 阻止事件冒泡方法 事件流
一:捕获event.stopprogaration() 方法 阻止事件冒泡,但是会发生默认事件event.preventDefault();方法 阻止默认事件,但会发生事件冒泡 return false; 两种一起操作=阻止事件冒泡+阻止默认事件举栗子~_~点击a,但是不想他的父元素div受到影响$("a").click(function(event){ event.stopproga...原创 2018-06-30 12:01:22 · 657 阅读 · 0 评论 -
什么是CSS盒模型 IE盒模型和W3C盒模型
看到一篇不错的文章 就转载过来了 说得全面 https://www.cnblogs.com/ylliap/p/6119740.html点击打开链接阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀。盒模型是网页布局的基...转载 2018-06-30 12:13:36 · 2861 阅读 · 0 评论 -
Array数组对象 push unshift concat map splice sort
原创 2019-05-09 18:53:11 · 172 阅读 · 0 评论 -
前端面试 两分钟自我介绍
你好,我是xxx,x x年6月毕业于xxx,专业是xxx。我的前端兴趣来源于大学期间参加了xxx大会,在会议上认识很多厉害的大牛,看到很炫酷的css特效,颠覆了我对前端只是网页的概念,因此确定了职业方向。我在上家公司主要职责是对公司产品xxx的模块开发、项目的优化和维护,因为算是一个中型的项目,涉及到的只是框架有x x x 、x xx、vue技术栈,我从最初进去辅助他们开发和维护项目,到后面独...原创 2019-05-10 15:18:07 · 79522 阅读 · 3 评论