vue博客实战---博客首页开发
上一篇文章讲完了项目的搭建。本篇开始就正式博客网站的开发了，本篇文章实现博客首页的开发。博客网站的架构如下：
1.左上方头像区域，鼠标移入会有下拉菜单进行注册登录退出等操作
2.左下方博客导航栏区域
3.中间博客正文区域
3.右侧精选文章展示以及友情链接展示我们可以先看下具体的首页效果：
界面我使用了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代码自己理解下：
到这里我们博客首页就实现完毕了，我们可以先看看首页效果：
本篇内容到这里结束了，下一篇将实现后台的几大功能模块，文章管理，文章发表，标签管理，可以先贴下效果图，我们下期再见！
欢迎关注我的个人公众号：周先生自留地。