前端架构

目的------想做一个水果的宣传主页 技术选型： 1.传统的Js+css+html静态页面 2.服务端NodeJs+Vue结合 选择-----近几年前端技术的发展迅猛，所以我选择后者，也是自我学习的工程 开始动手吧。。。 1.安装开发环境： a:搭建本地nodeJs服务，下载路径：http://nodejs.cn/download/ 安装可参考：https://blog.csdn.net/u010255310/article/details/52205132 b:安装VsCode集成开发工具，下载路径：https://code.visualstudio.com/Download 2.Node JS主要解决什么问题？ Node 公开宣称的目标是 “旨在提供一种简单的构建可伸缩网络程序的方法”。当前的服务器程序有什么问题？我们来做个数学题。在 Java和 PHP 这类语言中，每个连接都会生成一个新线程，每个新线程可能需要 2 MB 的配套内存。在一个拥有 8 GB RAM 的系统上，理论上最大的并发连接数量是 4,000 个用户。随着您的客户群的增长，如果希望您的 Web 应用程序支持更多用户，那么，您必须添加更多服务器。当然，这会增加服务器成本、流量成本和人工成本等成本。除这些成本上升外，还有一个潜在技术问题，即用户可能针对每个请求使用不同的服务器，因此

如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。 要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念： HTML负责结构，网页想要表达的内容由html书写。 CSS负责样式，网页的美与丑由它来控制 JS负责交互，用户和网页产生的互动由它来控制。 web前端发展至今，演变出了无数的库和框架；说到库第一时间想到的是不是jquery？在小编刚接触库的时候也是从jQuery开始的；今天我们就来说说前端发展到现在都有哪些好用的库框架。 2016年开始应该是互联网飞速发展的几年，同时也是Web前端开发非常火爆的一年，Web 前端技术发展速度让人感觉几乎不是继承式的迭代，而是一次次的变革和创造。这一年中有很多热门的前端开发框架，下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。 在这互联网飞速发展的信息时代，技术的更新迭代也在加快。目前看来，火了十几年的Java技术现在仍然是棵常青树。回想两年前初来咋到，也是想好好当一名java程序员，五年计划都行想好了，最后还是阴差阳错搞了前端。前端目前来看还是非常火的，随着IT技术的百花齐放，新的前端框架不断推出，但大多都还在狂吼的阶段

一.概述 Node.js 是一种建立在Google Chrome’s v8 engine上的 non-blocking (非阻塞）, event-driven （基于事件的） I/O平台. 以事件驱动为核心，单线程，单进程。Node.js 最大的特点就是采用异步式 I/O 与事件驱动的架构设计。对于高并发的解决方案，传统的架构是多线程模型，也就是为每个业务逻辑提供一个系统线程，通过系统线程切换来弥补同步式 I/O 调用时的时间开销。Node.js 使用的是单线程模型，对于所有 I/O 都采用异步式的请求方式，避免了频繁的上下文切换。Node.js 在执行的过程中会维护一个事件队列，程序在执行时进入事件循环等待下一个事件到来，每个异步式 I/O 请求完成后会被推送到事件队列，等待程序进程进行处理。事件驱动机制是Node.js通过内部单线程高效率地维护事件循环队列来实现的，没有多线程的资源占用和上下文切换，这意味着面对大规模的http请求，Node.js凭借事件驱动搞定一切。因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求。可以通过运行多个Node.js进程的方式来有效利用多个CPU。 二.Node.js选择的异步I/O方案 1.在Linux下，node.js靠libev和libeio配合使用来实现异步I/O。 (1).什么是libev? • libev是一个事件驱动库

front-end-Doc 前端文档汇总（含代码规范、开发流程、知识分享,持续更新） 原Github地址 进去后可直接点链接查看文章 综合类 地址 前端文档基本例子 https://github.com/mgbq/front... 前端知识体系 http://www.cnblogs.com/sb1987... 前端知识结构 https://github.com/JacksonTia... Web前端开发大系概览 https://github.com/unruledboy... Web前端开发大系概览-中文版 http://www.cnblogs.com/unrule... Web Front-end Stack v2.2 https://raw.githubusercontent... 免费的编程中文书籍索引 https://github.com/justjavac/... 前端书籍 https://github.com/dypsilon/f... 前端免费书籍大全 https://github.com/vhf/free-p... 前端知识体系 http://www.cnblogs.com/sb1987... 免费的编程中文书籍索引 https://github.com/justjavac/... 智能社 - 精通JavaScript开发 http://study.163.com

什么是单页面应用(SPA)？ 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页 目标：旨在用为用户提供了更接近本地移动APP或桌面应用程序的体验。 流程：第一次请求时，将导航页传输到客户端，其余请求通过 REST API 获取 JSON 数据 实现：数据的传输通过 Web Socket API 或 RPC(远程过程调用)。 优点：用户体验流畅，服务器压力小，前后端职责分离 缺点：关键词布局难度加大，不利于 SEO 什么是“前端路由”? 什么时候适用“前端路由”? 有哪些优点和缺点? 前端路由通过 URL 和 History 来实现页面切换 应用：前端路由主要适用于“前后端分离”的单页面应用(SPA)项目 优点：用户体验好，交互流畅 缺点：浏览器“前进”、“后退”会重新请求，无法合理利用缓存 模块化开发怎么做？ 封装对象作为命名空间 -- 内部状态可以被外部改写 立即执行函数(IIFE) -- 需要依赖多个JS文件，并且严格按顺序加载 使用模块加载器 -- require.js, sea.js, EC6 模块 通行的 Javascript 模块的规范有哪些？ CommonJS -- 主要用在服务器端 node.js var math = require('./math'); math.add(2,3); AMD(异步模块定义) -- require

我想独立实现一个全栈产品为什么这么难 日常生活中，我们会使用很多软件产品。在使用这些产品的时候，我们看得见的东西称为“前端界面”如一个输入框、一个按钮，点击按钮之后发生的一切看不见的东西称为“后端服务”。与之对应的创造者分别称为“前端程序员”、“后端程序员”，然而，一个完整产品的开发不仅仅是只有前端和后端，还有设计师，架构师，运维等。有没有可能这些所有的事情都一个人干呢？有可能，事实上如今就有很多的“全栈工程师”，他们身兼数职，是多面手。能独立完成一个产品的方方面面。这种人固然十分了得，他们通常具有多年的经验，涉猎广泛，是老手，也是高手，当有一个产品想法的时候，他们可以用自己的全面专业技能，尽情的发挥去实现自己的想法。所以，从某种意义上讲“全栈也是一种自由”，你可以自由的实现你的想法，这简直太美妙了！ 然而，很多时候当我们有一个产品想法的时候，我们往往发现，前端写完了，后端怎么搞？数据库怎么搞？域名怎么搞？域名还要备案？应用部署怎么搞？我的买什么样的服务器啊？静态资源 CDN 怎么搞？文件上传服务器怎么搞？万一访问用户多了能撑住吗？等等……问题很多，导致你的一个个想法，都只是在脑海中昙花一现，从来都无法将她们实现，或者说你激情饱满的实现了其中自己最擅长的一部分，当碰到其他难题的时候就止步了。于是仰天长啸：我就想独立做一个完整的产品为什么这么难？年轻人，这一切都不怪你…… 破局

现代 WEB 前端的性能优化 ——IT唐伯虎 前言：这只是一份学习笔记。 什么是WEB前端 潜在的优化点： DNS是否可以通过缓存减少DNS查询时间？ 网络请求的过程走最近的网络环境？ 相同的静态资源是否可以缓存？ 能否减少http请求的大小？ 减少http请求数 服务端渲染 涉及层面 网络层面 构建层面 服务端层面 浏览器渲染层面 基础优化：图片的编码原理、选择图片的格式、资源的合并与压缩。 进阶优化：浏览器渲染层面的优化、重绘与回流层面的优化、浏览器存储的选择与使用、浏览器端结合服务端的缓存机制。 结合服务端的优化：基于nodejs的Vue-SSR解决首屏渲染的问题。 知识点 资源的合并与压缩 目的：减少http请求数量、减少请求资源大小、减少带宽消费。 原理：通过一个入口文件（依赖的顶层），分析所有依赖，得到依赖树，最后按照依赖树，对文件进行压缩、混淆、合并、语法转换。 a) html压缩 在前端的源代码里，有些东西，只在代码里有意义，但是对于浏览器却毫无意义的。 例如：代码对齐的回车、空格、tab，代码注释。 这些东西在发布的时候可以去掉。 b) css压缩 删除回车、空格、tab，删除代码注释，css语义合并。 c) js压缩与混淆（必须） 删除回车、空格、tab，删除代码注释，代码命名和语义的缩减与优化， 达到代码保护。 d) 文件合并 · 公共库合并

一、单体架构 1.单体架构 单体架构也被称为单体系统或者是单体应用，就是一种系统中所有的功能、模块耦合在一个应用中的架构方式。用简单的方式理解就是将整个应用包括应用、数据库等都在同一个服务器上。而分布式从简单的角度上理解就是将应用和数据等分开到不同的服务器上，就然后对于应用和数据库进行不同方向上的性能优化等等操作。 2.单体架构特点 打包成一个独立的单元（导入称为一个jar包或者是一个war包）部署完成应用之后，应用通过一个进程的方式来运行 单体架构的优缺点 优点 项目易于管理 部署简单 缺点 测试成本高 可伸缩性差 可靠性差 迭代困难 跨语言程度差 团队协作难 二、微服务架构 1.什么是微服务 微服务是一种架构风格，一个大型的复杂软件应用，由一个或者多个微服务组成，系统中的各个微服务可以被独立部署，各个微服务之间是松耦合的，每个微服务仅仅关注于完成一件任务并很好的完成该任务。将一个复杂的软件系统，进行了惨无人道的拆分，但是通过拆分之后，这个复杂的应用系统变的更加的高效。 2.架构风格 所谓的架构风格就是项目的一种设计模式。而我们常见的程序设计模式有以下的四种方式。后面对于每个模式的优缺点进行了详细的比较。 常见的架构风格 客户端与服务器端 ：包括C/S 和B/S两种，而B/S比较特殊。 基于组件模型的架构（EJB） 分层架构（MVC） 面向服务架构（SOA） 3.微服务特点 （1

.NET Core前后端分离快速开发框架(Core.3.0+AntdVue) 目录 引言 简介 环境搭建 开发环境要求 基础数据库构建 数据库设计规范 运行 使用教程 全局配置 快速开发 管理员登录 系统用户管理 系统角色管理 权限管理 接口秘钥管理 系统日志 单库事务 跨库事务 读写分离分库分表 常见疑问 如何进行联表查询 如何切换数据库类型 如何使用多个数据库 引言 时间真快，转眼今年又要过去了。回想今年，依次开源发布了 Colder.Fx.Net.AdminLTE(254Star) 、 Colder.Fx.Core.AdminLTE(335Star) 、 DotNettySocket(82Star) 、 IdHelper(47Star) ，这些框架及组件都是本着以实际出发，实事求是的态度，力求提高开发效率（我自己都是第一个使用者），目前来看反响不错。但是随着前端和后端技术的不断变革，尤其是前端，目前大环境已经是前后端完全分离为主的开发模式，在这样的大环境和必然趋势之下，传统的MVC就显得有些落伍了。在这样的背景下，一款前后端分离的.NET开发框架就显得尤为必要，由此便定了框架的升级目标： 前后端分离 。 首先后端技术的选择，从目前的数据来看，.NET Core的发展远远快于.NET Framework，最简单的分析就是Colder.Fx.Core

一、注册功能 注册页面搭建 auto_id 数据校验 使用forms组件实现（forms） 创建一个文件夹随意，创建一个.py中 在.py文件中创建类继承form.Form 创建字段实现，实现对字段的约束，添加样式 widget error_messages required invalid（邮箱格式验证） 扩充验证使用钩子函数，局部钩子和全局钩子 注册页面搭建实现 创建form组件验证对象返回给前端 将对象渲染到页面 前端实现用户上传头像替代 通过change方法实现， 通过FileReader()产生对象 获取用户上传文件 通过文件阅读器读取文件 通过onload实现加载完替代图片路径 前端返回数据给后端 创建FormData()对象 通过each,serializeArray来获取form表单中所有的key-vauel，添加到对象中 ajax返回数据 注意使用两个false使用 向后端发送数据 后端处理 获取所有前端数据 放入到form组件表单中验证 is_valid 获取所有通过的校验的数据 移除确认密码 获取文件内容 判断头像是否为空 打散字典保存内容 返回结果（成功失败） 前端处理 成功直接跳转到登录界面 失败通过dom操作显示错误信息 使用each ，拼接id 通过错误的id显示错误信息，并添加has-error 鼠标点进错误提示框则清除错误信息 二、登录功能