免费部署一个“土味情话”生成网站

sxkk20082年前知识分享293

前言

“你喜欢什么面?”——“你的心里面”

“来者何人” ——“你的人”

像上面的这种听起来又肉麻又害羞又有点儿乡土感觉的小情话,就是土味情话啦。 作为程序员肯定想不出这些肉麻的话,如不做个土味情话生成器,关键时候说不定有用哦!!

实现

首先在“知乎” “微信” 等平台搜索“土味情话”,然后利用抓包工具将一些回答都保存到一个 JSON 中。然后利用随机数就可以随机生成了。

[
  {
    "id": "495e1a80-fb5a-4c21-9c89-a5c2237f1619",
    "content": "想试试我的草莓味唇膏吗?",
    "likeCount": 24,
    "dislikeCount": 3,
    "type": "默认分类"
  },
  {
    "id": "9eb93075-ffd4-458c-8b4e-301e219359b8",
    "content": "我喜欢你,在于颜值,喜欢他,忠于人品",
    "likeCount": 4,
    "dislikeCount": 11,
    "type": "默认分类"
  },
  {
    "id": "4621a013-a79b-4e1d-908b-fea4cb8b8cb4",
    "content": "不管我本人多么平庸,我总觉得对你的爱很美。",
    "likeCount": 13,
    "dislikeCount": 6,
    "type": "默认分类"
  },
  {
    "id": "35515ddf-7220-4b41-9046-5b4fe55c10e4",
    "content": "被你赞过的朋友圈,叫甜甜圈。",
    "likeCount": 11,
    "dislikeCount": 10,
    "type": "默认分类"
  }
]

预览地址

https://honeyed-words-generator.vercel.app/

github 地址

https://github.com/maqi1520/honeyed-words-generator

技术栈

  • typescript
  • tailwind
  • nextjs
  • animejs

使用 animejs 来生成动画!

开始开发

我使用山月的 next 模板快速创建应用

$ git clone git@github.com:shfshanyue/next-app.git

在项目创建早期尽可能对 package 进行升级,这里使用了 npm-check-updates

$ npm run ncu

在测试环境中进行开发

$ npm run dev

打包

$ npm run build

文件结构

.
├── node_modules/
├── pages/                  # 所有的 pages
├── utils/
├── package.json
├── package-lock.json
├── README.md
└── serverless.yaml

Deoploy

Vercel

$ vercel

小结

该程序实现起来一点也不难,主要是开始创作的想法。当然还可以加上很多功能,比如用户系统,点赞,吐槽评论等,说不定以后会发展成一个在线交友平台,哈哈。 有时候,当有了一个想法,我们就要付诸实践,或者将这件事作为一个代办事项,如没有开始,哪来的优秀作品呢?

再次贴下我的个性签名:

你不一定要很厲害,才能開始;但你要開始,才能很厲害

最后

祝福各位情人节快乐,有情人终成眷属


以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

本文首发掘金平台,来源小马博客

相关文章

MDX 让 Markdown 步入组件时代

前言在 MDX 出现之前,将 JSX 与 Markdown 混合书写时,Markdown 的优势就不存在了。 通常采是用基于模板字符串的方式,因此就需要大量的转义和繁琐的语法。MDX 试图让书写 Ma...

百度物联网:打造智慧连接的未来

百度物联网:打造智慧连接的未来

  随着物联网技术的不断进步与普及,人们的生活已经逐渐发生了翻天覆地的变化。在这个信息时代,物联网无疑是连接一切的重要支点。而作为中国顶尖的科技公司之一,百度在物联网领域的布...

【油猴脚本】在 Iconfont 上直接复制 React component 代码

【油猴脚本】在 Iconfont 上直接复制 React component 代码

本文接上一篇《如何在项目中管理你的图标?》Iconfont 和 SVG 优缺点对比在上文中介绍了使用 iconfont 的缺点,以及使用 SVG 的优点,简单归纳为以下几点:Icon 的缺点当网络不好...

油猴脚本开发教程

highlight: monokai前言如何跟普通朋友介绍前端工程师是一个怎样的职位? 我会毫不犹豫的给他的浏览器装上 Tampermonkey,再装一个去广告插件,他们肯定会觉得你很牛逼,然后再问问...

AI人脸识别技术-探索未来智能社会的大门

AI人脸识别技术-探索未来智能社会的大门

  AI人脸识别技术在当今社会的应用越来越广泛,其快速准确的识别能力和便利的应用方式深受人们喜爱。从智慧城市到金融支付,从安防监控到人脸解锁,人脸识别技术的应用范围越来越大,...

在某种程度上,它可能在初学者看来是单调乏味或者不切实际的,但是严格按照这个步骤来做这件事,让你自己决定测试用例是否对你的组件有帮助,会让测试用例变得有意义。

本文将以创建一个 Confirmation 组件来说明,如何在 React 中如何实现测试驱动开发。

Confirmation 组件的特点:

  • Confirmation 标题
  • 确认描述 —— 接收外部程序想要确认的问题
  • 一个确认的按钮,支持外部回调函数
  • 一个取消的按钮,支持外部回调函数

这两个按钮都不知道点击时接下来要做什么事,因为它超出了组件的职责范围,但是组件应该接收这些点击按钮的回调事件。先找个设计图:

image.png

如何测试驱动开发 React 组件?

什么是 TDDTDD(Test-driven development),就是测试驱动开发,是敏捷开发中的一项核心实践和技术,也是一种软件设计方法论。它的原理就是在编写代码之前先编写测试用例,由测试来决...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。