中软Day15——网站区别,前后端分离,JSON

中软Day15

网站

网站有一系列页面组成 (页面有js css html组成) 所有文件统称资源

静态网站

提前写好的html页面

  • 没有后台,它的页面在服务器中以静态网页的形式存在。

  • 随着网站规模的扩大可维护逐渐降低。

  • 没有交互性( 用户访问的时候直接将页面从服务器返回由浏览器渲染而不需要通过动态修改页面,所以当我们有修改页面的需求的时候只能让浏览器访问其它页面所以实际上是直接跳到另一个页面上去)。

  • 静态页面是写在服务器上的不能随时改动,静态是一次性写好放在服务器上进行浏览的,如果想改动,则必须在页面上修改,然后再上传服务起覆盖原来的页面,页面不能随时进行更改;

  • 静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”;

  • 网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件;

  • 静态web无法链接数据库;

  • 由于静态web资源开发技术:HTML;

  • 由于现在的web页面中,大量使用JS,导致浏览器打开页面,就会占用大量的内存,服务端的压力是减轻了,但压力转移到客户端。

  • 静态页面的运行机制:客户端使用web浏览器(IE)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需要得到那个页面,所有的请求都交给web服务器,之后web服务器根据用户的需要,从文件系统(存放了所有静态页面的磁盘)取出内容。之后通过web服务器返回给客户端,客户端接收到内容之后经过浏览起渲染解析,得到显示效果。

  • 为了让静态web页面显示更加好看,使用Javascript/VBScript/ajax(异步JavaScript和XML,是指一种创建交互式网页应用的网页开发技术。)但是这些特效都是在客户端借助于浏览器展现给用户的,所以在服务器上本身并没有任何的变化。

动态网站

html是动态生成,动态不一定是一个完整的界面 有可能知识页面的一部分 或者仅仅是数据(普通字符串 xml json

  • 动态网站有后台使用数据库存储数据,由动态页面组成。

  • 在用户访问的时候动态生成页面再返回到浏览器中渲染,

    • A.当页面需要修改内容的时候其实是整页面刷新,

      B.其实是一个页面的不同表现形式而已,所以它的地址没变只是加上查询字符串让后端知道我
      们需要该页面的哪一种表现形式。

      C.比如以下php页面,

      a.在地址栏访问到页面且地址没有带查询字符串时,页面呈现的是‘动态网站’,

      b.而在地址后加上名字为flag的查询字符串,当flag=0时候在‘动态网站’上面动态添加了‘张
      三’,当flag=1时候,原来显示‘张三’的地方被修改成‘18’

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>dynamic</title>
      </head>
      <body>
          
              // 动态添加内容:
              $name = '张三';
              $age = '18';
              $flag = $_GET['flag'];
              if($flag == 1) {
               
                  echo $name;
              }else if($flag == 2) {
               
                  echo $age;
              }
          ?>
          <div>动态网站</div> 
      </body>
      </html>
      
  • 动态网站中并不是所有的页面都是动态生成的页面,也有可能存在静态页面。

  • 动态网站也可以采用静动结合的原则,适合采用动态网页的地方用动态网页,如果必要使用静态网页,则可以考虑用静态网页的方法来实现,在同一个网站上,动态网页内容和静态网页内容同时存在也是很常见的事情。

    动态页面的内容一般都是依靠服务器端的程序来生成的,不同人、不同时候访问页面,显示的内容都可能不同。网页设计者在写好服务器端的页面程序后,不需要手工控制,页面内容会按照页面程序的安排自动更改变换。

  • 采用动态网页技术的网站可以实现更多功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等;

  • 动态网页以数据库技术为基础,可以大大降低网站维护的工作量;

  • 动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页;

  • 动态网页中的“?”对I搜索引擎检索存在一定的问题,搜索引擎一般不可能从一个网站的数据库中访问全部网页,或者处于技术方面的考虑,搜索蜘蛛不去抓取网址中“?”后面的内容,因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

  • 实现动态网站的技术

    • php
    • java(jsp)
    • .net
    • Node.js 运行在服务器端的JavaScript
    • python 蟒蛇

两者区别

简单的可以这样判断:第一,先后缀名,第二看是否能与服务器发生交互行为。

静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站。

动态网站可维护性高,扩展性强,成本比较高

静态网站可维护性低,扩展性低

程序是否在服务器端运行,是重要标志。

在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页。

运行于客户端的程序、网页、插件、组件,属于静态网页,

静态网页和动态网页各有特点,网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少,如果网站功能比较简单,内容更新量不是很大,采用纯静态网页的方式会更简单,反之一般要采用动态网页技术来实现。

两者访问流程区别

如果客户端请求的是静态资源(.htm或者是.htm),则将请求直接转交给WEB服务器,之后WEB服务器从文件系统中取出内容,发送回客户端浏览器进行解析执行。

如果客户端请求的是动态资源.jsp、.asp/.aspx、.php),则先将请求转交给WEB Container(WEB容器),在WEB Container中连接数据库,从数据库中取出数据等一系列操作后动态拼凑页面的展示内容,拼凑页面的展示内容后,把所有的展示内容交给WEB服务器,之后通过WEB服务器将内容发送回客户端浏览器进行解析执行。再进一步深入分析动态web的访问过程:浏览器访问web时,看似是直接访问的jsp页面,其实是,最先到达的地方是服务器,服务器创建好req和resp对象后再给jsp页面使用。在jsp中完成设置字符集和取得表单参数后再调用servlet,完成业务处理。然后返回到jsp,jsp就会生成相应的html页面。该页面会返回到服务器,再由服务器,通过response对象返回给客户端。

两者访问服务器区别

动态与静态最根本的区别是在网页在服务器端运行状态不同。 下面是图解:

静态网页服务器的运行状态
         中软Day15——网站区别,前后端分离,JSON_第1张图片

动态网页服务器运行状态有以下几各情况:
  1 没有数据库的情况
      中软Day15——网站区别,前后端分离,JSON_第2张图片

2 有数据库的情况
    中软Day15——网站区别,前后端分离,JSON_第3张图片

3 有多个数据库的情况
    中软Day15——网站区别,前后端分离,JSON_第4张图片

4 服务器均衡

中软Day15——网站区别,前后端分离,JSON_第5张图片

json数据和普通的js对象的区别

  • json没有变量
  • json数据的结尾没有分号
  • json数据中的键必须用双引号包住
var obj = {
     
	name:"tom";
	age:12,
	hobbits:["codeing","running","singing"],
	body:{
     
		high:'180cm',
		weight:'180kg'
	}
}
var  json = '{username:'Tom',"age":"18"}';
		 var obj = JSON.parse(json);
		 console.log(obj);
		 var str1 = JSON.stringify(obj);
		 console.log(str1);

1、什么是Ajax和JSON,它们的优缺点**

Ajax是全称是asynchronous JavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页面局部刷新

优点:可以实现异步通信效果,页面局部刷新,带来更好的用户体验

JSON是一种轻量级的数据交换格式,看着像对象,本质是字符串

优点:轻量级、易于人的阅读和编写,便于js解析,支持复合数据类型

前后端分离

  • 跨域

    • 跨域:当浏览器执行脚本时会检查是否同源,只有同源的脚本才会执行,如果不同源即为跨域。

    • 这里的同源指访问的协议、域名、端口都相同。

    • 同源策略是由 Netscape 提出的著名安全策略,是浏览器最核心、基本的安全功能,它限制了一个源中加载脚本与来自其他源中资源的交互方式。

    • Ajax 发起的跨域 HTTP 请求,结果被浏览器拦截,同时 Ajax 请求不能携带与本网站不同源的 Cookie。

  • 模板引擎

    模板+数据 ==》 静态页面数据

    模板引擎可以让将数据和HTML模板更加友好的结合,省去繁琐的字符串拼接,使代码更加易于维护。

    ART-TEMPLATE

    高性能 JavaScript 模板引擎,使用npm install art-template命令下载

    • 模板编译

      通过调用模板引擎提供的template函数,告知模板引擎将特定模板和特定数据进行拼接,最终返回拼接结果。

      // 模板引擎导入
      const template = require('art-template');
      // 模板编译
      // 1.模板位置
      // 2.向模板中传递要拼接的数据,对象类型,对象属性可以直接在模板中使用。
      // result 拼接结果
      const result = template('./views/index.html', {
               msg: 'Hello, art-template'});
      
    • 模板语法

      通过模板引擎提供的特殊语法,告知模板引擎数据和模板具体的拼接细节。

      • 插值表达式

        即{ {}},用来显示数据,将数据变量放入双大括号中即可。

      • 原始语法,<%%>

        标准语法: { { 数据 }} // 原始语法:<%=数据 %>

      插值表达式中可以进行运算,最终显式运算的结果。

        
       <h2>{
              {value}}h2>
       <h2>{
              {a ? b : c}}h2>
       <h2>{
              {a + b}}h2>
       
        
       <h2><%= value %>h2>
       <h2><%= a ? b : c %>h2>
       <h2><%= a + b %>h2>
      
      • 原文输出

      如果数据中携带HTML标签,默认不会解析标签,会将其转义后输出。使用以下方式可以解析标签。

      {
              {@ value }}
      
      • 条件判断
       
       {
              {if 条件}} ... {
              {/if}}
       {
              {if v1}} ... {
              {else if v2}} ... {
              {/if}}
       
       <% if (value) { %> ... <% } %>
       <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
      
      • 数据循环
      {
               {
               each target}}
           {
               {
               $index}} {
               {
               $value}}
       {
               {
               /each}}
        <!-- 原始语法 -->
       <% for(var i = 0; i < target.length; i++){
                %>
           <%= i %> <%= target[i] %>
       <% } %>
      
      • 处理函数
      function change(data,str){
               
      		let newStr = str.replace(/{
               \*(\w+)\*}/g,function(a,b){
               
      				return data[b];
      		})
      		return newStr
      	}
      
    • 子模板

      使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。

        
       {
              {include './header.art'}}
        
       <% include('./header.art') %>
      
    • 模板继承

      {
              {extend './layout.html'}}
      {
              {block 'head'}} ... {
              {/block}}
      
    • 流行的模板引擎

      • artTemplate 腾讯
      • baiduTemplate 百度
      • kissyTemplate 阿里

JSON

JavaScript Object Notation,轻量级的数据交换格式。他其实时ECMAScript的一个子集。

json是完全独立与编程语言的文本格式。

  • json的格式

    ‘{“username“:”“张三”}’

  • json数组

  • ‘[]’

JSON 描述

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

语法规则

  1. JSON是由‘名称/值’对组成的集合,’名称/值‘格式例如,“key1”:value1。

  2. JSON的值(value) 可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。

  3. JSON有两种结构,一种是对象,另一种是数组。

    1. 对象(object),是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号) 分 隔。 是由{}括起来的,格式例如,{“key1”:value1,“key2”:value2,“key3”:value3,…}。

    2. 数组(array) ,是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔,是由[]括起来的。格式例如,[{“key1”:value1,“key2”:value2,“key3”:value3},{“key1”:value1,“key2”:value2,“key3”:value3}…]。

    • 并列的数据之间用逗号(“,”)分隔。

你可能感兴趣的:(中软学习笔记,JSON)