vue博客实战---博客首页开发

欢迎关注我的个人公众号：周先生自留地，简书文章不定时更新。

上一篇文章讲完了项目的搭建。本篇开始就正式博客网站的开发了，本篇文章实现博客首页的开发。博客网站的架构如下：

1.左上方头像区域，鼠标移入会有下拉菜单进行注册登录退出等操作

2.左下方博客导航栏区域

3.中间博客正文区域

4.右侧精选文章展示以及友情链接展示

        我们可以先看下具体的首页效果：

界面我使用了element-ui，所以需要先安装依赖。并且在index.js中引入element-ui。

我们首先实现左上方头像下拉菜单，下拉菜单我使用element-ui的el-dropdown组件，el-dropdown中包含一个class为el-dropdown-link，鼠标移入则会显示下拉菜单，我们可以将头像框放在这个class里面。

下拉菜单实现在el-dropdown-menu下，下拉菜单我只要设置了三个菜单选项：登录/注册，修改资料，退出登录。每个菜单选项就是一个el-dropdown-item，在el-dropdown-item下我直接使用router-link进行跳转到对应的界面。

这边有一个小细节需要优化的就是登陆/注册按钮和退出按钮不能同时显示，我们首先需要在data中设置变量flag，然后在mounted的时候监听localStorage中是否有保存用户信息，如果处于登录状态则隐藏登陆/注册按钮，如果处于未登录状态，则隐藏注册/登陆按钮。

        我们可以看下效果：

接下来我们实现左下方导航栏界面，导航栏主要分为四个主功能：首页功能、留言板、资源下载、相册。导航栏我使用了el-menu组件，每个导航菜单都是一个el-submenu。

然后首页功能下需要添加菜单选项组，首页功能包含：首页，关于以及后台，每个菜单选项组都是一个el-menu-item-group:

后台选项还有对应后台的子菜单，所以我们需要为后台添加子菜单，每个子菜单就是一个el-menu-item，后台子菜单包含：首页，标签管理，文章管理，文章发表，每个子菜单实际上就是一个个router-link，点击子菜单直接跳转到对应的界面：

        我们可以看下导航栏实现之后的具体效果：

到这里左侧导航栏已经成功实现了，接着我们先看看右侧精选文章推荐和友链的显示效果。右侧导航栏的效果比左侧相对简单许多，最上方一个div显示博客名称和一句座右铭，中间部分nav里面套ul实现精选文章区域，现在具体逻辑功能还未实现所以精选文章我先写死，下方div里面套ul友链展示。因为右侧导航栏逻辑较为简单，所以直接贴组件代码：

        我们可以看下现在的具体效果：

左右两侧导航栏实现完毕，接下来需要设置中间的博客主界面，实际上中间界面不是固定界面，而是由index.js中routes的components决定具体渲染哪一个vue文件作为博客主界面，在首页我们渲染的是article，也就是博客文章列表界面：

我们在src/components下创建article.vue文件，data中添加参数articleList用于接收后端返回博客文章列表，在mounted阶段通过axios发起post请求访问后端接口查询博客文章列表并且将结果绑定到articleList。

接着我们先来看看后端接口的实现，在项目根目录创建dao文件夹，关于数据库的业务逻辑全部放在dao层实现。首先在router层接收前端的参数，然后调用dao层查询数据库文章列表：

查询到结果返回router层最终将结果封装成json格式返回给前端：

接口实现完成我们回到article.vue中开始文章列表的渲染工作，组件内放置一个class为content的div，使用v-for循环渲染文章列表，对文章标题和阅读全文按钮添加点击事件，点击按钮可以跳转到文章详情界面，实际上点击事件就是router-link进行跳转，跳转的时候携带文章id参数：

css就是样式的调整，没什么好解释的，大概贴下css代码自己理解下：

        到这里我们博客首页就实现完毕了，我们可以先看看首页效果：

        本篇内容到这里结束了，下一篇将实现后台的几大功能模块，文章管理，文章发表，标签管理，可以先贴下效果图，我们下期再见！

        欢迎关注我的个人公众号：周先生自留地。