个人博客项目导航栏小功能设计

前言

这篇主要介绍个人博客的一个导航栏的设计，包括从数据库中读取数据显示到前端模板中，同时实现点击某一项高亮的功能实现。

一、数据库建表

因为导航栏是从数据库中读取然后显示出来，所以首先建了一张表，如下：

我们将分成提问，分享，讨论，建议四大模块，分配好对应的id。

二、ContextStartup文件的设计

1.简介

这个文件我们会重写 ApplicationRunner的run方法, 使得springboot启动完成会调用这个方法，我们将从数据库中读取分类的逻辑写在这里

代码如下（示例）：

public class ContextStartup implements ApplicationRunner, ServletContextAware {
    @Autowired
    MCategoryService mCategoryService;
    ServletContext servletContext;
    @Override
    public void run(ApplicationArguments args) throws Exception {
        List<MCategory> categories = mCategoryService.list(new QueryWrapper<MCategory>()
        .eq("status", 0)
        );
        servletContext.setAttribute("categorys", categories);

    }

    @Override
    public void setServletContext(ServletContext servletContext) {
        this.servletContext=servletContext;

    }
}

2.读取数据

我们用的是mybatis-plus

List<MCategory> categories = mCategoryService.list(new QueryWrapper<MCategory>()
        .eq("status", 0)

这段我们拿到了分类的List，通过打印出来我们看到已经成功取到

3.注入 servletContext

因为需要用到上下文，所以我们实现ServletContextAware
具体做法是通过：
1.实现 ：implement ServletContextAware
2.导入：@Autowired ServletContext servletContext;
3.使用方法：servletContext.setAttribute（）;

servletContext.setAttribute("categorys", categories);

这里我们将数据库中取出的categories传递，前端通过categorys接受

三、前端渲染

1.html代码

 <li class="${(0==currentCategoryId)?string('layui-hide-xs layui-this', '')}"><a href="/">首页</a></li>

<#list categorys as item>
                <li class="${(item.id==currentCategoryId)?string('layui-hide-xs layui-this', '')}"><a href="/category/${item.id}">${item.name}</a></li>
            </#list>

2.controller

PostController：

@Controller
public class PostController  extends BaseController{

    @GetMapping("/category/{id:\\d*}")
    public String category(@PathVariable(name = "id") Long id){

        req.setAttribute("currentCategoryId",id);
        return "post/category";
    }

    @GetMapping("/post/{id:\\d*}")
    public String detail(@PathVariable(name = "id") Long id){
        return "post/detail";
    }
}

IndexController：

public class IndexController extends BaseController {

    @RequestMapping({"","/"})
    public String index (){

        req.setAttribute("currentCategoryId",0);
        return  "index";
    }

}

这边这两个Controller都继承了BaseController，用到BaseController中导入的：

@Autowired
    HttpServletRequest req;

3.逻辑

首先，我们导航栏一共五个，首页和另外四个分类模块。
1.前面讲到前端通过categorys接受，我们用一个<#list categorys as item>将它放到item中。
2.a标签中用到了item.id，这里将item.id传到controller层，用于跳转到对应的分类界面。前面也讲过四大模块分别有对应的id。
3.controller接收到请求后，调用req.setAttribute方法，表示当前处于id为几的页面，首页置为0，另外四个模块则置为他们在数据库中的id，这主要是为了区分处于哪个页面，使得导航栏该页面的按钮高亮。
4.html中的逻辑：

<li class="${(0==currentCategoryId)?string('layui-hide-xs layui-this', '')}">

 <li class="${(item.id==currentCategoryId)?string('layui-hide-xs layui-this', '')}"><a href="/category/${item.id}">

'layui-hide-xs layui-this’这个可以理解为使按钮处于高亮的样式
如果currentCategoryId == 0，那么此时为首页，首页按钮高亮。
如果currentCategoryId==item.id，那么对应页面的按钮高亮。
效果如下：

总结

主要实现了个人博客的一个导航栏的设计，学到了用mybatis-plus对数据库操作，注入 servletContext，以及一些常用注解的使用：@RequestMapping负责url到Controller中具体函数的映射 。 @Autowired自动导入等等。包括前端的渲染逻辑