前端组件 | 易学教程

技术栈的沉淀

阅读更多关于技术栈的沉淀

我也是一个经历过柴米油盐酱醋茶、尝过酸甜苦辣咸的前端程序员。知道前端的东西入门简单，有深度却很难；表似好看无比的应用，其实背后逻辑复杂，然而要想成长的更快，一定要学会站在巨人的肩膀上，“学以师技以自长”。所以一些经验非常可贵，在此我想和大家分享一下我的经验。我是一个从jquery，zepto，到vue的比较常规的技术栈过渡过程。本文涉及面包括：jquery处理模板的办法，高效处理json数据，如何有效命名，如何搭建合适的web服务，如何做出h合理炫酷的动画，vue组件处理的方式，同时覆盖如何使用github管理你的项目和文章 1、jQuery.js中的tmpl大法在当初没有vue、react等mvvm框架的时候，这些都是非常牛逼使用的东西 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery-tmpl</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.tmpl.js"></script> </head> <style> .left-box { float: left; width: 50%; } .right-box

redux学习笔记

阅读更多关于 redux学习笔记

redux是数据管理框架,使用它主要是因为react组件化之后，组件间值的传递比较麻烦，于是使用一个顶层的组件来储存和分发；这样就不用传来传去了；但是react用起来不太方便；于是有了react-redux，使用provide和connect连接起来就可以mapStateToprops来接收参数和改参数；原来action只能是对象,redux-thunk 是一个中间件，使用了它就可以派发函数了；虽然很多新的东西，前端日新月异，比如又出了hooks,vue2才刚了解，vue3就有消息了；所以有人抱怨学不动了,其实都是为了更方便的需求；详细： Flux 官方推出的原始辅助数据层框架，用于管理react的数据，因为react 组件传递值要一层层传，很麻烦，所以就专门给了个管理层，放在顶层，都可以穿给其它组件；升级的了是Redux：Redux=reducer+Flux 原理： Components：借书的人 Action creatotrs：要借什么书这句话 Store:图书馆管理员 Reducers:记录本流程：首先需要一个store,页面从store 中取数据；如果页面想改变store中的数据，需要派发action给store; store把action 和之前的数据一起给redux,redux结合之前的数据；返回新的数据给store,store更新自己的数据，再告诉页面

SpringMVC工作原理

阅读更多关于 SpringMVC工作原理

转自：平凡希老师 https://www.cnblogs.com/xiaoxi/ SpringMVC的工作原理图： SpringMVC流程 1、用户发送请求至前端控制器DispatcherServlet。 2、 DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 4、 DispatcherServlet调用HandlerAdapter处理器适配器。 5、 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 6、 Controller执行完成返回ModelAndView。 7、 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 8、 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 9、 ViewReslover解析后返回具体View。 10、DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 11、 DispatcherServlet响应用户。组件说明：

前端优化带来的思考，浅谈前端工程化

阅读更多关于前端优化带来的思考，浅谈前端工程化

重复优化的思考这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：传输层面：减少请求数，降低请求量执行层面：减少重绘&回流传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化：减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存

1220 Vue与Django前后端的结合

阅读更多关于 1220 Vue与Django前后端的结合

目录 vue的安装 Vue前端的设置页面的分布后台数据的替换 css样式 Django的配置国际化配置 axios插件安装 CORS跨域问题(同源策略) 处理跨域问题: cors插件 axios提交数据给后台拼接参数 params:{} 数据包参数 data:{} Django中设置数据 media相关 admin中注册使用前端接受数据前端渲染单个汽车界面 element插件安装 bootstrap插件的使用 Vue代码 vue的安装 ## 环境附带安装pnm npm换源脚手架快速换源 ## 项目创建 cd 存放项目的目录 vue create 项目名 ===> 需要安装的组件 babel router vuex ## 配置项目启动 pycharm打开项目,配置npm启动 ## 加载vue环境 main.js完成vue环境的加载,完成根组件的渲染加载route,vuex等环境加载 ## Vue的ajax插件安装 axios ``` 安装插件 (一定要在项目目录下) cnpm install axios 在main.js中配置: import axios from 'axios' Vue.prototype.$axios = axios 使用,就可以直接ajax的使用 ``` Vue前端的设置页面的分布 index.html是项目中的唯一页面 App

Vue时间线组件

阅读更多关于 Vue时间线组件

Vue时间线组件效果背景项目需要用到时间线组件，用于选择同一笔记不同时期的内容。一开始打算用elementui的组件，但不适合，于是网上搜了个遍，却没找到合适的，因此自己动手写了个，并记录下来当做vuejs的学习笔记。步骤一、创建项目环境略。。百度二、创建组件略，没啥说的，就是新建了个.vue文件三、写代码 1）写出大概的框架每个时间段都是如上图所示的结构，左边部分是时间线，右边是内容。组件模板如下: <template> <div id="time-line"> <div class="item"> <div class="item-index">2020-2-2 2:22:22</div> <div class="item-content">HELLO WORLD</div> </div> </div> </template> 2）css写出时间线 "::before"伪元素作出时间线的节点 .item::before { content: ""; width: 11px; height: 11px; border-radius: 100%; background-color: #91c2fc; position: absolute; left: -15px; } 效果图: "::after"伪元素作出时间线线段 .item::after {

what is react?

阅读更多关于 what is react?

现在最热门的前端技术，毫无疑问就是React。 React起源于Facebook公司的内部项目，他们认为现在的MVC不能满足他们的扩展需求，由于他们的代码库非常庞大，组织也非常复杂，所以每当添加一个新的功能时就变得异常的复杂，所以他们为了解决这个问题，提出了React。那么React是什么呢？其官网上说的是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。一个Javascript库，用于构建用户界面。 React主要解决什么问题呢？他们的官网上有这么一句话：We built React to solve one problem: building large applications with data that changes over time. 构建那些会随时间变化的大型应用。在整个web的MVC架构中，你可以认为React是整个视图层，并且是一个高效的视图层。React提供了和以往不一样的看待视图层的方式，它以组件开发为基础。对于React而言，你的页面都是由一个个组件构成的，你可以通过分割组件的方式去实现复杂的页面或者某个功能模块。并且这些组件是可以被复用的。 React的另一大特点是：虚拟DOM节点。它让页面的渲染更加的高效，并且比直接操作真实DOM更加的可控。这两大特点使得React有了强大的渲染页面的能力。

可视化编程已经能取代高级语言了吗？

阅读更多关于可视化编程已经能取代高级语言了吗？

之前在知乎看到了一则较早的问题现在的可视化编程发展到什么程度了，什么时候可以取代高级语言？这在可视化编程行业内可是最高理想。但其中有一个回答真实反应现实——可视化编程无法取代高级语言。接下来分析几款国内外可视化编程商业工具（可以做出商业产品），从而分析一下可视化编程的桎梏，以及可能的发展前景。国内外几种商业可视化编程工具： 1.Mendix 全行业做低代码开发几乎都用积木的方式去做，确实积木的拼接组合操作很容易，也符合程序员的操作习惯，但全行业似乎陷入了创意沼泽。这时候mendix出现在我眼前，流程图式编程是哪个神经病想的，真有意思（下文的Outsystems也是相同的形式）。这里引用一下别人对mendix的基本介绍: “专攻企业应用开发，面向B端用户，一般是面向有开发团队的中大型企业，提供模型驱动IDE和微流，减少代码量，使业务人员可以通过可视化组件参与到开发过程中，与程序员在Mendix platform上合作开发本企业的应用。提供一些企业解决方案、模板，开发平台上也支持自定义UI和组件。拥有Atlas UI Framework开发框架，根据应用和业务类型，会推荐相关的模板和组件，达到快速开发的目的。内置DevOps功能，可以持续交付，也可以使用Mendix platform API集成其他DevOps工具。” 可以做原生app，web系统。但编辑器功能本身并不完善

如何开发和发布一个Vue插件

阅读更多关于如何开发和发布一个Vue插件

前言 Vue 项目开发过程中，经常用到插件，比如原生插件 vue-router 、 vuex ，还有 element-ui 提供的 notify 、 message 等等。这些插件让我们的开发变得更简单更高效。那么 Vue 插件是怎么开发的呢？如何自己开发一个 Vue 插件然后打包发布到npm？本文涉及技术点： Vue 插件的本质 Vue.extend() 全局方法如何手动挂载 Vue 实例 Vue.use() 的原理如何打包成 umd 格式发布前如何测试 npm 包一、定义什么是Vue插件，它和Vue组件有什么区别？来看一下官网的解释： “插件通常用来为 Vue 添加全局功能。” “组件是可复用的 Vue 实例，且带有一个名字。” —— Vue.js 官网 Emmmm，似乎好像有种朦胧美。。。我来尝试解释一下，其实， Vue 插件和 Vue组件只是在 Vue.js 中包装的两个概念而已，不管是插件还是组件，最终目的都是为了实现逻辑复用。它们的本质都是对代码逻辑的封装，只是封装方式不同而已。在必要时，组件也可以封装成插件，插件也可以改写成组件，就看实际哪种封装更方便使用了。除此之外，插件是全局的，组件可以全局注册也可以局部注册。我们今天只聚焦 Vue 插件。插件一般有下面几种：添加全局方法或者属性。如: vue-custom-element 添加全局资源

如何部署单页面项目到服务器

阅读更多关于如何部署单页面项目到服务器

今天做vue单页项目，在本地dev环境下一切正常，准备部署到生产环境，结果发现页面一片空，想了许久，都不知道是什么问题。后来和后台同事交流，发现我的页面并不是在服务器根目录，而是由子目录。后来才想起来曾经看过的一篇文章，内容如下：最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404......用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。如果说项目是直接跟在域名后面的，比如:http://www.sosout.com ，根路由就是 '/'。如果说项目是直接跟在域名后面的一个子目录中的，比如:http://www.sosout.com/children ，根路由就是 '/children '，不能直接访问index.html。以配置Nginx为例，配置过程大致如下：（假设： 1、项目文件目录： /mnt/html/spa（spa目录下的文件就是执行了npm run dist 后生成的dist目录下的文件） 2、访问域名： spa.sosout.com

订阅前端组件