慢下来街角咖啡馆
找个靠窗的位置,把最近的小事慢慢讲给你听。
Chrome、Safari 这些用来打开网页的软件,就叫浏览器。它读懂文字、图片和代码这些文件,就能显示下面的约会计划。代码可以理解成“写给电脑的说明”。
先玩一下下面的页面,再用实验台拆开看看。三个名字先混个脸熟就好。
慢下来找个靠窗的位置,把最近的小事慢慢讲给你听。
去透透气沿着绿意走走,没有目的地,走到哪里都算数。
一起入戏买一份大桶爆米花,散场后再交换彼此的感想。
三个都不错,让网页帮我们选一个吧。
每次只解决一个小问题。
不用一下记住所有名词。
假设我在电脑上做这份约会清单。改一句介绍、换一张照片,再用浏览器打开看效果。这样在自己的电脑上边做边试,就叫“本地开发”。
它的意思就是“这台设备自己”。本地开发时,常会在电脑上启动一个小服务,让浏览器通过这个地址取到网页。所以,把 localhost 发到你的手机上,它找的是你的手机,不是我的电脑。
可以。把网页放到一台能被互联网访问的电脑上,再给你一个网址。你点开网址,就能拿到网页。把网页发布出去,这一步叫“部署”。
专门给别人提供网页的电脑,叫服务器。用服务商提供的远程机器来运行网站,是常见的云端部署方式。“云”背后也是真实的电脑。
这个场景里,我只在自己电脑上预览,还没有把网页发布出去。
Cloudflare Pages、Vercel、Netlify、GitHub Pages 都能发布这类网页,也可以租云服务器自己管理。这次用了 Cloudflare Pages,只是其中一种选择。
发布到托管平台后可以,因为是平台的服务器在提供网页,不用等我的电脑开着。
这个项目不会自动变。还要再发布一次,大家才会看到新版。就像修改了手机里的照片,还要重新发出去。
你现在打开的是哪一份?
正在看看当前网址…
有。比如把两台设备连到同一网络并做一些设置,或者借助临时分享工具。不过通常需要我的电脑一直运行。上面的演示省略了这些特殊设置,先理解最常见的两种情况就好。
光把网页放上网,还做不到。现在两台手机各自打开一份页面,我点亮爱心,只改变了我这一份。想一起用同一份收藏,就需要有个地方替我们共同记着。
可以想象有一个“帮我们记清单的人”,还有一本“共同的记录本”。下面这三个名字,就是在说各自负责什么。
显示约会照片,让你点爱心,把结果展示出来。
像“帮忙记清单的人”:确认是谁、能看哪份清单,再帮忙保存或取出收藏。
像“记录本”:把收藏存下来,之后还能找出来。
每次点一下“下一步”,停下来看看。没有真的创建账号或保存记录。
先从你按下爱心的那一刻开始。
回头看眼前这个网站:目前只做了前端。
它会换色、会随机选计划,却没有接上“帮我们记清单的程序”和“记录本”。收藏只临时记在当前页面,刷新就清空,也不会同步给对方。
不一定。还可以把收藏保存在这台浏览器里,下次在同一浏览器打开时再读出来。但换一台手机,不会自动带过去。只有自己本机记得,和两个人共享记录,是两种不同的需求。本示例还没有加入这种本机保存功能。
不是。这里“静态”是指服务器主要把准备好的网页文件发给你。文件里的 JavaScript 仍然可以让按钮响应、让图片动起来。这个网站就是有互动的静态网页。
先看要做什么。如果只介绍约会地点,前端就够了。如果需要共同收藏,再加上后端和存储。确定需要后端之后,才考虑:放在一个项目里一起做,还是让前后端分开维护。
能看照片、换颜色、随机挑地点。像现在这份约会网页。
看得见的页面和背后办事的程序,都在同一个应用里安排。
前端专心做页面,后端专心处理和保存。双方通过约好的方式交换消息。
先把照片和介绍做好。没有共同保存数据的需求,就不用多搭一套后端。
就是前后端约好的联系方式。比如前端说“请收藏地点 A”,后端回答“记好了”。接口约定该发什么消息、会收到什么答复,两边才能听懂对方。
不一定。放在一起的应用也能服务很多人。通常是网页和 App 要共用一套后端,或者不同团队要各自更新时,分离更值得考虑。分离说的是代码和工作的组织方式,不要求两个网址,也不是分成两个文件夹就算完成。