网址导航栏的设计

效果图

代码

前台导航样式设计


<template>
  <div class="container">
    <div class="website-container" v-for="(type,typeIndex) in typeList.list" :key="typeIndex">
      <!-- 导航分类 start-->
      <div class="website-title">
        <el-button round type="primary" size="large">{{ type.websiteTypeName }}</el-button>
      </div>
      <!-- 导航分类 end-->
      <!-- 网站 start-->
      <a v-for="(website,websiteIndex) in type.websites"
         :key="websiteIndex"
         :href="website.websiteUrl"
         target="_blank"
         :title="website.websiteName">
        <van-image class="websiteImg" round fit="cover" :src="website.websiteImg"></van-image>
      </a>
      <!-- 网站 start-->
    </div>
  </div>
 
</template>
<script setup>
import {onMounted, reactive} from "vue";
import axios from "../../api/index.js"
 
const typeList = reactive({
  list: []
})
onMounted(() => {
  axios.website_findAllTypes().then(res => {
    if (res.data.code == 200) {
      typeList.list = res.data.data
    }
  })
})
</script>
<style scoped>
.container {
  padding-top: 160px;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
}
 
.website-container {
  margin-left: 250px;
}
 
.website-title {
  font-weight: 700;
  font-size:30px;
  font-family:'楷体';
  margin-top: 30px;
}
 
 
.websiteImg {
  margin: 20px;
  width: 150px;
  height: 50px;
}
 
</style>

后台接口编写

数据库设计


DROP TABLE IF EXISTS `website_type`;
CREATE TABLE `website_type` (
  `websiteTypeId` int(11) NOT NULL AUTO_INCREMENT,
  `websiteTypeName` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`websiteTypeId`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8mb4;


DROP TABLE IF EXISTS `website`;
CREATE TABLE `website` (
  `websiteId` int(11) NOT NULL AUTO_INCREMENT,
  `websiteImg` longtext,
  `websiteName` varchar(255) DEFAULT NULL,
  `websiteUrl` longtext,
  `websiteDesc` varchar(255) DEFAULT NULL,
  `websiteTypeId` int(11) DEFAULT NULL,
  PRIMARY KEY (`websiteId`)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8mb4;

实体类设计


package jkw.pojo;
 
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
 
import java.io.Serializable;
import java.util.List;
 
/**
 * 网站类型
 */
@Data
public class WebsiteType implements Serializable {
    @TableId
    private Integer websiteTypeId;
    private String websiteTypeName;//类型名
    @TableField(exist = false)
    private List websites;
}


package jkw.pojo;
 
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
 
import java.io.Serializable;
 
/**
 * 网站
 */
@Data
public class Website implements Serializable {
    @TableId
    private Integer websiteId;
    private String websiteImg;//图片
    private String websiteName;//名称
    private String websiteUrl;//url
    private String websiteDesc;//描述
 
    private Integer websiteTypeId;//类型
}

mapper层


package jkw.mapper;
 
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import jkw.pojo.WebsiteType;
 
public interface WebsiteTypeMapper extends BaseMapper {
}


package jkw.mapper;
 
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import jkw.pojo.Website;
 
public interface WebsiteMapper extends BaseMapper {
}

service层


package jkw.service;
 
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.WebsiteType;
 
import java.util.List;
 
public interface WebsiteTypeService {
    void add(WebsiteType WebsiteType);
 
    void update(WebsiteType WebsiteType);
 
    void delete(Integer id);
 
    WebsiteType findById(Integer id);
 
    List findAll();
 
    Page search(String search, int page, int size);
}


package jkw.service;
 
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Website;
 
import java.util.List;
 
public interface WebsiteService {
    void add(Website Website);
 
    void update(Website Website);
 
    void delete(Integer id);
 
    Website findById(Integer id);
 
    List findAll();
 
    Page search(String search, int page, int size);
 
    //根据typeId查询
    List findAllByWebsiteTypeId(Integer id);
}


package jkw.service.impl;
 
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.WebsiteTypeMapper;
import jkw.pojo.WebsiteType;
import jkw.service.WebsiteTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
 
import java.util.List;
 
@Service
@Transactional
public class WebsiteTypeServiceImpl implements WebsiteTypeService {
    @Autowired
    private WebsiteTypeMapper WebsiteTypeMapper;
 
    @Override
    public void add(WebsiteType WebsiteType) {
        WebsiteTypeMapper.insert(WebsiteType);
    }
 
    @Override
    public void update(WebsiteType WebsiteType) {
        WebsiteTypeMapper.updateById(WebsiteType);
    }
 
    @Override
    public void delete(Integer id) {
        WebsiteTypeMapper.deleteById(id);
    }
 
    @Override
    public WebsiteType findById(Integer id) {
        return WebsiteTypeMapper.selectById(id);
    }
 
    @Override
    public List findAll() {
        return WebsiteTypeMapper.selectList(null);
    }
 
    @Override
    public Page search(String search, int page, int size) {
        QueryWrapper queryWrapper = new QueryWrapper();
        if (search != null) {
 
        }
        return WebsiteTypeMapper.selectPage(new Page<>(page, size), queryWrapper);
    }
}


package jkw.service.impl;
 
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Website;
import jkw.service.WebsiteService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
 
import java.util.List;
 
@Service
@Transactional
public class WebsiteServiceImpl implements WebsiteService {
    @Autowired
    private jkw.mapper.WebsiteMapper WebsiteMapper;
 
    @Override
    public void add(Website Website) {
        WebsiteMapper.insert(Website);
    }
 
    @Override
    public void update(Website Website) {
        WebsiteMapper.updateById(Website);
    }
 
    @Override
    public void delete(Integer id) {
        WebsiteMapper.deleteById(id);
    }
 
    @Override
    public Website findById(Integer id) {
        return WebsiteMapper.selectById(id);
    }
 
    @Override
    public List findAll() {
        return WebsiteMapper.selectList(null);
    }
 
    @Override
    public Page search(String search, int page, int size) {
        QueryWrapper queryWrapper = new QueryWrapper();
        if (search != null) {
 
        }
        return WebsiteMapper.selectPage(new Page<>(page, size), queryWrapper);
    }
 
    @Override
    public List findAllByWebsiteTypeId(Integer id) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("websiteTypeId", id);
        return WebsiteMapper.selectList(queryWrapper);
    }
}

控制层


package jkw.controller.back;
 
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.WebsiteType;
import jkw.service.WebsiteTypeService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
 
import java.util.List;
 
@RequestMapping("/back/websiteType")
@RestController
@CrossOrigin
public class WebsiteTypeCon {
    @Autowired
    private WebsiteTypeService WebsiteTypeService;
 
    /**
     * 新增
     *
     * @param WebsiteType
     * @return
     */
    @PostMapping("/add")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult add(WebsiteType WebsiteType) {
        WebsiteTypeService.add(WebsiteType);
        return BaseResult.ok();
    }
 
    /**
     * 修改
     *
     * @param WebsiteType
     * @return
     */
    @PostMapping("/update")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult update(WebsiteType WebsiteType) {
        WebsiteTypeService.update(WebsiteType);
        return BaseResult.ok();
    }
 
    /**
     * 删除
     *
     * @param websiteTypeId
     * @return
     */
    @DeleteMapping("/delete")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult delete(Integer websiteTypeId) {
        WebsiteTypeService.delete(websiteTypeId);
        return BaseResult.ok();
    }
 
    /**
     * 根据id查询
     *
     * @param websiteTypeId
     * @return
     */
    @GetMapping("/findById")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult findById(Integer websiteTypeId) {
        WebsiteType WebsiteType = WebsiteTypeService.findById(websiteTypeId);
        return BaseResult.ok(WebsiteType);
    }
 
    /**
     * 查询所有
     *
     * @return
     */
    @GetMapping("/findAll")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult findAll() {
        List all = WebsiteTypeService.findAll();
        return BaseResult.ok(all);
    }
 
    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult search(String search, int page, int size) {
        Page brandPage = WebsiteTypeService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}


package jkw.controller.back;
 
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Website;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
 
import java.util.List;
 
@RestController
@RequestMapping("/back/website")
@CrossOrigin
public class WebsiteCon {
    @Autowired
    private jkw.service.WebsiteService WebsiteService;
 
    /**
     * 新增
     *
     * @param Website
     * @return
     */
    @PostMapping("/add")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult add(Website Website) {
        WebsiteService.add(Website);
        return BaseResult.ok();
    }
 
    /**
     * 修改
     *
     * @param Website
     * @return
     */
    @PostMapping("/update")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult update(Website Website) {
        WebsiteService.update(Website);
        return BaseResult.ok();
    }
 
    /**
     * 删除
     *
     * @param websiteId
     * @return
     */
    @DeleteMapping("/delete")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult delete(Integer websiteId) {
        WebsiteService.delete(websiteId);
        return BaseResult.ok();
    }
 
    /**
     * 根据id查询
     *
     * @param websiteId
     * @return
     */
    @GetMapping("/findById")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult findById(Integer websiteId) {
        Website Website = WebsiteService.findById(websiteId);
        return BaseResult.ok(Website);
    }
 
    /**
     * 查询所有
     *
     * @return
     */
    @GetMapping("/findAll")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult findAll() {
        List all = WebsiteService.findAll();
        return BaseResult.ok(all);
    }
 
    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    @PreAuthorize("hasAnyAuthority('/website/website')")
    public BaseResult search(String search, int page, int size) {
        Page brandPage = WebsiteService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}


package jkw.controller.front;
 
import jkw.pojo.Website;
import jkw.pojo.WebsiteType;
import jkw.service.WebsiteService;
import jkw.service.WebsiteTypeService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.List;
 
@RequestMapping("/front/website")
@RestController
@CrossOrigin
public class FrontWebsiteCon {
    @Autowired
    private WebsiteService websiteService;
    @Autowired
    private WebsiteTypeService websiteTypeService;
 
    /**
     * 查询所有网站类型以及对应的网站
     *
     * @return
     */
    @GetMapping("/findAllTypes")
    public BaseResult findAllTypeWithWebsite() {
        List websiteTypeList = websiteTypeService.findAll();
        for (WebsiteType websiteType : websiteTypeList) {
            List websiteList = websiteService.findAllByWebsiteTypeId(websiteType.getWebsiteTypeId());
            websiteType.setWebsites(websiteList);
        }
        return BaseResult.ok(websiteTypeList);
    }
 
}

相关阅读:
《Missing Parts》NFT 作品集第 5 系列上线 The Sandbox 市场平台
 Spring Security 在登录时如何添加图形验证码
 flutter开发之安装dart
NLP - word2vec详解
 【微软】【ICLR 2022】TAPEX：通过学习神经 SQL 执行器进行表预训练
 AI艺术创作之MidJourney 的新 V4 算法太疯狂了
 C++算法之旅、09 力扣篇 | 常见面试笔试题（上）算法小白专用
 12 Go的接口
 DAG（有向无环图）的实现方法
 Python人员信息管理系统（简直期末人福音）
原文地址：https://blog.csdn.net/m0_63040701/article/details/133100340