用Vue实现个人博客的前端界面

上一次认真的学习使用Vue已经是四月份的事了，当时只是简单的就像使用jQuery一样，直接引入页面，没有使用任何组件、路由，写了个cakeroom的小demo，感兴趣的可以去看下：
github展示链接：https://lwjcode.github.io/cakeroom/view/home.html

这次就更加深入的学习如何使用vue-cli，去组件化的开发一个项目；以及如何使用路由vue-router，完成页面之间的跳转；还有vuex如何管理页面之间需要交互的全局数据；如何使用vue-resource跨域请求，node后台又如何配置。总之学到的还是挺多的。

一. 使用的技术栈

后台：nodejs + express + mongodb + mongoose
前端：vue + vue-router + vuex + vue-router

后台是自己之前就写过的一个基于nodejs的个人博客的练习，当时是转发页面的形式，即将页面和数据一同传给浏览器，现在只是改成接口的形式，只发送数据，感兴趣的同学可以去github下载：https://github.com/lwjcode/BlogAPI
前端就使用了vue，至于上面提到的每个模块都是干什么的这里不再赘述。

二. 项目预览

（1）博客首页

这里写图片描述

（2）博客详情以及发表评论页

这里写图片描述

（3）撰写博客页

这里写图片描述

（3）个人中心页

这里写图片描述

（4）消息提醒和回复页

这里写图片描述

（5）个人信息页

这里写图片描述

三. 一些问题的解决

1 . 页面静态资源的配置：

（1）将图片资源放在static文件夹中

一开始，觉得静态资源都应该发在assets文件夹的，可是因为图片的名字是存在服务器端的，在渲染页面时，图片的路径需要使用字符串拼接，发现如果将路径写成静态的就会直接映射到static目录下，可是如果是动态拼接的话，就不能成功映射。

（2）bootstrap的部署
因为bootstrap是完全依赖jQuery的，所以要使用bootstrap，就必须先下载并配置jQuery。如下：

打开build/webpack.base.conf.js，添加如下配置：

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common.js'),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
   })
  ],

将resolve改为入下的配置：

resolve: {
　　extensions: ['.js', '.vue', '.json'],
　　alias: {
　　'vue$': 'vue/dist/vue.esm.js',
　　'@': resolve('src'),
　　'bootstrap':resolve('src/assets/bootstrap'),
　　}
  }

在main.js中直接导入：

import './assets/bootstrap/css/bootstrap.min.css' 
import './assets/bootstrap/js/bootstrap.min.js'

2 . vuex的使用

首先下载，然后进入main.js文件，并添加如下代码：

import Vuex from 'vuex'
Vue.use(Vuex)

const  vuex_store = new Vuex.Store({
    state:{
        totalmess: 0,  //未读消息总数，在footer公用组件
        title: '登录' //每个页面的名称，在nav公用组件中
    },
    mutations:{

    }
})

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  store: vuex_store  //注入vue实例中，这样所有组件都可以获取
})

在nav组件中的使用：

<div class="header"><span>{{this.$store.state.title}}</span></div>

在其他组件中的使用，比如消息显示页面：

this.$store.state.title = '消息';

这样每个组件中的变化，都可以体现在nav公用组件中。

3 . 路由之间的跳转和参数的传递，以及获取

（1）路由的跳转（在代码中动态跳转）：

this.$router.push({path: '/list'});

（2）通过链接跳转时的传参和获取参数

路由的配置：

export default new Router({
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: blog
    }
 ]
})

跳转传参：

<router-link :to="{path: '/blog/' + blog._id}"></router-link>

获取参数：

let blogid = this.$route.params.id;

4 . vue-resource跨域请求，保存session

在后台配置好的情况下，必须要发送cookie，不然后台不能保存session，所以在每次请求时都必须发送cookie

this.$http.get(url, { 
        withCredentials: true  //打开cookie
        }).then( res => {
            //
        }).catch( error => {
            //
        })

以上是对项目的一个简单的总结，感兴趣的可以去下载尝试哦！

后台接口API：https://github.com/lwjcode/BlogAPI
前端vue实现：https://github.com/lwjcode/xiaojingBlog

如果觉得还行，可以给个小星星啊！！！

项目已经部署到服务器，可以点击查看啊，使用手机效果更好哎！小静博客

用Vue实现个人博客的前端界面

猜你喜欢