使用Nuxt3开发网址导航（Springboot后端接口篇）

白桦树2023-07-27 13:54

目前市面上有很多的网址导航程序，其主要目的就是汇集一些好的网站（很多优质网站搜索引擎并不会收录）方便查阅，看着这些导航程序心里痒痒的，也想自己做一个。所以开始吧！

效果：www.zngg.net/nav 开源地址：github.com/ZN-GG/ZNGG-...

借鉴灵感

无意中发现一个很干净的网址导航：www.designnotes.cn/

1133723835615412224.png

感觉超美！！！从优秀的作品中汲取灵感，大概确定了几个要素：

  1. 导航分类在中间（有一部分在左侧的）
  2. 页面简洁

技术分析

在看页面的过程当中我也就稍微(bushi)的看了一下这个网站的原理，好家伙，这个网站大概就是一个空壳，所有内容通过获取一个json进行填充。是的所有内容，一个网络请求的json。 All in了属于是。当然这样做的好处就是节省了http请求，性能肯定好很多。但是我的网站结构并非如此，于是我确定了一下我的导航设计：

  1. 导航信息使用一个json 我以前会把分类和列表分开请求，但是这个导航就感觉完全没有必要这样做。
  2. 还没想好...

代码环节

数据库设计

数据库肯定两个表就可以了，一个zn_nav表，存放导航信息，一个zn_nav_category表，存放分类信息。 zn_nav_category导航分类表：

字段 类型 备注
id String id（雪花算法）
name String 分类名称
description String 描述信息
state String 状态（0：正常，1：草稿&隐藏，2：删除）
sort int 排序
create_time Date 插入时间
update_time Date 更新时间

zn_nav导航条目表：

字段 类型 备注
id String id（雪花算法）
category_id String 导航分类id
title String 网址名称
description String 描述信息
img String logo地址
tips String 徽标提示
sort int 排序
url String 网址地址
state String 状态（0：正常，1：草稿&隐藏，2：删除）
create_time Date 插入时间
update_time Date 更新时间

后端设计

pojo

后端Springboot，那么上来肯定就是两个POJO： Nav.java:

java 复制代码 
@Entity
@Table(name = "zn_nav")
public class Nav {
    @Id
    private String id;
    @Column(name = "category_id")
    private String categoryId;

    @Column(name = "title")
    private String title;

    @Column(name = "description")
    private String descriptrion;

    @Column(name = "img")
    private String img;

    @Column(name = "tips")
    private String tips;

    @Column(name = "sort")
    private int sort;

    @Column(name = "url")
    private String url;

    @Column(name = "state")
    private String state;

    @Column(name = "create_time")
    private Date createTime;

    @Column(name = "update_time")
    private Date updateTime;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getCategoryId() {
        return categoryId;
    }

    public void setCategoryId(String type) {
        this.categoryId = type;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescriptrion() {
        return descriptrion;
    }

    public void setDescriptrion(String descriptrion) {
        this.descriptrion = descriptrion;
    }

    public String getImg() {
        return img;
    }

    public void setImg(String img) {
        this.img = img;
    }

    public String getTips() {
        return tips;
    }

    public void setTips(String tips) {
        this.tips = tips;
    }

    public int getSort() {
        return sort;
    }

    public void setSort(int sort) {
        this.sort = sort;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public Date getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }

}

NavCategory.java:

java 复制代码 
@Entity
@Table(name = "zn_nav_category")
public class NavCategory {
    @Id
    private String id;
    @Column(name = "name")
    private String name;
    @Column(name = "description")
    private String description;
    @Column(name = "state")
    private String state;
    @Column(name = "sort")
    private int sort;
    @Column(name = "create_time")
    private Date createTime;

    @Column(name = "update_time")
    private Date updateTime;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public int getSort() {
        return sort;
    }

    public void setSort(int sort) {
        this.sort = sort;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public Date getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }
}

如果是我之前的开发，pojo类就到此结束了，然而上面又说到要把分类和网站信息整合到一起去，因此我又增加了一个POJO类NavInfo.java:

java 复制代码 
@Entity
@Table(name = "zn_nav_category")
public class NavInfo {
    @Id
    private String id;
    @Column(name = "name")
    private String name;
    @Column(name = "description")
    private String description;
    @Column(name = "state")
    private String state;
    @Column(name = "sort")
    private int sort;
    @Column(name = "create_time")
    private Date createTime;

    @Column(name = "update_time")
    private Date updateTime;

    @OneToMany(targetEntity = Nav.class,mappedBy = "categoryId",cascade = CascadeType.ALL)
    @OrderBy("sort desc")
    private List<Nav> itemList;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public int getSort() {
        return sort;
    }

    public void setSort(int sort) {
        this.sort = sort;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public Date getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }

    public List<Nav> getItemList() {
        return itemList;
    }

    public void setItemList(List<Nav> itemList) {
        this.itemList = itemList;
    }
}

这个类可要注意了，它比原来的NavCategory多了一个itemList字段，用于存放分类下的网站信息，并且我使用@OneToMany注解进行一对多的关联，使用注解@OrderBy进行排序。

至此POJO就已经全部写完了。

dao

接下来写dao层，这个非常简单，新建一个NavInfoDao.java:

java 复制代码 
public interface NavInfoDao extends JpaRepository<NavInfo,String>, JpaSpecificationExecutor<NavInfo> {
}

ok，结束。

到这里准备工作就已经做完了，接下来就是使用了。

service

在业务层我们写具体的业务逻辑，简单注入一下NavInfoDao,然后findAll即可：

java 复制代码 
    @Autowired
    private NavDao navDao;
    
    @Override
    public ResponseResult getNav() {
        List<NavInfo> all = navInfoDao.findAll();
        return ResponseResult.SUCCESS().setData(all);
    }

测试接口

demo：api.zngg.net/portal/web/...

后端接口完成，随便往数据库插入一些数据后，访问接口返回结果：

json 复制代码 
{
    "success":true,
    "code":200,
    "message":"操作成功",
    "data":[
        {
            "id":"1130603718694141952",
            "name":"AI",
            "description":"千变万化的在线AI工具",
            "state":"0",
            "sort":0,
            "createTime":"2023-07-17",
            "updateTime":"2023-07-17",
            "itemList":[
                {
                    "id":"1130609344526680064",
                    "categoryId":"1130603718694141952",
                    "title":"My ChatGPT",
                    "description":"免费的AI聊天室，支持GPT-4",
                    "img":"https://chat.icoding.ink/pc-chat/assets/logo-228ccb0a.svg",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://free.icoding.ink/",
                    "state":"0",
                    "createTime":"2023-07-17T13:17:53.000+00:00",
                    "updateTime":"2023-07-17T13:17:53.000+00:00"
                },
                {
                    "id":"1130620416109314048",
                    "categoryId":"1130603718694141952",
                    "title":"BaiChat",
                    "description":"免费ChatGPT站点",
                    "img":"https://cdn.zngg.net/upload/image/1130787109611765760.jpg",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://chatbot.theb.ai/",
                    "state":"0",
                    "createTime":"2023-07-17T14:01:53.000+00:00",
                    "updateTime":"2023-07-17T14:01:53.000+00:00"
                },
                {
                    "id":"1130783412316012544",
                    "categoryId":"1130603718694141952",
                    "title":"ChatExcel",
                    "description":"仅通过聊天来操控Excel表格",
                    "img":"https://chatexcel.com/static/pic/icon/icon-black-bold.png",
                    "tips":"工具",
                    "sort":0,
                    "url":"https://chatexcel.com/",
                    "state":"0",
                    "createTime":"2023-07-18T00:49:34.000+00:00",
                    "updateTime":"2023-07-18T00:49:34.000+00:00"
                }
            ]
        },
        {
            "id":"1130803922445795328",
            "name":"小游戏",
            "description":"免费的在线小游戏",
            "state":"0",
            "sort":0,
            "createTime":"2023-07-18",
            "updateTime":"2023-07-18",
            "itemList":[
                {
                    "id":"1130804640087015424",
                    "categoryId":"1130803922445795328",
                    "title":"小霸王",
                    "description":"小霸王FC游戏集合",
                    "img":"https://cdn.zngg.net/upload/image/1130804958094950400.png",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://www.yikm.net/",
                    "state":"0",
                    "createTime":"2023-07-18T02:13:56.000+00:00",
                    "updateTime":"2023-07-18T02:13:56.000+00:00"
                },
                {
                    "id":"1130805662784159744",
                    "categoryId":"1130803922445795328",
                    "title":"在线DOS游戏",
                    "description":"在浏览器中在线游玩 DOS 游戏！",
                    "img":"https://i.loli.net/2020/05/26/JvD18F7isldYnWL.png",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://dos.lol/",
                    "state":"0",
                    "createTime":"2023-07-18T02:17:59.000+00:00",
                    "updateTime":"2023-07-18T02:17:59.000+00:00"
                },
                {
                    "id":"1130806324494336000",
                    "categoryId":"1130803922445795328",
                    "title":"街机游戏",
                    "description":"在浏览器中玩街机游戏！",
                    "img":"https://zaixianwan.app/favicon.svg",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://zaixianwan.app/",
                    "state":"0",
                    "createTime":"2023-07-18T02:20:37.000+00:00",
                    "updateTime":"2023-07-18T02:20:37.000+00:00"
                }
            ]
        },
        {
            "id":"1130810041532678144",
            "name":"站长工具",
            "description":"站长工具集合",
            "state":"0",
            "sort":0,
            "createTime":"2023-07-18",
            "updateTime":"2023-07-18",
            "itemList":[
                {
                    "id":"1130810624910032896",
                    "categoryId":"1130810041532678144",
                    "title":"whois查询",
                    "description":"支持各种后缀查询！",
                    "img":"https://tian.hu/favicon.ico",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://tian.hu/",
                    "state":"0",
                    "createTime":"2023-07-18T02:37:42.000+00:00",
                    "updateTime":"2023-07-18T02:37:42.000+00:00"
                }
            ]
        },
        {
            "id":"1130824361779920896",
            "name":"资源分享",
            "description":"分享类网站大全",
            "state":"0",
            "sort":0,
            "createTime":"2023-07-18",
            "updateTime":"2023-07-18",
            "itemList":[
                {
                    "id":"1130824709647106048",
                    "categoryId":"1130824361779920896",
                    "title":"18岁博客",
                    "description":"各种资源应有尽有",
                    "img":"https://www.18sui.net/favicon.ico",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://www.18sui.net/",
                    "state":"0",
                    "createTime":"2023-07-18T03:33:40.000+00:00",
                    "updateTime":"2023-07-18T03:33:40.000+00:00"
                },
                {
                    "id":"1130828048447307776",
                    "categoryId":"1130824361779920896",
                    "title":"资源之家",
                    "description":"自媒体网创资源免费下载",
                    "img":"https://ziyuan.cn/favicon.ico",
                    "tips":"丰富",
                    "sort":0,
                    "url":"https://ziyuan.cn/",
                    "state":"0",
                    "createTime":"2023-07-18T03:46:57.000+00:00",
                    "updateTime":"2023-07-18T03:46:57.000+00:00"
                }
            ]
        },
        {
            "id":"1131631200171982848",
            "name":"前端",
            "description":"前端开发者导航",
            "state":"0",
            "sort":0,
            "createTime":"2023-07-20",
            "updateTime":"2023-07-20",
            "itemList":[
                {
                    "id":"1131632347628699648",
                    "categoryId":"1131631200171982848",
                    "title":"Flowbite",
                    "description":"基于TailwindCSS构建的组件库",
                    "img":"https://flowbite.com/images/logo.svg",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://flowbite.com/",
                    "state":"0",
                    "createTime":"2023-07-20T09:02:56.000+00:00",
                    "updateTime":"2023-07-20T09:02:56.000+00:00"
                },
                {
                    "id":"1133675326631575552",
                    "categoryId":"1131631200171982848",
                    "title":"Nuxt3中文网",
                    "description":"Nuxt.js 中文开发文档手册",
                    "img":"https://ezdoc.cn/images/favicon.svg",
                    "tips":"推荐",
                    "sort":0,
                    "url":"https://ezdoc.cn/docs/nuxtjs/",
                    "state":"0",
                    "createTime":"2023-07-26T00:21:01.000+00:00",
                    "updateTime":"2023-07-26T00:21:01.000+00:00"
                }
            ]
        }
    ]
}

接口返回没有问题。

最后

下一步就是和前端进行对接了，下次再写吧。

未完待续~

相关推荐
小飞Coding9 小时前
Spring Boot 中关于 Bean 加载、实例化、初始化全生命周期的扩展点
spring boot
小飞Coding10 小时前
彻底搞懂 Spring 容器导入配置类：@EnableXXX 与 spring.factories 核心原理
spring boot
悟空码字2 天前
Spring Boot 整合 MongoDB 最佳实践：CRUD、分页、事务、索引全覆盖
java·spring boot·后端
皮皮林5513 天前
拒绝写重复代码，试试这套开源的 SpringBoot 组件，效率翻倍~
java·spring boot
用户908324602736 天前
Spring AI 1.1.2 + Neo4j：用知识图谱增强 RAG 检索（上篇：图谱构建）
java·spring boot
用户8307196840826 天前
Spring Boot 集成 RabbitMQ ：8 个最佳实践，杜绝消息丢失与队列阻塞
spring boot·后端·rabbitmq
Java水解6 天前
Spring Boot 视图层与模板引擎
spring boot·后端
Java水解6 天前
一文搞懂 Spring Boot 默认数据库连接池 HikariCP
spring boot·后端
洋洋技术笔记7 天前
Spring Boot Web MVC配置详解
spring boot·后端
初次攀爬者7 天前
Kafka 基础介绍
spring boot·kafka·消息队列
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录05Window 10部署openclaw报错node.exe : npm error code 12806OpenClaw 接入 QQ Bot 完整实践指南07OpenClaw 飞书机器人不回复消息？3 小时踩坑总结08npm-error code 128问题解决方法09OpenClaw macOS 完整安装与本地模型配置教程（实战版）10OpenClaw + 飞书（Feishu）环境搭建指南