前端架构

Vue： 一、MVVM模式与MVC模式的区别 MVVM即Model-View-ViewModel。 它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。 Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。 MVC即Model-View-Controller MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。 二、v-show与v-if的区别

作者 | 水车 链接 | www.cnblogs.com/xuange306 前言 以前的项目大多数都是Java程序猿又当爹又当妈，既搞前，又搞后端。 随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只负责前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么每一样都很难达到精通。 大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，我建议是分开。你要是这辈子就吃 Java 这碗饭，就不要去研究什么 css，js 等等。 把你的精力专注在 Java，JVM 原理，Spring原理，mysql锁，事务，多线程，大并发，分布式架构，微服务，以及相关的项目管理等等，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。 曾几何时 我们的Java Web项目都是使用了若干后台框架进行开发，Spring、Spring MVC、MyBatis、Hibernate等等。 而且大多数项目在Java后端都是分了三层，控制层、业务层、持久层。控制层负责接收参数，调用相关业务层，封装数据，以及路由到JSP页面。然后Jsp页面上使用各种标签（jstl/el）表达式将后台的数据展现出来。 我们先看上述这种情况，需求定完了，代码写完了，测试测完了，然后发布：

浏览器和服务器组成一个BS架构，浏览器访问网页时从服务器下载文件，浏览器可以看成一个解释器，解释执行从服务器下载的文件显示出我们在浏览器上看到的页面效果。 示例： BS架构中浏览器是安装好的，我们只需要写服务端代码： import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connection, address = sock.accept() buf = connection.recv(1024) connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8")) connection.sendall(bytes("<h1>Hello,World</h1>","utf8")) connection.close() if __name__ == '__main__': main() 然后，我们在本机浏览器上输入ip地址：http://127.0.0.1:8089/，浏览器上就可以显示出： Hello,World 来源： https://www.cnblogs.com/xumaomao/p/11459618

什么是前端 任何与用户直接打交道的操作界面都可以称之为前端 Web服务的本质(浏览器,服务器) import socket ​ server = socket.socket() server.bind(('127.0.0.1', 8080)) server.listen(5) ​ while True: conn, addr = server.accept() data = conn.recv(1024) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close() 在浏览器中敲入网址发生几件事情? 1.浏览器向服务端发送请求2.服务端接收请求3.服务端返回相应的响应(结果)4.浏览器接收响应,根据特定的规则渲染页面展示给用户看 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 HTTP协议 <!-- 超文本传输协议(基于请求/响应模式的,无状态协议) 规定了浏览器与服务端之间消息传输的数据格式 1.客户端发送给服务器的格式叫“请求协议”； 2.服务器发送给客户端的格式叫“响应协议”。 web服务器即socket服务端，浏览器即socket客户端，这叫B/S架构

是什么？ 使用springboot,activiti,mybatis,vue elementui开发的后台管理系统（包含权限管理、工作流等功能），真正前后端分离的微服务架构,经过很多项目实战、淬炼、软件开发公司主流技术的集大成者。 功能点、技术点 前端采用vue element ui框架，后端spring boot,mybatis开发框架，数据库:mysql，前后端分离。 采用activiti工作流工作流框架， 自定义流程设计 流程提供发起、跳转、转办、委派、授权、任务处理，人员角色获取、角色类型获取、 会签 等功能。 采用安全框架 Spring Security (登录授权)实现组织机构、角色，人员、功能权限、 数据权限 功能。 提供 页面扩展 功能， 拖拽及可以扩展页面功能 后端多模块项目（基础设施子项目、基础功能子项目、业务功能子项目），结构清晰、各子项目独立扩展、升级。 后端系统组件化，提供 分页 、 树形 、 通用查询 数据结构，封装系统复杂度，只需要写出简单的业务代码，即能完成一个复杂的功能。 前端项目多模块（基础组件、通用框架、基础功能，业务功能），结构清晰，子项目独立。 前后端完美结合，很简单的代码即可以实现分页列表、树形等复杂页面。 前端提供数字输入、货币输入（ 输入时自动中文货币提示 ）、百分比输入、整数输入、 字典下拉 、日期快捷输入、日期范围输入表单控件。

What? 什么是前后端分离？一般我们所说的前后端分离都是说开发模式的前后端分离，部署一般也是分离的。 现在我所知道的常见的开发模式有： 传统的MCV模式：前端写html，后端套界面，转成jsp或者像freemarker,velocity,beetl(国产值得推荐)这类模板引擎。部署在一起或者动静态分离部署。 前后端分离的开发模式：前端写html5,js,css3+前端MVC模式(backbone或者angular框架都不错)+后端restful数据接口。 常见的前后端分离的例子就是SPA(Single-page application)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。 Why？ 为什么我们需要前后端分离? 关于这个问题，玉伯的文章 Web研发模式演变 中解释得非常全面，再大概理一下： 1 现有开发模式的适用场景 玉伯提到的几种开发模式，各有各的适用场景，没有哪一种完全取代另外一种。 比如后端为主的MVC，做一些同步展现的业务效率很高，但是遇到同步异步结合的页面，与后端开发沟通起来就会比较麻烦。 Ajax为主SPA型开发模式，比较适合开发APP类型的场景，但是只适合做APP，因为SEO等问题不好解决，对于很多类型的系统，这种开发方式也过重。 2 前后端职责不清 在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码

目录 前端 什么是前端 什么是后端 学习流程 前端三剑客的形容 web服务的本质 测试--浏览器作为客户端向服务器发起请求 浏览器输入网址回车发生了几件事 ***** HTTP协议（超文本传输协议） HTTP协议的四大特性 请求数据 格式 要求 请求方式 get请求 post请求 响应数据格式 响应状态码 URL 统一资源定位符 测试--服务端遵循HTTP协议返回 测试--遵循HTTP协议 返回文件 浏览器根据特定的规则渲染页面展示给用户看 HTML 超文本标记语言 HTML 注释 web本质 html 文档结构 简单的html结构 html的打开方式 直接文件打开 pycharm打开（亦或者是其他编辑器打开） 标签 标签分类1（单双标签） head 中的标签 title style link script meta title 标题标签 style 样式标签 link 外部样式引用标签 script js脚本标签 meta 这一块儿的标签不展示给用户看 body 中的标签 基本标签 特殊符号 常用标签 标签属性（比较重要的三个） 列表标签 表格标签 表单标签 标签分类2 块级标签 行内标签 块级（标签）元素与行内元素的区别 Flask 初探 接收文件需指定 day40-43 在讲优酷项目 仅是对前端知识的小总结（比较片面，不具备多少参考性） 前端 什么是前端 任何

前言 前端技术日新月异，随着 大前端 的趋势，想要成为一名合格的前端工程师，需要学习掌握的东西更是宽泛。所以我们在寻求进阶的过程中，既要不断夯实前端基础，也要快速响应技术的更新迭代。闲话少说，这次给大家整理分享一些前端进阶的优质学习资源，希望对大家有所帮助！ 个人博客地址 ?? fe-code github 优质项目 frontend-tech-list 前端技术清单，不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。 github 前端技术清单 0. 年度报告 1. 基础拾遗 1.1. JavaScript 1.2. CSS 1.3. 浏览器 2. 工程化与工具 2.1. webpack 2.2. Gulp 2.3. Linter 2.4. 静态类型（Typescript/Flow） 2.5. Babel 2.6. CSS预处理与模块化 3. 性能优化 3.1. 加载性能 3.2. 运行时性能 3.3. 前端缓存 3.4. 性能调试与实践 3.5. 性能指标 4. 安全 4.1. XSS 4.2. CSRF 4.3. CSP 4.4. HTTPS 4.5. 安全实录 5. 自动化测试 5.1. 单元测试 5.2. 端到端测试 (E2E) 5.3. 其他 6. 框架与类库 6.1. React 6.2.

前端 跟python没有任何关系 什么是前端? 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面,手机界面,平板界面 什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道 为什么要学前端 因为你们是全栈开发工程师 前端的学习流程 软件开发架构 c/s b/s Web服务的本质: 浏览器中敲入网址回车发送了几件事? 1.浏览器向服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 HTTP协议 # ​ 超文本传输协议 ​ 规定了浏览器与服务端之间消息传输的数据格式 ​ 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) ​ 请求体(携带的是一些敏感信息比如 密码,身份证号...) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) ​ 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码

一。http协议。 　　1.在软件开发架构中 有两种模式：1.b/s。2.c/s。 　　其中b/s就是以浏览器作为客户端，所以，需要服务器同一遵循同一规则，向浏览器发送数据，这个规则就是http协议，存在以应用层，会话层，表示层的协议。 　　当我们在浏览页面时，每当有一个对后端的操作时，都会有以下几个步骤： 　　　　1.浏览器向服务端发送请求。 　　　　2.服务点接受请求。 　　　　3.服务端发送响应。 　　　　4.浏览器接受响应。对页面进行渲染。 　　2.http协议中有4种特性： 　　　　1.基于请求响应。 　　　　2.基于tcp/ip之上的作用于应用层的协议。 　　　　3.无状态。每当一个人访问服务器时，都无法保存该用户的信息。 　　　　4.无连接。每有一次请求之后，就会断开连接。两者之间就不在有任何联系。 　　　　　　　　（可以通过websocket来 实现长连接的 数据传输） 　　3.请求数据格式： 　　　　请求首行（标识HTTP协议版本，当前请求方式） 　　　　请求头(一大堆k,v键值对) 　　　　请求体(携带的是一些敏感信息比如 密码,身份证号...) 　　注意，请求头和请求体之间要空一行。 　　4.响应数据格式 　　　　响应首行（标识HTTP协议版本，当前请求方式） 　　　　响应头(一大堆k,v键值对) 　　　　响应体(返回给浏览器页面的数据