网址导航栏的设计

效果图

代码

前台导航样式设计

<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;

实体类设计

java 复制代码

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<Website> websites;
}

java 复制代码

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层

java 复制代码

package jkw.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import jkw.pojo.WebsiteType;

public interface WebsiteTypeMapper extends BaseMapper<WebsiteType> {
}

java 复制代码

package jkw.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import jkw.pojo.Website;

public interface WebsiteMapper extends BaseMapper<Website> {
}

service层

java 复制代码

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<WebsiteType> findAll();

    Page<WebsiteType> search(String search, int page, int size);
}

java 复制代码

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<Website> findAll();

    Page<Website> search(String search, int page, int size);

    //根据typeId查询
    List<Website> findAllByWebsiteTypeId(Integer id);
}

java 复制代码

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<WebsiteType> findAll() {
        return WebsiteTypeMapper.selectList(null);
    }

    @Override
    public Page<WebsiteType> search(String search, int page, int size) {
        QueryWrapper queryWrapper = new QueryWrapper();
        if (search != null) {

        }
        return WebsiteTypeMapper.selectPage(new Page<>(page, size), queryWrapper);
    }
}

java 复制代码

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<Website> findAll() {
        return WebsiteMapper.selectList(null);
    }

    @Override
    public Page<Website> 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<Website> findAllByWebsiteTypeId(Integer id) {
        QueryWrapper<Website> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("websiteTypeId", id);
        return WebsiteMapper.selectList(queryWrapper);
    }
}

控制层

java 复制代码

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<WebsiteType> 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<WebsiteType> brandPage = WebsiteTypeService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}

java 复制代码

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<Website> 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<Website> brandPage = WebsiteService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}

java 复制代码

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<WebsiteType> websiteTypeList = websiteTypeService.findAll();
        for (WebsiteType websiteType : websiteTypeList) {
            List<Website> websiteList = websiteService.findAllByWebsiteTypeId(websiteType.getWebsiteTypeId());
            websiteType.setWebsites(websiteList);
        }
        return BaseResult.ok(websiteTypeList);
    }

}