通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍一下我们Vue项目的前端架构设计,当然,有些地方可能不是最好的方式,毕竟大家的业务不尽相同,适合你的就是最好的. 除了介绍基本的架构设计,本文还会介绍如何开发一个Vue CLI插件和preset预设. ps.本文基于Vue2.x版本,node版本16.5.0 创建一个基本项目 先使用Vue CLI创…

写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == false” 是true的尴尬, 你知道 “[undefined] == 0“ 是什么返回结果吗?再然后 function add (a, b) { return a+b } add ("1", 2) // 12 这个结果是返回是12. 还记得某个深夜,当你望着万行代码流出千行热泪的时候吗…

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog…

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能…

1.前端调用后台: 建议用你熟悉的一门服务端程序,例如ASP,PHP,JSP,C#这些都可以,然后把需要的数据从数据库中获得,回传给客户端浏览器(其实一般就是写到HTML中,或者生成XML文件)然后在用JS获得. 2.js只是前端的语言,它还没有访问数据库的能力.不过它可以向某个URL发送请求,并获得返回的数据.这个会用到Ajax技术. 用AJAX,页面不刷新,只提交字符串到后台导入数据库       通过纯AngularJS+REST API构建Web是否可行? 在构建Web系统的时候,可不可…

代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解,关注前端发展,了解所谓"大前端"的概念: 了解React: 了解ES6: 想要初步了解一下大型网站的前端结构的人. 关于demo 本demo是我平时开发React项目时候自己配置的一套开发环境,由于每次写react的demo的时候都需要配置webpack,十分繁琐,因此前段时间我按照自己…

前言 这是一个用vue做的单页面管理系统,这里只是介绍架子搭建思路 前端架构 沿用Vue全家桶系列开发,主要技术栈:vue2.x+vue-router+vuex+element-ui1.x+axios 工程目录 项目浅析 webpack打包配置 webpack的配置主要是vue-cli生成的,经过一些简化修改如下 webpack.config const path = require('path'); const webpack = require('webpack'); const cssne…

vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代.小步快跑的方式进行开发及质量跟踪,简化工作流程,帮助团队快速迭代并高效完成产品开发交付. 但早期VAPD以"一切皆可配置"的设计理念开发运行了两年,整个前端代码复杂混乱,组件庞大(需要支持多种配置),状态混乱,前端代码打包出来有50M之巨.这个项目难以为继,bug多.维护困难.新增功能处…

前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技术涵盖了从前端到后端再到数据库,可以用他们完整的开发一个web应用了,所以成了一个非常牛逼的组合,颇有当年LAMP的气势.前端要从切图仔迈向全栈的路上,这几门技术必须得有所涉猎.本系列文章利用自己虚构的一个小项目为例,对“使用MEAN技术栈开发web应用”做一个入门级的介绍.   AngularJs…

架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……,特别是团队合作的时候,不同的人熟悉不同的框架,最终都会经过一番头疼才能定下来,进入开发之后还会不断的质疑当初的选择.鉴于此,我想开发一个属于自己的框架,一方面把前端知识贯穿一下,另一方面用起来也顺手,免得又犯选择恐惧症.开发之初,我给框架的定位是: 1. 好用 组件直接采用$(容器).组件名{…},…

关于语义学 语义学是研究符号和意义之间的关系以及它们表示的内容.在语言学中,则主要是研究符号(例如单词,短语或者语音)在语言中所表达的意义.而在前端开发时,语义学则更多的关注HTML元素,属性以及它的值所表达的含义.而这些规范的语义可以帮助开发人员更好的理解网站上的信息.但是即使是以非常正式的形式来规范这些语义,程序员仍然会去修改这些语义. 各种HTML语义之间的区别 书写语义化的HTML是现代专业的前端开发基本原则之一.绝大部分的语义是和已经存在的内容或期盼的内容的本性息息相关的(例如:h1元…

架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项…

谈谈学习 我做前端已经有五年的时间了,从大学刚毕业的时候,我是一个完全什么都不懂的小白.虽然我大学里学的是软件工程专业,但是因为在大学里荒废学业,每天只知道打游戏,基本上到大学毕业之前我是什么都不会的,而且大学里是没有教前端相关的东西的. 我是在大学毕业之前,两三个月,自学了一点点前端的皮毛,也就是会写一点点的html和css.那个时候找工作也不容易,终于有一个公司收留了我,虽然说工资什么的我们暂时按下不提.但是至少他们要我,我就非常地开心了. 从那个时候开始,因为有了项目要做,所以我逼迫自己,…

本文来自作者 未闻 在 GitChat 分享的{基于 Docker 的微服务架构实践} 前言 基于 Docker 的容器技术是在2015年的时候开始接触的,两年多的时间,作为一名 Docker 的 DevOps,也见证了 Docker 的技术体系的快速发展.本文主要是结合在公司搭建的微服务架构的实践过程,做一个简单的总结.希望给在创业初期探索如何布局服务架构体系的 DevOps,或者想初步了解企业级架构的同学们一些参考. Microservice 和 Docker 对于创业公司的技术布局,很多声…

QuickStart 基于SpringCloud体系实现,简单购物流程实现,满足基本功能:注册.登录.商品列表展示.商品详情展示.订单创建.详情查看.订单支付.库存更新等等. 每个业务服务采用独立的MYSQL数据库,初期考虑用到如下组件: 列表内容 服务注册.发现: eureka 配置管理:spring config , spring security 集群容错: hystrix(待实现) API网关: zuul(待实现) 服务负载:feign+ribbon api文档输出:swagger2 代…

QuickStart 基于SpringCloud体系实现,简单购物流程实现,满足基本功能:注册.登录.商品列表展示.商品详情展示.订单创建.详情查看.订单支付.库存更新等等. github源码地址:https://github.com/backkoms/simplemall 每个业务服务采用独立的MYSQL数据库,初期考虑用到如下组件: 服务注册.发现: eureka 配置管理:spring config , spring security 集群容错: hystrix(待实现) API网关: z…

问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ? 解答 业务开发有没有痛点,能不能通过技术的手段解决 ? 平时开发业务用到了哪些技术栈和周边的生态链,我是否对他们熟练掌握了,对他们的实现原理呢 ? 平时开发遇到了 bug,调试了很久,能不能提升自己快速定位 bug,解决问题的能力 ? 如果上面分配了一个需求,没有现成的轮子可以用,我是否可以快速…

我们都知道,很多业务系统都是基于 MVC 三层架构来开发的.实际上,更确切点讲,这是一种基于贫血模型的 MVC 三层架构开发模式. 虽然这种开发模式已经成为标准的 Web 项目的开发模式,但它却违反了面向对象编程风格,是一种彻彻底底的面向过程的编程风格,因此而被有些人称为反模式(anti-pattern).特别是领域驱动设计(Domain Driven Design,简称 DDD)盛行之后,这种基于贫血模型的传统的开发模式就更加被人诟病.而基于充血模型的 DDD 开发模式越来越被人提倡. 基于上…

本文所用组件传送门:vue-org-tree 本文基于antd (其他前端组件框架操作基本都类似的: iview,elementui,boostrap-vue...) 当然,github上还有其他类似的组件,实现方法各有不同,显示效果也有差异,但都是很方便的组件. 看到网上有很多相关的使用教程,github上也写得很清楚,这里恕不在重复,本文主要实现增删节点. 场景:我们通常展示部门树的时候,简单的直接就是一个下拉框展示,为了显示明显,可能会使用一些树.    图片截至:(antd vue文档)…

作者|Artem Shtatnov译者|无明 在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验. 在内部,我们把用于管理广告创建和组装的主要应用程序叫作 Monet.它用于增强广告的创建以及自动管理外部广告平台上的营销广告活动.Monet 有助于推动流量增量转换,增强用户与产品的互动,并向全世界的用户展示我们的内容和 Netflix 品牌. 首先,它有助于扩展和自动化广告创建以及管理数百万个广告素材组合.其次,我们利用各种信号和汇总数据(例如…

京东基于Spark的风控系统架构实践和技术细节 时间 2016-06-02 09:36:32  炼数成金 原文  http://www.dataguru.cn/article-9419-1.html 主题 Spark软件架构 1.背景 互联网的迅速发展,为电子商务兴起提供了肥沃的土壤.2014年,中国电子商务市场交易规模达到13.4万亿元,同比增长31.4%.其中,B2B电子商务市场交易额达到10万亿元,同比增长21.9%.这一连串高速增长的数字背后,不法分子对互联网资产的觊觎,针对电商行业的恶…

在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一般通过签名表的方式(银行很常见)实现电子签名的处理.本篇随笔介绍如何基于Vue &Element前端的技术实现电子签名的处理. 1.实现电子签名的组件 我们知道,很多常见的功能,我们都会引入对应的组件来做页面功能,会非常简洁方便,毕竟不用重复制造轮子. 我们在Github上可以找到很多基于Vue前端技…

大家好,我是Eluxjs的作者,Eluxjs是一套基于"微模块"和"模型驱动"的跨平台.跨框架『同构方案』,欢迎了解... 文前声明,以下推断和结论纯属个人探索,鉴于本人知识水平所限,谬误在所难免,恳请各位大佬不吝赐教... 为什么在web前端很少有人会提到分层架构,例如经典MVC架构,这是因为浏览器诞生之初就只是作为一个后端数据的GUI渲染器.也就是说整体来看,web1.0时代的整个web前端工程就是一个View层,而Model和Controller就是指后端,所…

写在前面: 1. 本文中单元测试用到的数据库,在执行测试之前,会被清空,即使用空数据库. 2. 本文中的单元测试都是正确通过的. 要理解EF的事务机制,首先要理解这2个类:TransactionScope和DbContext. DbContext是我们的数据库,通常我们会建一个类MyProjectDbContext继承自DbContext,里面包含所有的数据库表.这个类相当于定义了一个完整的数据库. 下面通过一些单元测试来看看这2个类是如何工作的. [Test] public void Can_…

目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题目:[PC网站前端架构探讨系列]结合公司网站首页,谈前端模块化开发与网站性能优化实践 .但是,仍然会存在下列问题: 问题1----模块内部脚本和页面联系密切  问题2----所有脚本文件集中放于一个目录,脚本目录不清晰,没有层次 当然还有其他很多问题,但就以上两大问题来说,会对后期代码维护带来不便!…

说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sybboy/p/4877055.html 下面可是我自己的东西,算是这段时间搞前端架构的总结吧: 目录 1.遇到的问题 2.目标 3.如何解决 4.结果分析 5.尚未解决 遇到的问题 问题1----脚本混乱,没有层次和固定代码位置 问题2----脚本和css请求较多,请求未压缩,文件未压缩合并 问题3…

今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组件传哪些必要的参数,即子组件需要提供什么接口 组件需要去实现哪些功能 我们要返回哪些参数给用户 针对这几点,做如下分析: 先上简单的模板: <template lang="html"><div class="page"> <ul> &…

我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) insertAt 6) remove 7) intersect 8) minus 9) Recursion 10) last 11) distinct 12) to 13) addArray String对象: 1) indexFrom:不区分大小写进行查找. 2) format: 使用索引进行参数化…

在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项目团队里,沟通.协调以及管理成本相对较高,…

基于netty的微服务架构 微服务一篇好文章 http://san-yun.iteye.com/blog/1693759 教程 http://udn.yyuap.com/doc/essential-netty-in-action/GETTING%20STARTED/Introducing%20Netty.html netty原理 http://www.infoq.com/cn/articles/netty-server-create netty方面专家 李林锋 先关文章 http://www.i…