Vue博客前端页面及交互

二、Vue前端

接下来，我们来完成vueblog前端的部分功能。可能会使用的到技术如下：

• vue
• element-ui
• axios
• mavon-editor
• markdown-it
• github-markdown-css

1、环境搭建

1 下载node.js

node.js官网

检查版本（是否安装成功）

2 安装Vue环境

# 安装淘宝

npm npm install -g cnpm --registry=https://registry.npm.taobao.org

# vue-cli 安装依赖包

cnpm install --g vue-cli

2、创建项目

在自选的项目路径按下shift+鼠标右键打开Powershell

输入 vue ui，会自动打开一个页面

（若vue ui无反应，则执行cnpm i -g @vue/cli)

创建项目

1 详情

输入项目名，其余不需要修改

2 预设

选择手动

3 功能

选择Router、Vuex，关闭Linter/Formatter

4 配置

5 安装完毕

vue项目结构

├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据（state）状态管理
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js

3、安装elementUI、axios

1 elementUI

# 安装element-ui

cnpm install element-ui --save

打开项目src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)

2 axios

安装命令

cnpm install axios --save

在main.js中全局引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

组件中，我们就可以通过this.$axios.get()来发起我们的请求了

4、页面路由

接下来，我们先定义好路由和页面，因为我们只是做一个简单的博客项目，页面比较少，所以我们可以直接先定义好，然后在慢慢开发，这样需要用到链接的地方我们就可以直接可以使用：

我们在views文件夹下定义几个页面：

• BlogDetail.vue（博客详情页）
• BlogEdit.vue（编辑博客）
• Blogs.vue（博客列表）
• Login.vue（登录页面）

然后再路由中心配置：

• router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
import Blogs from '../views/Blogs'
import BlogDetail from "../views/BlogDetail";
import BlogEdit from "../views/BlogEdit";
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.use(Element)
Vue.use(VueRouter)

const routes = [
  {
     
    path: '/',
    name: 'Index',
    redirect:{
     name:"Blogs"}
  },
  {
     
    path: '/blogs',
    name: 'Blogs',
    component: Blogs
  },
  {
     
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
     
    path: '/blog/add',
    name: 'BlogEdit',
    component: BlogEdit
  },
  {
     
    path: '/blog/:blogId',
    name: 'BlogDetail',
    component: BlogDetail
  },
  {
     
    path: '/blog/:blogId/edit',
    name: 'BlogEdit',
    component: BlogEdit
  },

]

const router = new VueRouter({
     
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

接下来我们去开发我们的页面。其中，带有meta：requireAuth: true说明是需要登录字后才能访问的受限资源，后面我们路由权限拦截时候会用到。

views/Login.vue

上面代码中，其实主要做了两件事情

1、表单校验

2、登录按钮的点击登录事件

表单校验规则还好，比较固定写法，查一下element-ui的组件就知道了，我们来分析一下发起登录之后的代码：

const jwt = res.headers['authorization']
const userInfo = res.data.data

// 把数据共享出去
_this.$store.commit("SET_TOKEN", jwt)
_this.$store.commit("SET_USERINFO", userInfo)

// 获取
console.log(_this.$store.getters.getUser)

_this.$router.push("/blogs")

从返回的结果请求头中获取到token的信息，然后使用store提交token和用户信息的状态。完成操作之后，我们调整到了/blogs路由，即博客列表页面。

token的状态同步

所以在store/index.js中，代码是这样的：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
     
  state: {
     
    token: '',
    userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
  },
  mutations: {
     
    SET_TOKEN: (state, token) => {
     
      state.token = token
      localStorage.setItem("token", token)
    },
    SET_USERINFO: (state, userInfo) => {
     
      state.userInfo = userInfo
      sessionStorage.setItem("userInfo", JSON.stringify(userInfo))
    },
    REMOVE_INFO: (state) => {
     
      localStorage.setItem("token", '')
      sessionStorage.setItem("userInfo", JSON.stringify(''))
      state.userInfo = {
     }
    }
  },
  getters: {
     
    getUser: state => {
     
      return state.userInfo
    }
  },
  actions: {
     },
  modules: {
     }
})

存储token，我们用的是localStorage，存储用户信息，我们用的是sessionStorage。毕竟用户信息我们不需要长久保存，保存了token信息，我们随时都可以初始化用户信息。

Warning！！！！！！

此时测试情况，需要同时打开前端Vue以及后端Java的SpringBoot，要同时运行（因此现在前端端口号也是8080，所以将后端的端口号改为8081）

获取成功：

此时有的小朋友在F12后调试台出现404NF的错误，需要注意如下几点

• 检查输入的账号密码是否跟数据库后台的账号密码相匹配
• this.$axios.post中的url输入的是后端的login路径（8081）
• 确保后端的服务器要运行

5、定义全局axios拦截器

点击登录按钮发起登录请求，成功时候返回了数据，如果是密码错误，我们是不是也应该弹窗消息提示。为了让这个错误弹窗能运用到所有的地方，所以我对axios做了个后置拦截器，就是返回数据时候，如果结果的code或者status不正常，那么我对应弹窗提示。

在src目录下创建一个文件axios.js（与main.js同级），定义axios的拦截：

import axios from 'axios'
import Element from "element-ui";
import store from "./store";
import router from "./router";
axios.defaults.baseURL='http://localhost:8081'
axios.interceptors.request.use(config => {
     
    console.log("前置拦截")
    // 可以统一设置请求头
    return config
})
axios.interceptors.response.use(response => {
     
        const res = response.data;
        console.log("后置拦截")
        // 当结果的code是否为200的情况
        if (res.code === 200) {
     
            return response
        } else {
     
            // 弹窗异常信息
            Element.Message({
     
                message: response.data.msg,
                type: 'error',
                duration: 2 * 1000
            })
            // 直接拒绝往下面返回结果信息
            return Promise.reject(response.data.msg)
        }
    },
    error => {
     
        console.log('err' + error)// for debug
        if(error.response.data) {
     
            error.message = error.response.data.msg
        }
        // 根据请求状态觉得是否登录或者提示其他
        if (error.response.status === 401) {
     
            store.commit('REMOVE_INFO');
            router.push({
     
                path: '/login'
            });
            error.message = '请重新登录';
        }
        if (error.response.status === 403) {
     
            error.message = '权限不足，无法访问';
        }
        Element.Message({
     
            message: error.message,
            type: 'error',
            duration: 3 * 1000
        })
        return Promise.reject(error)
    })

前置拦截，其实可以统一为所有需要权限的请求装配上header的token信息，这样不需要在使用是再配置，我的小项目比较小，所以，还是免了吧~

然后再main.js中导入axios.js

import './axios.js'

后端因为返回的实体是Result，succ时候code为200，fail时候返回的是400，所以可以根据这里判断结果是否是正常的。另外权限不足时候可以通过请求结果的状态码来判断结果是否正常。这里都做了简单的处理。

登录异常时候的效果如下：

6、博客列表

登录完成之后直接进入博客列表页面，然后加载博客列表的数据渲染出来。同时页面头部我们需要把用户的信息展示出来，因为很多地方都用到这个模块，所以我们把页面头部的用户信息单独抽取出来作为一个组件。

头部用户信息

那么，我们先来完成头部的用户信息，应该包含三部分信息：id，头像、用户名，而这些信息我们是在登录之后就已经存在了sessionStorage。因此，我们可以通过store的getters获取到用户信息。

• components\Header.vue

• 上面代码created()中初始化用户的信息，通过hasLogin的状态来控制登录和退出按钮的切换，以及发表文章链接的disabled，这样用户的信息就能展示出来了。 然后这里有个退出按钮，在methods中有个logout()方法，逻辑比较简单，直接访问/logout，因为之前axios.js中我们已经设置axios请求的baseURL，所以这里我们不再需要链接的前缀了哈。因为是登录之后才能访问的受限资源，所以在header中带上了Authorization。返回结果清楚store中的用户信息和token信息，跳转到登录页面。

  然后需要头部用户信息的页面只需要几个步骤：

7、博客分页

接下来就是列表页面，需要做分页，列表我们在element-ui中直接使用时间线组件来作为我们的列表样式，还是挺好看的。还有我们的分页组件。

需要几部分信息：

• 分页信息
• 博客列表内容，包括id、标题、摘要、创建时间
• views\Blogs.vue

data()中直接定义博客列表blogs、以及一些分页信息。methods()中定义分页的调用接口page（currentPage），参数是需要调整的页码currentPage，得到结果之后直接赋值即可。然后初始化时候，直接在mounted()方法中调用第一页this.page(1)。完美。使用element-ui组件就是简单快捷哈哈！ 注意标题这里我们添加了链接，使用的是标签。

8、博客编辑

我们点击发表博客链接调整到/blog/add页面，这里我们需要用到一个markdown编辑器，在vue组件中，比较好用的是mavon-editor，那么我们直接使用哈。先来安装mavon-editor相关组件：

安装mavon-editor

基于Vue的markdown编辑器mavon-editor

cnpm install mavon-editor --save

在main.js中全局注册

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

ok，那么我们去定义我们的博客表单：

• views/BlogEdit.vue

逻辑依然简单，校验表单，然后点击按钮提交表单，注意头部加上Authorization信息，返回结果弹窗提示操作成功，然后跳转到博客列表页面。emm，和写ajax没啥区别。熟悉一下vue的一些指令使用即可。 然后因为编辑和添加是同一个页面，所以有了create()方法，比如从编辑连接/blog/7/edit中获取blogId为7的这个id。然后回显博客信息。获取方式是const blogId = this.$route.params.blogId。

9、博客详情

博客详情中需要回显博客信息，然后有个问题就是，后端传过来的是博客内容是markdown格式的内容，我们需要进行渲染然后显示出来，这里我们使用一个插件markdown-it，用于解析md文档，然后导入github-markdown-c，所谓md的样式。

方法如下：

# 用于解析md文档
cnpm install markdown-it --save
# md样式
cnpm install github-markdown-css

然后就可以在需要渲染的地方使用：

• views\BlogDetail.vue

• 具体逻辑还是挺简单，初始化create()方法中调用getBlog()方法，请求博客详情接口，返回的博客详情content通过markdown-it工具进行渲染。

  再导入样式：

  import ‘github-markdown.css’

  然后在content的div中添加class为markdown-body即可哈。 效果如下：

另外标题下添加了个小小的编辑按钮，通过ownBlog （判断博文作者与登录用户是否同一人）来判断按钮是否显示出来。

10、路由权限拦截

页面已经开发完毕之后，我们来控制一下哪些页面是需要登录之后才能跳转的，如果未登录访问就直接重定向到登录页面，因此我们在src目录下定义一个js文件：

• src\permission.js

import router from "./router";

// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
     

  if (to.matched.some(record => record.meta.requireAuth)) {
      // 判断该路由是否需要登录权限

    const token = localStorage.getItem("token")
    console.log("------------" + token)

    if (token) {
      // 判断当前的token是否存在 ； 登录存入的token
      if (to.path === '/login') {
     

      } else {
     
        next()
      }
    } else {
     
      next({
     
        path: '/login'
      })
    }
  } else {
     
    next()
  }
})

通过之前我们再定义页面路由时候的的meta信息，指定requireAuth: true，需要登录才能访问，因此这里我们在每次路由之前（router.beforeEach）判断token的状态，觉得是否需要跳转到登录页面。

然后我们再main.js中import我们的permission.js

import './permission.js' // 路由拦截

完结啦~
慢慢学习，慢慢进步