AI 应用多的我眼花缭乱,不妨做个导航试试看

项目背景

随着近几年 LLM(大语言模型)在国内外迅速的发展,AI 应用也展现出爆发式的增长,不再是单纯的以聊天对话为主的展现形式,而是以多模态、多场景为主的多层展现形式。

文生图、图生图、文生视频、图生视频、AI 编程、数字人等各方面的 AI 应用都在不断地发展,也在不断地被应用到各个行业。

尤其是今年 DeepSeek 的爆火,更加推动 AI 应用在全行业的落地,几乎国内的大部分 AI 应用都接入了 DeepSeek 的服务,也让 AI 应用在全行业的落地更加的快速。

在 AI 编程方面,尤其是对我们程序员来说更是一个福音,我们可以使用 AI 编程助手来辅助我们写代码,如 VsCode 中的 MarsCode 插件,我们使用它就可以轻松实现代码提示、代码注释、AI 提问等一系列辅助功能。

未来,AI 应用会贯穿我们生活的始终,那这么多的 AI 应用我们该如何去使用呢,我们不妨做一个 AI 导航网站,便于我们查询和使用。

功能介绍

目前 AI 导航网站实现的功能如下,未来还会持续迭代更多功能。

登录注册点赞收藏留言板编辑网站新增网站删除网站更新网站我的收藏个人设置暗黑主题侧边栏导航

项目模版

本项目的初始化,参考的本专栏总结的一篇文章《配置一个 Next.js 项目模板,用于项目快速开发》,集成一些项目开发规范,如 huskycommitlintprettier 等,具体内容以本项目源代码为准。

线上数据库

本项目使用 Prisma 进行数据库的相关操作。

本项目的数据库使用的是基于 Supabase 平台的 PostgreSQL 数据库,Supabase 平台提供在线数据库管理,你可以把它理解为线上版本的 Navicat,一个在线的图形化数据库管理工具。

具体使用方式您可以参考本专栏的一篇文章《在 Next.js 中使用 Prisma 集成数据库》,这篇文章介绍如何在项目中集成 PrismaSupabase

登录功能

为便于开发,本项目登录功能使用的是快速集成工具 ClerkClerk 目前是支持 Next.js 的。

只需要几行代码,就可以轻松实现登录功能,并且 Clerk 自带 UI,如果不想使用其 UI 样式,还可以进行自定义页面的调节,非常方便。

本项目实现的登录页面,UI 主题使用的是 Clerk 内置的一个主题。

注册功能

Clerk 同样也提供注册功能,与登录功能一样的 UI 风格。

点赞功能

本项目支持点赞功能,每个用户针对一个网站只能点赞一次,否则就是取消点赞。只有登录的用户才能点赞,因为要记录到数据库中。

收藏功能

收藏功能同上,收藏的文章会被收集到我的收藏页面,便于后期查阅。

留言板

留言板页面是由 AI 编程助手 v0 生成的,用户可以免费使用几次,达到指定次数就会收费,否则限制使用。

留言板区分管理员和普通用户,未登录的用户也可以留言,支持留言点赞和回复功能,只需要输入用户名就行,管理员可以删除,置顶指定的留言。

增删改查

目前只有管理员才能进入管理网站页面,否则会提示没有权限。

新增页面:

点击卡片右上角的三个点,即可编辑网站,也可以删除网站。

编辑页面:

管理分类页面:

该页面用于新增分类,在新增网站的时候,用于指定是什么类型的网站。

未授权的页面提示。

社交卡片

在网站的右上角新增微信联系方式项目 Github 地址,用于社交。

暗黑模式

在页面右上角提示亮色暗黑模式的切换

暗黑模式:

404页面

当输入项目之外的页面时,会提示 404 页面未找到。

AI 助手

在开发本项目的时候,部分页面使用 v0 帮我设计样式和逻辑,我只需要给它对应的提示词,它就会帮我生成对应的页面逻辑。

结束语

作者把本项目当作一个入门 Next.js 的实战项目,并且根据学习 Next.js 的经验以及周边生态,持续对本项目进行开发和改进,目的其实很简单,探索并学会使用 Next.js 进行全栈开发。

本文只是对该项目的简要概述,更详细的开发流程,会在本专栏后续推出。

网站地址:xtainav.cn

Github 地址:github.com/vaesonshu/x...

相关推荐
uhakadotcom44 分钟前
刚刚发布的React 19.1提供了什么新能力?
前端·javascript·面试
uhakadotcom1 小时前
Expo 简介:跨平台移动应用开发的强大工具
前端·javascript·面试
markzzw1 小时前
浏览器插件钱包(一) - 区块链世界的入口
前端·web3·区块链
夕水1 小时前
终于,我也能够写出一款代码编辑器
前端
red润1 小时前
npm包autocannon牛逼的后台压力测试库
前端·javascript·node.js
黄蘑菇1 小时前
white-space、word-break、overflow-wrap(原名word-wrap)的区别
前端
渔樵江渚上1 小时前
JavaScript函数柯里化:优雅的函数式编程实践
前端·javascript·面试
the_one1 小时前
如何判断一个属性是否存在
前端·javascript·面试
张开心_kx1 小时前
5202年了,还不懂原型链吗?
前端
用户613346716531 小时前
开发体育赛事直播系统:炫彩弹幕直播间界面技术实现方案
前端·后端