今天是2022年2月2日，距离今年的情人节还有不到两周的时间。给大家介绍一个网站，憨憨。我爱你参考示例网站：ConfessionSlideshow。憨憨。我爱你源码爱情定时器。憨憨。Iloveyou源码申请流程打开官网首页：Hanhan.IloveYou（由于网站数据库使用PlanetScale的免费服务，且位于美国东部，所以访问速度可能会有点慢，敬请谅解）请耐心等待。）使用Authing账号登录（可以使用手机或邮箱注册，使用Github账号登录，也可以扫描微信小程序二维码，后续会增加更多登录方式）。您可以分别点击进入域名申请和邮箱申请。域名申请域名申请界面如下：支持三种绑定方式：CNAME：GithubPages、Netlify、Gitee、Coding.net、Cloudflare等可用于提供托管服务平台价值参考：willin.github.io注意：不支持Vercel，因为Vercel默认不支持绑定二级域名（除非所有权在你个人名下）A：IPv4需要自己搭建服务器，绑定值引用:1.2.3.4(你服务器的ip地址)AAAA:对于IPv6，你需要自己架设服务器，绑定不用明示。不建议非专业人士选择。如果需要同时绑定IPv4和IPv6，建议注册TypeA，然后通过ISSUE或者邮件联系我处理。还有一个项目Proxied(CDN)，如果你不知道这个功能，你可以尝试打开或关闭它来测试。邮箱申请域名申请界面如下：目前使用的是Cloudflare的邮件转发服务，但由于IDN域名暂时不支持，大家可以提前预注册，尽快获得。其他说明如果需要帮助，请关注我的Github：willin，如果你在给心爱的人准备礼物的过程中遇到问题，我可以免费为你提供技术咨询。还想要另一个域名js.cool（经过多方协商，现已支持Vercel绑定）log.lu（敬请期待）感觉很慷慨可以把本站分享给更多的人也可以通过以下渠道打赏：微信支付宝热爱发电GithubSponsorsPaypal跃跃欲试或许你也有很多想法想要实现。您可以：使用Authing快速集成开发自己的应用Fork本项目源码（完全开源），提供自己的域名服务项目源码在Github上完善优化本项目项目后续规划开放source接下来开始一个重要的环节。俗话说，授人以鱼不如授人以渔。我会把憨憨的源码开源，爱你，详细讲解设计和实现的全过程。设计这个项目花了我大约3个小时才完成。为了扬长避短，我使用了一个UI框架，所以没有额外的UI设计，只需几个基本的组件就可以快速上手项目。技术选型首先，第一步是技术选型。因为我想提供的是免费服务，所以我尽量选择一些免费的服务商和一些相关的技术栈。服务商的选择：Cloudflare：提供免费域名解析、CDN加速、开放接口Vercel：个人免费应用托管，支持Node.js环境，使用Next.js框架PlanetScale：Prisma，基于云的MySQL服务具有一定的免费配额：CloudStudio管理数据库。其实我本来想用Cloudflare这个全家桶，就是用CloudflarePages（静态网站）+CloudflareWorkers（Serverless方法执行）和KV（键值对存储），但是碍于时间和精力所限，所以采用了更简单、更快速的实现方式。技术栈：Typescript：虽然我喜欢用更少的代码做更多的事情，但是TS给我带来了一个更高效的团队协作阶段Next.js：一个全栈框架（前端使用React，类似于httpmodules和Express），支持SSR（服务器端渲染）和SSG（静态站点生成）@authing/nextjs：AuthingSSO集成SDKPrisma：下一代ORM框架，支持多数据库（本项目使用MySQL）和数据库迁移（Migration）TailwindCSS：下一代CSS框架，实用先行DaisyUI：封装了部分UI风格组件数据库设计由于我使用的是Authing用户集成，因此省略了用户表的设计和用户相关接口的设计。//域名类型enumDomainType{AAAAACNAME}//审核状态enumStatus{//待审核PENDING//激活ACTIVE//删除DELETED//被管理员封禁BANNED}//域名记录表模型Domains{//Cloudflare域名记录的ID也作为表主键ididString@id@default(cuid())@db.VarChar(32)//自增id没有实际意义，只是为了减少查询（毕竟有调用配额限制），实际项目中不建议使用自增主键和自增id。否Int@default(autoincrement())@db.UnsignedIntnameString@db.VarChar(255)punycodeString@db.VarChar(255)typeDomainType@default(CNAME)contentString@default("")@db.VarChar(255)proxiedBoolean@default(true)//授权用户iduserString@default("")@db.VarChar(32)statusStatus@default(ACTIVE)createdAtDateTime@default(now())updatedAtDateTime@updatedAt@@index([no])@@index([name,punycode])@@index([user,status,createdAt])}//EmailTablemodelEmails{//由于Cloudflare邮箱没有提供开放接口，需要人工审核和操作。这里默认的cuid会填为主键ididString@id@default(cuid())@db.VarChar(32)//自增id没有实际意义，只是为了减少查询（毕竟有调用额度限制），不推荐使用自增primary实际项目中的key和自增idnoInt@default(autoincrement())@db.UnsignedIntnameString@db.VarChar(255)punycodeString@db.VarChar(255)contentString@default("")@db.VarChar(255)userString@default("")@db.VarChar(32)status状态@d??efault(PENDING)createdAtDateTime@default(now())updatedAtDateTime@updatedAt@@index([no])@@index([name,punycode])@@index([user,status,createdAt])}很简单，请参考注释。另外，本来打算只存一个名字，但是由于重复注册，比如我注册了一个中文名字老王，你又注册了一个对应的punycode代号xn--qbyt9x会冲突，所以干脆（偷懒）把他们都救出来。中文域名技术准备所需的Punycode知识：RFC3492标准CloudflareAPI接口创建解析：创建DNSRecord修改解析：PatchDNSRecord删除解析：DeleteDNSRecordAuthingSSO集成，可以参考我之前的文章：《全栈框架应用快速集成 Authing SSO》先搭建Next.js网站框架，部署到Vercel进行测试。这可以与TailwindCSS和AuthingSSO集成相结合。第一步准备工作完成。接口设计为了实现快速（惰性）实现，我创建了增删改查四个接口。查询接口：graphTDStart1(Start)-->|查询域名是否存在|check1{是否登录}-->|F|fail1[失败]-->End1(结束)check1-->|T|是否为保留域名}-->|T|fail1check12-->|F|check13{检查数据库重复}-->|T|fail1check13-->|F|:graphTDStart2(Start)-->|创建域名|check2{是否登录}-->|F|fail2[失败]-->End2(结束)check2-->|T|}-->|T|fail2check22-->|F|check23{用户是否注册了域名}-->|T|fail2check23-->|F|check24{检查数据库重复}-->|T|fail2check24-->|F|success2[Registration]-->End2数据库查询用户是否注册了域名，是否存在同名，一次查询即可完成，这里拆分，提高查询性能。修改界面：graphTDStart3(Start)-->|检查域名是否存在|check3{是否登录}-->|F|fail3[失败]-->End3(结束)check3-->|T|id匹配用户的记录}-->|F修改记录数0|fail3check32-->|T|邮箱界面与域名类似，这里不再赘述。代码实现封装当然，CloudflareSDK也有现成的库可以直接使用，但是因为只有几行代码，只好自己动手了。从'@prisma/client'导入{Domains};从'../config'导入{CfAPIToken，CfZoneId};constBASE_URL='https://api.cloudflare.com/client/v4';导出类型CFResult={成功：布尔值；结果：{id：字符串；};};constheaders={Authorization:`Bearer${CfAPIToken}`,'Content-Type':'application/json'};exportconstcreateDomain=async(form:Pick
