精华内容
下载资源
问答
我要提问
  • IT行业那些“黑话”你知道多少（IT、软件开发行业的专业术语、英文缩写）
    2021-12-20 18:29:02

    文章目录

    人员结构术语

    • PM：Project Manager，项目经理
    • PD：可以译作Product Director（产品主管）或Project Director（项目主管或项目总监）
    • OD：Operations Director，运营总监
    • MD：Marketing Director，市场总监
    • TL：Team Leader，团队领导
    • PL：People Leader，人事领导（部分公司有，可能平时接触不到，主要负责人事调动方面，比如：升职加薪等）
    • PE：Product Engineer，运维工程师
    • SE：Software Engineer，软件工程师
    • ASE：Assistant Software Engineer，助理软件工程师
    • DBA：Database Administrator，数据库管理员
    • RD：Research and Development，RD工程师即研发工程师，主要指后端开发
    • FE： Front-End，前端；Front-End Development，前端开发
    • BA：Business Analyst，业务需求分析师，这个岗位也是部分公司会有，很多公司都是项目经理或者产品经理承担需求分析的工作，没有这个岗位；但在一些外包公司或者大型企业，他们服务的范围很广泛，几乎包括各行各业，所以针对不同的行业和大型项目，项目经理很难一个人完成需求的挖掘工作，所以就需要BA，这时PM主要进行项目的战略和统领，BA去和客户沟通，进行挖掘需求和需求分析。（BA对沟通能力要求一般高于开发能力）

    以上职位简称各公司会略有不同，很多公司也有自己的简称，进到公司还要自己多适应，每个职位在不同公司对应的级别可能不同，但是一般来讲PM或PD应该是项目的主要领导；TL在有的公司算是比较高的级别甚至可能在PM之上，但也有的公司TL只是相对低级别的领导，类似小组长的感觉

    各种O:（这些不单纯是软件行业，大部分的公司都具备）

    • CEO：Chief Executive Officer，首席执行官，类似总经理、总裁，是企业的法人代表。
    • COO：Chief Operations Officer，首席运营官，类似常务总经理
    • CFO：Chief Financial Officer，首席财务官，类似财务总经理
    • CIO：Chief Information Officer，首席信息官，主管企业信息的收集和发布
    • CTO：Chief technology officer，首席技术官，类似总工程师

    工作常用术语

    • OKR：Objectives and Key Results，直译为目标和关键成果。OKR可以理解为是一种自下而上的管理方式，员工制定目标，然后去执行，员工的目标汇集而成就是公司的目标
    • KPI：关键绩效指标。KPI可以理解为是一种自上而下的管理方式，公司制定目标，由上至下为员工分配任务，员工去执行
    • ERP：Enterprise Resource Planning Administration的缩写，意为企业资源计划。ERP系统可以看作将企业的各个业务整合到一个信息系统上面。
    • MRD：Market Requirement Document，市场需求文档，主要包括解决客户问题的战略和特色，需求优先级等，提供给客户看的，提升自身竞争力，让客户愿意把项目交到我们手中
    • PRD：Product Requirement Document，产品需求文档，主要包括业务流程，需求分析，界面设计等，将功能描述细化，甚至可能精确到页面的布局，入参出参等，主要是给开发人员看的
    • CR：有两种情况，①Code review，代码评审，在提交代码以后，会有相应的负责人对代码进行审评②Change Request，需求变更，一般都用来命名，如CR1，表示第一阶段的需求，客户如果对需求进行变更，后面开发、测试等工作都需要变动的，可能就叫做CR1.5或CR2，大概就知道他是用来管理需求的就行
    • Deadline：最后期限，完成任务的最终时间
    • CRM：Customer Relationship Management，客户关系管理，CRM系统主要用来管理客户信息，在此基础上才能对客户数据进行分析，然后提供个性化的服务。

    开发专业术语

    • IDE：集成开发环境，一般也就是指代码编译器，如IntelliJ IDEA，eclipse等
    • OOP：Object Oriented Programming，OOP，面向对象程序设计，是一种计算机编程架构，讲究的是对象+方法
    • OOS：Opensource software，开源软件，其源码可以被公众使用的软件，并且此软件的使用、修改和分发也不受许可证的限制
    • API：Application Programming Interface，应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节
    • BUG：程序中的缺陷或者漏洞
    • DBMS：database management system，数据库管理系统
    • NoSQL：非关系型的数据库。传统的关系数据库在应付web2.0网站，特别是超大规模和高并发的SNS类型的web2.0纯动态网站暴露了很多难以克服的问题，而非关系型的数据库则由于其本身的特点得到了非常迅速的发展。
    • SOA：面向服务的体系结构
    • GUI：图形用户界面，是指采用图形方式显示的计算机操作用户界面
    • OS：OperatingSystem，操作系统
    • SQL：结构化查询语言，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。
    • UML：统一建模语言,是用来对软件密集系统进行可视化建模的一种语言
    • URL：统一资源定位符也被称为网页地址，是因特网上标准的资源的地址。
    • URI：Web上可用的每种资源（HTML文档、图像、视频片段、程序等）由一个通用资源标志符进行定位
    • C/S结构：即Client/Server(客户机/服务器)结构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，需要安装客户端才可进行管理操作
    • B/S结构：即Browser/Serve（浏览器/服务器）结构
    • SDLC：Systems Development LifeCycle，软件生命周期
    • XP：敏捷开发
    • Scrum：一种迭代式增量软件开发过程，通常用于敏捷软件开发。
    • UV： Unique Visitor，访客。访问网站的某个客户端称为一个访客，0:00-24:00内相同的客户端只被计算一次
    • PV： Page View，指网站的页面流量或者点击量，页面被刷新一次就计算一次。如果网站被刷新或者被点击了了1000次，那么流量统计工具显示的PV就是1000
    • GMV：Gross Merchandise Volum，成交总额，电商和零售行业常用，指拍下的订单金额，包含已付款和未付款的部分
    • DAU：Daily Active User，每日活跃的用户，也称日活，互联网领域使用频度很高的词，互联网公司关注的不仅仅是收入，利润，通常都还会刻意强调日活
    • DO：Data Object，Java对象，通常与数据库表字段一一对应
    • VO：View Object，通常是指返回给页面进行展示的对象
    • POJO：Plain Ordinary Java Object，传统意义上的 java 对象，只有属性和一些get/set方法
    • DAO：Data Access Object，数据访问对象，就是一般所说的DAO层，连接数据库与程序之间的桥梁。访问数据库时，将数据库表中的一行数据映射到一个对象上，返回给程序使用，插入数据时，将程序中的一个对象解析为数据库中的一行记录插入到数据库中。类似于使用MyBatis中的mapper，通常在DAO/Mapper层实现对数据库的CRUD
    • Domain：实体，通常也是一个Java类，类中的属性与数据表中的字段通常一一对应
    • DDD：Domain Driver Design，领域驱动设计，一种设计思想，主要应用在微服务
    • DB：database，数据库
    • MVC：Model-View-Controller，一种架构设计，现在的Web开发基本上都是基于MVC三层架构
    • AOP：Aspect Oriented Programming，面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续，是软件开发中的一个热点，也是Spring框架中的一个重要内容，是函数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高了开发的效率。
    • IOC：Inversion of Control，控制反转，是一种设计原则，可以用来减低计算机代码之间的耦合度，其中最常见的方式叫做依赖注入(Dependency Injection，简称DI)，还有一种方式叫“依赖查找”(Dependency Lookup)，通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它。也可以说，依赖被注入到对象中。现在的Spring开发中十分常见。
    • ORM：Object Relational Mapping，对象关系映射，通常都是指一些ORM框架，比如Hibernate，Mybatis等自动或者半自动的ORM框架
    • RPC：Remote Procedure Call，远程过程调用协议，常见RPC框架：gRPC ，Thrift，Dobbo等
    • VPN：Virtual Private Network，虚拟专用网络，大部分公司都有自己的VPN来访问公司的内网，公司的数据都是珍贵的资源，不能放在互联网上，都会放在自己的专有网络中
    • CRUD：CRUD是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写
    • MQ：Message Queue，消息队列，常用的消息队列：Active MQ，Rabbit MQ，Rocket MQ，Kafka
    • CDN：Content Delivery Network，内容分发网络，将源站资源缓存到全国各地的边缘服务器，供用户就近获取，从而加速访问，降低源站压力
    • DNS：Domain Name System，域名解析系统，一个组织的系统管理机构，维护系统内的每个主机的IP和主机名的对应关系
    • OSS：Object Storage Service，对象存储服务，用来存储数据，通常将数据存储在OSS后都会得到一个URL，通过这个URL就能访问到实际存储的数据
    • QPS：Queries Per Second，每秒查询率是一台服务器每秒能够相应的查询次数，是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准
    • TPS：Transactions Per Second，事务数/秒，是软件测试结果的测量单位。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。
    • 吞吐率：吞吐率 = 真正的工作时间 / 总的工作时间，可以理解为吞吐率越高，效率就越高，通常是某种效率的衡量指标。比如带宽是100M，但是吞吐只有10M，说明大量的带宽被闲置着，造成资源的极大浪费
    • load：负载，机器CPU load过高，就需要注意了
    • 灰度测试：发布的时候不是一次就将新版本发布给全部用户，而是一批一批逐渐发布给用户。在这个过程中，监控产品的各项数据指标，看是否符合预期，如果数据表现不理想，就停止发布，甚至进行回滚，让所有用户都恢复到以前的版本，进一步观察分析数据指标
    • 回归测试：回归测试是指修改了旧代码后，重新进行测试以确认修改没有引入新的错误或导致其他代码产生错误

    写在最后

    这些是比较常见的一些专业术语，对于新人或者刚入行不久的人来说可以多做了解，尽快融入项目，当然这些还远远不够，需要不断地学习。

    软件工程师 经验分享
    更多相关内容

  • 前端和后端的英文_前端工程师和后端工程师

     千次阅读 2020-11-20 15:55:50
    前端工程师和后端工程师对于互联网应用开发来说，前端开发和后端开发是工程师的两大工作领域，这点已经是很多同学的常识。于是，经常有人会问，前端工程师和后端工程师都是做什么的？薪资如何？未来的行业发展前景...

    前端工程师和后端工程师

    对于互联网应用开发来说，前端开发和后端开发是工程师的两大工作领域，这点已经是很多同学的常识。于是，经常有人会问，前端工程师和后端工程师都是做什么的？薪资如何？未来的行业发展前景怎样？相信这些对于很多现有的软件从业人员，或是准备入行的门外汉们来说，都是模糊不清的。下面我们就首先来介绍一下二者对技术的要求和职责的范围。从根本上区分它们。

    bfc12edce62768aa427bccf2c4c40400.png

    什么是前端工程师

    前端工程师主要负责面向用户界面的处理。

    在一个网页或者App的页面上，用户能够看到的内容、图片、段落布局、链接、图标以及按钮等等，都属于前端的范畴。在互联网应用出现的早期，并没有所谓前端工程师的岗位细分。这些工作有些是由美工负责， 有些是由程序员负责。那时候，完成页面设计，所需要的技术无非是HTML、CSS和JavaScript脚本语言，也就是俗称的“三剑客”。

    6ad550b3301dab730016170e1f4e41ef.png

    后来随着硬件的发展，客户端的能力被不断提升。更伴随着Web2.0的普及，以及移动互联网的兴起，人们不再满足于让客户端仅仅负责应用内容的展示，更会把一部分运算迁移到客户端来完成。我们会将一些原来服务器端处理的功能迁移到客户端。比如状态管理，以减轻后端的数据吞吐量，提高后端的数据处理效率。再比如路径管理，在传统的多页应用程序开发中，一般都是后端来返回某个页面，前端只负责显示。而现在的应用开发中，一般都是单页应用开发，这样路径的处理就在前端进行了，提高前端应用的处理效率，增强用户体验。

    同时在手机端，因为不同的终端设备在显示方式、显示能力上的差异，更是有了诸如屏幕适配、自适应布局等新的需求。于是，HTML5技术族系就诞生了，相应的，也出现了专注于完成此类工作的程序员群体，于是，前端开发领域应运而生。

    0dfa55331b55995703b55edc77a3fb5d.png

    当然，前端工程师手中最有力的武器，依然是升级版的“三剑客”。

    1387ffaabcf3a7be6ce8de6dba4f706e.png

    但是仅仅使用“三剑客”，开发效率和代码数量都是惊人的，而面对应用的爆炸式增长，以及需求的频繁更迭，各种的框架、工具也就越来越多，以提升开发的效率。

    前几年前端开发用到的技术，除了HTML5、CSS3、JavaScript之外，无非是Jquery、Bootstrap、Node.js 、AngularJs等技术。从开始的切页面，到复杂的前端单页应用，Node服务端应用，移动端React-Native等。

    而苦逼的是，这个领域的开发技术迟迟无法稳定下来，不仅工具、框架的迭代速度很快，而且大的技术体系和新的技术族系，也在不断的发生变革，甚至是颠覆式的革命。于是，前端工程师，一直在疲于应付，疲于追赶。

    57fb6e91916deeb7a3e9649a5f5e685e.png

    近10年间前端技术经历了3次大的变化。2010年--2015年前端主要使用的技术是Android和IOS。2016--2019年使用的技术是HTML5、CSS3、ES6、JavaScript、Vue、RN等。2019年中Google在全球移动者开发大会上，推出了新的前端技术Flutter。这三次变化可以说是翻天覆地的。核心编程语言改了又改，变了又变。比如，Android用的是Java、IOS用的是Objective-C，后面都变成了JavaScript。最后到了Flutter又换成了Dart。这对于前端工程师简直是毁灭性的打击。甚至有些前端工程师在GitHub上公开留言老子学不动了。

    1426b3c8b6b52e1b5353ec290a8dc5af.png

    4f01cae8730de19fbdc4aad95cee8a30.png

    另一方面，前端开发因为涉及的领域比较片面。只负责进行数据展示，不负责核心业务开发，创造的价值有限。所以在后续晋升通道上，天花板也会较低，局限性较大。比如，大神尤宇希(前端著名框架VUE的作者)在加盟阿里巴巴时，只拿到了P9(阿里的技术职级体系)。很多前端工程师为他们的领袖打抱不平。

    d35eae1d1814a680c568431614f06f0d.png

    e10ab7e4db8f2592704bff8a22b27f2a.png

    于此同时，由于前端开发的工作目标，是让用户在PC或手机屏幕上，看到的产品内容更棒，更吸引人，因此，前端工程师要有一些美学的天赋和产品的感觉。这对于很多理工科出身的同学来说，也是不太容易建立的。 

    什么是后端工程师

    后端工程师主要是开发服务器端运行的代码，是用户不可见的。

    14e1a4e9610619decae6d80481905934.png

    打个比方，后端的工作就像盖楼房的地基部分和框架部分。通常，后端工程师需要搭建后端的支撑服务容器；针对于不同行业进行相应的功能接口设计；完成具体的业务逻辑实现。在具体的功能实现部分可以采用Java、Python等编程语言来实现。

    后端开发使用的Java编程语言，主要用到的是包括但不限于JVM、高可用、高并发、Spring、SpringMVC、Hibernate、Mybatis、Http协议、Tomcat服务器等技术。而Python编程语言同样擅于开发后端应用，所使用的主要技术有Django、Flask、爬虫、Numpy、Pandas、Nginx、Matlab、Ternado等。随着云计算、大数据、人工智能的发展，又涌现了Docker容器技术、Serverless、Hadoop、Flink、Pytorch、Tensorflow等新型架构。后端开发的比重、重要性又有了大幅度提高。

    6a3d885575634feb72bcc27bdba70d77.png

    后端开发主要负责系统核心业务实现，是一个系统的灵魂。所使用的编程语言Java(1995年诞生)、Python(1989年诞生),都非常稳定(甚至比好多同学们岁数都大)。随着大数据、人工智能的发展，作为主力编程语言的Java、Python。他们更加会大放异彩。

    最后由于项目开发过程中，往往后端的功能模块比较多，业务也较为重要，所以相应的所需要的开发人员数量也会较多。而前端工程师，主要负责数据显示，所以需求量较少。一个公司前后端人员比例大概为1：5。而后端工程师往往能够接触到系统的核心业务和核心数据流程，因此，对项目组的重要性也会相应大一些。

    当然，做一个好的后端工程师，也是会有很多的技术、框架需要掌握和学习。只是和前端相比，技术的变化不那么大，也不易发生颠覆性的技术革新，程序员只需要随着技术的发展，对现有的知识体系进行迭代和更新就好了。

    从后端工程师的任职要求来看，除了需要掌握必要的技术之外，对程序员的算法能力、数据建模能力、逻辑能力要求比较高，而这些，正是理工类学生所擅长的。

    123f0766daff6bbfa3e39e2a5d780c96.png

    前端工程师和后端工程师的薪资对比

    一般来说，由于工作内容的复杂性和多样性，对于初级前端工程师的工资相对来说要低于后端工程师的工资，但是这个差距并不是很大。但随着工作年限的增加，后端工程师的上升空间要比前端要高。此外由于前端技术更新的频率，给程序员积累提升的周期比较短，这方面也限制了前端工程师的发展。下面统计了北京，深圳，上海，杭州几个软件行业比较发达城市的薪资数据，可以看到后端方向的工程师薪资普遍比前端要高。

    b69c7f7ef0fa6d3ab3bb892ea09a16ae.png

    8d8c1c20cc15a7bcaa75eece7a62055a.png

    22a7060cb33ea4e66e72cbb4b53f26ce.png

    3e70ebb0fdd299f20eb05acf9f130d60.png

    结束语

    前端工程师是在技术的发展中所产生的一个细分的领域。其实对于很多企业来讲，这种细分的界限并不十分清晰。例如，最近企业中流行的所谓“全栈工程师”，就是要求后端工程师也要有一定的能力，去承担前端开发的任务；前端工程师，也要了解后端应用开发的细节。在这个融合的过程中，前端工程师的地位略显尴尬，毕竟，专业的互联网美工，也会具备一定的编码能力，而后端工程师，由于他们的技术知识体系相对完善，对公司业务的底层核心更为了解，也有能力分担前端的一部分工作。因此，前端的“领地”也就不断的被蚕食和侵占。

    前端和后端哪个更重要，哪个更有价值，一直众说纷纭。也许这样的争论还会持续下去，直到这两个领域彻底融合统一，形成共识。

    05a1e5617a5d9f6e22b45b538de988e3.png

    对于有志于从事软件开发的同学来说，前端和后端只是企业中两个不同职能的岗位，无论从事哪个岗位，只要你技术过硬，项目开发能力突出，都能有所发展。只是我们建议，对于编程的初学者，还是应该从后端入手，毕竟无论是Java还是Python，都是成熟而完整的编程体系，对于同学们打好编程基础，训练编程最基本的技能，都能起到事半功倍的作用，在未来的职业发展中，也会有更广阔的用武之地。

    收起
    展开全文

  • 【后端开发】python编程能做什么开发

     2020-12-08 23:37:14
    1、Web开发使用Python的一个基本应用就是进行Web开发，在国内，大一些的使用Python做基础设施的公司有美团、饿了么，以及搜狐等，在国外，Googe在其网络搜索系统中广泛应用了Python并且聘用了Python之父，另外，...

    Python作为一种功能强大，并井且简单易学的编程语言而广受好评，那么Python都能做么？概据起来有以下几个方面。

    1、Web开发

    使用Python的一个基本应用就是进行Web开发，在国内，大一些的使用Python做基础设施的公司有美团、饿了么，以及搜狐等，在国外，Googe在其网络搜索系统中广泛应用了Python并且聘用了Python之父，另外，YouTube视频分享服务大部分也是用Pyom编写的。

    2、大数据处理

    随着近几年大数据的兴起，Python也得到了前所未有的爆发。Python借助第三方的大数据处，大数据处理，随着近几年大数据的兴起，Python也得到了前所未有的爆发。Python借助第三方的大数据处。理框可以很容易地开发出大数据处理平台。到目前为止，Python是金融分析、量化交易领域使用最多的语言。例如，突国银行就利用Python语言开发出了新产品和基础设施接口，用于处理金融数据。

    3、人工智能

    人工智能(ArtificialIntelligence)，英文缩写为AI．Python之所以这么火，主要是借助人工智能发展，Phon是一门脚本语言，它更适合去做人工智能这个领域，在人工智能上使用Python比其他：1程语言有更大的优势。主要的优勢在于它简单、快速、可扩展(主要体现在可以应用多个优秀的人工A能框架)等。另外，Python中的机器学习可以实现人工智能领域中的大多数需求。

    4、自动化运维

    开发掌握一门开发语言已经成为高级运维工程师的必备技能。Python是一个简单、易学的脚本语言能满足绝大部分自动化运维的需求。而对于运维工程师，通常不会开发，所以想学门开发语言，Pyha是首选。

    5、云计算

    Python可以广泛地在科学计算领域发挥独特的作用。通过强大的支持模块可以在计算大型数据、矢量分析、神经网络等方面高效率地完成工作，尤其是在教育科研方面，可以发挥出独特的优势199年开始，NASA就在大量使用Phon进行各种复杂的科学运算。现在终于发明了一套云计算软件取名为Openstack(开放协议根)，并且对外公开发布。

    6、爬虫网络

    爬虫(也称为spider)始于也发展于百度、谷歌。但随着近几年大数据的兴起，爬虫应用被提升到前所未有的高度。多数分析挖据公司都以网络爬虫的方式得到不同来源的数据集合，最后为其所用构建属于自己的大数据综合平台，在爬虫领域，Python几乎是霸主地位，通过它提供的标准支持库本上可以做到随意获取想要的数据。

    7、游戏开发

    通过Python完全可以写出非常棒的游戏程序。例如，知名的游戏SidMeier＇sCivilization(文明就是用Pdtm写的另外，在网给游开发中Pom也有很多应用，它作为游戏脚本内嵌在游中这样做的好处是既可以利用游戏引的高性能，又可以受益于脚本化开发等优点。説明Pyho的少角域远比上面提到的多得多。例如，使用Python，对图形图像进行处理、编程拉制机器人、数据库编程、编写可移植的维护操作系统的工具，以及进行自然语言分析等。

    更多Python相关技术文章，请访问Python教程栏目进行学习！

    收起
    展开全文

  • 在项目中后端开发所需要掌握的前端知识

     2022-01-17 23:48:29
    后端开发必备的前端知识 一、开发流程 最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。 大约从...

    后端开发必备的前端知识

    在这里插入图片描述

    一、开发流程

    最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。

    大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要

    在这里插入图片描述

    1、常用软件

    1.1 VS Code

    下载： https://code.visualstudio.com/Download
    安装插件：
    在这里插入图片描述

    1.2 WebStorm

    下载：https://www.jetbrains.com/zh-cn/webstorm/download/other.html
    安装插件：
    在这里插入图片描述

    二、JQuery

    2.1概念：

    一个JavaScript框架，简化JS开发
    JQ是一个快速、简介的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。JQ设计的宗旨是’write Less,Do More’，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    JavaScript框架：本质上就是一些JS文件，封装了JS的原生代码

    2.2快速入门

    下载JQuery：https://jquery.com/
    中文文档： https://jquery.cuishifeng.cn/

    目前JQuery有三个大版本：
    1.x：兼容ie867，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)
    2.x：不兼容ie867，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)
    3.x：比兼容ie867，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本，很多老的JQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

    jQuery-xxx.js 与 jQuery-xxx.min.js区别：
    1.Query-xxx.js：开发版本，给程序员看的，有良好的缩进和注释，体积大一些。
    2.jQuery-xxx.min.js：生产版本，程序中使用的，没有缩进。体积小，程序运行快。

    使用：

    1.导入JQuery的js文件
    2.代码

    $(document).ready(funcation(){
	//执行代码                  
});

    在上面代码中我们看到jQuery语句主要包含$()、document、ready()中分别为工厂函数、选择器和方法类似于下面

    window.onload=funcation(){
    //执行代码
}

    工厂函数$() (入口函数)

    在jQuery中’ ′ 等 价 于 j Q u e r y ， 即 '等价于jQuery，即 ′等价于jQuery，即()=jQuery，起作用就是将DOM对象转换为jQuery对象，只有转换完才能使用jQuery中的方法。

    jQuery与JavaScript的互相转换：

    //DOM转为jQuery对象
/**
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象
*/
var hello = document.getElementById("hello");
$(hello).css("color","#fff");
//jQuery转DOM对象
/**
方法一：jQuery对像是一个数组对象可以通过[index]的方法得到对应的DOM对象
*/
($(hello)[0]).innertHTML="sss"
/**
方法二：使用jQuery中的get(index)方法得到相应的DOM对象。
*/
($(hello).get(0)).innerHTML="sss"
/**
两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)
*/

    选择器

    选择器：筛选具有相似特征的元素(标签、ID、类等)
    基本操作：
    事件绑定

    //获取b1按钮
$("#b1").click(funcation(){
	alert               
})

    入口函数：

    $(function(){
    
})

    window.onload和 ( f u n c a t i o n ) 区 别 ： 1. w i n d o w . o n l o a d 只 能 定 义 一 次 ， 如 果 定 义 多 次 ， 后 边 会 将 前 边 的 覆 盖 掉 2. (funcation)区别： 1.window.onload只能定义一次，如果定义多次，后边会将前边的覆盖掉 2. (funcation)区别：1.window.onload只能定义一次，如果定义多次，后边会将前边的覆盖掉2.(funcation)可以定义多次的

    选择器分类
    基本选择器
    在这里插入图片描述

    层次选择器
    在这里插入图片描述

    属性选择器
    在这里插入图片描述

    过滤选择器
    在这里插入图片描述

    方法

    DOM操作：

    1.内容操作：

    html()：获取/设置元素的标签体内容
    text()：获取/设置元素的标签体纯文本内容
    val()：获取/设置元素的value属性值

    <body>
	<input id="myinput" type="text" name="username" value="张三" /><br />
	<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
<script>
	$(function () {
        //获取myinput 的value值
		var value = $("#myinput").val();
		alert(value);
         $("#myinput").val("李四");
         //获取mydiv的标签体内容
		var html = $("#mydiv").html();
		alert(html);
         $("#mydiv").html("<p>aaaa</p>");
         //获取mydiv文本内容
         var text = $("#mydiv").text();
         alert(text);
         $("#mydiv").text("bbb");
    });
</script>
    2.属性操作：

    通用属性操作：
    attr()：获取/设置元素的属性
    removeAttr()：删除属性
    prop()：获取/设置元素的属性
    removeProp()：删除属性
    attr 和 prop的区别：
    1.如果操作的是元素的固有属性，则建议使用prop
    2.如果操作的是元素的自定义属性，则建议使用attr

    <style type="text/css">
		div,span{
			width: 140px;
			height: 140px;
			margin: 20px;
			background: #9999CC;
			border: #000 1px solid;
			float:left;
			font-size: 17px;
			font-family:Roman;
		}
			
		div.mini{
			width: 30px;
			height: 30px;
			background: #CC66FF;
			border: #000 1px solid;
			font-size: 12px;
			font-family:Roman;
		}
			
		div.visible{
			display:none;
		}
</style>
<body>		
	<ul>
		<li id="bj" name="beijing" xxx="yyy">北京</li>
		<li id="tj" name="tianjin">天津</li>
	</ul>
	<input type="checkbox" id="hobby"/>
</body>

<script type="text/javascript">
	$(function () {
        //获取北京节点的name属性值
		var name = $("#bj").attr("name");
		//alert(name);
        //设置北京节点的name属性的值为dabeijing
         $("#bj").attr("name","dabeijing");
         //新增北京节点的discription属性 属性值是didu
         $("#bj").attr("discription","didu");
         //删除北京节点的name属性并检验name属性是否存在
         $("#bj").removeAttr("name");
         //获得hobby的的选中状态
		var checked = $("#hobby").prop("checked");
		alert(checked);
   });
</script>

    对class属性操作
    addClass()：添加class属性值
    removeClass()：删除calss属性值
    toggleClass()：切换class属性值
    toggleClass(“one”)：判断元素对象上存在"class=one"，则删除属性值one，如果不存在则添加one属性值
    css()：添加cass属性键值

    3.CRUD操作：

    在这里插入图片描述

    <style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
</style>
<body>
		<input type="button" value="将反恐放置到city的后面"  id="b1"/>
		<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
		<input type="button" value="将反恐插入到天津后面"  id="b3"/>
		<input type="button" value="将反恐插入到天津前面"  id="b4"/>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		<div id="foo1">Hello1</div>        
</body>

<script type="text/javascript">
		 $(function () {
             // <input type="button" value="将反恐放置到city的后面"  id="b1"/>

			 $("#b1").click(function () {
				 //append
				 //$("#city").append($("#fk"));
				 //appendTo
                 $("#fk").appendTo($("#city"));
             });
             // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function () {
                 //prepend
                 //$("#city").prepend($("#fk"));
                 //prependTo
                 $("#fk").prependTo($("#city"));
             });
             // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function () {
                 //after
				 //$("#tj").after($("#fk"));
                 //insertAfter
                 $("#fk").insertAfter($("#tj"));

             });
             // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function () {
                 //before
                 //$("#tj").before($("#fk"));
                 //insertBefore
                 $("#fk").insertBefore($("#tj"));

             });
         });
</script>

    <style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
</style>
<body>
	<input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
	<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>

		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 <p class="hello">Hello</p> how are <p>you?</p> 
</body>
<script type="text/javascript">
	$(function () {
        // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
		$("#b1").click(function () {
			$("#bj").remove();
        });
        // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
        $("#b2").click(function () {
            $("#city").empty();
        });
    });
</script>
    4.动画

    在这里插入图片描述

    <body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
    <script>
        //隐藏div
        function hideFn(){
           /* $("#showDiv").hide("slow","swing",function(){
                alert("隐藏了...")
            });*/
/*

           //默认方式
            $("#showDiv").hide(5000,"swing");
*/
/*

            //滑动方式
            $("#showDiv").slideUp("slow");

            */

            //淡入淡出方式
            $("#showDiv").fadeOut("slow");
        }

        //显示div
        function showFn(){
            /*$("#showDiv").show("slow","swing",function(){
                alert("显示了...")
            });*/

            /*
            //默认方式
            $("#showDiv").show(5000,"linear");
            */
/*
            //滑动方式
            $("#showDiv").slideDown("slow");
            */

            //淡入淡出方式
            $("#showDiv").fadeIn("slow");
        }


        //切换显示和隐藏div
        function toggleFn(){

            /*
            //默认方式
            $("#showDiv").toggle("slow");
*/
            /*
            //滑动方式
            $("#showDiv").slideToggle("slow");
*/

            //淡入淡出方式
            $("#showDiv").fadeToggle("slow");
        }
    </script>
    5.遍历

    在这里插入图片描述

    <body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
    <script type="text/javascript">
/*

        遍历
            1. js的遍历方式
             * for(初始化值;循环结束条件;步长)
            2. jq的遍历方式
                1. jq对象.each(callback)
                2. $.each(object, [callback])
                3. for..of:jquery 3.0 版本之后提供的方式

*/
            $(function () {
               //1.获取所有的ul下的li
                var citys = $("#city li");
               /* //2.遍历li
                for (var i = 0; i < citys.length; i++) {
                    if("上海" == citys[i].innerHTML){
                        //break; 结束循环
                        //continue; //结束本次循环，继续下次循环
                    }
                    //获取内容
                    alert(i+":"+citys[i].innerHTML);

                }*/

/*
                //2. jq对象.each(callback)
                citys.each(function (index,element) {
                    //3.1 获取li对象 第一种方式 this
                    //alert(this.innerHTML);
                    //alert($(this).html());
                    //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）
                    //alert(index+":"+element.innerHTML);
                    //alert(index+":"+$(element).html());

                    //判断如果是上海，则结束循环
                    if("上海" == $(element).html()){
                        //如果当前function返回为false，则结束循环(break)。
                        //如果返回为true，则结束本次循环，继续下次循环(continue)
                        return true;
                    }
                    alert(index+":"+$(element).html());
                });*/
                //3 $.each(object, [callback])
               /* $.each(citys,function () {
                    alert($(this).html());
                });*/

               //4. for ... of:jquery 3.0 版本之后提供的方式

                for(li of citys){
                    alert($(li).html());
                }


            });
    </script>
    6.事件绑定

    在这里插入图片描述

    绑定事件

    <body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
    <script type="text/javascript">
        $(function () {
           //1.使用on给按钮绑定单击事件  click
           $("#btn").on("click",function () {
               alert("我被点击了。。。")
           }) ;

           //2. 使用off解除btn按钮的单击事件
            $("#btn2").click(function () {
                //解除btn按钮的单击事件
                //$("#btn").off("click");
                $("#btn").off();//将组件上的所有事件全部解绑
            });
        });
    </script>

    事件切换

    <body>
    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
    <script type="text/javascript">
        $(function () {
           //获取按钮，调用toggle方法
           $("#btn").toggle(function () {
               //改变div背景色backgroundColor 颜色为 green
               $("#myDiv").css("backgroundColor","green");
           },function () {
               //改变div背景色backgroundColor 颜色为 pink
               $("#myDiv").css("backgroundColor","pink");
           });
        });

    </script>

    三、BootStrap

    3.1概念

    一个前端开发的框架，Bootstrap，来自twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得WEB开发更加快捷

    3.2快速入门

    下载bootstrap： https://v3.bootcss.com/getting-started/#download

    创建HTML页面，引入必要的资源文件

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

    3.3响应式布局

    概念：同一套页面可以兼容不同分辨率的设备
    实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
    步骤：
    1.定义容器。(相当于table)
    容器分类：
    1.container：两边留白
    2.container-fluid：每一种设备都是100%宽度
    2.定义行。(相当于tr，样式row)
    3.定义元素。指定该元素在不同设备上，所占的各自数目。样式：col-设备代号-各自数目
    设备代号：
    1.xs：超小屏幕 手机(<768px)：col-xs-12
    2.sm：小屏幕 平板(>=768px)
    3.md：中等屏幕 桌面显示器(>=992px)
    4.lg：大屏幕 大桌面显示器(>=1200px)

    注意：
    1.一行中如果各自数目超过12，则超出部分自动换行
    2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
    3.如果真是设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行

    栅格系统

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border:1px solid red;
        }

    </style>
</head>
<body>
    <!--1.定义容器-->
    <div class="container">
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素
                在大显示器一行12个格子
                在pad上一行6个格子
            -->
            <!--<div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>-->
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>

        </div>

    </div>

</body>
</html>

    3.4 CSS样式和JavaScript插件

    按钮：class=“btn btn-default”
    图片：class=“img-responsive”
    图片形状：class=“img-circle”

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>

<a class="btn btn-default" href="#" >Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default"  type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<br>


<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>


<hr>

<img src="img/banner_1.jpg" class="img-responsive"/>
<img src="img/banner_1.jpg" class="img-responsive img-rounded" />
<img src="img/banner_1.jpg" class="img-responsive img-circle"/>
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>


</body>
</html>

    表格：table table-bordered table-hover
    表单：class=“form-control”

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>

    <table class="table table-bordered table-hover">

        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>

        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>002</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>003</td>
            <td>张三</td>
            <td>23</td>
        </tr>

    </table>

<hr><hr><hr>


    <form class="form-horizontal">
        <div class="form-group">
            <label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label>

           <div class="col-sm-10">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
           </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
</body>
</html>

    组件：

    导航栏

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <!-- 定义汉堡按钮 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

</body>
</html>

    分页条

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>

    插件：轮播图

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/banner_1.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_2.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_3.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_3.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_3.jpg" alt="...">
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

</body>
</html>

    四、Node.js

    4.1概念

    JavaScript引擎：
    1.DOM渲染引擎
    2.JavaScript解析引擎

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Dom渲染引擎会将html元素渲染成相应的表现形式 -->
    <h1>Hello Node.js</h1>
    <!-- JavaScript解析引擎会在浏览器中解析并执行JavaScript代码 -->
    <script>
      alert('hello Node.js')
    </script>
  </body>
</html>

    Node.js
    脱离浏览器也可以运行JavaScript，只要有JavaScript引擎就可以。Node.js内置了Chrome的V8引擎，可以在Node.js环境中直接运行JavaScript程序。Node.js没有浏览器API，即document、window等，增加了许多Node.js专属API，例如：文件系统、进程、http功能

    下载：
    官网： https://nodejs.org/en/
    中文网： http://nodejs.cn/

    查看版本，检查是否安装成功

    node -v

    4.2Node.js程序

    创建一个名为01-hello-node.js的文件

    console.log("hello node")

    使用cmd进入到程序所在目录，输入：

    node 01-hello-node.js

    常见问题：
    如果安装Node.js之前已经打开VS Code，则会看到如下错误，重启VS就能解决问题
    在这里插入图片描述

    4.2.1 文件读取

    //引入Node.js文件系统模块
//fs是node.js自带的模块，使用node.js中的关键字require将模块引入，使用const定义模块常量
const fs = require("fs");//文件系统模块

//调用readFill方法读取磁盘文件：异步操作
fs.readFile("./read.txt", function (err, data) {
    //当读取失败时，可以获得错误信息，输出错误信息
    if (err) throw err;
    //当读取成功时，可以获取data的值，输出响应的内容
    console.log(data.toString());
})
console.log("读取文件");

    4.2.2服务器端程序

    //引入Node.js的http模块：
const http = require('http')
//调用createServer创建服务器
http.createServer(function (request, response) {
    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, { 'Content-Type': 'text/html' })
    // 发送响应数据 "Hello World"
    response.end('<h1>Hello Node.js Server</h1>')
}).listen(8888) //调用listen方法在8888端口监听客户端请求

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/')

    4.3 Node.js的作用

    4.3.1Node.js的应用场景

    如果你是一个前端程序员，想开发类似JavaWeb的简单后端程序，那么Node.js是一个非常好的选择。
    如果你是一个架构师，想部署一些高性能的服务，那么Node.js也是一个非常好的选择。
    通常它会被用来作一个BFF层，即Backend For Frontend (服务于前端的后端)，通俗的说就是一个专门用于为前端业务提供数据的后端程序。

    4.3.2BFF解决什么问题

    一个前端页面向服务A和服务B发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，所有的数据在PC端浏览器渲染。
    在这里插入图片描述

    我们可以使用一个BFF层提前将页面渲染好，发送给浏览器，那么BFF层提前将多个服务的数据聚合起来。
    在这里插入图片描述

    五、ECMAScript 6

    5.1介绍

    1、ECMA
    ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。
    2、ECMAScript
    ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。
    3、什么是ECMA-262
    Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个
    4、ECMA-262 历史
    ECMA-262（ECMAScript）历史版本查看网址
    http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm
    在这里插入图片描述

    5、ECMAScript 和 JavaScript 的关系
    要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。 因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

    5.2基本语法

    ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识，方便项目开发中对代码的理解。

    5.2.1let声明变量

    //声明变量
let a
let b,c,d
let e = 100
let f = 521, g = 'iloveyou', h = []

//1. 变量不能重复声明
let name = 'Helen'
let name = '环'//报错：SyntaxError: Identifier 'name' has already been declared

//2. 存在块儿级作用域
// if else while for 
{
   let star = 5
}
console.log(star)//报错：star is not defined

//3. 不存在变量提升
console.log(song)//报错：Cannot access 'song' before initialization
let song = '依然爱你';

    5.2.2const声明常量

    //声明常量
const SCHOOL = '尚硅谷'
console.log(SCHOOL)

//1. 一定要赋初始值
const A//报错：SyntaxError: Missing initializer in const declaration

//2. 一般常量使用大写(潜规则)
const a = 100

//3. 常量的值不能修改
SCHOOL = 'ATGUIGU'//报错：TypeError: Assignment to constant variable.

console.log(PLAYER)//报错：ReferenceError: PLAYER is not defined

//4. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
const TEAM = ['康师傅','海狗人参丸','雷神','阳哥']
TEAM.push('环') //常量地址不变，不会报错
TEAM = 100 //报错：TypeError: Assignment to constant variable.

    5.2.3结构赋值

    //ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，
//这被称为解构赋值。
//1. 数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝']
let [xiao, liu, zhao, song] = F4
console.log(xiao)
console.log(liu)
console.log(zhao)
console.log(song)

//2. 对象的解构
const zbs = {
    username: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log("演小品");
    }
}

let {username, age, xiaopin} = zbs
console.log(username)
console.log(age)
console.log(xiaopin)
xiaopin()

//3. 根据名字自动解构
// let {xiaopin} = zbs
// xiaopin()

    5.2.4模板字符串

    模板字符串相当于加强版的字符串，用反引号 `，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

    // ES6 引入新的声明字符串的方式 『``』 '' ""
//1. 声明
let str = `我也是一个字符串哦!`
console.log(str, typeof str)

//2. 内容中可以直接出现换行符
let list = `<ul>
            <li>沈腾</li>
            <li>玛丽</li>
            <li>魏翔</li>
            <li>艾伦</li>
            </ul>`
console.log(list)

//3. 变量拼接
let hello = 'javascript'
let out = `hello ${hello}`
console.log(out)

    5.2.5声明对象简写

    let username = 'Tom'
let age = 2
let sing = function () {
  console.log('I love Jerry')
}

// 传统
let person1 = {
  username: username,
  age: age,
  sing: sing,
}
console.log(person1)
person1.sing()

// ES6：这样的书写更加简洁
let person2 = {
  age,
  username,
  sing,
}
console.log(person2)
person2.sing()

    5.2.6定义方法简写

    // 传统
let person1 = {
  sayHi: function () {
    console.log('Hi')
  },
}
person1.sayHi()

// ES6
let person2 = {
  sayHi() {
    console.log('Hi')
  },
}
person2.sayHi()

    5.2.7参数的默认值

    注：函数在JavaScript中也是一种数据类型，JavaScript中没有方法的重载

    //ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数
function add(a, b, c = 0) {
  return a + b + c
}
let result = add(1, 2)
console.log(result)

//2. 与解构赋值结合
function connect({ host = '127.0.0.1', username, password, port }) {
  console.log(host)
  console.log(username)
  console.log(password)
  console.log(port)
}
connect({
  host: 'atguigu.com',
  username: 'root',
  password: 'root',
  port: 3306,
})

    5.2.8对象拓展运算符

    扩展运算符 （spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

    //展开对象(拷贝对象)
let person = { name: '路飞', age: 17 }
// let someone = person //引用赋值
let someone = { ...person } //对拷拷贝
someone.name = '索隆'
console.log(person)
console.log(someone)

    5.2.9箭头函数

    箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

    参数=>函数体

    箭头函数多用于匿名函数的定义

    //声明一个函数
let fn = function(a){
  return a + 100
}

//箭头函数
let fn = (a) => {
  return a + 100
}

//简写
let fn = a => a + 100

//调用函数
let result = fn(1)
console.log(result)

    5.2.10Promise

    Promise 是ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

    const fs = require('fs')

//实例化 Promise 对象：
//Promise对象有三个状态：初始化、成功、失败
const p = new Promise((resolve, reject) => {
  //调用readFile方法读取磁盘文件：异步操作
  fs.readFile('./他.txt', (err, data) => {
    //当文件读取失败时，可以获取到err的值
    if (err) reject(err) //reject将Promise对象的状态设置为失败

    //当文件读取成功时，可以获取到data的值
    resolve(data) //resolve将Promise对象的状态设置为成功
  })
})

//调用 promise 对象的方法
//then：当 Promise状态成功时执行
//catch：当 Promise状态失败时执行
p.then(response => {
  console.log(response.toString())
}).catch(error => {
  console.log('出错了')
  console.error(error)
})

    总结：借助于Promise，可以使异步操作中的成功和失败的处理函数独立出来。

    六、AXIOS

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKZUujXE-1642434485813)(axios.png)]

    6.1入门

    axios的作用
    Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
    官方网站：http://www.axios-js.com

    6.1.1axios案例

    step1: mybatis-plus中添加后端接口（可以看之前的文章）
    依赖：

    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

    controller :

    @RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserService userService;

    @GetMapping("/list")
    public List<User> list(){
        return userService.list();
    }
}

    启动项目
    访问： http://localhost:8080/user/list
    创建index.html文件
    导入axios.js文件

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="axios.js"></script>
    <script>
      //基于promise
      axios({
        method: 'get',
        url: 'http://localhost:8080/user/list',
      })
        .then((response) => {
          console.log('获取数据成功', response)
        })
        .catch((error) => {
          console.log('获取数据失败', error)
        })

      //另一种写法
      axios
        .get('http://localhost:8080/user/list')
        .then((response) => {
          console.log('获取数据成功1', response)
        })
        .catch((error) => {
          console.log('获取数据失败1', error)
        })
    </script>
  </body>
</html>

    6.2跨域

    6.2.1为什么会产生跨域问题

    出于浏览器的同源策略限制。
    所谓同源（即指在同一个域）就是两个地址具有相同的协议（protocol）、主机（host）和端口号（port）以下情况都属于跨域：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQMnPmT1-1642434485815)(跨域.png)]

    http和https也属于跨域。
    如果域名和端口都相同，但是请求路径不同，不属于跨域，如：www.jd.com/item 和 www.jd.com/goods
    同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
    而我们刚才是从localhost:5500端口去访问localhost:8080端口，这属于端口不同，跨域了。

    6.2.2解决跨域问题

    Spring早就给我们提供了解决方案，我们只需要在对应controller上添加一个注解就可以了，我们在 UserController 类上添加跨域标签@CrossOrigin，再进行测试，则测试成功！

    @CrossOrigin //解决跨域问题

    6.3自定义配置

    6.3.1配置axios示例

    可以对axios进行配置，简化代码的编写

    //使用自定义配置
const request = axios.create({
    baseURL: 'http://localhost:8080', //url前缀
    timeout: 1000, //超时时间
    headers: {'token': 'helen123456'} //携带令牌
})

    6.3.2配置请求参数

    这样，远程接口的url地址就可以修改成相对路径了

    //基于promise
//注意：这里使用了前面定义的request
request({
    method:'get',
    url:'/user/list'
}).then(response => {
    console.log('获取数据成功', response)
}).catch(error => {
    console.log('获取数据失败', error)
})

    6.4拦截器

    在请求或响应被then或catch处理前拦截它们

    6.4.1请求拦截器

    在发送axios请求前，可以拦截请求，对请求做一些处理

    // 请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么，例如：在请求头中携带一个令牌
    config.headers.token = 'helen123456'
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

    发送请求时，在请求头中会携带这个token
    在这里插入图片描述

    6.4.2响应拦截器

    在发完请求，获取响应后，可以对响应做一些处理，在返回非前端用户

    // 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么，例如：使用response.data替代response，简化前端拿到的数据结果
    return response.data
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

    七、模块化

    7.1产生背景

    创建a.js

    var star='lisi'

    创建b.js

    var star=18

    创建demo.html
    从这个例子可以看出，star的值不确定性很大，a和b两个脚本文件中的同名变量互相干扰

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    console.log(star)
  </script>
</body>
</html>

    7.1.1模块化解决的问题

    模块化主要解决JavaScript程序中全局空间内被污染的问题

    7.1.2模块化规范

    CommonJS模块化规范(基于ES6语法之前)
    例如：node.js中的require引入模块，exprots导出模块
    ES6模块化规范(使用ES6语法)
    export导出模块 import导出模块

    7.2ES6模块化规范

    7.2.1导出模块

    创建m1.js

    export let star = 'lisi';

export function sing(){
  console.log('hello javascript')
}

    还可以这样导出

    let star = '王力宏';

function sing(){
  console.log('大城小爱')
}

export {star, sing}

    创建m2.js

    export let star = 18

    7.2.2导入模块

    创建demo.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import * as m1 from './m1.js'
    import * as m2 from './m2.js'

    console.log(m1)
    console.log(m2)

    console.log(m1.star)
    console.log(m2.star)
    
    //还可以这样导入：解构赋值的形式
    import {star, sing} from './m1.js'
    import {star as star2} from './m2.js' //使用as防止重名
    console.log(star)
    sing()
    console.log(star2)
    
  </script>
</body>
</html>

    运行html文件测试

    7.3默认暴露模块

    7.3.1默认暴露

    创建m3.js

    //可以导出任意类型，但同时只能有一个export default
// export default 'helen'
// export default 99

//大部分情况是导出对象
export default{
  username: 'helen',
  age: 20,
  coding(){
    console.log('hello world')
  } 
}

    7.3.2导入模块

    在demo.html中导入模块

    //导入m3
import m3 from './m3.js'
console.log(m3)

    运行html文件测试

    7.4封装代码

    7.4.1创建app.js

    可以看作是程序的入口文件

    import * as m1 from './m1.js'
import * as m2 from './m2.js'
import m3 from './m3.js'

console.log(m1)
console.log(m2)
console.log(m3)

    7.4.2引入入口文件

    创建demo-app.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="app.js" type="module"></script>
</body>
</html>

    运行测试文件

    八、Vue.js

    8.1 Vue.js

    8.1.1Vue.js基本认识

    1、官网：
    英文官网：https://vuejs.org
    中文官网：https://cn.vuejs.org

    2、简介
    渐进式JavaScript 框架（核心 + 扩展）
    作者：尤雨溪(一位华裔前 Google 工程师)
    作用：动态构建用户界面

    3、优点
    体积小：压缩后33K
    更高的运行效率：基于虚拟dom
    双向数据绑定：不操作dom，关注业务逻辑
    生态丰富、学习成本低：入门容易，学习资料多

    8.1.2第一个Vue应用

    1、引入脚本库
    在这里插入图片描述

    创建html文件

    <script src="vue.js"></script>

    2、数据绑定

    <body>
    <!-- id标识vue作用的范围，绑定的数据必须写在这个div内部 -->
    <div id="app">
        <!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
        {{ message }}
    </div>

    <script src="vue.js"></script>
    <script>
        // 创建一个vue对象
        // Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字
        new Vue({
            el: '#app', //绑定vue作用的范围，用id选择器选中div
            data: {
                //在data中注册变量，用于视图中的数据绑定
                message: 'Hello Vue!',
            }
        })
    </script>
</body>

    这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

    data: {
    message: 'Hello Vue!'
}

    也可以写成：

    data() {
    return {
    	message: 'Hello Vue!'
    }
}

    8.1.3数据绑定指令

    1、数据绑定指令
    创建html文件，引入脚本，创建Vue对象

     <script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        company: '尚硅谷',
        site: 'http://www.atguigu.com'
      }
    })
  </script>

    使用数据绑定指令做数据渲染

    <div id="app">
    <a v-bind:href="site" target="_blank">{{company}}</a>
    <input type="text" v-bind:value="company">
</div>

    v-bind指令的简写形式

    <!-- v-bind: 指令的简写形式 : -->
<a :href="site" target="_blank">{{company}}</a>
<input type="text" :value="company">

    2、双向数据绑定指令
    创建html文件，赋值1的html代码，将v-bind改为v-model

    <!--  v-bind:value 单向数据绑定  -->
<input type="text" v-bind:value="company">
<!--  v-model 双向数据绑定  -->
<input type="text" v-model="company">

    什么时双向数据绑定
    1、当数据发生变化时，视图也跟着发生变化
    数据模型发生了改变，会直接显示在页面上
    2、当时图发生变化时侯，数据也会跟着同步变化
    用户在页面上的修改，会自动同步到数据模型中去
    注：v-model只用于用户交互组件中

    8.1.4理解MVVM

    1、安装Vue.js devtools
    使用Edge在线安装，别问为什么不是Chrome…
    在这里插入图片描述

    2、MVVM

    在这里插入图片描述

    8.1.5绑定事件监听

    创建html文件，使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

    <body>

  <div id="app">
    <button v-on:click="study">去学习</button>
  </div>
  
  <script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        company: '尚硅谷'
      },

      methods: {
        study(){
          alert('我要去' + this.company + '学习')
        }
      }
    })
  </script>
</body>

    v-on指令的简写形式

    <!-- v-on: 指令的简写形式 @ -->
<button @click="study">去学习</button>s

    8.1.6计算属性

    创建html文件

    1、模板中使用js表达式

    <body>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello',
            },
        })
    </script>
</body>

    模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。

    <div id="app">
    <p>原始值: {{ message }}</p>

    <!-- 1、插值数据绑定中使用表达式 -->
    <p>反转消息: {{ message.split('').reverse().join('') }}</p>
</div>

    所以，对于任何复杂逻辑，你都应当使用计算属性

    2、使用计算属性

    computed: {
    reversedMessage () {
        console.log('计算属性执行')
        return this.message.split('').reverse().join('')
    }
}

    <!-- 2、使用计算属性 -->
<p>反转消息: {{ reversedMessage }}</p>

    3、使用方法

    methods:{
    reversed () {
        console.log('方法执行')
        return this.message.split('').reverse().join('')
    }
}

    <!-- 3、使用方法 -->
<p>反转消息: {{ reversed() }}</p>

    计算属性缓存 vs 方法
    看起来计算属性和方法完全相同的功能，那么它们有什么区别
    1.计算属性基于缓存
    2.方法将总会再次执行

    <!-- 2、使用计算属性 -->
<p>反转消息: {{ reversedMessage }}</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: {{ reversedMessage }}</p>

<!-- 3、使用方法 -->
<p>反转消息: {{ reversed() }}</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: {{ reversed() }}</p>

    案例：计算属性的单向和双向绑定

    <body>
    <div id="app">
        姓: <input placeholder="First Name" v-model="firstName" /><br />
        名: <input placeholder="Last Name" v-model="lastName" /><br />
        姓名1(单向): <input placeholder="Full Name1" v-model="fullName1" /><br />
        姓名2(双向): <input placeholder="Full Name2" v-model="fullName2" /><br />
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'Helen',
                lastName: 'Yao',
                // fullName: 'Helen Yao',
            },
            computed: {
                fullName1() {
                    console.log('计算fullName1')
                    return this.firstName + ' ' + this.lastName
                },

                fullName2: {
                    get() {
                        console.log('计算fullName2')
                        return this.firstName + ' ' + this.lastName
                    },

                    //当给fullName2指定新值时自动调用：实现双向绑定
                    set(value) {
                        console.log('fullName2 的 setter')
                        const names = value.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    },
                },
            },
        })
    </script>
</body>

    8.1.7监听

    创建html文件

    <body>
    <div id="app">
        姓: <input placeholder="First Name" v-model="firstName" /><br />
        名: <input placeholder="Last Name" v-model="lastName" /><br />
        姓名: <input placeholder="Full Name" v-model="fullName" /><br />
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'Helen',
                lastName: 'Yao',
                // fullName: 'Helen Yao',
            },

            watch: {
                //当firstName改变时自动调用
                firstName(value) {
                    console.log('watch firstName')
                    this.fullName = value + ' ' + this.lastName
                    console.log(this.fullName)
                },

                //当lastName改变时自动调用
                lastName(value) {
                    console.log('watch lastName')
                    this.fullName = this.firstName + ' ' + value
                }
            },
        })
    </script>
</body>

    8.1.8条件渲染

    创建html文件

    <script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>

    点击复选框，显示或隐藏协议内容。分别使用v-if和v-show实现

    <div id="app">
    <input type="checkbox" v-model="ok" />同意许可协议
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <p v-if="ok">yes.</p>
    <p v-else>no.</p>

    <!-- v:show 条件指令 初始渲染开销大 -->
    <p v-show="ok">yes.</p>
    <p v-show="!ok">no.</p>
</div>

    8.1.9列表渲染

    <script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                { username: 'helen', age: 18 },
                { username: 'peter', age: 28 }
            ]
        }
    })
</script>

    v-for：列表循环指令

    <div id="app">
    <ul>
        <!-- item：当前元素，index：当前元素的索引 -->
        <li v-for="(item, index) in userList">
            {{index}} {{item.username}} {{item.age}}
        </li>
    </ul>
</div>

    8.1.10实例生命周期

    创建html文件

    <div id="app">
    <h3 id="h3">{{ message }}</h3>
</div>

    分析生命周期相关方法的执行时机

    <script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '床前明月光'
        },
        // 页面在内存中已经初始化完毕：
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中：用户看不见
        created() {
            console.log('created')
            //可以操作 data 中的数据
            console.log(this.message)
            //可以调用methods中的方法
            this.show()
            //无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
            console.log(document.getElementById('h3').innerText)
        },
        
        // 数据已经被渲染到页面中
        mounted() { // 第四个被执行的钩子方法
            console.log('mounted')
            //可以取出dom节点取数据，说明用户已经在浏览器中看见内容
            console.log(document.getElementById('h3').innerText)
        },
        
        methods: {
            show() {
                console.log('show方法被调用')
            }
        },
    })
</script>

    8.1.11综合案例

    <body>
  <div id="app">
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>email</th>
      </tr>
      <tr v-for="(item, index) in userList">
        <td>{{index + 1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.email}}</td>
      </tr>
    </table>
  </div>

  <script src="vue.js"></script>
  <script src="axios.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          userList: [],
        }
      },

      created() {
        this.showList()
      },

      methods: {
        showList() {
          //使用自定义配置
          const request = axios.create({
            baseURL: 'http://localhost:8080', //url前缀
            timeout: 1000, //超时时间
            headers: { token: 'helen123456' }, //携带令牌
          })

          // 请求拦截器
          request.interceptors.request.use(
            function (config) {
              // 在发送请求之前做些什么，例如：在请求头中携带一个令牌
              config.headers.token = 'helen123456'
              return config
            },
            function (error) {
              // 对请求错误做些什么
              return Promise.reject(error)
            }
          )

          // 添加响应拦截器
          request.interceptors.response.use(
            function (response) {
              // 对响应数据做点什么，例如：使用response.data替代response，简化前端拿到的数据结果
              return response.data
            },
            function (error) {
              // 对响应错误做点什么
              return Promise.reject(error)
            }
          )

          //基于promise
          request({
            method: 'get',
            url: '/user/list',
          })
            .then((response) => {
              console.log('获取数据成功', response)
              this.userList = response
            })
            .catch((error) => {
              console.log('获取数据失败', error)
            })
        },
      },
    })
  </script>
</body>

    8.2 Vue UI

    8.2.1常用组件库

    1、Mint UI
    主页：http://mint-ui.github.io/#!/zh-cn
    说明：饿了么开源的基于Vue的移动端UI组件库

    2、Element-UI
    主页：http://element-cn.eleme.io/#/zh-CN
    说明：饿了么开源的基于Vue的PC端UI组件库

    8.2.1Element-UI实例
    1、引入脚本库
    复制8.1.11的综合案例
    2、引入css和脚本
    在html中引入css和js

    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="vue.js"></script>
<script src="axios.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

    3、渲染用户列表

    <div id="app">
    <el-button>默认按钮</el-button>
    <el-table :data="userList" stripe border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="email" label="email"></el-table-column>
    </el-table>
</div>

    8.3 Vue Router

    8.3.1认识路由

    1、锚点的概念
    案例：百度百科
    特点：单页Web应用，预先加载页面内容
    形式：url#锚点

    2、路由的作用
    Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。
    通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）

    3、参考 https://router.vuejs.org/zh/

    8.3.2路由实例

    1、创建html文件
    2、复制js资源 vue.js vue-router.js
    3、引入js

    <script src="vue.js"></script>
<script src="vue-router.js"></script>

    4、编写html

    <div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <router-link to="/">首页</router-link>
        <router-link to="/invest">我要投资</router-link>
        <router-link to="/user">用户中心</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

    5、编写JS

    <script>
    // 1. 定义（路由）组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const welcome = { template: '<div>尚融宝主页</div>' }
    const invest = { template: '<div>投资产品</div>' }
    const user = { template: '<div>用户信息</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: welcome },
        { path: '/invest', component: invest },
        { path: '/user', component: user },
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes, // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router,
    })

    // 现在，应用已经启动了！
</script>

    例
    1、引入脚本库
    复制8.1.11的综合案例
    2、引入css和脚本
    在html中引入css和js

    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="vue.js"></script>
<script src="axios.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

    3、渲染用户列表

    <div id="app">
    <el-button>默认按钮</el-button>
    <el-table :data="userList" stripe border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="email" label="email"></el-table-column>
    </el-table>
</div>

    8.3 Vue Router

    8.3.1认识路由

    1、锚点的概念
    案例：百度百科
    特点：单页Web应用，预先加载页面内容
    形式：url#锚点

    2、路由的作用
    Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。
    通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）

    3、参考 https://router.vuejs.org/zh/

    8.3.2路由实例

    1、创建html文件
    2、复制js资源 vue.js vue-router.js
    3、引入js

    <script src="vue.js"></script>
<script src="vue-router.js"></script>

    4、编写html

    <div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <router-link to="/">首页</router-link>
        <router-link to="/invest">我要投资</router-link>
        <router-link to="/user">用户中心</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

    5、编写JS

    <script>
    // 1. 定义（路由）组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const welcome = { template: '<div>尚融宝主页</div>' }
    const invest = { template: '<div>投资产品</div>' }
    const user = { template: '<div>用户信息</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: welcome },
        { path: '/invest', component: invest },
        { path: '/user', component: user },
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes, // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router,
    })

    // 现在，应用已经启动了！
</script>
    收起
    展开全文
    前端 node.js vue.js vscode

  • 第一阶段:后端开发数据库/JS基础/后端开发(Node.js)

     2022-01-13 08:57:53
     描述数据表的表头都有哪些项 以英文的分号作为结束 练习：分别进入到数据库performance_schema和phpmyadmin 练习：查看数据库performance_schema和mysql下都有多少个数据表 练习：查看以下数据表中都有哪些项 pma_...
    收起
    数据库 javascript

  • 服务器后端开发技术完整学习路线，23张思维导图，自学也能进大厂！

     千次阅读 2020-11-27 00:21:06
    柠檬哥作为一个普通大学、非计算机专业，自学后端技术进入腾讯做后端开发工作，我自己也是非科班自学计算机成功转行软件开发（有想听柠檬哥转行之路经历的吗，可以留言告诉我，人多就写写），体会过当初想学又不知从...
    收起
    c++ java golang 高并发编程 数据库

  • 超详细面试准备（10分钟打遍所有初级后端开发面试）

     千次阅读 2021-02-23 23:20:09
    4W字的后端面试知识点总结： https://www.cnblogs.com/aobing/p/12849591.html 后端技术框架： https://www.cnblogs.com/loren-Yang/p/11073536.html 数据结构 Java HashMap原理： https://yikun.g
    收起
    golang

  • 后端开发工程师必须了解的网络协议基础知识大全

     千次阅读 多人点赞 2019-08-20 19:00:04
    TIME-WAIT的作用 MSL 是 MaximumSegmentLifetime 英文的缩写，中文可以译为“报文最大生存时间”。 保持连接，可靠地终止TCP连接。 2MSL能确保网络在可靠的条件下，第四次挥手的数据包到达服务端，而客户端还未关闭...
    收起

  • JAVA开发常用英语词汇

     2021-04-14 04:42:27
    《JAVA开发常用英语词汇》由会员分享，可在线阅读，更多相关《JAVA开发常用英语词汇(8页珍藏版)》请在人人文库网上搜索。1、JAVA开发常用英语词汇publicpblik 公共的,公用的 staticsttik 静的;静态的;静止的void：...
    收起

  • 程序员开发时遇到的那些缩写和名词

     2019-09-08 22:23:21
    程序员的世界里充斥着很多的专业名词和英文缩写，我打算对一些常见的词汇进行一个汇总，同时会...英文缩写 API 应用程序接口（英语：Application Programming Interface，简称：API），又称为应用编程接口，就是软件...
    收起

  • vue进阶篇— 适用于后端开发人员的Vue axios 组件化开发教程_vue结合springboot开发

     2021-03-22 19:01:34
    并发请求：将多个请求在同一时刻发送后到后端服务接口，最后在集中处理每个请求的响应结果 axios并发请求 此时在IDEA和网页的NetWork看到执行了两条请求 vue结合axios天气查询案例 ...
    收起

  • 互联网行业的那些缩写PM,RD,FE,UE,QA,OP,BRD,MRD,PRD,FSD

     万次阅读 多人点赞 2012-11-28 22:32:03
    如题，本人对鸟语了解的太少。更何况是缩写。...RD是研究与开发（研发）。诸如PHP程序猿，Java程序猿，无论是爱疯的还是安卓的都是属于这一类别。 FE FE是前端研发。有点意思！ UE UE是用户
    收起

  • php 503是什么错误？_后端开发

     2021-04-26 20:00:27
    _后端开发strcpy函数的作用是把含有“’\0’”结束符的字符串复制到另一个地址空间。strcpy是一种C语言的标准库函数，返回值的类型为“char*”；strcpy是“string copy”(字符串复制)的缩写。php 503的错误是由于...
    收起

  • 2021-11-03大数据学习日志——数据埋点+网络爬虫——后端开发入门

     2021-10-20 16:08:30
    能够知道Web开发流程 能够知道使用web应用程序处理客户端的动态资源请求操作 能够知道路由列表的实现 能够知道装饰器方式的添加路由 能够知道logging日志的使用 本章节常用单词 request英 [rɪ'kwest] 请求；...
    收起

  • 数据库/JS基础/后端开发(Node.js)

     2022-03-24 19:37:09
    mysql -uroot 简写形式 结束不能加分号 (2)常用的管理命令 quit; 退出服务器的连接 show databases; 显示当前数据库服务器下所有数据库 use 数据库名称; 进入到指定的数据库 show tables; 显示当前数据库中...
    收起
    mysql

  • 前端开发常见的缩写词中英文对照

     千次阅读 2018-11-08 08:43:37
    原文地址：... AJAX ==[Asynchronous Javascript And XML]--[异步的javascript和XML] AMD ==[Asynchronous Module Definition]--[异步模块加载机制] API ==[Application Programmi...
    收起

  • 不想写前端的后端开发工程师，不是好厨师（第一回）

     2017-07-09 22:38:00
    为什么80%的码农都做不了架构师？>>> ...
    收起

  • c语言num什么意思_后端开发

     千次阅读 2021-05-21 12:34:19
    c语言switch case用法详解_后端开发c语言中“switch case”是一种“选择”语句，也就是多分支选择语句，switch的一般形式为“switch (){case…}”，其中switch后面括号内的“表达式”必须是整数类型，case也必须用...
    收起

  • c语言中fun用法详解_后端开发

     千次阅读 2021-03-13 03:06:46
    Java Dao层的作用_后端开发Dao层叫数据访问层，属于一种比较底层，比较基础的操作，可以具体到对于某个表或某个实体的增删改查，其Dao层的作用是对数据库的访问进行封装，从而不涉及业务，实现解耦。 c语言中fun用法...
    收起
    java 函数fun

  • 前端和后端的英文_初学者应该怎么学习前端？web前端的发展路线大剖析

     2020-11-03 02:10:15
    >>>>第二阶段--css的学习 CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们...
    收起

  • 互联网公司的岗位英文简写

     千次阅读 2019-09-20 20:48:18
    RD – Research & Develop 研发工程师 ...BE – Back End 后端工程师 QA – Quality Assurance 测试工程师 DBA – Database Administrator 数据库 PM – Product & Marketing 产品经理 TS – Technolog...
    收起

  • web 开发（后端）的核心是什么

     万次阅读 2018-01-06 10:56:50
    CURD是一个数据库技术中的缩写词，代表创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete）操作，一般的项目开发的各种参数的基本功能都是CURD，用于处理数据的基本原子操作。 以下来自某帖子的评论...
    收起

  • 三分钟了解C语言中自定义的标识符及规则_后端开发

     2021-04-28 03:22:04
    php直接关闭页面怎么注销SESSION_后端开发php直接关闭页面注销SESSION的实现方法：首先每个页面都必须开启“session_start()”后才能在页面里面使用session；然后用户下次访问时，session_start()会检查有没有会话ID...
    收起

  • 【后端开发】python属于开源语言吗

     2020-11-25 11:12:35
    Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。 Python由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。...GPL，是GNU General Public License的缩写，是G...
    收起

  • 如何实现php中date只显示年月日_后端开发

     2021-04-12 22:22:35
    _后端开发C语言中的return语句是用于返回执行函数体中代码所得到的结果，return的语句形式是【return 表达式】或者【return (表达式)】。如何实现php中date只显示年月日？echo date('Y-m-j');2020-02-6echo date('y-...
    收起

  • Java 后端工程规范

     2021-07-16 17:29:19
    后端工程规范 规范的意义和作用 编码规范可以最大限度的提高团队开发的合作效率 编码规范可以尽可能的减少一个软件的维护成本 , 并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护 编码...
    收起
    java 代码规范

  • 【java学习之路】（javaWeb【后端】篇）007.Ajax&Axios

     2022-02-28 12:57:08
    真正的前后端分离是前端项目和后端项目分服务器部署，在我们这里我们先理解为彻底舍弃服务器端渲染，数据全部通过Ajax方式以JSON格式来传递 2.4 同步与异步 Ajax本身就是Asynchronous JavaScript And XML的缩写，...
    收起
    ajax java

  • 学习Java开发英语不好的可以学吗?

     2021-03-14 17:32:07
    先就业后付款学习Java开发英语不好的可以学吗?...其实想要学习Java开发对于英语的要求并不是很高，Java编程常用的高频词并不是很多，而有的单词是Java程序员随便写的不要求是完整的英文单词，变量...
    收起

  • Java后端编码规范

     2022-03-28 15:03:48
    摘抄自阿里巴巴开发手册
    收起
    java

  • asp.net是什么 aspnet是前端还是后端

     千次阅读 2020-12-18 19:57:18
    ASP.NET基于web开发平台。Net framework不仅吸收了以前版本ASP的最大优点，而且根据Java和VB的开发优势，增加了许多新的功能，修正了以前版本ASP的运行错误。ASP.NET它属于webform，即B/S模式的开发。模式属于WinS/...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,996
精华内容 2,798
热门标签
关键字：

后端开发英文缩写