大前端之——数据交互

  作为一名web前端工程师,很多人认为前端不就是用来做页面的吗。在上一篇文章我已经说过了,前端可不仅仅做页面,今天我就来简单的介绍工作中的数据处理问题。

  从传统的开发过程来说,前端的主要作用是页面模板,数据渲染都交给的后端去了,到现在,还有很多公司是这种模式。如果你不幸是这个体制下的前端worder,那就要多注意了,现在主流乃至未来的前端的工作流程是怎样的了:

  跟传统模式一样,第一步永远是基本的页面架构,也是我们平时比较熟悉的HTML+CSS。第二部分,也是大家学习过程中很少有机会练习到的数据传输渲染方面。那么平时具体工作中到底怎么实现这些数据绑定的了。

  一般情况下,这些数据是以后台的数据接口形式传输的,数据通过用户不同的操作指令显示渲染再页面中。这个数据模型,控制,视图渲染的模式也就是我们经常听说但一直都不知道是啥的MVC模式。简单来说就是model,view,controller,包括近几年衍生出来的MVVM,MVP模式都是一种解决方案而已。对与前端来说,这些模式在前端框架出来之前是很陌生的,因为大家根本就用不上,你写的页面模板就是给后台人员做视图渲染去了。

  但近几年的大环境是怎么样的,前端框架井喷式爆发,包括比较火热的vue,angular,react,等等。这些框架都各有千秋,而且基本都是基于视图这个功能,也就是说,数据渲染部分开始由前端在控制了,而后台现在在专心处理数据以及服务器就可以了。

  那么我们的数据怎么接收,怎么发送了。这就需要我们了解一点基本的HTTP协议,基于TCP链接的,说简单点,也就是说通过HTTP协议访问的网站实际是在请求一个服务器上的页面资源而已,建立链接后,服务器返回资源,客户机下载资源并解析我们的前端代码。所以,前端的代码是客户机内编译的,而后台的代码一般是在处理服务器的事务逻辑。

  数据最简单的就是表单传输:

<form action="/login" method="post">
    <input type="text" name="user">
    <input type="text" name="pwd">
</form>

  上面这段代码的意思相信有基础的学员都能看懂。我们把数据user和pwd通过post传输的/login中,这个/login就是我们所说的路由了,如果后台处理了/login的post的请求,那么就可以返回原页面一个数据以表示收到了登录请求,至于能不能输入密码成功并登陆成功,可能后台会控制跳转,也有可能AJAX接受这个/login返回的结果来判断是否登陆成功或者失败;

  这是最简单的方法,也是表单传输最常见的方式。

  接下来另外一种方式,也就是我们很多学JS的同学比较崇拜的一个知识点:AJAX(Asynchronous JavaScript and XML)异步的Javascript和XML。

  有时候我很纳闷,很多同学学这一块不知道为什么一直抓不到重点是什么,重点只有一个,异步啊!!

  同样是数据传输,异步这个东西就很有意思了;传统数据IO传输方式是一个线程处理一个IO,或者说一个线程处理多个IO,如果线程不够,那么IO就需要排队。而异步最大的特点就是不排队。这个IO请求后,下一个IO请求接着上,这样就不会出现IO传输阻塞的现象,自然而然会充分利用到了服务器的性能,不浪费任何一丝资源。为什么Node现在很多在做高并发的企业在部署服务器的时候都会加入一个Node分支来处理这些高并发,这样我们服务器的处理能力以及效率相比以前的传统方法高出N倍,这样的说法毫不夸张。比如我们在网上买一个1G的云服务器,能处理的并发量可以达到40W。这个数字很惊人,这了这个概念的存在,我们再也不用担心要在昂贵的服务器上投入过多的成本了。这对后台来说,这是一个福音。

  以上两种就是数据传输的方式,现在看起来是不是很简单?往往很多前端学习者JS都玩不溜就去玩框架,这是一个误区,这些框架的出现除了Node以外,其余的都是各种自身机制,各种开发模式的数据渲染,样式渲染而已,并没有多么复杂的东西。

  所以,包括很多大神写的文章中提到过,我们不要因为框架忘记了我们的本身,前端三板斧HTML+CSS+JS。基础打不好,任何东西都是玩不转的。如果基础好,玩什么都是尽在掌握而已。

  

  

时间: 2024-12-27 18:11:50

大前端之——数据交互的相关文章

从零开始学习WEB前端之数据交互(Ajax)

参考网址:   https://blog.csdn.net/yuzhiqiang_1993/article/details/70159122 原文地址:https://www.cnblogs.com/lucky-ball/p/10364547.html

关于前端和后端数据交互问题

作者:NimoChu链接:https://www.zhihu.com/question/26532621/answer/33144979来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 重新修改答案后整理了一份<前后端数据交互方法> 在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 目录: 1. HTML赋值2. JS赋值3. script填充JSON4. AJAX获取JSON5. WebSocket实时传输数据6. 总结 1.

php 接口与前端数据交互实现

最近在做前后端数据交互的尝试,也跳了很多坑,使用的是php+bootstrap-table+js,把一些收获记录在这里,方便查询. 这个小项目,仅有3个文件,分别为: crud.html data.php crud.sql 数据交互实现1:查询 mysql 数据库建表 php查询接口 前端数据展现 mysql 数据库建表 数据库名称:crud 第一个表名:t_users 主键:user_id,自增长排列 php: <?php //测试php是否可以拿到数据库中的数据 /*echo "444

linux 共享内存shm_open实现进程间大数据交互

linux 共享内存shm_open实现进程间大数据交互 read.c #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <stdio.h> #include <sys/mman.h> #include <string.h> #include <errno.h> #include <unistd.h> /* int

jQuery Ajax 前端和后端数据交互的问题

原理:前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收1)提交表单数据2)提交JSON数据 后端的数据接收与响应1)接收GET请求数据2)接收POST请求数据3)响应请求 1.提交表单数据 1)GET请求 1 var data = { 2 "name": "test", 3 "age": 1 4 }; 5 $.ajax({ 6 type: 'GET', 7 url:

JavaScript模板引擎实现数据交互

经过1年的磨练,近期终于稍微明白到,前端是怎么做到企业要求的:数据交互. 1,ajax+json这个是必须学的,但没问题,我们可以通过这个博客来慢慢了解怎么回事? 2,可以通过JS框架和JS模板来实现,但最后还是要用到ajax+json的. 注意:个人建议 假如项目页面数量是少于50-100个的,那么推荐使用JS模板:如果大于100个的用JS框架.各有各优势嘛. 今晚的博客分几次写完,看到这句话删除就证明已经写完了. 先分享JS模板的内容:我这次推荐使用百度的模板引擎,因为他比腾讯的art运行速

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导致Cookies数据无法获取. 最开始通过头部(Header)将Cookies传输到其WebAPI,也能解决问题. 下面讲述另外一种解决方案. 解决过

前端与后台交互所需技术

1.前端请求数据URL的谁来写? 在开发中,URL主要是由后台来写,写好了之后再给前端开发者. 如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数:如: select "产品图片","优惠[买2送花茶]","产品名称","商品价格","是否包邮" from tb_goodList where time = "传递过来的参数" 如果没有后面

大前端学习笔记整理【七】HTTP协议以及http与https的区别

前言 还是老样子,新博客开始前总是想先啰嗦几句...HTTP协议其实在当初学习java时老师就有提过...但是...反正就那么过去了... 这段时间公司的项目正好要求做https的转换和迁移,然后自己思考了一下,好像自己对于http连一知半解都算不上...更不提http与https的区别...想想作为一个未来的大前端工程师,岂能不去研究这些东西? 好吧,废话就到这里...正文开始 什么是HTTP? 以下来自度娘最为专业的解释: 超文本传输协议(HTTP,HyperText Transfer Pr