资料
文章平均质量分 54
南城夏季
一路浅行
展开
-
wujie微前端接入笔记
微前端是一种软件架构模式,旨在将前端应用程序拆分为更小、更独立的部分,这些部分可以独立开发、部署和维护。每个微前端部分代表着一个小型的前端应用,可以由不同的团队独立开发,并且可以独立部署到生产环境中。这种模式使得团队可以更灵活地构建和扩展前端应用,同时降低了应用的复杂性和维护成本。通过微前端,不同团队可以在不同的技术栈下开发各自的前端功能,并将它们组合成一个完整的前端应用。原创 2024-04-19 11:36:12 · 1133 阅读 · 0 评论 -
前端设计模式
不变的部分:算法的使用方式不变,都是根据某个算法取得计算后的工资数额;我们可以把不变的部分和变化的部分拆分开来。变化的部分:算法的实现。原创 2023-12-28 09:59:48 · 639 阅读 · 0 评论 -
前端开发常用网站
1.2.1.2.原创 2023-05-11 09:33:36 · 104 阅读 · 0 评论 -
注册发布自己的npm包
1. 注册npm地址输入账号,密码,邮箱然后去邮箱验证,验证完再继续下面的操作,不验证的话,npm publish会报4032. 创建npm包1.npm init生成package.json文件,里面的name值可以取一个特殊点名字,以免发包的时候包名冲突导致发布不上{ "name": "longweixiahao", "version": "1.0.0", "description": "", "main": "index.js", //注意这里指向我们暴露的入口文件 "原创 2021-12-16 17:24:04 · 1663 阅读 · 0 评论 -
怎么在单独的js文件中使用vuex?
在对应的js文件中引用我们的vuex文件crad.jsimport store from '@/store/index.js'store.dispatch('delComponent', item.id)store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)new Vuex.Store({ state: {} ...})export default store...原创 2021-12-02 15:39:57 · 3320 阅读 · 0 评论 -
vue定义全局方法,全局组件,全局指令,全局过滤器
1.全局方法1-1.创建全局方法文件global.jsexports.install = function(Vue, options) { // 当前时间前7天到今天的时间的【全局方法】 Vue.prototype.$frontDate7 = function() { // $frontDate7就是这个方法的全局方法名--【下面的方法内容可以忽略】 let dateFormat = timestamp => { var date = new Date(timest原创 2021-09-24 18:29:44 · 774 阅读 · 0 评论 -
async,await简单用例
async a(){ const result = await this.b(); // async 返回值会封装成一个promise return result }, async b() { return 1 }, async test() { console.log(this.a()) //async 返回的是一个promise,打印:Promise {<pending>} thi.原创 2021-09-13 10:40:13 · 188 阅读 · 0 评论 -
前端知识体系(5)-html篇
1. html5新增特性?拖拽释放(Drag and drop) API;语义化更好的内容标签(header, nav, footer, aside, article, section);音频、视频API(audio, video);画布(Canvas) API;地理(Geolocation) API;本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;表单控件:calendar、date、time、em原创 2021-05-14 16:39:42 · 225 阅读 · 2 评论 -
vuepress不能热更新怎么解决
修改package.json文件的dev字段,将: "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs", "test": "echo \"Error: no test specified\" && exit 1", "deploy": "bash deploy.sh" },改为以下: "scripts": { "dev": "vuepres原创 2020-11-06 10:42:04 · 2094 阅读 · 2 评论 -
less的常用语法总结和案例
1.变量常用于定义属性值,让我们可以统一维护和修改,减少重复的操作。@brightRed: #FF3163; //定义属性值值的变量// 亮红色.brightRed { color: @brightRed; //使用变量}2.混合多个元素有相同的属性时,可以将公共的属性抽离出来,然后引入。2-1:直接混合.tool-row { //公共样式,add-receiving-address和del-address都拥有的样式 height: 42px;.原创 2020-10-10 12:10:16 · 747 阅读 · 0 评论 -
css 修改输入框激活的边框样式,css样式修改集合
1.输入框激活的边框样式input:focus { border: 1px solid #ddd; outline: none; }原创 2020-09-29 10:54:19 · 4318 阅读 · 0 评论 -
js Number()会改变值的大小
记录个bug问题:由于调用接口,后台需要传递一个数值,为120531784730937088,并且是integer类型,但是前端获取的值为字符串:"120531784730937088"所以要将"120531784730937088"转换为number类型var a = Number("120531784730937088")打印a发现失去精度了,值为120531784730937090原因:js的number类型有个最大值(安全值)。即2的53次方,为9007199..原创 2020-09-04 11:41:24 · 710 阅读 · 0 评论 -
vue响应式详解(重学前端-vue篇1)
1 什么是Vue响应式呢数据发生变化后,会重新对页面渲染,这就是Vue响应式2 想完成这个过程,我们需要做些什么侦测数据的变化收集视图依赖了哪些数据数据变化时,自动“通知”需要更新的视图部分,并进行更新它们对应专业俗语分别是:数据劫持 / 数据代理依赖收集发布订阅模式3 如何侦测数据的变化有两种办法可以侦测到变化:使用Object.defineProperty和ES6的Proxy,这就是进行数据劫持或数据代理。3.1 Object.defineProperty实现原创 2020-07-13 00:04:44 · 658 阅读 · 1 评论 -
服务器的vue项目能用ip外网访问,但是不能用域名访问
修改2个文件:1.修改config\index.js:dev下的host:'0.0.0.0',//canbeoverwrittenbyprocess.env.HOSTport:8080,//2.build\webpack.dev.conf.js:devServer下增加:disableHostCheck:true这时候用ip对应的域名来访问,如:http://www.jianmi.club:8080/#/...原创 2020-07-05 21:12:59 · 1753 阅读 · 0 评论 -
前端知识体系(4)-js手写函数篇
毕业4年了,今年5月20号跟谈了7年的女朋友回老家领了结婚证。谈得确实久了,领证的时候两人都很平淡。结婚证拿到手,我们相视而笑,是的,我们结婚了,7年,幸好没有遇上人们常说的七年之痒。同年毕业的很多对情侣,如今大多各奔东西了。那些说好要走一辈子的人,大多在毕业的时候已经忘记彼此的承若,而那些平平淡淡的反而在一起更长久。15年10月份,我们来到了深圳龙华的一家房地产公司实习,那时候学校来了40多个人,如今还剩下3个,剩者为王,可能说的就是他们。如果他们都在深圳买了房子,是的,毕业4年就在深圳买了房..原创 2020-07-13 00:05:29 · 2127 阅读 · 5 评论 -
vue 显示获取的md文档
由于后台管理系统写的文章是md格式的,有时候需要在后台修改文章,文章保存在数据库中的格式也是md的,因为这样方便文章还原到编辑器;那前端网站要展示这种md的文档时,就涉及到了将md文档转换为html这里用到的是vue-markdown步骤:安装npm install text-loader --save 在webpack.base.config.js中添加 ...原创 2020-04-06 15:18:44 · 1402 阅读 · 2 评论 -
vue + node 实现图片下载功能,服务端图片转base64
vue :重点是创建a标签,指向服务端传回来的base64数据(或者图片网络地址) // 下载 downImg() { this.axios.post("resumes/downImg", { name: "截图1", headers: { "content-type": "multipart/form-data" } })...原创 2020-03-11 22:48:09 · 594 阅读 · 0 评论 -
vue上传图片前本地预览
思路:上传前获取到图片的base64数据,然后绑定到图片的src上<template> <!-- 上传照片 --> <div> <Upload class="writeResumeHeadImg" :show-upload-list="false" :before-upload="handleU...原创 2020-03-05 20:42:35 · 965 阅读 · 1 评论 -
css怎么做一个遮罩层
利用css 的伪元素 ::before即可.jm-theme::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 135px; background: #666; opacity: .2;}...原创 2020-03-01 15:16:59 · 2681 阅读 · 0 评论 -
vue 使用vuedraggable实现拖拽排序功能,及复拖拽后复原的解决
1.安装依赖npmi-Svuedraggable2.引入依赖import vuedraggable from 'vuedraggable';3.注册组件components: {vuedraggable},4.使用 <vuedraggable class="wrapper" v-model="list"> <tra...原创 2020-02-29 11:39:48 · 5390 阅读 · 0 评论 -
判断由对象组成的数组中,是否存在某个属性
JSON.stringify(this.hasSkillList).indexOf(this.customSkiVal)!=-1this.hasSkillList:对象组成的数组 如下:[{ name: "商务", isChecked: false },{ name: "BD拓展", isChecked: false },{ name: "行业分析", isChec...原创 2020-02-16 00:03:11 · 848 阅读 · 0 评论 -
vue 取某个对象的值时提示 Cannot read property '0' of undefined解决
看这张图,浪费了我快半个小时,查看所有数据,打断点,折腾了好久才发现问题所在。MD页面明明渲染正常,但是这个错误一直存在,重启也是这样。先说结论:解决办法是渲染时对每层数据进行判断以下是报错代码:html代码: <h1> <div ...原创 2019-08-19 23:53:31 · 7605 阅读 · 0 评论 -
(业务2)vue懒加载vue-lazyload的使用
需求:为了提高用户的访问的友好性,需求在请求图片时,在图片还没有渲染出来给用户一个默认的图片1.安装vue-lazyload插件 npm i vue-lazyload --save2.在vue 的入口文件引入插件并使用loading: loading图所在的路径try:尝试几次去加载loading3.将图片的src切换成v-lazy效果:...原创 2019-05-24 23:48:42 · 338 阅读 · 0 评论 -
(业务1)vue v-for循环的时候怎么给点击项加上样式
需求:vue循环出来的价格区间表,点击一个价格区间就会筛选相应的商品,同时该区间价格数字会变颜色首先设置一个变量priceChecked,点击当前项时就把当前项的index赋值给priceChecked然后给每一项一个动态的class,如果priceChecked和当前项的index匹配的话,设置cur类名(cur定义了橙色字体),由于上面的赋值操作,点击哪一项哪一项的c...原创 2019-05-24 22:53:02 · 1595 阅读 · 0 评论 -
27岁的中年危机----周记2019/03/05
好久没写博客了,由于入职的是一家做华为项目的公司,公司电脑不能登录和上传数据(有多道监控),下班也比较晚,导致也没什么心思写。 在公司遇到或者学到的新知识及总结都是写在本子上的,一般没有拿回家里。从事前端有2年了,近期有种遇到瓶颈的感觉,没有了刚入行的冲劲和韧性了,有时候遇到不会的也不查资料了,就这样吧。近期家里催结婚,我拿笔算了一下近三年要花的钱,房贷,装修,婚礼,彩礼,车子(车子...原创 2019-03-05 00:44:20 · 208 阅读 · 1 评论 -
vue 在IE浏览器路由携带参数超过限制长度怎么解决
最近在做IE浏览器兼容的时候,发现从前一个页面带的参数过多的话,在IE浏览器里面,是不能正常跳转到下一个页面的。原因是IE浏览器对路由的限制长度为2kb。解决:路由传参时放弃get方式,采用post传参的方式。post方式页面跳转 //由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则par...原创 2018-10-18 14:21:16 · 6416 阅读 · 0 评论 -
HTML5触摸事件(touchstart、touchmove和touchend) (转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一...原创 2018-04-03 22:30:38 · 150 阅读 · 0 评论 -
test和match的用法
test是regExp的方法,参数是字符串,返回值是布尔类型。match是String的方法,参数是正则表达式,返回值是数组。 1 //判断日期类型是否为YYYY-MM-DD格式的类型 2 function IsDate(){ 3 var str = document.getElementById('str').value.trim(); 4 if(...原创 2018-03-28 18:01:13 · 1713 阅读 · 0 评论 -
return true和 return false区别
return true; 返回正确的处理结果。return false;返回错误的处理结果;终止处理;阻止提交表单;阻止执行默认的行为。return;把控制权返回给页面。原创 2018-03-28 17:56:58 · 7684 阅读 · 1 评论 -
onscroll 事件
<div> 元素滚动时执行 JavaScript<div onscroll="myFunction()">定义和用法onscroll 事件在元素滚动条在滚动时触发。提示: 使用 CSS overflow 样式属性来创建元素的滚动条。...原创 2018-04-03 09:48:35 · 933 阅读 · 0 评论 -
c s s 选择器
选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有<p>元素1element,elementdiv,p选择所有<div>元素和<p>元素1element elementdiv p选择<div>元素内的...原创 2018-03-30 13:53:50 · 470 阅读 · 0 评论 -
(业务3)vue 项目中按需引入 iview
1.安装依赖 npm install iview --save2.引入iview(1)全局引入(2)按需引入注意:注意两者的引用方式3.然后在vue文件引入注册的Button组件。由于在第二步把Button注册到vue上了,所以在vue文件可以直接使用,不要引入 了效果:...原创 2019-05-27 23:24:47 · 2465 阅读 · 3 评论 -
vue slot 插槽的简单讲解和示例
插槽其实可以理解是父子组件的传参,或者或动态的占位符,父组件决定插槽的内容,子组件决定插槽的插在何处。1.不具名插槽 即插槽中不用写name去匹配,直接使用(1)在引入的子组件标签中写入要插入的内容(2)在子组件中写一个插槽标签来接收内容效果:2。具名插槽即需要在父组件引入的子组件标签中写入插槽内容,标签中的slot的属性值,会对应子组件sl...原创 2019-05-23 22:34:57 · 949 阅读 · 0 评论 -
2019前端性能优化方案目录
2019前端性能优化方案目录原创 2019-06-28 00:45:34 · 300 阅读 · 0 评论 -
vue 在html使用相对路径无法查看图片
问题:当图片无法显示时,在浏览器控制台中查看图片的url,如:<img data-v-5f28ad28="" src="./img/b-logo.jpg">但鼠标悬浮在src上会显示如下:src="http://localhost:8080/img/b-logo.jpg"解决:将图片放到根目录下的static文件夹下,在vue的webpack配置中可以看...原创 2019-08-10 12:59:34 · 1811 阅读 · 0 评论 -
vue+axios+express+multer 在express使用multer上传和下载图片
1. 安装-----node中npm install multer –save2. 引入,还需要引入node中原生的2个模块(无需安装)-----node中var multer = require('multer');let fs = require("fs");let path = require("path");3. 写接口-----node中//上传接口...原创 2019-08-09 00:14:13 · 1095 阅读 · 0 评论 -
vue 中如何使用html2canvas将DOM转化为图片
1.安装依赖:npminstallhtml2canvas--save2.在vue文件中引入<script>import html2canvas from "html2canvas";3.在html中定义要转换的dom片段,及要图片要挂载的位置<Button type="primary" @click="changeImage">保...原创 2019-08-08 22:20:07 · 1211 阅读 · 0 评论 -
vue-cli构建的工程怎么使用less
使用vu-cli工程构建的工程只要:npm install less less-loader --save然后直接在对应的vue文件的style进行如下配置:<style lang="less" scoped>.ivu-layout-header{background: #fff;}</style>...原创 2019-07-28 17:56:21 · 108 阅读 · 0 评论 -
html2canvas使用中报 Error: Element is not attached to a Document
需要注意的是:绘图要选择的dom元素必须是原生元素,不能使用ui库元素,如用iview中的< Content >就会报错。Error: Element is not attached to a Document。下面代码可以看到,绘图的元素this.$refs.imgTransf指向的是div元素,这样是没有问题的, <img class="co...原创 2019-08-08 22:08:57 · 22871 阅读 · 5 评论 -
iview 的Dropdown 下拉菜单click点击无效
iview的文档是个坑啊!!!!!!点击事件后面要加个修饰符native,如@click.native <Dropdown> <span> 在线制作 <Icon type="ios-arrow-down"></Icon> </span> ...原创 2019-08-03 17:08:40 · 4322 阅读 · 4 评论