前端架构

（如果对SPA概念不清楚的同学可以先自行了解相关概念） 平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Application）的方式来进行开发。这种开发方式是在之前一年做的一个创业项目的经验和思考，一直想写篇博客来总结一下。 个人认为单页面应用的优势相当明显： 前后端职责分离，架构清晰：前端进行交互逻辑，后端负责数据处理。 前后端单独开发、单独测试。 良好的交互体验，前端进行的是局部渲染。避免了不必要的跳转和重复渲染。 当然，SPA也有它自身的缺点，例如不利于搜索引擎优化等等，这些问题也有其相应的解决方案。 下面要介绍的这种方式可以说是一种模式或者工作流，和前端使用什么框架无关，也和后端使用什么语言、数据库无关。不能说是The Best Practice，我相信经过更多人的讨论和思考会有A Better Practice。:) 概览 下图展示了这种模式的整个前后端及各自的主要组成： 看起来有点复杂，接下来会仔细地对上面每一个部分进行解释。看完本文，就应该能理解上图中的各部件之间的交互流程。 前端架构 把上图的前端部分单独抽出来进行研究： 前端中大致分为四种类型的模块： components：前端UI组件 services：前端数据缓存和操作层 databus：封装一系列Ajax操作，和后端进行数据交互的部件 common/utils：以上组件的共用部件

初学Vue+Vue.js环境搭建+vue的MVVM架构+Vue.js指令 前端必学 vue.js,argular.js,react.js 项目前端_Vue.js环境搭建 1.通过CDN加速的方式可以引入vue(需要联网) 进入BootCDN官网：https://www.bootcdn.cn/。 进入vue界面引入vue.js 引入vue.js 2.通过下载本地vue.js的方式(单页应用) 将js文件中的vue.js引入到html页面 3.vue-cli脚手架的方式(大型项目) 可去往该博客查看 https://segmentfault.com/a/1190000013950461 基于vue实现简单的MVVM架构 数据---model---viewModel---view MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者， 通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令， 最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 ->视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。 学习顺序（推荐）: 实现VMVM、数据代理、实现Observe、实现Complie、实现Watcher。 指令: 指令比{{}}有更高的优先级

1.前端初识 import socket sk = socket.socket() sk.bind(('127.0.0.1',9000)) sk.listen() try: conn,addr = sk.accept() ret = conn.recv(1024) conn.send(b'HTTP/1.1 200 OK \r\n\r\n') # conn.send('你好'.encode('GBK')) # bytes with open('new.html',encoding='utf-8') as f: conn.send(f.read().encode('GBK')) except Exception as e: print(e) finally: conn.close() sk.close() B/S b browser s server http request http请求 http response http响应 http和socket B/S架构是http协议 http协议基于socket的TCP协议在通信 为了标识new是一个前端显示的文件,我们要给他取一个后缀名 : .html 2.标签 浏览器怎么和server端交互 前端的文件有一个后缀名 : html web端的组成 : html 一堆标签组成的内容 基础的排版和样式 css 描述了标签的样式 js/jq

先整理一部分，以后遇到到好的资料再添加进来。欢迎一起学习nodeJS，行走在JavaScript全栈工程师的康庄大道上。 1、 廖雪峰老师的官网 2、 Node.js让您的前端开发像子弹飞一样 3、[技术前端解析] 这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速，涉及的技术点很多，我们往往需要阅读很多书籍才能理解前端技术的知识体系。这本书在前端知识体系上做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，起到一个启蒙作用， 能帮助读者快速把握前端技术的整个脉络，培养更完善的体系化思维 ，掌握更多灵活的前端代码架构方法，使读者获得成为高级前端工程师或架构师所必须具备的思维和能力。 来源： CSDN 作者： Alice爱俪丝 链接： https://blog.csdn.net/qq_18144905/article/details/82626248

　　前后端分离这个词相信大家都听过，不知道大家是怎么理解的呢。前阵子看项目的时候，有一段实现硬是没看懂，下面来给大家说一下一段愚蠢的经历哈。 　　(我没正正式式写过前端，所以如果文章有错的地方希望可以在评论区友善交流~) 　　一、交代背景 　　我一直都知道我现在的这个系统是前后端分离的，我的接口只会返回JSON出去，但我不曾关心前端是怎么处理我的JSON数据的(以及他是怎么跑通和运行的) 　　在某一天，我在查接口的时候，习惯F12，想直接看一下这个请求返回的JSON数据是什么。但是一看，在network返回的是html格式： 　　 请求的信息 　　于是，我就很好奇啊，就看一下这个接口是不是我想象中的那个。于是就去找我的接口，看一下是不是真的返回JSON(我还专门Debug了一下，看看是不是真请求到这个接口上了)： 　　 接口信息 　　得出的结果是：我的接口的确是返回JSON数据，浏览器的reponse返回的的确是HTML格式。 　　于是，我就去找我前端的小伙伴，去问了一下这是怎么搞的。他回复我说：“在浏览器看到返回的是页面，那肯定是你们后端干的呀” 　　我说:“没有啊，我Java接口返回的是JSON数据啊，是不是中途你们用node做了些处理啊?”(我之前听过Node.js，但仅仅是听过) 　　他说：“Node.js也是你们后端的啊。” 　　我一听，啊?Node.js不是属于前端的吗

修订日期 姓名 邮箱 2018-10-18 brucefeng brucefeng@brucefeng.com 前言 写这篇文章的初衷其实很简单，在MyEtherWallet上申请以太坊ENS的时候，竞标的以太币两次被吞，而且是在规定时间点进行了价格公告，这篇文章的设计思路其实就是跟ENS的竞标流程类似，希望对大家有所帮助，所以，准备写完之后，再重新去整一次ENS的申请，如果再被吞，我就要举报了:-),本文主要是本人用于项目整理，便于自己查询，不做任何商业用途。 现在回归到技术上来，这个项目其实涉及到蛮多的知识点的，是非常不错的以太坊智能合约以及Dapp学习项目，至少在目前而言，还没有看到特别好的学习项目被分享出来，通过该项目，我们可以掌握如下内容: 以太坊智能合约编程语言Solidity的编写 智能合约框架Truffle的学习与使用 以太坊与IPFS的整合 NodeJS编程学习 以太坊Web3JS的接口学习 Dapp与主流数据库的整合(本文为NoSQL类型的MongoDB) 维克里拍卖法则 一.项目介绍 1.项目功能 (1)项目展示 允许商家列出项目，我们将为任何人建立免费列出项目的功能，我们会将这些项目都存储在区块链和非区块链的数据库中，方便查询。 (2) 文件存储 将文件添加到IPFS：我们将商品图像和商品描述(大文本)上传至IPFS的功能。 (3)浏览商品

本篇文章转自微信公众号【边城客栈】，分享给大家 原文链接： https://mp.weixin.qq.com/s/nKvjsU2frT5NDU4DLWqvYg 一、前言 前后端分离并不是什么新鲜事，到处都是前后端分离的实践。然而一些历史项目在从一体化 Web 设计转向前后端分离的架构时，仍然不可避免的会遇到各种各样的问题。由于层出不穷的问题，甚至会有团队质疑，一体化好好的，为什么要前后端分离？ 说到底，并不是前后分离不好，只是可能不适合，或者说……设计思维还没有转变过来…… 一体式 Web 架构示意 前后分离式 Web 架构示意 二、为什么要前后端分离 比为什么要前后端分离更现实的问题是什么时候需要前后端分离，即前后端分离的应用场景。 说起这个问题，我想到了 2011 年左右，公司在以 .NET 开发团队为主的基础上扩展了 Java 团队，两个团队虽然是在做不同的产品，但是仍然存在大量重复性的开发，比如用 ASP.NET WebPage 写了组织机构相关的页面，用 JSP 又要再写一遍。在这种情况下，团队就开始思考这样一个方案：如果前端实现与后端技术无关，那页面呈现的部分就可以共用，不同的后端技术只需要实现后端业务逻辑就好。 方案根本要解决的问题是把数据和页面剥离开来。应对这种需求的技术是现成的，前端采用静态网页相关的技术，HTML + CSS + JavaScript，通过