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

---

theme: vuepress

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

效果：https://www.zngg.net/nav 开源地址：https://github.com/ZN-GG/ZNGG-Nuxt3/blob/main/pages/nav/index.vue

借鉴灵感

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

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

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:

@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:

@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:

@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:

public interface NavInfoDao extends JpaRepository<NavInfo,String>, JpaSpecificationExecutor<NavInfo> {
}

ok，结束。

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

service

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

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

测试接口

demo：https://api.zngg.net/portal/web/nav

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

{
    "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"
                }
            ]
        }
    ]
}

接口返回没有问题。

最后

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

未完待续~