Ajax+Node.js前后端交互最佳入门实践(01)
1.Node.js简介
1.0.前后台数据交互流程
在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首先,我们来看一张生活中几乎每个人都经历过的一个场景,如下图:
当你去餐馆吃饭的时候,坐下后服务员会带着一个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐一完成,菜做完后叫服务员给你上菜,就这么一个场景其实和我们web开发中的前后台交互竟是如此相似,我们来看看哪些点是相似的:
1 菜单---浏览器页面, 你看到的菜单如果在web开发中,就相当于用户看到的浏览器页面
2 点菜(记录想吃的菜) --- 点击页面(和页面交互,例如:点击登录)
3 服务员把菜单交给后厨 --- 发送数据(可以把数据理解为菜单)到后台(可以把后台理解为后厨)
4 后厨做菜 --- 后台处理数据
5 上菜 --- 后台把处理好的数据发送给前台
根据上面的一些相似点,我们总结一下前后台的特点:
1、前台是对用户可见的,例如,菜单、你能看到的网站页面(如螺钉课堂首页)
2、后台对用户是不可见的,用户也不用关心后台具体在干什么,用户只需要知道吃什么菜(具体想看那些页面数据),而并不关心这些菜如何做的(一般后厨不对外开放)
3、后厨和餐桌之间是需要建立通信连接的,这事儿由服务员来完成,在网络中具体就是那些网络传输设备来完成
综上所述,我想你应该大致猜出前端工程师和后端工程师具体做哪些工作了,前端工程师主要负责页面展示,这里包括pc端、移动端、TV端等,需要考虑如何把后端给我的数据显示得更好看,也就是说我得把菜单做得非常好看,客户点菜才更有欲望,这其中客户点菜的交互过程也是非常重要的,关系到用户的使用体验,还有一个非常重要的职责就是要把数据发送到后台去处理,用户和页面交互的时候需要什么,不需要什么,怎样做才能提高体验也是前端需要关心的,一句话概括就是前端负责用户的体验,后台主要就是处理数据,这个过程不需要让用户知道,你可以去仓库拿原材料,用各种工具各种方式来完成菜谱上的各种菜,只需要最终呈上一道可口的菜就行,总结起来就是前端负责和用户交互,后台负责处理数据,下面我们通过一幅图来给大家展示:
1.1.Node.js是什么
Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装
让我们再来回顾一下前面讲dom的时候的一张关系图
总结一下重点:
1 ECMAScript是JavaScript的标准
2 JavaScript在浏览器端依赖于DOM和BOM提供的接口,有了这些接口可以操作网页中的元素和浏览器
3 JavaScript在后端也需要运行环境那就是Node.js,它扩展了一些模块,让js有后端开发的能力
4 相关的规范组织 W3C、ECMA、CommonJs
1.2.Node.js安装
下载地址: https://nodejs.org/en/download/
根据自己的平台和操作系统位数选择下载,下载完成后双击安装,一直点下一步就可以,最好安装在默认位置,以免出现未知问题
安装好后测试是否安装成功:
node -v
如果出现node的版本号说明安装成功
1.3.开发工具安装
这次我们会换一个编辑器来开发Node代码,这个编辑器叫webstorm,对Node开发更加友好,下载地址:点击进入官网
安装方法也是直接点击下一步
1.4.第一个程序
1 启动webstorm,第一次打开会问你是否导入已经有的配置文件,通常选择第二个
2 询问你是否同意一些条款,这个你必须同意才能使用 选择第一个按钮
3 询问你是激活版本还是说试用30天,可以自己购买,也可以先免费使用30天,关于如何激活的问题,请联系QQ解决
4 最好一个弹出项目 点击接收
5 选择一个你喜欢的主题色吧,白色或者黑色
6 如果你不喜欢现在的主题,也可以安装新主题,最后开始代码边写
7 创建项目
8 选择项目存放位置,然后点击create
9 进入到主界面就可以新建文件,写代码了,关于设置问题,可以看视频教程
10 在新建的文件里面输入一段代码 然后右键 --> run 就可以运行了
转载于:https://www.cnblogs.com/nodeing/p/8808984.html
Ajax+Node.js前后端交互最佳入门实践(01)相关推荐
- Ajax+Node.js前后端交互最佳入门实践(05)
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...
- Ajax+Node.js前后端交互最佳入门实践(04)
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
- vue+node.js前后端交互中的token令牌验证
这篇文章分享一下本人学习vue+node.js前后端交互中的登录token令牌的心得 最近准备写一个个人博客网站,前端采用的是vue+element,后端用node.js 在做用户登录的时候就想到 如 ...
- Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...
- Ajax(实现前后端交互效果)
Ajax学习目标: 能够知道和服务器相关的基本概念:知道客户端和服务器通信的过程:什么是Ajax以及应用场景,知道接口和接口文档的概念. 1.客户端和服务器概念: 上网的本质目的:通过互联网的形式来获 ...
- 【项目实战】mybatis +vue.js 前后端交互批量删除
单个删除功能已经实现了,批量删除弄了很久也没弄好,来试一下.弄了很久终于把批量删除实现了! 结果: 点击确认后,将看见表中已经少了两条数据. 实现的关键是:1.正确传递数据给后端的js语句 2.后端接 ...
- (二)使用Ajax简单实现前后端交互
实现效果: 点击提交后: 前端页面源码: <!DOCTYPE html> <html lang="en">
- 腾讯天气前后端交互案例
简介 此案例主要是应用jQuery里的$.ajax()方法进行前后端交互 获取url方法 搜索 腾讯天气 F12 Network 刷新 找到这个 右键 点击Open in new tab 会看到如下页 ...
- 前后端交互ajax和axios入门讲解,以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言 一.Aj ...
最新文章
- 精灵动画Animation对话框组成Idle动画的各精灵
- Spring Boot 缓存开发实战
- Kibana查询ES报错:[circuit_breaking_exception] [parent] Data too large
- 把解压缩版的tomcat6注册成服务并设置自启动
- 燕十八MySQL优化学习笔记
- Atitit 项目源码管理 attilax著 1. 源码结构sdk目录结构	1 1.1. 源码分类,配置文件,主程序文件,sql文件	1 2. 源码管理,提交,更新,与同步	1 2.1. 源码同步
- paip.常用android手机软件----语音篇
- 3.3 DXC简介——HANA数据抽取和同步
- 2.1.5 物理路径泄漏_最新的泄漏的Windows 8.1 Build显示出继续关注波兰语和改进功能...
- ubuntu16.04,exFAT格式U盘无法打开,离线解决方式
- window中的DLL和linux中的os文件是什么东西
- 安装sikuli报错:jnius/jnius_conversion.pxi:54:31: Casting temporary Python object to non-numeric non-Pyth
- 如何用MFC画出直线、虚线、折线、圆、椭圆、矩形、弧形(附上源码)
- 51单片机节日彩灯控制c语言,采用AT89C51单片机设计的可编程彩灯控制
- 大数据毕设 - 网络游戏数据分析与可视化(python 大数据)
- 文件上传漏洞利用介绍
- Canvas实现网页协同画板
- 一个asp.net OOM问题
- nrm : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\nrm.ps1,因为在此系统上禁止运行脚本
- 纸业供应链协同管理系统:全链路数字化,实现供应链平台订单智能管控
热门文章
- C4C权限控制的一些特色功能和测试
- 第十二届蓝桥杯JavaB组省赛H题 杨辉三角形
- android tv market,安卓市场TV版
- python 连续比较_For循环比较python中以前的值
- 用计算机模拟光子行为,光量子玻色—费米模拟系统的设计与实现
- verilog 简单module_一个简单的verilog小程序
- MySQL更新会影响查询吗_mysql更新查询不会执行
- intel fpga 开发工具Quartus Prime 软件的安装,使用详细教程
- 澳大利亚 计算机 博士,澳大利亚迪肯大学招收计算机博士
- 冒泡算法代码java_java版本的冒泡算法