- 博客(211)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 Vue组件通信原理剖析（三）provide/inject原理分析
首先我们先从一个面试题入手。面试官问： “Vue中组件通信的常用方式有哪些？”我答：1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问：“那你能分别说说他们的原理吗？”我：[一脸懵逼]????在介绍provide和inject之前我们先简单看看其他几个常用属性。$pare
2020-12-10 14:55:17
1543
1
原创 Vue组件通信原理剖析（二）全局状态管理Vuex
首先我们先从一个面试题入手。面试官问： “Vue中组件通信的常用方式有哪些？”我答：1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问：“那你能分别说说他们的原理吗？”我：[一脸懵逼]????今天我们来看看Vuex内部的奥秘！如果要看别的属性请移步vuexVuex集中
2020-12-10 14:48:11
501
原创 Vue组件通信原理剖析（一）事件总线的基石 $on和$emit
首先我们先从一个面试题入手。面试官问： “Vue中组件通信的常用方式有哪些？”我答：1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问：“那你能分别说说他们的原理吗？”我：[一脸懵逼]????下面我们就来一一看看他们内部的奥秘！props解决问题：父给子传值// ch
2020-12-10 14:42:41
1300
原创 弄懂webpack，只要看这一片就够了（文末有福利）
什么是webpack webpack是什么，官网中是这么说的。 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 从上面的概念中，我们可以看出webpack是一个会把应用程序中具有依赖关系的每个模块打包成一个或者多个bundle
2020-11-19 10:04:58
1001
1
原创 Echart 5.0+版本报错Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“
首先第一步需要检查echarts的导入方式，在5.0以后的版本，echarts做了比较大的调整，在vue中引入时必须使用如下命令 // import echarts from 'echarts' 这种方式高版本不支持 import * as echarts from 'echarts' vue.prototype.$echarts = echarts其次在结合vue-echarts使用时才可以使用如下命令添加渐变color: new this.$echarts.graphic.LinearGra
2021-09-30 09:42:58
5273
3
原创 Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮
准备的资源：highlight.js ： 实现代码高亮，通过npm install highlight.js -D安装vue-markdown-loader：解析md文件的必备loader，通过npm install vue-markdown-loader -D安装下面我们分两个场景来说明一下md文件的解析Webpack在项目根目录下创建build/webpack.config.js// 在webpack.config.js中添加规则{ test: /\.md$/, lo
2020-12-14 19:29:24
1045
转载 Validform使用入门
Validform使用入门1、引入css请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中（文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的）。之前发现有部分网友把整个style.css都引用在了页面里，然后发现样式冲突了。2、引入js （jquery 1.4.3 以上版本都可以） 1 2 <script type="t..
2020-11-12 18:49:46
236
转载 WEB文件上传之apache common upload使用（一）
文件上传一个经常用到的功能，它有许多中实现的方案。页面表单 + RFC1897规范 + http协议上传页面控件(flash/html5/activeX/applet) + RFC1897规范 + http协议上传页面控件(flash/html5/activeX/applet) + 自定义数据规范 + http协议上传页面控件(flash/html5/activeX/applet) + FTP协议上传页面控件(flash/html5/activeX/applet) + 自定义协议.
2020-11-12 18:49:35
412
转载 WEB文件上传之JQuery ajaxfileupload插件使用（二）
1.JQuery ajaxfileupload插件使用准备下载地址：http://www.phpletter.com/DOWNLOAD/2.原理分析ajaxfileupload也是利用iframe实现无刷新异步提交，与我的上一篇文章（WEB文件上传之apache common upload使用（一））中对iframe使用的方式有些不同。ajaxfileupload是通过监听iframe的onload方法来实现， 当从服务端处理完成后，就触发iframe的onload事件调用其绑定的方法.
2020-11-12 18:49:25
130
转载 原生JS写Ajax的请求函数
本文主要介绍了如何通过原生JavaScript封装ajax请求，文中给出了具体的实现代码和详细的解释，希望对你有所帮助。一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象； ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据； 下面简单封装一个函数，之后稍作解释 ajax({ url: "./TestXHR.aspx", //请..
2020-11-12 18:49:12
183
转载 Iframe的那些事
在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素js在父窗口中获取iframe中的元素1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();2、格.
2020-11-12 18:49:00
225
转载 前端攻略系列(二) - 前端各种面试题
幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。 事先声明：这些题目的来源：面试曾经被问过；工作被别人问过或者遇见过；网上看见过... 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我
2020-11-11 14:31:59
154
转载 【Web】JavaWeb项目为什么我们要放弃jsp？为什么要前后端解耦？为什么要前后端分离？2.0版，为分布式架构打基础。 - CSDN博客
前戏前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。（名词解释：在互联网架构中，we...
2020-11-11 14:31:40
221
转载 《浅谈架构之路：前后端分离模式》 - 山人行 - 博客园
前言：分离模式 对前后端分离研究了一段时间，恰逢公司有一个大项目决定尝试使用前后端分离模式进行，便参与其中。该项目从2016年初立项至今，平平稳稳得度过，但也涌现出越来越多的问题，绝对不是说前后端分离模式不好，而是很多公司在尝试前后端分离的时候没有做好充分得准备。 网上对前后端分离介绍的文章已经屡见不鲜，接下来本人用一点粗浅的言语也谈谈这块，献丑了。为什么要分离？ 如果只问“前后端分离的意义大么？”这是废话，因为从软件架构的角度 Web 的前后端从一开始不就一直是分离的么，而且 bro
2020-11-11 14:31:23
143
转载 一次前后端分离的实践
前后端分离该如何做? 这个问题，不同的技术人员，由于所处的岗位不一样，给出的答案都不一样。前后端分离的问题，不仅仅是技术上的选型问题，还涉及到整个团队在认知、职责、流程上面重新定义的问题，这也是为什么前后端分离概念看起来简单易懂，但真正团队在落地的时候，一不小心，往往鸡飞狗跳，甚至最终放弃"治疗"。下面，基于自己之前的对一个团队前后端分离改造的实践经历，介绍一下如何打造一个前后端分离的技术团队。背景介绍项目介绍交付一个服务于跨境电商的供应链金融项目。 需求已经相对明确，产品的原型已经出来
2020-11-11 14:31:07
316
转载 网上整理的对于Rest和Restful api的理解 - 那啥快看 - 博客园
一、什么是Rest?REST不是"rest"这个单词，而是几个单词缩写 -- REpresentational State Transfer 直接翻译：表现层状态转移，但这个翻译正常人根本看不懂，找到的一种最好理解的说法是，URL定位资源，用HTTP动词（GET,POST,DELETE,DETC）描述操作。REST成熟度的四个层次 第一个层次（Level0）的Web 服务只是使用 HTTP 作为传输方式，实际上只是远程方法调用（RPC）的一种具体形 式。SOAP和 XML-RPC都属于此类。..
2020-11-11 14:30:55
180
转载 图解基于 Node.js 实现前后端分离 - CSDN博客
因为会上出了个意外，ppt图片全部丢失，只好对着白板跟大家交流了半个多小时。由于我做演讲不喜欢写太多的文字，没有图片的情况下讲漏了一些内容。这篇文章是我在会上分享内容对照ppt进行地整理。基本介绍首先从一个重要的概念“模板”说起。 广义上来说，web中的模板就是填充数据后可以生成文件的页面。 严格意义上来说，应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。由于当场有一部分同学对node.
2020-11-11 14:30:38
941
转载 微服务之consul（一） - 诗码者 - 博客园
一、概述consul是google开源的一个使用go语言开发的服务发现、配置管理中心服务。内置了服务注册与发现框 架、分布一致性协议实现、健康检查、Key/Value存储、多数据中心方案，不再需要依赖其他工具（比如ZooKeeper等）。服务部署简单，只有一个可运行的二进制的包。每个节点都需要运行agent，他有两种运行模式server和client。每个数据中心官方建议需要3或5个server节点以保证数据安全，同时保证server-leader的选举能够正确的进行。@clientCLIENT
2020-11-11 14:30:19
358
转载 vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
一、配置config/index.js本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。（1）页面空白的解决：打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 （2）css引用图片资源找不到问题：因为打包后路径发生变化，导致..
2020-11-11 14:29:45
312
转载 webpack+vue+mui学习心得
引入mui1.不需要npm安装;直接从官方下载丢进来2.那就是全局引用了;没错,就是index.html里直接引入,当然也可以main.js引入,随意啦!so easy3.找到webpack.base.conf.js,在module与plugins之间插入以下代码:4.这样就可以在项目里面直接用了.然就是mui与vue-router及点击事件会有一些冲突的问题;在mounted里加入这行代码:路由就可以跳转了eg:就直接代替a标签了;可..
2020-11-11 14:29:04
163
转载 手摸手，带你用vue撸后台 系列一（基础篇） - 掘金
完整项目地址：vue-element-admin系列文章：手摸手，带你用 vue 撸后台 系列一（基础篇） 手摸手，带你用 vue 撸后台 系列二(登录权限篇) 手摸手，带你用 vue 撸后台 系列三 (实战篇) 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板) 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本) 手摸手，带你封装一个 vue component 手摸手，带你优雅的使用 icon 手摸手，带你用合理的姿势使用 webpack4（
2020-11-10 14:37:08
1500
转载 vue路由传参的三种基本方式 - 流年的樱花逝 - SegmentFault 思否
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles"@click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}.
2020-11-10 14:36:43
103
1
转载 Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。1、传递基本类型数据当子组件
2020-11-10 14:36:33
819
转载 【vue-router①】router-link跳转页面传递参数 - 进击的前端之路（偶尔爬坑java小路） - SegmentFault 思否
在vue项目中，往往会遇到这样的情况，就是要实现在一个循环列表中，点击其中一条跳转到下个页面，然后将这一条的相关数据带到下个页面中显示，这是个循环列表，无论点哪一条都是跳到相同的页面，只是填的数据不一样，这个时候就需要实现跳转的时候一起把参数携带过去。1、我在项目中想要点击v-for的<li>，然后跳到下个页面的表格，顺带将参数传递过去。如下图：这里实现的是第一个组件跳转到第二个组件的时候将待办任务的id传递过去，第二个组件接收id后提交给后台请求列表的数据。实现如下：第一个组件里
2020-11-10 14:36:22
456
转载 vue项目配置eslint(附visio studio code配置)
eslint基础环境搭建 全局安装eslint：npm install eslint -g 项目eslint初始化：eslint --init，按团队或自己的编程风格回答三道题。 ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? Standard ? What format do you wan
2020-11-10 14:36:09
902
转载 Node.js+Koa开发微信公众号个人笔记（一）准备工作 - ZhangCui - 博客园
本人也是在学习过程中，所以文章只作为学习笔记，如果能帮到你，那就更好啦~当然也难免会有错误，请不吝指出~一、准备工作1、本人学习教程：慕课网Scott老师的《Node.js七天搞定微信公众号》 ，但是有点小贵，经济条件允许的话可以支持一下。2、文档：微信开发官方文档，必备。https://mp.weixin.qq.com/wiki3、微信开发测试号：测试公众号，必备。https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
2020-11-10 14:34:41
206
转载 nodejs服务后台持续运行
forever.jpeg我用本地mac连接阿里云服务器，启动nodejs服务，客户端掉线，服务也会终止。如何在客户端掉线的情况下，node服务正常运行？forever介绍forever是一个nodejs守护进程，完全由命令行操控。forever会监控nodejs服务，并在服务挂掉后进行重启。forever安装npm install -g foreverforever使用forever start index.js //index.js是你要启动的js...
2020-11-10 14:34:30
363
1
转载 MAC终端下常用Git命令 - 某个人 - 博客园
送给新手的简单命令操作、远程Git和local的同步实现流程：1、把git上的代码clone到本地$ git clone http:xxxx(地址，可以http也可以ssh)2、clone到本地以后、使用branch -a 查看远程所有分支$ git branch -a3、如若你有分支：master branch1 branch2 ，使用checkout用来切换分支。还可以用第2条指令去创建本地分支目录和远程的保持一致，并且切换远程分支到本地分支目录$ git checkout b.
2020-11-10 14:34:19
92
转载 推荐21个顶级的Vue UI库！ – TalkingData‘s Blog
推荐21个顶级的Vue UI库！最近，随着“星球大战”（指 GitHub 的 Star 数量大比拼）的爆发，Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React，但 Vue.js 的受欢迎程度似乎在持续增长。1、VuetifyStar 数为 11K，提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器，包括 IE11 和 Safari 9
2020-11-10 14:34:08
498
转载 Vue中定义全局变量与常量的各种方式详解_vue.js_脚本之家
前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入.尝试1:创建 global.js 并且在其中定义 1 let a = 10; 在入口文件中引入 global.js 1 import './global.js' 在项目中使用: 1.
2020-11-10 14:33:52
1893
转载 在webpack中使用eslint配置（详细教程）-js教程-PHP中文网
本篇文章主要介绍了webpack引入eslint配置详解，现在分享给大家，也给大家做个参考。webpack中eslint使用首先，要使webpack支持eslint，就要要安装 eslint-loader ，命令如下:1npm install --save-dev eslint-loader在 webpack.config.js 中添加如下代码：123456789{test: /\.js$/,loader: 'eslint-loader',enforce: "...
2020-11-09 15:11:28
812
转载 设置图片元素上下垂直居中的7种css样式_赵一鸣博客
设置图片元素上下垂直居中的7种css样式阅读(9548) @2018-07-15 14:13:34图片、文字左右居中很简单，只需要以下代码： 1 text-align:center; 文字上下居中也很简单，假设外部div元素的高度是100px，那么： 1 line-height:100px; line-height不适用于图片...
2020-11-09 15:11:11
3745
转载 DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法<div class=“box”> <img /></div>水平居中的常用方式： text-align:center ——这可以实现子元素字体，图片的水平居中。 margin:0 auto —— 这是针对块元素的水平居中方法垂直居中的常用方式： vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。...
2020-11-09 15:10:37
1286
转载 node.js项目中常量的配置 - 个人文章 - SegmentFault 思否
在项目中，我们常将一些常量信息做成配置项，如，数据库的链接配置，业务错误代码配资等等。我们通过两种方式可以解决该问题。 系统环境变量的方式 配置文件的方式 下边，将以这两方面进行展开。1. 系统环境变量Node.js 中通过process.env来访问当前的环境变量信息$vim test.jsconsole.log(process.env.HELLO_MSG);// 系统设置环境变量$ export HELLO_MSG="Hello, world" &a.
2020-11-09 15:10:12
349
转载 Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园
原文https://github.com/wangdahoo/vue-scroller主题Vue.jsVue ScrollerVue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.DemoChange Logsv0.3.9 add getPosition method for scrolle...
2020-11-09 15:09:30
160
转载 JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。一、JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。
2020-11-09 15:09:16
243
转载 获取浏览器屏幕高度(js，jq) - 进击的小牛牛 - 博客园
javascriptIE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox中：document.body.clientWidth ==> BODY对象宽度
2020-11-09 15:09:04
198
转载 SmartGit使用教程
说明官网的客户端是命令行形式的，有兴趣可以去了解下。 这里针对图形界面的smartgit做一个使用说明。软件下载和安装下载地址[2016.12.16测试可以]按需选择,如果不知道自己电脑是什么系统的，那我没话说了 https://www.syntevo.com/smartgit/安装注意：license：有试用、付费、非商业用途三种，按照个人情况选择。其他就默认安装选Next就好 我选择的是非商业用途（Unlicensed (for non-commercial use only)
2020-11-09 15:08:40
849
转载 OpenLayers3关于Map Export的Canvas跨域
一 Canvas跨域现象地图导出是地图中常用的功能，并且OpenLayers3中也提供了两个地图导出的例子:http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html。看到这两个例子我们都很兴奋，直接copy过来不就实现导出地图了吗？so easy，妈妈再也不用担心我导出不了地图图片啦！但当我们抄好代码执行时，现实就是这么赤裸裸的打脸
2020-11-09 15:08:07
243
转载 Express实现路由分发控制、RESTful API
Express实现路由分发控制、RESTful API标签（空格分隔）： Node.js最近在用Express作为自己的WEB应用框架，其中最为迷惑的就是Express的路由控制和分发，在网上搜了很多资料，但是大部分的资料都是将Express的路由控制写在了app.js入口文件中，但是这样的写法写一些Demo是可以的，但是在实战项目中基本上不会这样来写，因为随着项目的庞大，在app.js入口文件中的路由控制将会越来越复杂。所以，我们实际项目中一般会将不同的业务逻辑交给不同的模块开负责。以下是这几
2020-11-09 15:07:51
383
空空如也
Activity中，关于子流程中的并发节点如何标记？
2015-01-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人