Web全栈开发案例教程课件 第1章 Web全栈开发概述_第1页
Web全栈开发案例教程课件 第1章 Web全栈开发概述_第2页
Web全栈开发案例教程课件 第1章 Web全栈开发概述_第3页
Web全栈开发案例教程课件 第1章 Web全栈开发概述_第4页
Web全栈开发案例教程课件 第1章 Web全栈开发概述_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章Web全栈开发概述课程学习目标掌握HTML、CSS、JavaScript等核心技术，熟悉主流前端框架与工具链，具备独立开发响应式、高性能、可维护的Web应用（网站、小程序）的能力重点理解CSS盒子模型、布局方式（Flex/Grid）、响应式设计原理；能够编写符合W3C标准的结构化与样式化页面。理解ES6+语法（模板字符串、箭头函数、模块化等），Node.js后端开发；掌握DOM操作、事件处理、异步编程（Promise/Async-Await）；掌握至少一种主流框架（如React/Vue）的核心API与组件化开发；1.1Web全栈开发全栈开发是指在Web的前端和后端进行的Web产品开发。全栈中的“栈”是指“堆栈”，即子模块的集合Web开发全栈开发者能够在整个开发过程中参与并理解不同领域的工作，使得他们在团队中更具灵活性。浏览器端页面的制作服务器端程序的编写Web前端1.2Web产品的类型网站微信小程序手机App

NativeApp（原生APP）Uni-App（基于Vue框架）React-nativeApp安卓App iOSApp 鸿蒙App互联网产品的优缺点比较适用性便捷性开发难度推广成本网站宣传、展示能直接访问低微信小程序交互性、微信营销需要先关注开发成本低推广成本较低移动APP特定功能，需要先安装，才能使用开发成本高推广成本较高微信小程序和服务号的比较

Web前端和后端的功能网站小程序手机APP后端程序数据库交互Web前端Web后端前端和后端开发的语言前端开发的3种语言HTML5 网页的结构CSS3 网页的表现JavaScript 网页的行为后端编程语言（或环境）Node.js、PHP、Java、Python、Go等Web工程开发的步骤项目需求分析与规划技术选型与工具准备前端开发后端开发前后端联调与测试部署与上线项目需求分析与规划项目管理的三个核心约束条件是范围、时间和成本项目沟通的三个要点（功能、工期、预算）快速开发网站——仿站技巧使用扒站软件爬取要模仿的网站推荐扒站软件：OfflineExplorer推荐模仿的网站：高校网站第二步：在要模仿的网站页面上修改第三步：在网上找一个内容管理系统（CMS）作为后台管理系统使用AIGC辅助Web开发人工智能生成内容AIGC（ArtificialIntelligenceGeneratedContent）在Web开发领域的深度渗透，正引领着一场前所未有的技术革新TraeCN是一款由字节跳动公司发布的AI原生集成开发环境工具1.4Web交互模型浏览器Web服务器HTTP请求（含文件名的URL）HTTP响应（文件）浏览器和Web服务器本质上是两个程序前端后端Web交互模型在Web交互模型中，总是先由浏览器发出HTTP请求，服务器再返回HTTP响应，因此浏览器是主动方。如果服务器能主动发送HTTP响应信息给浏览器，则称为推送，在微信小程序和手机App中能使用WebSocket实现推送。URL在浏览器地址栏中输入的网址称为URL（UniversalResourceLocator，统一资源定位器）。URL信息会通过HTTP请求发送给服务器，服务器会根据URL作出响应1 /info/1005/2411.htm2 http://localhost/index.php3 https:///show.php?id=2411&page=24 http://localhost:88/list?type=通知5 /show?id=2411&page=26 https:///show/2411/2路由参数URL字符串浏览器Web服务器HTTP请求（JSON数据）HTTP响应（JSON数据）JSON格式已成为了Web前端和后端之间传输数据的标准格式前端后端Web交互模型电商网站

服务器快递网站服务器HTTP请求（快递单号）HTTP响应（物流信息）JSON已成为网站之间数据交换的标准格式Web交互模型JSON简介JSON即JavaScriptObjectNotation（JavaScript对象表示法）。是一种轻量级的数据交换格式，它是基于JavaScript的一个子集JSON对象var

user

={"username":"andy","age":20,"sex":"male"};JSON数组[{name:"wang",tel:5566},{name:"li",tel:null}]JSON的使用JSON格式嵌套var

user

={ "username":"andy", "age":20, "info":{"tel":"123456","cellphone":"98765"}, "address":[ {"city":"beijing","postcode":"222333"}, {"city":"newyork","postcode":"555666"} ]}1.3.1Web服务器的作用Web服务器作用静态网页Web服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。动态网页Web服务器要先对动态网页中的服务器端程序代码进行执行，生成静态网页代码再传送给客户端浏览器。动态网页的执行过程PHP文件HTML代码Web服务器浏览器<html><?…?></html>

<html>……</html>

Web服务器对PHP程序进行解释执行浏览器器对HTML代码进行解释执行浏览器的种类和内核

Chrome Edge Firefox Safari OperaWebkitWebkitWebkitGeckoWebkit1.3.2浏览器的种类和作用浏览器的本质：解释执行HTML代码生成我们看到的网页如果浏览器内核不同，则对HTML代码可能会有不同的解释，导致网页在不同浏览器中的显示效果会不同。常见浏览器及其内核如下内核名称典型浏览器CSS3私有属性前缀WebkitChrome、Safari-webkit-GeckoFirefox-moz-TridentIE-ms-PrestoOpera-o-1.3网站的创建和制作流程网页和网站 Internet 网站 网页 一个网页就是一个文件，存放在世界某处的一台Web服务器中 网页及其本质查看源代码网页的本质：HTML代码HTML和网页的关系HTML：超文本标记语言

HyperTextMarkupLanguage网页是用HTML编写的一种纯文本文件。网页中显示的图像、动画、声音等文件都是单独存放的。一个网页一般并不是一个单独的文件1.1.3HTML简介标记超文本语言HTML(HyperTextMarkupLanguage).标记，就是作记号。让浏览器理解某段内容的含义超文本，就是相比普通文本有超越的地方语言是一种符号系统，具有自己的词汇（符号）和语法（规则）HTML的历史HTML是SGML（标准通用标记语言）在WWW中的应用。目前最新版本是HTML5SGML(1985)HTML(1993)XML(1998)HTML5(2009)XHTML(2000)SGML:StandardGeneralizedMarkupLanguageXML:eXtensibleMarkupLanguage(可扩展标记语言)……HTML与编程语言的区别HTML不是一种计算机编程语言，而是一种描述文档结构的语言，或者说排版语言；HTML是弱语法语言，随便怎么写都可以，浏览器尽力去理解执行，不理解就按原样显示，而编程语言是严格语法语言，写错一点点就不能执行，报告错误；HTML不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器解释执行。

1.1.2网页设计的两个基本问题网页设计是艺术与技术的结合。网页设计的本质是一种平面设计，对于平面设计需要考虑两个基本问题：布局和配色。布局配色常用的网页布局技术CSS布局：使用CSS浮动和定位属性进行布局flex布局：使用CSS3中的flex相关属性进行布局，优点：配合媒体查询能很好地支持响应式布局响应式布局：能自适应屏幕大小的布局网站的作用建设网站的理由官方网站是企业在线身份的核心体现缺乏官方网站的企业可能给人留下不够正规、信息不透明的印象网站是企业与客户之间建立联系的桥梁网站上的信息更容易被潜在客户搜索到。微信小程序和手机APP的后台管理端一般都是电脑网站的形式，Web应用程序也是使用和网站相同技术开发的1.2.2网站的开发步骤进行需求分析客户想要做的网站的类型是什么？风格是什么样的？有没有具体的要求？绘制网站草图（纸，笔）制作网站效果图（Photoshop）根据效果图制作静态页面（HTML，CSS）绑定动态数据和后台（Node.js，PHP）购买域名和主机空间（淘宝、阿里云）1.2网站的创建和制作流程网站：网页的集合，形式上是一个文件夹。这个文件夹称为网站目录需要指出，随着Web开发技术的进步，目前的网站多采用单页应用程序（singleapplications，SPA）模式，这种模式将整个网站应用程序封装在单个JS文件中，浏览器的所有请求都是发送给这个JS文件处理，JS根据请求的参数再去渲染对应的HTML模板文件并生成HTML返回给浏览器。1.3.3网站的开发工具DreamweaverHBuilderXVS1.3.4在DW中建立站点在DW中，“站点”一词既表示网站，又表示属于该网站的文件的本地存储位置建立站点的作用：①DW能使站点内的网页以相对URL的方式进行链接，使代码在上传到服务器后也无需更改；②新建网页时所有的网页文件都会自动保存在站点目录中，便于管理；③在预览动态网页时，DW还能使用已设置好的URL运行该动态网页。示范1.3Web服务器和浏览器网页被放置在Web服务器上用户在浏览器中输入网址发出访问某个网站的请求该网站的服务器就把用户请求的网页文件传送到用户的浏览器中，即将文件下载到用户计算机中浏览器再去解析并显示网页内容1.4域名、ip和主机域名和主机的关系：多对一即在一台主机上可建立多个网站，这些网站的存放方式称为“虚拟主机”，通过web服务器上设置“主机头”进行区别。域名的作用

一是将域名发送给DNS服务器解析得到web服务器的IP地址以进行连接，

二是将域名信息发送给web服务器，通过域名与web服务器上设置的“主机头”进行匹配确认客户端请求的是哪个网站，若客户端没有发送域名信息给web服务器，例如直接输入ip，则web服务器将打开默认网站。

域名的作用1.方便记忆IP地址2.作为主机头信息识别请求的网站习题1.网页的本质是（ ）

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论