前后端交互(在一台旧手机上,搭建家庭爱心小网站)

前后端交互(在一台旧手机上,搭建家庭爱心小网站)
在一台旧手机上,搭建家庭爱心小网站


PART 01


前情提要



前几天,我以一副资本家的嘴脸,把家里闲置了一段时间的旧手机翻了出来,让它重新开机上岗。以 termux 为基础把它打造成了一台家庭服务器。由于改造的过程得到了各个大模型的鼎力支持,所以没遇到太多的阻碍就顺利完成了配置。至少在 MobaXterm 眼里,它已经是一台成熟的服务器了。



既然岗前培训完成了,那作为一台服务器它就需要上工了。连接 VSCode 做远程开发肯定是基操啦。不过写文章这台电脑 VSCode 也是刚装,还没搞完个性化的配置,就先不放进一步的修改进展了。但是懂行的朋友肯定知道,到了这一步之后,关于代码开发环境的部分,再怎么折腾就都全看个人爱好了。



但是,每天在公司就已经写很多代码了,总不可能回家也光写代码吧。所以我前段时间隔三差五就会思考,该怎么把这台旧手机的剩余价值压榨到极致。正好,家里领导生日快到了,打算先在手机上搞个小网站,给媳妇庆生。


PART 02


网页制作



说起来也有意思,虽然做个小网站作为给妻的生日礼物的一部分的念头已经有一段时间了,但一直没有什么很好的想法。上周二可能是白天茶喝多了,又正赶上那天气温异常的高,凌晨两点多被热醒之后,就再也睡不着了,开始在床上翻滚。翻滚的时候突然冒出个念头,不然网站就做个小游戏吧,让她能够通过玩游戏获得生日礼物,顺便还可以夹带私货,在结算页面给她送上一封信,仪式感有。翻滚到三点,脑子越来越清醒,决定起来冷静冷静,于是来到了书房。


夜深人静,正是写代码 AI 写代码的好时候。我一股脑打开了 kimi,DeepSeek,智谱清言和豆包四个大模型。我对豆包说:“我想要制作一个网页,网页内容是一个掷骰子+走格子的小游戏,沿路有机会获得金币,其他机制可以自由发挥。我希望借助大型语言模型生成这个网页,我该如何编写提示词?”。


虽然是凌晨三点,但是豆包依旧精神百倍,唰唰唰给我发来三个版本的 prompt,极简标准版、丰富完整版、极简超短版。分别适合基础功能的实现、完整且精致的实现以及简化的、方便快速修改快速测试的实现。



提示词美化方面工作,豆包做得非常不错,但是写代码这种脏活累活,还是交给其它三个 AI 员工来干吧。我本着不做中间商赚差价的原则,直接把豆包给的提示词丢给 kimi,智谱和 DeepSeek,搞个内部赛马,优中选优。


第一个收的是 kimi 的作业。他做得不错,生成的 html 代码基本是一个可用的水平,手动复制下来放在本地的 html 文件中再用浏览器打开就可以顺利玩耍了。中规中矩,没什么错误,但也没什么亮点。


第二个收的是智谱的作业,智谱的效果比 kimi 的明显要更好,之前一直听说智谱的 GLM-4.7 的代码能力已经是国际一梯队的水平。这次我的需求虽然简单,但是已经能够从中管中窥豹了。


由于第二位智谱的表现过于优秀,我已经懒得看 DeepSeek 的作业了,后面就集中精力和智谱继续讨论和优化了。大约十轮之后,我们就得到了一个 80 分水平的网页文件和完整功能。之所以是 80 分而不是更高,是因为在优化地图上的路径,以及前进的路线时遇到了一些困难,总觉得有些不舒服。



几天之后,我决定还是换个小游戏,最后选定了自己小时候第一次接触电脑时玩的游戏——连连看。这次依旧是让豆包先帮我改 prompt,不知道为什么豆包这次特别上进,除了提示词之外,还直接给了我一版网页代码,只可惜,效果一言难尽。。。



在代码能力方面,智谱清言和豆包高下立判。同样是纯静态网页,豆包还在玛卡巴卡呢,智谱清言已经上高速了。智谱清言生成的网页代码,游戏界面一次成型,之后再没有改动过。只是后面跟他讨论了几轮礼物结算界面和一封信环节的动画及界面优化。框架定型后自己又微调了源代码文件。


游戏界面

结算界面


PART 03


web 服务器配置



这次时间紧,所以给大模型提的要求是生成一个纯静态网页,所以在部署时不需要考虑前后端交互,数据持久化这些事情,只要起一个 web 服务器,然后开放一个端口就好了。


Web 服务器软件我选的是 Nginx,倒也没有特别的理由,只是接触过一次。豆包对 Nginx 的介绍是这样的:Nginx(发音:Engine X) 是一款轻量级、高性能的 Web 服务器软件,同时还能兼任反向代理、负载均衡、缓存等多种角色,是现代互联网架构中不可或缺的核心组件。


连接手机端的 ubuntu 之后,先用 apt 安装一下 nginx。

sudo apt updatesudo apt install nginx -y

如果你使用的是一台正常的服务器安装了 nginx,那么在启动 nginx 服务之后,就可以通过服务器的 ip 访问到 nginx 预置的启动页面了。但由于我是通过手机上的 termux 配置的,并没有 80 端口的权限,所以还需要把 nginx 监听端口改成非 80 的其它端口,我选择的是 8080,这一步通过修改 nginx 的配置文件即可实现。


# 打开 nginx 的配置文件sudo vim /etc/nginx/sites-available/default


找到这两行:

listen 80 default_server;listen [::]:80 default_server;

改成:

listen 8080 default_server;listen [::]:8080 default_server;

保存退出,然后启动 nginx,这样,你的 web 服务器就准备好了。

sudo service nginx start


前后端交互(在一台旧手机上,搭建家庭爱心小网站)

PART 04


网页配置



首先需要获取到设备的 ip 地址,使用 ifconfig 命令查看,wlan0 的 inet 后面的 ip 地址就是你的设备当前的 ip。



这个时候,在局域网内连接的手机/电脑都可以通过 ip:port 的方式访问到你的 web 服务器上部署的网页了。比如你的 web 服务器的设备 ip 是 192.168.3.10,监听的端口是 8080,那么在浏览器输入 192.168.3.10:8080,就可以看到 nginx 的初始界面了。


nginx 默认网站目录是:/var/www/html,nginx 初始界面的文件名为 index.nginx-debian.html,把前面生成好的 html 文件放到这个文件夹,重命名为 index.html(注意,nginx 默认将 index.html 作为网站入口页)。


最后重启一下 nginx 服务就可以看到自定义的网页了。

service nginx restart


PART 05


搞点花活



做完前面的事情就好了吗?是,也不是。上面的步骤做完,一台 web 服务器的基本功能确实都已经具备了。但是考虑到这台 web 服务器事实上是运行在一台手机的一个 APP 上,稳定性远远不如一台正经的服务器,甚至于连 ip 地址都不能保证固定,所以为了日后使用方便,我们还需要再做一些提效配置。


设备 ip 地址的固定需要在路由器侧完成,我家里的路由器是华为的,打开路由器管理界面,找到更多功能-网络设置-局域网,在“静态 IP 地址绑定列表”这里,点击加号,输入手机的 MAC 地址和你想要固定分配的 IP 地址。保存之后,你的手机每次连接到路由器后,分配的 IP 就都会是你在这里设置好的 ip,不会变来变去,方便你通过其它设备访问手机服务器。



nginx 的自启动配置比较简单,我就是直接在 ~/.bashrc 下加了一行 nginx 的启动命令就可以了:


service nginx start > /dev/null 2>&1


还有一点是我努力了最久,却最终也没能实现的事情,就是想要实现在家庭局域网中通过域名访问到部署的网站,这也是最贴近我们日常使用的方式。这个功能最方便的实现途径,其实是通过路由器进行配置,可惜我家的路由器并不支持这项功能。然后退而求其次,在手机服务器端,折腾了好久的 mDNS 方案。可惜,最终也因为 termux 环境的权限不够,没能成功。


不过,最后把这份礼物交给妻子的时候,我还是剑走偏锋,强行实现了让妻子能够通过域名访问这个网站的目的。方法比较简单粗暴,就是趁她不在的时候偷偷去她的电脑上修改了 hosts 的配置,在她电脑上把一个域名映射到了我部署的网站上/doge。搞个 love 开头的域名,还是有那么点味道的哈哈。


对于这台手机服务器,以及上面部署的网站,你们有什么奇妙的使用建议吗,欢迎留言讨论~

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有