前端架构

千万级用户网站门户前端设计 对于千万级的注册用户的门户项目是前端这块是怎么去实现的，自己在平常的工作中总结了一些经验，也是在不断的挫折中，不断演练的，希望总结出来给大家参考下，和大家一起探讨，一起进步。 一、门户设计一般会遇到哪些难点 （一）、首页打开时间太慢了 在开发一个门户到生产上线后，首页响应时间是检验门户整个系统架构以及开发的重要的一项指标，有时候我们发现在公司测试发现速度都挺快的，怎么到生产首页打开就慢了呢？ （二）、页面加载不流畅，总感觉看着不舒服 因为门户一般都是偏向于内容和图片类资源比较多，但是我们打开自己的网页，有时候总感觉加载并不是按照我们期望的那样加载得到，顺其自然，总感觉看起来怪怪的。 （三）、希望用户缓存的地方未进行缓存 很多静态的前端资源，其实在系统未进行更新时候，第一次加载之后，希望缓存到用户的本地，但是因为缓存策略没搞好，经常未进行有效的缓存。 （四）、页面的头部尾部经常需要被第三方嵌入 因为作为一个比较大的门户站点，可能会让很多小的服务接入进来，但是头部和尾部因为是需要保持风格统一，所以经常需要被第三方进行嵌入。 （五）、代码没有进行有效的压缩，导致被窃取 因为作为门户站点，前端如果不进行加密的话，代码很容易被别人进行抄袭伪造，而且还很容易清楚里面的业务逻辑，从而很容易仿造和进行攻击。 （六）、增量静态资源发布 经常门户线上环境需要增加一点小功能

vue前端+nodejs后端通讯最简单demo 前言 效果演示 技术架构 前端部分 安装部署 前端代码 运行前端终端 后端部分 安装部署 后端代码： 运行后端终端 结语 项目源码 前言 本文记录vue前端+nodejs后端通讯最简单的方法，供广大网友最快速进入全栈开发。 效果演示 本示例效果如下：前端是一个登陆表单，信息提交给后端，后端收到后给前端反馈信息。 技术架构 前端 vue + axios + wepack 后端 nodejs + express 前端部分 安装部署 前端安装vue，方式多种，本文使用vue-cli3 + vue ui图形化安装，具体请百度，命令如下： 安装 vue-cli3： npm i @vue/cli -g vue图形化安装： vue ui 安装 axios 用于和后端通讯： npm i axios -s 前端代码 然后我们打开“App.vue”，把代码改成如下： 建立了一个登陆表单，提交按钮点击后向“http://127.0.0.1:3000/login”这个后端地址post表单数据。 < template > < div > < form method = " post " > 账号 : < input type = " text " id = " name " /> < br /> < br /> 密码 : < input type = "

1、Web开发分类与区别 人们通常将Web分为前端和后端，前端相关的职位有前端设计师(UI/UE)，前端开发工程师，后端相关的有后端开发工程师。 2、技术栈区别 看各大招聘网站上，公司对前端开发工程师的要求莫过于精通HTML，CSS，JS，有良好的交互设计能力等。再看公司对后端开发工程师的要求： 比如Java开发工程师，要求精通Java，熟练掌握Java网络编程； 熟练运用SSH等开源框架； 熟悉互联网开发模式，清晰理解缓存，缓存设计和模式； 精通TCP/IP、HTTP等网络协议，精通socket网络编程，有用Java做大访问量高压力网络应用的经验； 熟悉Linux/Nginx； 熟练配置维护Apache，Tomcat，Resin等应用服务器，掌握shell/awk/python等系统脚本工具； 熟练掌握SQL语句，熟练使用数据库(MySQL，Oracle)； 掌握Html/Javascript/Css/Ajax 等页面技术熟练使用Eclipse/Maven/Ant/SVN等软件开发工具； Web架构的性质决定服务端开发的复杂性，服务端的复杂性决定后端开发人员要掌握的技术。 3、学习成本区别 用3年时间学习Web前端开发，多数同学都能够成为一个优秀的Web前端开发工程师。同样，用3年时间学习后端开发，多数同学只能算是入门。Web前端开发人员需要掌握HTML，CSS，JS

前端是什么？ 在回答这个问题之前，我想到了一道面试题： 当我们在浏览器中输入网址并按回车之后，接下来会发生什么？ 我们来简单地看一看 “网页展现” 的整个过程。 比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。 有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。 当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。 一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。 当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。 我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。 我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”；右侧的事情发生在服务器端，称为 “后端”。（“前端” 之所以叫 “前端”

前端系统设计 前端三大件：html、css、js，万变不离其中，不管我们使用的是vue、react、angular还是其他什么，都是要提高我们代码的复用性、可读性、可维护性以及可拓展性。 html 语义化的标签，在不借助任何前端框架的情况下， < header > < section > < nav > < ul > < li > < a href = " # " > 菜单1 </ a > </ li > < li > < a href = " # " > 菜单2 </ a > </ li > </ ul > </ nav > </ section > </ header > 这种方式能有一定的可读性，但在更为复杂的页面的结构之下是不是缺失了可读性和可维护性。 组件化控制html结构，运用组件化架构的方式将一个页面划分为多个组件，包括项目级组件（在整个范围都会使用到的）和页面级组件 组件化的优势点： 提高复用性 举例：按钮组件，整个系统的按钮风格应该大致差不错，拥有的行为也差不多。我们将按钮单独抽离出来作为一个单独的组件，它拥有自己独立的结构、样式、行为，遵从单一职责、开闭原则，当我们在构建下一个页面的时候，直接引入既可以使用，达到了提高复用性的效果。 提高可读性 举例：我们一个页面有很多的内容，以上图来看，我们这个页面的结构大致是，头部，导航栏，搜索框，按钮组

前端 CSS 库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。 为什么要使用 CSS 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的资源，我们不该把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳？答案当然是肯定的。但除非您是位身经百战的 CSS 视觉创意人士，否则把这项工作交给专家才是最好的选择。 与此同时，框架则能够更轻松地快速构建起直观的可用应用程序。凭借着极高的人气，目前市场上存在大量前端框架可供我们选择。 Ant Design 项目概括 “Ant Design 能够帮助每一位项目成员降低设计与原型设计工作的难度，同时提高后台应用程序与产品的开发效率。” ——摘自 Ant Design 官网 Ant Design 是一种面向后台应用的设计语言，由 Ant UED 团队开发而成。他们希望借此统一内部后台项目的用户界面规范、减少设计差异以及不必要的实现成本，从而解放出更多可用于设计以及前端开发的宝贵资源。 特性 一种面向 Web 应用程序的企业级 UI 设计语言。 一套开箱即用的高品质 React 组件。 由 TypeScript 编写而成并拥有完整的定义类型。 整套开发与设计资源及工具。

一、背景 书接上文， 浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发任务。联调的时候，按照之前定义的开发规范进行数据联调便可以了。前后端的职能更加清晰： 后端 前端 提供数据 接收数据，返回数据 处理业务逻辑 处理渲染逻辑 Server-side MVC架构 Client-side MV* 架构 代码跑在服务器上 代码跑在浏览器上 这里分离干净了，分工也很明确了，看似一切都那么美好，but...我们也很容易发现问题的所在： Client-side Model 是 Server-side Model 的加工 Client-side View 跟 Server-side是 不同层次的东西 Client-side的Controller 跟 Sever-side的Controller 各搞各的 Client-side的Route 但是 Server-side 可能没有 也就是说服务端和客户端各层职责重叠，大家各搞各的，很难统一具体要做的事情。并且可能会伴随着一些性能上的问题。最具体的表现就是我们常用的SPA应用： 渲染，取值都在客户端进行，有性能的问题 需要等待资源到齐才能进行，会有短暂白屏与闪动 在移动设备低速网路的体验奇差无比 渲染都在客户端，模版无法重用，SEO实现 麻烦 紧接着

背景： 过年前后做了个微信公众号项目，已经过去一段时间了，抽空回忆总结下基本流程吧，不然很快估计自己就忘了。。 微信公众平台官网： https://mp.weixin.qq.com 一、注册公众号 首先注册时可以看到公众号有三种类型，个人用户大多数选择 订阅号 ，而企业用户一般选择 服务号 和 企业号 。 我们平常大多数关注的都是 订阅号 ，他们统一都放置在微信应用的订阅号消息列表中，没有微信支付等高级功能，只是用于发布文章等基础功能。 而服务号和企业号都在会话列表，和我们的微信好友是同级别的位置，具备微信支付等高级功能，一般是某个企业品牌的对外操作窗口，如海底捞火锅、顺丰速运等。 我们前期开发测试只需要 注册个人订阅号 即可，真正开发使用的是开发者工具里的测试号，具体下面会说。 真正生产的话，使用的都是经过微信认证的订阅号、服务号、企业号。 二、了解公众号管理页面 我们在微信公众平台扫码登录后可以发现管理页面左侧菜单栏有丰富的功能： 大概可以分为这几大模块： 首页、功能、小程序、管理、推广、统计、设置、开发 作为开发人员，首先应该关注的是设置、开发模块；而作为产品运营人员，关注的是功能、管理、推广模块；作为数据分析人员，关注的是统计模块。 首先我们不妨各个功能模块都点击看一看，大概了解下我们能做些什么。可以确认的是，这个微信公众平台当然不只是给开发人员使用的

MVC 简介 1、MVC 是一种架构模式 程序分层，分工合作，既相互独立，又协同工作，分为三层：模型层、视图层和控制层 2、MVC 是一种思考方式 View：视图层，为用户提供UI，重点关注数据的呈现，为用户提供界面 Model：模型层，业务数据的信息表示，关注支撑业务的信息构成，通常是多个业务实体的组合 Controller：控制层，调用业务逻辑产生合适的数据（Model），传递数据给视图用于呈现 MVC 设计模式在 B/S 下的应用： ①：浏览器发送请求到控制器(这里要知道控制器的作用) ②：控制器不能处理请求必须交给模型层来处理接着去访问数据库 ③：模型层将处理好的结果返回给控制层 ④：控制层将逻辑视图响应给浏览器(浏览器显示的是渲染过的视图) MVC 本质：MVC 的核心思想是业务数据抽取同业务数据呈现相分离；分离有利于程序简化，方便编程 前端控制器模式 前端控制器模式（Front Controller Pattern）是用来提供一个集中的请求处理机制，所有的请求都将由一个单一的处理程序处理。该处理程序可以做认证/授权/记录日志，或者跟踪请求，然后把请求传给相应的处理程序。 前端控制器（Front Controller）- 处理应用程序所有类型请求的单个处理程序，应用程序可以是基于 web 的应用程序，也可以是基于桌面的应用程序。 调度器（Dispatcher） -

Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的 数据双向绑定 。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。 为什么会出现 MVVM 呢？ 我接触MVVM 是在2015年，可以说2015年是MVVM 最火热的一年，而在这之前，我所知道的就是MVC, MVC 大约是在5年前，也就是2011年的时候接触的，那时候刚学编程语言，学的Java，而Java 中经典的 SSH 框架就用来构建一个标准的MVC 框架。说实话，MVC 用了这么多年，但始终没有很深刻的理解，只停留在用的层面， 一直到接触 Vue.js 之后，研究了MVVM 架构思想，然后再回头看 MVC ，才有一种豁然开朗的感觉~ MVC 即 Model-View-Controller 的缩写，就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程式是由这三部分组成的