首页 > 其他分享 >angualr基础

angualr基础

时间:2023-06-26 19:11:18浏览次数:38  
标签:基础 Component class export angualr import OnInit angular

一、Angular概述

基于命令行的开发方式?
①hot reload
②编译工作
③集成了webpack打包工具
。。。。


angular.cn 中文
angular.io 正式官网
angular.cn/guide/styleguide 风格指南

1、what?
angular是一个Google推出的js框架,是以模块为基本单位,模块又可以包含组件、指令、过滤器。。

1.1 版本问题
angular angular2.0以后所有的版本统称为angular
(当前学习ng4.0)

angular.js angular1.* 统称为angular.js
(http://www.runoob.com/angularjs/angularjs-tutorial.html)

1.2 版本之间的区别
①新版本是有组件的概念的
②老版本是$scope和controller为主
③angular引入了rxjs
④angular采用ts(typescript是es6的超集,是由微软和谷歌) ts是一种强类型检查机制的语言
⑤angular可读性、提高了代码的复用率、维护成本变低。。。

2、where
可以使用支持angular的Ionic框架来实现移动端的开发,直接使用angular来实现pc端的开发

实现操作比较频繁的SPA

3、why
①遵循w3c所推出的webComponent标准(组件化)
②代码具有更好的可读性和可维护性、
③引入了更多的高效率的工具 ,比如rxjs\immutable.js。。。, 让代码的编译、部署更简单
④ts --》 健壮

4、how
用 Angular 扩展语法编写 HTML 模板,
用组件类管理这些模板,
用服务添加应用逻辑,
用模块打包发布组件与服务。

angular的开发整体框架,是有8大组成部分构成:
①组件:定义视图

②服务:将经常用到的数据和方法封装在一个类中;这能让你的代码更加模块化、可复用,而且高效

③依赖注入(DI): 服务的元数据提供了一些信息,Angular 要用这些信息来让组件可以通过使用该服务

④装饰器:用来描述当前这个类是一个什么样的类 @Component @NgModule @Pipe @Directive @Injectable

⑤模板:普通的 HTML 和指令与绑定标记(markup)组合起来

⑥指令:模板中的指令会提供程序逻辑
循环、条件判断。。。

⑦数据绑定:绑定标记会把你应用中的数据和 DOM 连接在一起。
①事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。
②属性绑定让你将从应用数据中计算出来的值插入到 HTML 中。
③双向数据绑定

⑧管道:转换要显示的值以增强用户体验

搭建环境的方式:
方式1:
①下载quickstart-master.zip压缩包
https://github.com/angular/quickstart download
或者 直接拷贝老师提供的压缩包
②解压缩 压缩包,进入对应的目录中
执行npm install 安装项目所需要用到的依赖
③npm start 启动开发服务器

方式2:
Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
//安装基于angular的命令工具
npm install -g @angular/cli
//创建一个有着ng模板的项目
ng new my-app
//进入当前目录下的my-app
cd my-app
//启动开发服务器
ng serve --open

 

 

 

 

 

①创建文件 app/test/test.component.ts           ②将类装饰成一个组件类             import {Component} from '@angular/core'                     @Component({                 selector:'test',                 template:`<h1>it is a test</h1>`             })               export class Demo01Component{             }         ③使用组件             ①到模块中声明                 app.module.ts中,                 import {TestComponent} from './test/test.component'                   @NgModule({                     declarations:[TestComponent]                 })             ②<test></test> demo01 <wiz_code_mirror>          
//  组件是可被反复使用的,带有特定功能的视图 
 
import {Component}  from '@angular/core'
 
@Component({
    selector:'demo01',
    template:'<h1>this is our first component</h1>'
})
 
export class Demo01Component{
 
}
      demo02_lianxi   <wiz_code_mirror>          
import {Component} from '@angular/core'
 
@Component({
    selector:'demo02',
    template:`<ul>
        <li>test01</li>              
        <li>test02</li>              
        <li>test03</li>              
        <li>test04</li>              
        <li>test05</li>              
    </ul>`
})
 
export class Demo02Component{}
        demo03_for <wiz_code_mirror>          
import {Component} from '@angular/core'
 
@Component({
    selector:'demo03',
    template:`
        <h1>这是demo03</h1>
        <ul>
            <ng-container *ngFor="let tmp of list;let myIndex=index" >
            <li 
           *ngIf="myIndex<2"
            >
 
                {{"index is"+myIndex+" value is"+tmp}}
 
            </li>
            </ng-container>
        </ul>
        <p *ngIf="isMember">仅会员可见</p>
    `
})
 
export class Demo03Component{
    /*
         ts 指定数据类型
         count:number = 1
         hasMore:boolean = true
    */
    list:Array<any>=[100,200,300];
    isMember:boolean = true;
    
 
}
        demo04_lianxi <wiz_code_mirror>          
import {Component} from '@angular/core'
 
@Component({
    selector:'demo04',
    template:`
        <h1>学生数组的练习</h1>
        <table>
            <thead>
              <tr>
               <th>年龄</th>
               <th>性别</th>
               <th>成绩</th>
              </tr>
            </thead>
        <tbody>
            <ng-container 
             *ngFor="let stu of stuList">
                <tr
                *ngIf="stu.score > 80">
                    <td>{{stu.age}}</td>
                    <td>{{stu.sex}}</td>
                    <td>{{stu.score}}</td>
                </tr>
            </ng-container>
        </tbody>
        </table>   
    `
})
 
export class Demo04Component{
    stuList:Array<any> = [
        {age:20,sex:1,score:85},
        {age:30,sex:1,score:70},
        {age:19,sex:1,score:86},
        {age:21,sex:1,score:90},
        {age:22,sex:1,score:30}
    ];
}
      demo05_directive <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'demo05',
    templateUrl: './demo05.component.html'
})
 
export class Demo05Component implements OnInit {
    answer:string='a';
    imgName:string='1.jpg';
    uName:string="zhangsan";
 
    //构造函数 简单的数据初始化
    constructor() { 
        console.log('在构造函数中...');
    }
 
    //复杂的数据初始化
    ngOnInit() {
        console.log('组件正在初始化');
     }
 
    //按钮按下时处理函数
    handleClick(){
        console.log('按钮被按下了');
    }
 
    //当双向数据绑定的数据发生变化时
    handleModelChange(msg:any){
        console.log(msg)
        console.log(this.uName);
    }
}
      <wiz_code_mirror>          
<h1>It is a test</h1>
 
<!--多重分支判断指令-->
<div [ngSwitch]="answer">
    <p *ngSwitchCase="'a'">A</p>
    <p *ngSwitchCase="'b'">B</p>
    <p *ngSwitchCase="'c'">C</p>
    <p *ngSwitchCase="'d'">D</p>
    <p *ngSwitchDefault>
        请输入正确的选项
    </p>
</div>
 
<!--属性绑定-->
<img 
src="../../img/1.jpg" alt="">
 
<img [src]="'../../img/'+imgName" alt="">
 
<!--事件绑定-->
<button (click)='handleClick()'>
    clickMe
</button>
 
<!--双向数据绑定-->
<input 
type="text" 
[(ngModel)]="uName"
(ngModelChange)="handleModelChange($event)"
/>
      demo06_custom_directive <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'demo06',
    template: '<h1 test="123">这是自定义指令demo</h1>'
})
 
export class Demo06Component implements OnInit {
    constructor() { }
 
    ngOnInit() { }
}
      <wiz_code_mirror>          
// a-directive
 
import { Directive,ElementRef,Input,OnInit} from '@angular/core';
 
@Directive({ selector: '[test]' })
export class TestDirective implements OnInit
{
    //@Input() test="";
    @Input('test') myTest="";
 
    constructor(private el:ElementRef) { 
        console.log('自定义指令被调用了');
        console.log(el);
        // console.log(this.test);
    }
    //初始化时 会自动调用的一个方法
    ngOnInit(){
        //将调用指令的元素 背景色设置一下
        this.el.nativeElement.style.backgroundColor = '#ff0000'
        // console.log(this.test);
        console.log(this.myTest);
    }
}
          demo07_communication   xiaotou <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'xiaotou',
    template: `
        <h1>这是父组件</h1>
        <datou 
        (toFatherEvent)="rcvMsg($event)"
        [myValue]="treasure">
        <datou>
    `
})
 
export class XiaoTouComponent implements OnInit {
    treasure:string = "传家宝";
    constructor() { }
 
    ngOnInit() { }
 
    rcvMsg(msg:any){
        console.log('儿子传来的信息是'+msg);
    }
}
      datou <wiz_code_mirror>          
import { Component,Input,Output,EventEmitter, OnInit } from '@angular/core';
 
@Component({
    selector: 'datou',
    template: `
        <h3>这是子组件</h3>
        <p>{{"父组件传来的值"+myValue}}</p>
        <button (click)="askFather()">
            问候
        </button>
    `
})
export class DaTouComponent implements OnInit {
    // 通过Input指定可以接收哪些属性??
    @Input() myValue:any="";
 
    // 通过Output指定一个事件触发器
    @Output() toFatherEvent = 
        new EventEmitter();
 
    constructor() { }
 
    ngOnInit() { }
    //与父组件的通信:‘什么传家宝?是钱吗’
    askFather(){
        this.toFatherEvent
            .emit('什么传家宝?是钱吗');
    }
}
      通过ViewChild来实现类似ref的效果: <wiz_code_mirror>          
import { Component, OnInit,ViewChild } from '@angular/core';
   
@Component({
    selector: 'demo24',
    template: `
        <h1>hello demo24</h1>
        <demo24Son #sonCom></demo24Son>   
    `
})
 
export class Demo24Component implements OnInit {
    @ViewChild('sonCom') son:any;
    constructor() { }
 
    ngOnInit() { 
        console.log(this.son);
    }
}
      通过服务来实现通信: 父组件 <wiz_code_mirror>          
import { Component, OnInit,ViewChild } from '@angular/core';
import {Demo24Service} from './demo24.service'
 
@Component({
    selector: 'demo24',
    providers:[Demo24Service],
    template: `
        <h1>hello demo24</h1>
        <button (click)="save()">save</button>
        <demo24Son #sonCom></demo24Son>   
    `
})
 
export class Demo24Component implements OnInit {
    @ViewChild('sonCom') son:any;
    constructor(private service:Demo24Service) { }
    save(){
        this.service.list.push(Math.random()*100)
    }
    ngOnInit() { 
        console.log(this.son);
    }
}
      子组件 <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
import {Demo24Service} from './demo24.service'
@Component({
    selector: 'demo24Son',
    template: `
        <h1>hello demo24Son</h1>
        <button (click)="getMsg()">get</button>
    `
})
 
export class Demo24SonComponent implements OnInit {
    name="zhangsna";
    constructor(private service:Demo24Service) { }
 
    getMsg(){
        console.log(this.service);
    }
 
    ngOnInit() { }
}
        demo08_lianxi 聊天室、用户   聊天室 <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'chatroom',
    template: `
        <ul>
            <li 
            *ngFor="let tmp of list">
                {{tmp}}
            </li>
        </ul>
        <user 
         (addEvent)="rcvMsg($event)"
         uname="lucy"></user>
        <user 
         (addEvent)="rcvMsg($event)"
         uname="mike"></user>
    `
})
 
export class ChatRoomComponent implements OnInit {
    list:Array<any>=[];
    constructor() { }
 
    ngOnInit() { }
    //定义一个带有参数的方法
    rcvMsg(msg:string){
        console.log('父组件接收到的数据是'+msg);
        this.list.push(msg);
    }
 
}
        用户 <wiz_code_mirror>          
import { Component,Input,Output,EventEmitter, OnInit } from '@angular/core';
 
@Component({
    selector: 'user',
    template: `
        <span>{{uname+":"}}</span>
        <input type="text"
             [(ngModel)]="userMsg"/> 
        <button 
        (click)="sendToChatroom()">发送</button>
        <br/>
    `
})
 
export class UserComponent implements OnInit {
    userMsg:string = "";
    @Input() uname="";
    @Output() addEvent = 
        new EventEmitter();
    constructor() { }
 
    ngOnInit() { }
    //发送消息给聊天室
    sendToChatroom(){
        //触发事件并发送数据
        //hello mike --> lucy:hello mike
        let msg = 
         this.uname+":"+this.userMsg
    
        this.addEvent
        .emit(msg);
        this.userMsg="";
 
    }
}
        demo09_bind <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'demo09',
    template: `
        <button
         [ngClass]="{myHightlight:true}">
            clickme
        </button>
        <h1 
        [ngStyle]="{opacity:myOpacityValue}">透明度是动态绑定过来的</h1>
    `,
    styleUrls:['./test.css']
})
 
export class Demo09Component implements OnInit {
    myOpacityValue =0.2;
    constructor() { }
 
    ngOnInit() { }
}
      test.css <wiz_code_mirror>          
.myHightlight{
    color:blue
}
        demo10_lianxi   <wiz_code_mirror>          
import { Component, OnInit,OnDestroy } from '@angular/core';
 
@Component({
    selector: 'demo10',
    template: `
        <h1 [ngStyle]="{opacity:myOpacityValue}">
            这是Demo10
        </h1>
    `
})
 
export class Demo10Component implements OnInit ,OnDestroy{
    //定义一个保存透明度数据的变量
    myOpacityValue=0;
    myTimer:any = null;
    constructor() { }
 
    ngOnInit() {
        //启动定时器 在定时器中修改一个变量
        this.myTimer = setInterval(()=>{
            this.myOpacityValue+=0.1;
            if(this.myOpacityValue>1){
                this.myOpacityValue = 0;
            }
        },300)
     }
 
    ngOnDestroy(){
        // 组件销毁时,应该在此处理函数中完成清理工作
        clearInterval(this.myTimer);
    }
 
}
          demo11_pipe <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'demo11',
    templateUrl: './demo11.component.html'
})
 
export class Demo11Component implements OnInit {
    stuName:string = "Wentworth Miller";
    nowDate = new Date();
    totalPrice = 123.456789;
    constructor() { }
 
    ngOnInit() { }
}
      <wiz_code_mirror>          
<h1> 这是一个和管道相关的demo </h1>
 
<!-- uppercase/lowercase -->
<p>{{stuName | uppercase}}</p>
<p>
    {{stuName | uppercase | lowercase }}
</p>
 
<!-- date -->
<p>{{nowDate}}</p>
<p>{{nowDate | date}}</p>
<!--需要在调用过滤器时指定参数-->
<p>{{nowDate | date:'MM-dd'}}</p>
 
<!-- number:'整数位保留最小位数.小数位保留最小位数-小数点保留最多位数' -->
<p>{{totalPrice}}</p>
<p>{{totalPrice | number:'4.2-4'}}</p>
 
<!-- slice:start:end裁剪数组或者字符串,并返回裁剪后的目标子集-->
<p>{{stuName | slice:4}}</p>
<p>{{stuName | slice:4:7}}</p>
 
<!--调用自定义的管道-->
<p>{{stuName | testNG:0}}</p>
 
<h2>{{0 | sex:'zh'}}</h2>
        sex.pipe.ts <wiz_code_mirror>          
import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
    name: 'sex'
})
 
export class SexPipe implements PipeTransform {
    /**
     *      0 | sex:'en' --》girl
            1 | sex:'en' --》boy
            0 | sex:'zh' --》女
            1 | sex:'zh' --》男
     */
    transform(value: any, ...args: any[]): any {
        if(args[0] == 'en'){
            if(value == 0){
                return 'girl'
            }
            else{
                return 'boy'
            }
        }else{
            if(value == 0){
                return '女'
            }
            else{
                return '男'
            }    
        }
    }
}
      test.pipe.ts <wiz_code_mirror>          
// a-pipe
// a-component
// a-directive
// a-module
 
import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
    name: 'testNG'
})
 
export class TestPipe implements PipeTransform {
    transform(value: any, ...args: any[]): any {
        let result ="";
        if(args[0] == 1){
            result = value.toUpperCase();
        }
        else{
            result = value.toLowerCase()
        }
        return result;
    }
}
        demo12_service   <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
import {UserService} from './user.service'
import {HeartBeatService} from './heartbeat.service'
 
// 如果用户已登录:下午好!
// 如果用户未登录:请去登录
@Component({
    selector: 'demo12',
    // providers:[UserService],
    template: `
        <h1>service example</h1>
        <p>
    {{isUserLogin?'下午好!':'请去登录'}}
        </p>
        <button (click)="start()">开始心跳</button>
        <button (click)="stop()">结束心跳</button>
    `
})
 
export class Demo12Component implements OnInit {
    isUserLogin:boolean = false;
    //在构造函数中完成服务类的实例化
    constructor(
        private myService:UserService,
        private myHBS:HeartBeatService) { }
 
    ngOnInit() {
        //希望在组件初始化之后,就去调用服务中的方法
        this.isUserLogin 
        = this.myService.checkUserLogin();
     }
 
     start(){
         this.myHBS.startHearBeat();
     };
     stop(){
         this.myHBS.stopHeartBeat();
     }
 
}
      user.service.ts <wiz_code_mirror>          
// a-service
 
import { Injectable } from '@angular/core';
 
@Injectable()
export class UserService {
 
    constructor() { }
    //在服务中定义一个方法,用来检查用户是否登录
    checkUserLogin(){
        return true;
    }
}
      heartbeat.service.ts <wiz_code_mirror>          
import { Injectable } from '@angular/core';
 
@Injectable()
export class HeartBeatService {
    myTimer:any = null;
    constructor() { }
 
    startHearBeat(){
        if(this.myTimer){
            return;
        }
        this.myTimer = 
        setInterval(()=>{
            console.log('in HeartBeat..');
        },500);
    }
 
    stopHeartBeat(){
        clearInterval(this.myTimer)
        this.myTimer = null;
    }
}
        demo13_http <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
import {MyHttpService} from './myhttp.service'
 
@Component({
    selector: 'demo13',
    template: `
        <h2>http</h2>
        <button (click)="handleClick()">
            clickMe
        </button>
    `
})
 
export class Demo13Component implements OnInit {
    constructor(private myHS:MyHttpService) { }
 
    ngOnInit() { }
 
    handleClick(){
        //从服务器端获取数据
        this.myHS.sendRequest("http://localhost/admin/data/product_list.php")
        .subscribe((result)=>{
            console.log(result);
        })
    }
}
      myhttp.service.ts <wiz_code_mirror>          
// a-service-http
 
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
 
@Injectable()
export class MyHttpService {
    constructor(private http: Http) { }
 
    sendRequest(myUrl:string){
        // a-http-get
        return this.http.get(
            myUrl
            )
            .map((response: Response) => response.json());
    }
    
}
        demo14_lianxi <wiz_code_mirror>          
import { Component, OnInit } from '@angular/core';
import {StoreHttpService} from './storehttp.service'
 
@Component({
    selector: 'demo14',
    template: `
        <button (click)="loadData()">
            clickme
        </button>
        <ul>
            <li *ngFor="let tmp of list">
                {{tmp.title}}
            </li>
        </ul>
    `
})
 
export class Demo14Component implements OnInit {
 
    //定义一个数组,保存result.data中的数据
    list:Array<any> = [];
 
    constructor(private myHS:StoreHttpService) { }
 
    ngOnInit() { }
 
    loadData(){
        this.myHS.sendGet('http://localhost/admin/data/product_list.php')
        .subscribe((result)=>{
            this.list = result.data;
        })
    }
}
        storehttp.service.ts <wiz_code_mirror>          
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
 
@Injectable()
export class StoreHttpService {
    constructor(private http: Http) { }
 
    sendGet(myUrl:string){
        // a-http-get
        return this.http.get(myUrl)
            .map((response: Response) => response.json());
    }
    
}

标签:基础,Component,class,export,angualr,import,OnInit,angular
From: https://www.cnblogs.com/kunyashaw/p/17506527.html

相关文章

  • 聊一聊 Lua 的基础数据类型:数值、布尔、字符串
    楔子任何一门语言都提供了不同类型的数据结构,那么Lua中都有哪些数据结构呢?nil:空boolean:布尔类型,分别是true和falsenumber:数值类型,整型和浮点型都属于numberstring:字符串table:表function:函数userdata:用户数据thread:线程Lua总共提供了以上8种数据类型,目前只需要......
  • Linux基础26 rsync服务, 三种传输方式
    Rsync服务一、备份1.什么是备份?备份就是把重要的数据或文件再次复制一份保存起来(给源文件增加一个副本)2.为什么要备份?数据很重要!!!出现故障之后,需要恢复数据(软件服务出现问题几率很小,80%都是人为故障)3.能不能不做备份对于不重要的数据,可以不做备份对于不必要的数据可......
  • Python基础知识
    1.变量和简单数据类型1.1变量变量只能包含字母、数字、下划线,并且不能以数字开头变量名不能包含空格不要讲python关键字和函数作为变量名。变量名应简短又具有描述行被赋值的内容应该用双引号或单引号括起来1.2字符串title():将字符串首字母变为大写upper():将字符串......
  • Linux基础25 架构, 安装模板机
    架构一、名词的介绍1.项目:手机的APP,买一个APP就是一个项目,针对互联网行业,一家电商公司就是一个项目2.架构:维护一个项目所有组件组成一个整体lnmp:linuxnginxmysqlphplamp:linuxApachemysqlphplnmt:linuxnginxmysqltomcatlamt:linuxApacheMysqlTomcat#除了这些......
  • 机械设计基础
    1.1绪论:机械的组成概述1.2课程的内容、性质和任务1.3即系设计的基本要求及一般程序思考题第二章:平面机构的结构分析2.1平面结构的机构分析2.2机构的组成和平面机构运动简图绘制2.3平面机构自由度的计算2.4平面机构的组成原理、结构分类和结构分析思考题习题第三章:平面连杆机构3.1平......
  • Selenium基础:特殊Dom结构操作 07
    特殊Dom结构是指对元素不能直接操作,需要进行特殊定位切换到它所在的Dom结构,然后才能对其元素进行操作1、windows弹窗--alertconfirmprompt使用driver.switch_to.alert方法alert类操作方法:accept():确定dismiss():取消text():获取弹出框内的内容send_keys(keysToSend):输入......
  • JavaScript基础第06天笔记
    1-内置对象1.1内置对象JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象​前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于JS独有的,JSAPI讲解内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基......
  • 核心交换机六个基础知识
    一、背板带宽背板带宽也称交换容量,是交换机接口处理器或接口卡和数据总线间所能吞吐的最大数据量,就像是立交桥所拥有的车道的总和。由于所有端口间的通信都需要通过背板完成,所以背板所能提供的带宽,就成为端口间并发通信时的瓶颈。带宽越大,提供给各端口的可用带宽越大,数据交换速......
  • 【numpy基础】--聚合计算
    上一篇介绍的通用计算是关于多个numpy数组的计算,本篇介绍的聚合计算一般是针对单个数据集的各种统计结果,同样,使用聚合函数,也可以避免繁琐的循环语句的编写。元素的和数组中的元素求和也就是合计值。调用方式聚合计算有两种调用方式,一种是面向对象的方式,作为numpy数组对象的方......
  • HTTP(Hypertext Transfer Protocol)是一种用于在网络上传输超文本的协议。它是Web应用程
    HTTP(HypertextTransferProtocol)是一种用于在网络上传输超文本的协议。它是Web应用程序之间数据交换的基础,并且也被广泛用于其他应用程序之间的通信。HTTP基于客户端-服务器模型,其中客户端发起请求,而服务器响应请求并返回相应的数据。它使用TCP/IP作为底层传输协议,通过在客户端......