前端组件

Storage 是 数据的落地 ，如果你想在 页面刷新后，能重新载入 一些必要信息，那么这些信息必然需要存储于 Storage。 Vuex 是单页应用的 全局数据集 ，组件之间可以共享这些数据。 不仅如此，还包括了计算属性特性，这样同时也做到了 全局的数据绑定 。数据并不落地。 两者场景完全不同，但是前端调用关系一般是 Local variable -> Vuex Computed attrubute -> WebStorage. Link： https://www.cnblogs.com/farwish/p/11902299.html 来源： https://www.cnblogs.com/farwish/p/11902299.html

React作为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上我们可以学到许多其他前端框架所缺失的东西，也是其创新性所在的地方，比如虚拟DOM、JSX等。那么接下来我们就来学习一下这门框架是如何构建起一个单页应用的。 前言 首先在学习这门框架前，你需要对以下知识有所了解： 原生JS基础 CSS基础 npm包管理基础 webpack构建项目基础 ES6规范 以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。 JS和CSS就不多说了，npm是目前最提倡也是占据主导地位的包管理工具，还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具，已经在前端打包工具中独占鳌头，和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容，但可以使用babel等转换器进行转换。 结合其他的一些主流前端框架，我个人认为构建单页应用有这样三个基本的东西：组件、路由、状态管理。那么接下来我就基于这三者来介绍React，当然其中会穿插一些额外的知识点。 组件 React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法，以下是一个例子： // main.js import React from 'react' import { render } from 'react-dom' import MyComponent from '.

DRF请求响应组件 1.请求模块 1、drf的request是在wsgi的request基础上再次封装 2、wsgi的request作为drf的request一个属性：_request 3、新的request对旧的request做了完全兼容 4、新的request对数据解析更规范化：所有的拼接参数都解析到query_params中，所有数据包数据都被解析到data中 5、query_params和data属于QueryDict类型，可以 .dict() 转化成原生dict类型 #drf的request是对wsgi的request二次封装，且完全兼容，拓展query_params和data两个属性 request._request request._request = request request.query_params = request._request.GET request.data(form-data,urlencoded,json) """ 源码分析 1、drf的APIView类：重写了as_view()，但主体逻辑还是调用父类View的as_view()，局部禁用了csrf认证 重点：所有继承drf的基本视图类APIView的视图类，都不在做csrf认证校验 2、drf的APIView类：重写了dispatch()，在内部对request进行了二次封装：self

1. 项目框架介绍 本项目采用了开源项目ngx-admin作为脚手架。基于Angular 8 +，Bootstrap 4+和 Nebular ，ngx-admin是最受欢迎的后台管理模板，是用于个人和商业的免费开放源代码，开源地址为： http://akveo.com/ngx-admin/pages/dashboard 。进入该项目首页，如下图所示。 诸如Bootstrap之类的框架提供了许多组件，但通常不足以构建实际的应用程序。该模板带有许多具有统一配色方案的流行UI组件，此外它是基于现代Angular框架，并具有基于组件的灵活结构。因此，本文介绍的项目还包括ng2-smart-table、primeng等组件。Angular能够更好地管理组件依赖关系，伸缩性较强，适合大型项目前端的开发。 2. 开发环境 2.1 需要安装以下工具: Node.js的- https://nodejs.org 。请注意版本应> = 8 下载最新版本的node，安装node.js。安装完成后记得配置系统环境变量。 npm : node.js程序包管理器，随node.js一起安装。请确保npm的版本为>= 5 使用npm -v命令查看版本。 安装好@angular/cli的依赖环境之后，开始安装@angular/cli 安装命令： npm i -g @angular/cli 查看版本命令：ng -

你如何考虑服务化 # 集中式与分布式 要谈微服务，那么必须建立在分布式的基础上，对于一个集中式系统也无需谈微服务。 # 集中式 集中式系统用一句话概括就是：一个主机带多个终端。终端没有数据处理能力，仅负责数据的录入和输出。而运算、存储等全部在主机上进行。 集中式系统的最大的特点就是部署结构非常简单，底层一般采用从IBM、HP等厂商购买到的昂贵的大型主机。因此无需考虑如何对服务进行多节点的部署，也就不用考虑各节点之间的分布式协作问题。但是，由于采用单机部署。很可能带来系统大而复杂、难于维护、发生单点故障（单个点发生故障的时候会波及到整个系统或者网络，从而导致整个系统或者网络的瘫痪）、扩展性差等问题。 # 分布式 分布式就是一群独立计算机集合共同对外提供服务，但是对于系统的用户来说，就像是一台计算机在提供服务一样。分布式意味着可以采用更多的普通计算机（相对于昂贵的大型机）组成分布式集群对外提供服务。计算机越多，CPU、内存、存储资源等也就越多，能够处理的并发访问量也就越大。 拿电商网站来说，我们一般把一个电商网站横向拆分成商品模块、订单模块、购物车模块、消息模块、支付模块等。然后我们把不同的模块部署到不同的机器上，各个模块之间通过远程服务调用( RPC )等方式进行通信。以一个分布式的系统对外提供服务。 # 服务化 提到分布式，一个不得不提的词就是服务化

一、Vue基础 1、介绍 　　 Vue 是一套用于构建用户界面的 渐进式框架 。 Vue 的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有的项目整合。 兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 Vue.js 不支持 IE8 及其以下 IE 版本。 2、Vue.js安装 　　安装有三种方式，一种直接下载开发版本，第二种 CDN 链接，国外有比较稳定的两个 CDN ，第三种官方命令工具，可用于快速搭建大型单页应用。开发学习还是建议第一种 ，Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。 cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js 第三种安装就是利用淘宝 npm(大于3.0 )镜像下载： 升级淘宝镜像: npm install cnpm -g #升级cnpm或者安装 cnpm install npm -g #升级npm npm -v #查看版本 cnpm install vue #安装最新版本

UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件 Vux ★6802 - 基于Vue和WeUI的组件库 mint-ui ★4776 - Vue 2的移动UI元素 iview ★4458 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2363 - 轻量级的基本UI组件合集 vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★1992 - 三端样式一致的响应式 UI 库 vuetify ★1678 - 为移动而生的Vue JS 2组件框架 vonic ★1494 - 快速构建移动端单页应用 eme ★1390 - 优雅的Markdown编辑器 vue-multiselect ★1166 - Vue.js选择框解决方案 vue-table ★824 - 简化数据表格 VueCircleMenu ★776 - 漂亮的vue圆环菜单 vue-chat ★748 - vuejs和vuex及webpack的聊天示例 radon-ui ★633 - 快速开发产品的Vue组件库 vue-waterfall ★605 - Vue.js的瀑布布局组件 vue-carbon ★595 - 基于 vue 开发MD风格的移动端 vue-beauty ★569 - 由vue和ant

Vue模块 1、Vue都有哪些指令，简单说说？ """ Vue里面常见指令有文本指令：v-text、v-html，属性指令：v-bind，方法指令：v-on，条件指令：v-if、v-show，循环指令：v-for v-html在v-text基础上，还可以解析html代码 v-show是以display:none方式来渲染隐藏的标签，v-if会真的隐藏标签不渲染 """ 2、简单聊一聊Vue组件化开发 """ Vue中的每一个组件就是一个vue实例，也就是vue对象。 组件是由html、css、js组成的独立的页面结构单位，可以完成页面结构的代码复用 一般我们先定义一个组件，然后在使用的父组件中注册，最后使用定义的组件 定义组件template里写html，style中写样式，script中写逻辑 """ 3、vue中你用过哪些第三方插件 """ vue中最常用的插件有 管理路由的vue-router，管理组件间数据仓库的vuex 还使用了vue-cookies来管理cookie，axios来完成前后台的ajax交互 """ drf模块 1、什么是web接口，restful接口规范 """ web接口有四个特点：规定前后台的交互方式；请求的链接；请求的参数；响应的数据结果 restful接口规范可以分三块来讲：请求链接，请求方式，响应结果 请求链接，采用https协议，带api字眼

前言 「本文假定读者已经有初级的前端开发知识，包括HTML、CSS。」 百度在一年前推出了称为 MIP（Mobile Instant Pages）的前端开发组件，主要目的是加速移动端网页的显示。MIP技术来源于谷歌推出的AMP技术，但由于众所周知的原因，百度决定自行开发一套和AMP类似的技术，宣称和AMP规范完全一致。 MIP由MIP-HTML、MIP-JS、MIP-Cache组成。用人话说， MIP-HTML 是MIP对HTML的规范，包括禁用<img>以防止页面repaint、a标签强制要求href属性等，具体 https://www.mipengine.org/doc... ； MIP-JS 要求所有JS代码需要以「MIP组件」的形式引入到页面中，禁止直接写JS。并且，在MIP所有的JS代码都是异步加载的，再加上禁用各种CSS的hack、静态资源固定大小等规范来减少页面重绘，以此提高JS的运行速度； MIP-Cache ，简单说就是百度免费提供的CDN，所有MIP页的代码都放在百度的CDN上，而且对于网页中的静态资源，比如图片，都可以放在百度的CDN上，但由于百度对使用MIP-Cache技术的静态资源的收录时间不确定，所以我建议只对长期不变的静态资源用缓存。 概览 应用MIP技术，按照百度的建议是直接开发一套MIP页面，而不建议「改造」现有移动端H5页。

一、什么是 MVVM ？ MVVM是 Model-View-ViewModel的缩写。 MVVM是一种设计思想。 Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model的对象（桥梁）。 在 MVVM架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大。都是一种设计思想。主要就是 mvc中 Controller演变成 mvvm中的 viewModel。 mvvm主要解决了 mvc中大量的 DOM