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

sxkk20082年前知识分享241

前言

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

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

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

实现

首先在“知乎” “微信” 等平台搜索“土味情话”,然后利用抓包工具将一些回答都保存到一个 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

小结

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

再次贴下我的个性签名:

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

最后

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


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

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

相关文章

AI绘画秀:人工智能开启艺术的未来

AI绘画秀:人工智能开启艺术的未来

  随着人工智能技术的不断发展,其应用领域也越来越广泛。在艺术领域中,人工智能也逐渐开始发挥出其独特的作用。AI绘画秀就是其中很引人注目的一种应用,它将人工智能与美术相结合,...

AI机器人:从人工向智能技术演进的里程碑

AI机器人:从人工向智能技术演进的里程碑

  随着人工智能技术快速发展,越来越多的AI机器人开始涌现出来,成为改变我们生活和工作方式的关键技术之一。AI机器人的发展历程注定与人工密不可分,本文将介绍AI机器人的人工之...

人工智能技术:探索与应用

人工智能技术:探索与应用

  人工智能技术是当今科技领域最热门的话题之一。随着深度学习和大数据的发展,人工智能技术在各个领域的应用正变得越来越广泛。本文将探索人工智能技术的原理、发展和应用,并展望未来...

图片识人:探究人工智能在图像识别领域的应用与发展

图片识人:探究人工智能在图像识别领域的应用与发展

  随着人工智能技术的不断进步,图像识别领域取得了重大突破。其中,图片识人成为了广受关注的焦点。本文将从人工智能的发展背景、图片识人的原理与应用、以及未来的发展趋势等方面进行...

绿证: 提供绿色通行的权益保障,加速生态文明建设进程

绿证: 提供绿色通行的权益保障,加速生态文明建设进程

  在生态文明建设的过程中,逐渐出现了绿证这一概念。绿证,即环保通行证,是指在一定生态区域内进行交通运输或经营活动时,凭借特定的资质和证明文件,获得绿色通行的权益保障。绿证制...

经过一晚上的配置和折腾,花钱不说,虽然可以实现在 iPad 上编程的需求,但体验远却比不上 PC,今天我就来推荐一种新的方式,让你的 iPad 变成真正的生产力工具。

Cloud Studio 简介

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。

Cloud Studio iPad 编程 以上是我用 iPad 浏览器,在 1 分钟内初始化了一个 next 初始化模板,可以说速度比本地开发还快,当我在左侧修改代码时,右侧预览界面便会同步热更新。

Cloud Studio 安装 react snippts

Cloud Studio 可以说是提供了一台云服务器,并且把 VSCode 搬到了线上,我们可以同本地开发一样,在上面安装插件,比如可以在左侧扩展中搜索 react,安装这个 react snippts 扩展,便可以帮助我们提供常用代码片段,快速创建组件。

iPad 编程生产力

前言iPad 有个口号,就是“买前生产力,买后爱奇艺”,使用 iPad,配合 Procreate 来作画体验还可以, 如果你想让你的 iPad 可以编程,你却不得不为之花费时间和精力,我搜了网上的教程...

发表评论    

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