奔跑的太阳花

2020年7月16日

摘要： flexible 主要是用来响应式改变根元素的字体大小安装命令 npm install lib-flexible --save 在main.js里面导入命令import 'lib-flexible' 要把index.html里面的<meta name='viewport'>标签删除;因为会自动添加阅读全文

posted @ 2020-07-16 14:13 奔跑的太阳花阅读(856) 评论(0) 推荐(0) 编辑

vue实现动态改变title

摘要：想要实现vue动态改变页面title，需要给每个页面设置标题。并且在路由发生变化时修改页面title router - index.js const router = new Router({ mode: 'history', routes: [ { path: '/index', name: 'i 阅读全文

posted @ 2020-07-16 11:16 奔跑的太阳花阅读(1822) 评论(0) 推荐(0) 编辑

2020年7月15日

css文字超出显示省略号

摘要：单行： white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行： word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webki 阅读全文

posted @ 2020-07-15 17:06 奔跑的太阳花阅读(148) 评论(0) 推荐(0) 编辑

2020年7月9日

浅谈服务端渲染(SSR)

摘要：最近在把一个c端的项目重构成首屏服务端渲染（SSR：server side render）项目用到的技术： React 、webpack、koa2、webpack 对于重构成SSR，redux并不是必须的，所以没用redux 本篇文章先讲述一些理论的东西，之后会写代码篇一、什么是服务端渲染简阅读全文

posted @ 2020-07-09 10:46 奔跑的太阳花阅读(346) 评论(0) 推荐(0) 编辑

2020年7月6日

Vue-cli3 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

摘要：在vue.config.js里添加 configureWebpack : { performance: { hints:'warning', //入口起点的最大体积整数类型（以字节为单位） maxEntrypointSize: 50000000, //生成文件的最大体积整数类型（以字节为单位阅读全文

posted @ 2020-07-06 14:01 奔跑的太阳花阅读(3780) 评论(0) 推荐(0) 编辑

2020年7月3日

javascript保留两位小数的几种实现

摘要：一、四舍五入以下处理结果会四舍五入: var num =2.446242342; num = num.toFixed(2); // 输出结果为 2.45 二、不四舍五入以下处理结果不会四舍五入。第一种，先把小数变整数： Math.floor(15.7784514000 * 100) / 100 阅读全文

posted @ 2020-07-03 10:19 奔跑的太阳花阅读(362) 评论(0) 推荐(0) 编辑

2020年6月30日

JavaScript 判断对象中是否有某属性

摘要：判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。一、点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值阅读全文

posted @ 2020-06-30 16:41 奔跑的太阳花阅读(2420) 评论(2) 推荐(0) 编辑

2020年6月28日

前端总结数据结构与算法基础

摘要：翻书问题或者走台阶问题。问：共有n个台阶，每次只能上1个台阶或者2个台阶，共有多少种方法爬完台阶？共有n页书，每次只能翻1页或者2页书，共有多少种方法翻完全书？ ps：本质上是斐波那契数列问题。假设只有一个台阶，则只有一种跳法，f(1)=1；如果两个台阶，那么有两种跳法：1,一次跳一级，2,一次跳阅读全文

posted @ 2020-06-28 16:09 奔跑的太阳花阅读(343) 评论(0) 推荐(0) 编辑

2020年5月31日

Vue-Cli 3.0 中配置高德地图的两种方式

摘要： vue 中使用高德地图有两种方式一、vue-amap 组件官网： https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的，但是尝试之后存在些问题，所以就放弃了，可能是我的使用方式不对。我所遇到的问题： 1. 安装之后使用，始终提示跨域问阅读全文

posted @ 2020-05-31 13:11 奔跑的太阳花阅读(1483) 评论(0) 推荐(0) 编辑

2020年5月28日

element-ui table 点击某行高亮（修改背景色）

摘要：（免费分享，点个赞再走呗）在el-table标签中添加highlight-current-row <el-table highlight-current-row > 在style 里面设置全局样式： /* 用来设置当前页面element全局table 选中某行时的背景色*/ .el-table__ 阅读全文

posted @ 2020-05-28 14:43 奔跑的太阳花阅读(13098) 评论(1) 推荐(3) 编辑

2020年5月25日

input type="file"获取文件名方法

摘要： <div class="file-box"> <form id="uploadForm"> <input type="text" id="textfield" class="txt" /> <input type="button" class="btn" value="浏览..." /> <inpu 阅读全文

posted @ 2020-05-25 16:12 奔跑的太阳花阅读(3423) 评论(0) 推荐(0) 编辑

2020年5月15日

使用 http-proxy-middleware 做转发, post 请求转发失败

摘要： nodejs 服务器在之前使用了 bodyParser 把 body 的数据解析出来，以供处理。但是后来有些接口需要转发到其他的域名对应的服务器，不想在前端写死，就在 nodejs 服务上引用了 http-proxy-middleware 做代理转发。get 请求的时候没什么问题，但是 post 阅读全文

posted @ 2020-05-15 16:09 奔跑的太阳花阅读(3430) 评论(0) 推荐(0) 编辑

2020年5月13日

core-js@2 core-js@3报错问题

摘要： WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is pas 阅读全文

posted @ 2020-05-13 09:23 奔跑的太阳花阅读(3544) 评论(0) 推荐(0) 编辑

2020年4月15日

VUE判断当前设备是PC还是移动端

摘要：实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是PC还是移动，要求PC端和移动端显示的是不同的网页内容。那么我们就需要对当前登录设备进行判断。使用 navigator.userAgent 字符串检测我是在PC端开发完接到要做移动端的需求，而且移动端只有一个页面，我就统一放在了一个阅读全文

posted @ 2020-04-15 16:54 奔跑的太阳花阅读(3612) 评论(0) 推荐(0) 编辑

2020年4月8日

Vue函数式组件简单实现

摘要： html: <div id="root"> <smart :items=items></smart> </div> js: <script> let EmptyList = 'p'; let TableList = 'ul'; let OrderedList = 'ul'; let Unordere 阅读全文

posted @ 2020-04-08 17:22 奔跑的太阳花阅读(865) 评论(0) 推荐(0) 编辑

在Vue中使用 JSX

摘要：前言前排警告，这不是玩具！那、还能是啥呢起因最近看到好多在Vue中使用JSX的文章，作为目前最受欢迎的MVVM框架，其实不学习还是有些对不住自己的。但是无奈太喜欢React，所以在Vue中能使用JSX还是能勾起很多人的好奇心的。我就是，还有么简单Demo对于vue-cli3和4创建的Vue工阅读全文

posted @ 2020-04-08 14:26 奔跑的太阳花阅读(2428) 评论(0) 推荐(0) 编辑

2020年4月4日

清明节哀悼日网页变黑白色的CSS代码

摘要：清明节、哀悼日的网站想变成黑白色的，一段代码即可完成代码： html { -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(1 阅读全文

posted @ 2020-04-04 11:12 奔跑的太阳花阅读(1466) 评论(0) 推荐(0) 编辑

2020年4月2日

Vue实现递归menu

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #app{ width: 300px; overflow: hidden; } .item{ margin-left: 30px; /* padding-le 阅读全文

posted @ 2020-04-02 16:26 奔跑的太阳花阅读(509) 评论(0) 推荐(0) 编辑

2020年3月30日

解决message: "Navigating to current location ("/homePage") is not allowed",警告的问题

摘要：错误代码： NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/index") is not al 阅读全文

posted @ 2020-03-30 14:29 奔跑的太阳花阅读(3908) 评论(0) 推荐(1) 编辑

2020年3月25日

HTML attribute 与 DOM property 的对比

摘要：要想理解 Angular 绑定如何工作，重点是搞清 HTML attribute 和 DOM property 之间的区别。 attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。少量 HTML attribute 和阅读全文

posted @ 2020-03-25 14:25 奔跑的太阳花阅读(247) 评论(0) 推荐(0) 编辑

2020年3月24日

JavaScript中的迭代器与循环

摘要：引言：本文涉及内容包括： forEach方法 for-in方法 for-of方法 eval（）方法 map（）方法今天来总结一下，JS中我们常见的循环方式与迭代器，深入了解他们之间的区别，及适合的使用场景。最早的数组遍历方式 var a = ["a", "b", "c"]; for(var i 阅读全文

posted @ 2020-03-24 16:23 奔跑的太阳花阅读(1335) 评论(0) 推荐(0) 编辑

2020年1月31日

总结了一下 Vue.nextTick() 的原理和用途

摘要：对于 Vue.nextTick 方法，自己有些疑惑。在查询了各种资料后，总结了一下其原理和用途，如有错误，请不吝赐教。概览官方文档说明：用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。疑问： DOM 更新循环是指什么？下次更新循环阅读全文

posted @ 2020-01-31 23:46 奔跑的太阳花阅读(1913) 评论(0) 推荐(0) 编辑

2020年1月30日

ES6之Array.from()方法

摘要： Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 1、将类数组对象转换为真正数组： 1 2 3 4 5 6 7 8 9 let arrayLike = { 0: 'tom', 1 阅读全文

posted @ 2020-01-30 15:59 奔跑的太阳花阅读(234) 评论(0) 推荐(0) 编辑

为什么 NodeList 不是数组？

摘要： //5.element.childNodes 返回元素的一个子节点的数组<br> console.log(document.body.childNodes); // NodeList。 NodeList 对象在某些方面和数组非常相似，看上去可以直接使用从 Array.prototype 上继承的方法阅读全文

posted @ 2020-01-30 15:31 奔跑的太阳花阅读(486) 评论(0) 推荐(0) 编辑

2020年1月26日

H5拖动事件复习

摘要：定义和用法 ondrag 事件在元素或者选取的文本被拖动时触发。拖放是 HTML5 中非常常见的功能。更多信息可以查看我们 HTML 教程中的 HTML5 拖放。注意：为了让元素可拖动，需要使用 HTML5 draggable 属性。提示：链接和图片默认是可拖动的，不需要 draggab 阅读全文

posted @ 2020-01-26 16:04 奔跑的太阳花阅读(304) 评论(0) 推荐(0) 编辑

2020年1月7日

Element表单验证规则

摘要：一、简单的逻辑验证使用方法：方法步骤： 1、在html中给el-form增加 :rules="rules" 2、html中在el-form-item 中增加属性 prop="名称" 3、js中直接在data中定义rules:{} 在html中的写法： <el-form ref="formData" 阅读全文

posted @ 2020-01-07 19:27 奔跑的太阳花阅读(1751) 评论(0) 推荐(1) 编辑

2020年1月3日

自己实现一个 Vue框架，包含了Vue的核心原理

摘要： Vue工作机制 vue工作机制 Vue响应式的原理依赖收集与追踪编译compile html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <!-- 插值阅读全文

posted @ 2020-01-03 18:32 奔跑的太阳花阅读(1425) 评论(0) 推荐(2) 编辑

2020年1月2日

ES6之Array.from()方法

摘要： Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 1、将类数组对象转换为真正数组： 1 2 3 4 5 6 7 8 9 let arrayLike = { 0: 'tom', 1 阅读全文

posted @ 2020-01-02 14:54 奔跑的太阳花阅读(478) 评论(0) 推荐(0) 编辑

2019年12月4日

导出HTML5 Canvas图片并上传服务器功能

摘要：这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下导出HTML5 Canvas图片，并上传服务器最近接触的项目中，经常遇到需要canva 阅读全文

posted @ 2019-12-04 10:42 奔跑的太阳花阅读(3113) 评论(0) 推荐(0) 编辑

2019年12月3日

解决 canvas 下载含图片的画布时的报错

摘要： Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported 1：背景最近在做一个图片内容识别的项目，采用的是阿里巴巴的付费接口。大阅读全文

posted @ 2019-12-03 18:37 奔跑的太阳花阅读(874) 评论(0) 推荐(0) 编辑

2019年11月30日

vue动画实现方式

摘要： vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="animate.css"> <style> * { margin: 0; padding: 阅读全文

posted @ 2019-11-30 17:00 奔跑的太阳花阅读(1074) 评论(0) 推荐(0) 编辑

vue组件定义方式，vue父子组件间的传值

摘要： vue组件定义方式，vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <my-nav></my-nav> <hr> <my-nav2> 阅读全文

posted @ 2019-11-30 16:15 奔跑的太阳花阅读(688) 评论(0) 推荐(0) 编辑

2019年11月26日

Vue自定义指令使用方法详解和使用场景

摘要： Vue自定义指令的使用，具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下： Vue.directive(id, definition) 传入的两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数钩子函数一个指令定义对象可以提供如下几个钩子函阅读全文

posted @ 2019-11-26 19:15 奔跑的太阳花阅读(4513) 评论(0) 推荐(0) 编辑

node 连接 mysql 数据库三种方法------笔记

摘要：一、mysql库文档：https://github.com/mysqljs/mysql mysql有三种创建连接方式 1.createConnection 使用时需要对连接的创建、断开进行管理 2.createPool 创建资源池，使用时不需要对连接的创建、断开进行管理，每次使用完调用一次rele 阅读全文

posted @ 2019-11-26 12:34 奔跑的太阳花阅读(697) 评论(0) 推荐(0) 编辑

2019年11月22日

VSCode中代码在浏览器中打开及实时刷新

摘要：实时刷新方法一：在项目目录下运行命令： browser-sync start --server --files "**/*.css,**/*.html,**/*.js" 实施刷新方法二：装Live Server Preview插件，点击F1。阅读全文

posted @ 2019-11-22 10:16 奔跑的太阳花阅读(8338) 评论(0) 推荐(0) 编辑

2019年11月20日

webUploader的使用

摘要： webUploader的使用记录 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, an 阅读全文

posted @ 2019-11-20 15:29 奔跑的太阳花阅读(3229) 评论(0) 推荐(0) 编辑

consolidate.js 一个Node.js 模板引擎的集合

摘要： consolidate是一个模板引擎的结合体。包括了常用的jade和ejs。通过配置我们就可以使用多种模板引擎。 consolidate.js安装 npm install consolidate consolidate.js使用 //引入 const consolidate = require("c 阅读全文

posted @ 2019-11-20 15:16 奔跑的太阳花阅读(856) 评论(0) 推荐(0) 编辑

2019年11月19日

js 根据url 下载图片前端js 实现文件下载

摘要： 1.H5 download属性 function downFile(content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.s 阅读全文

posted @ 2019-11-19 17:37 奔跑的太阳花阅读(7339) 评论(0) 推荐(0) 编辑

FormData使用方法详解，以及在IE9环境下，前端的文件上传问题

摘要： FormData的主要用途有两个： 1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 2、异步上传文件一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=ne 阅读全文

posted @ 2019-11-19 15:16 奔跑的太阳花阅读(3668) 评论(0) 推荐(0) 编辑

2019年11月16日

Node 之 Express 4x 骨架详解

摘要：周末，没事就来公司加班继续研究一下Express ，这也许也是单身狗的生活吧。 1、目录结构： bin, 存放启动项目的脚本文件 node_modules, 项目所有依赖的库，以及存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹阅读全文

posted @ 2019-11-16 14:37 奔跑的太阳花阅读(299) 评论(0) 推荐(0) 编辑

奔跑的太阳花

业精于勤，荒于嬉；形成于思，毁于随

公告