1、前言

技术栈：

• vue
• element-ui
• axios http请求库
• markdown编辑器
  • mavon-editor
  • markdown-it
  • github-markdown-css

2、项目演示

3、环境准备

安装Vue的环境，Vue官方文档

1、Nodejs安装

• Node.js：http://nodejs.cn/download/
  安装就是无脑的下一步就好，安装在自己的环境目录下

• 检查时候安装成功

  • cmd下输入node -v，查看是否能够正确打印出版本号即可！
  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！
  • 这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

• 修改全局依赖包下载路径

  可以通过npm root -g 查看当前存放的位置

  我们不想让全局包放在这里，我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径：

  npm config set prefix "D:\Program Files (x86)\nodejs\node_global"
  

  npm config set cache "D:\Program Files (x86)\nodejs\node_globalnode_cache"
  

• 设置淘宝源，让我们下载速度快的飞起

  # 安装淘宝npm
  npm config set registry http://registry.npm.taobao.org/
  

• 安装 vue-cli

  # vue-cli 安装依赖包
  npm install -g vue-cli
  

4、新建项目

参考官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html

可以通过vue create或者vue ui创建项目，这里我使用vue ui，是@vue/cli3.0增加一个可视化项目管理工具，可以运行项目、打包项目，检查等操作。

# 打开vue的可视化管理工具界面
vue ui

运行vue ui之后，会为我们打开一个http://localhost:8080的页面：

然后点击创建，填写项目名称

注意：创建的目录最好是和你运行vue ui同一级。这样方便管理和切换。

下一步，选择【手动】，再点击下一步，如图点击按钮，勾选上路由Router、状态管理Vuex，去掉js的校验。

下一步，也选上【Use history mode for router】，点击创建项目，然后弹窗中选择按钮【创建项目，不保存预设】，就进入项目创建啦。

上述步骤，帮助我们创建了一个vue项目，并且安装了Router、Vuex。这样我们后面就可以直接使用。

我们可以看一下vueblog-vue的项目结构

将项目导入idea

安装element ui

安装element-ui组件(https://element.eleme.cn/#/zh-CN/component/installation), 帮助我们开发出好看的博客页面

在我们的项目根目录用命令

# 安装element-ui
npm i element-ui -S

在main.js中引入elementui依赖

//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

安装Axios

接下来，安装Axios（http://www.axios-js.com/zh-cn/docs/）

使用 npm:

npm install --save axios vue-axios

将下面代码加入main.js:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

我们可以利用Axios完成，从浏览器中创建、转换请求数据和响应数据、拦截请求和响应

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

配置页面路由

开始前我们先定义好页面、配置好路由，由于项目简单，页面较少，所有提前链接好，后续慢慢开发，等用到链接的时候就可以直接使用：

我们在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 BlogDetail from "../views/BlogDetail";
  import Blogs from "../views/Blogs";
  import BlogEdit from "../views/BlogEdit";
  
  Vue.use(VueRouter)
  
  //路由是按照顺序访问的，所以/blog/:blogId 要放在/blog/:blogId/edit前面
  const routes = [
    {
      //博客列表
      path: '/',
      name: 'Index',
      //也可以这样写    redirect: {name: "Blogs"}
      component: Blogs,
    },
    {
      //博客列表
      path: '/blogs',
      name: 'Blogs',
      component: Blogs
    },
    {
      //登录页面
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      //编辑博客,增加blog
      path: '/blog/add',
      name: 'BlogEdit',
      component: BlogEdit
    },
    {
      //博客详情页
      path: '/blog/:blogId',
      name: 'BlogDetail',
      component: BlogDetail
    },
    {
      //编辑博客
      //接受前端传递来的参数 blogId
      path: '/blog/:blogId/edit',
      name: 'BlogEdit',
      component: BlogEdit
    },
  
  ]
  
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
  
  export default router
  
  

  清空APP.vue的style

  测试

5、页面开发

登录页面

1、页面原型设计

由于页面设计简单 ，这里就略过了

2、代码

• views.Login.vue

<template>
    <div>
        <el-container>
            <el-header>
                <img class="mlogo" src="../static/images/logo.png">
            </el-header>
            <el-main>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <span class="login-title">欢迎登录</span>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                ruleForm: {
                    username: 'markerhub',
                    password: '111111'
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'change' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //表单提交是post
                        const _this = this;
                        this.axios.post('http://localhost:8081/login',this.ruleForm).then(res => {

                            const jwt = res.headers['authorization']
                            //将jwt放入 jwt
                            const  userInfo = res.data.data;
                            console.log(jwt);
                            console.log(userInfo);

                            //这里this指向的是axios，所以需要在外面另存this，为_this
                            //把数据共享出去
                            _this.$store.commit("SET_TOKEN",jwt);
                            _this.$store.commit("SET_USERINFO",userInfo);

                            console.log(_this.$store.getters.GETUSER)
                            //页面跳转
                            _this.$router.push("/blogs")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        color: #333;
        text-align: center;
        line-height: 80px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .mlogo {
        height: 80%;
        margin-top: 5px;
    }
    .demo-ruleForm{
        border:1px solid #DCDFE6;
        width: 350px;
        margin:0px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }
    .login-title{
        width: 350px;
        height: 40px;
        text-align:center;
        margin: 0 auto 40px auto;
        color: #303133;
    }
</style>

上述代码主要做了两件事：

1、表单校验

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

表单校验规则，固定写法，element-ui组件的demo有

发起登录事件之后的代码：

//这里this指向的是axios，所以需要在外面另存this，为_this
//把数据共享出去
_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: {
    //state的值不能直接修改 mutations相当于set方法
    SET_TOKEN: (state,token) => {
      state.token = token;
      localStorage.setItem("token",token);
    },
    SET_USERINFO: (state,userInfo) => {
      state.userInfo = userInfo;
      //session里面不能传递字符串，这里用JSON转化一下,序列化
      sessionStorage.setItem("userInfo",JSON.stringify(userInfo));
    },
    REMOVE_INFO: (state) => {
      state.token = '';
      state.userInfo = {};
      localStorage.setItem("token", '');
      sessionStorage.setItem("userInfo",JSON.stringify(""));
    }
  },
  getters: {
    //get
    GETUSER: state => {
      return state.token;
    }
  },
  actions: {
  },
  modules: {
  }
})

存储token，我们用的是localStorage，存储用户信息，我们用的是sessionStorage。毕竟用户信息我们不需要长久保存，保存了token信息，我们随时都可以初始化用户信息。当然了因为本项目是个比较简单的项目，考虑到初学者，所以很多相对复杂的封装和功能我没有做，当然了，学了这个项目之后，自己想再继续深入，完成可以自行学习和改造哈

定义全局axios拦截器

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

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

import axios from "axios";
import ElementUI from 'element-ui';
import store from './store'
import router from './router'

//方便管理请求,方便修改请求链接的域名
axios.defaults.baseURL="http://localhost:8081";

//前置拦截
axios.interceptors.request.use(config =>{

    return config
})

//后置拦截
axios.interceptors.response.use(response => {
    let res = response.data;

    console.log("==============")
    console.log(res)
    console.log("==============")

    if (res.code == 200) {
        return response
    } else {
        ElementUI.Message.error('错了哦，这是一条错误消息', {duration : 3*1000});

        //不让进入Login.vue
        return Promise.reject(response.data.msg)
    }
},
    error => {
    console.log(error)
        if (error.response.data){
            error.message = error.response.data.msg
        }
        if (error.response.status === 401){
            store.commit("REMOVE_INFO")
            router.push("/login")
        }
        ElementUI.Message.error(error.message, {duration : 3*1000});

        return Promise.reject(error)
}
)

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

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

//引入axios拦截器
import "./axios"

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

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

博客页面

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

头部用户信息

头部用户信息包括三部分信息：id，头像，用户名，而这些信息我们是在登录之后就存在sessionStorage。因此，我们可以通过store的getters获取用户信息。

• components\Header.vue

<template>
    <div class="m-content">
        <h3>欢迎来到Ergou博客</h3>
        <div class="block"><el-avatar :size="50" :src="user.avatar"></el-avatar></div>
        <div>{{user.username}}</div>

        <div class="m-action">
            <span>  <el-link href="/blogs" >主页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span><el-link type="success" href="/blog/add">发表博客</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span v-if="!hasLogin"><el-link type="primary" @click="login">登录</el-link></span>
            <span v-if="hasLogin"> <el-link type="danger" @click="logout">退出</el-link></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                user: {
                    username: '请先登录',
                    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                },
                hasLogin: false
            }
        },
        methods: {
            logout() {
                const _this = this;
                _this.axios.get("/logout", {
                    headers: {
                        "Authorization" : localStorage.getItem("token")
                    }
                }).then(res =>{
                    _this.$store.commit("REMOVE_INFO")
                    _this.$router.push("/login")
                })
            },

        },
        created() {
            if (this.$store.getters.GETUSER.username){
                this.user.username = this.$store.getters.GETUSER.username
                this.user.avatar = this.$store.getters.GETUSER.avatar

                this.hasLogin = true
            }
        }
    }
</script>

<style scoped>
.m-content{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
    .m-action{
       margin: 10px 0;
    }
</style>

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

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

import Header from "@/components/Header";
data() {
  components: {Header}
}
# 然后模板中调用组件
<Header></Header>

博客分页

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

需要几部分信息：

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

<template>
    <div>
        <Header> </Header>

        <div class="block">
            <el-timeline>
                <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
                    <el-card>
                        <h4>
                            <router-link :to="{name: 'BlogDetail',params:{blogId: blog.id}}">
                                {{blog.title}}
                            </router-link>
                        </h4>
                        <p>{{blog.description}}</p>
                    </el-card>
                </el-timeline-item>

            </el-timeline>

            <el-pagination class="mpage"
                    background
                    layout="prev, pager, next"
                    :current-page=currentPage
                    :page-size=pageSize
                    :total=total
                    @current-change=page>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header"
    export default {
        name: "Blogs",
        components: {
            Header
        },
        data() {
            return {
                blogs: {},
                currentPage: 1,
                total: 0,
                pageSize: 5
            }
        },
        methods: {
            page(currentPage) {
               const _this = this
                _this.axios.get("/blogs?currentPage=" + currentPage).then(res => {
                    console.log(res)
                    _this.blogs = res.data.data.records
                    _this.currentPage = res.data.data.currentPage
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size
                })
            }
        },
        created() {
            //调用分页程序
            this.page(1)
        }

    }
</script>

<style scoped>
    .mpage{
        margin: 0 auto;
        text-align: center;
    }
</style>

data()中定义博客列表blogs、已经一些分页信息。method()中定义分页的调用接口page(currentPage)，参数是需要调整的页码currentPage,得到结果之后直接赋值即可。然后初始化时候，直接在mounted()方法中调用第一页this.page(1),

博客编辑

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

安装mavon-editor

基于Vue的markdown编辑器mavon-editor

npm install mavon-editor --save

然后在main.js中全局注册：

// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

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

<template>
    <div>
        <Header></Header>

        <div class="m-content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="摘要" prop="description">
                    <el-input type="textarea" v-model="ruleForm.description"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <mavon-editor v-model="ruleForm.content"></mavon-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    export default {
        name: "BlogEdit",
        components: {
            Header
        },    data() {
            return {
                ruleForm: {
                    id: '',
                    title: '',
                    description: '',
                    content: '',
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入摘要', trigger: 'blur' }
                    ],
                    content: [
                        {  required: true,message: '请输入内容', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this;
                        this.axios.post("/blog/edit",this.ruleForm ,{
                            headers: {
                                "Authorization" : localStorage.getItem("token")
                            }
                        }).then(res =>{
                            console.log(res)
                            this.$alert('操作成功', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                   _this.$router.push("/blogs")
                                }
                            });
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            const  blogId = this.$route.params.blogId;
            const _this = this;
            //内容回显
            if (blogId){
                this.axios.get("/blog/" + blogId).then(res =>{
                    const blog = res.data.data;
                    _this.ruleForm.id = blog.id
                    _this.ruleForm.title = blog.title
                    _this.ruleForm.description = blog.description
                    _this.ruleForm.content = blog.content
                })
            }
        }
    }

</script>

<style scoped>
    .m-content{
        text-align: center;
    }

</style>

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

对了，mavon-editor因为已经全局注册，所以我们直接使用组件即可：

<mavon-editor v-model="editForm.content"/>

效果如下：

博客详情页

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

方法如下：

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

• views\BlogDetail.vue

  <template>
      <div>
          <Header> </Header>
  
          <div class="mblog">
              <h2>{{blog.title}}</h2>
              <el-link icon="el-icon-edit" v-if="ownBlog">
                  <router-link :to="{name: 'BlogEdit',params: {blogId: blog.id} }">
                      编辑
                  </router-link>
                  </el-link>
              <el-divider></el-divider>
              <div class="markdown-body" v-html="blog.content"></div>
          </div>
  
      </div>
  </template>
  
  <script>
      import Header from "../components/Header";
      import "github-markdown-css/github-markdown.css"
      export default {
          name: "BlogDetail",
          components: {Header},
          data() {
              return {
                  blog: {
                      id: "",
                      title: "默认",
                      content: "内容"
                  },
                  ownBlog: false
              }
          },
          created() {
              const  blogId = this.$route.params.blogId;
              const _this = this;
              //内容回显
              if (blogId){
                  this.axios.get("/blog/" + blogId).then(res =>{
                      const blog = res.data.data;
                      _this.blog.id = blog.id
                      _this.blog.title = blog.title
                      var markdownIt = require("markdown-it")
                      var md =new markdownIt();
                      var result = md.render(blog.content)
                      _this.blog.content = result
  
                      _this.ownBlog=(blog.userId === _this.$store.getters.GETUSER.id)
                  })
              }
          }
      }
  
  </script>
  
  <style scoped>
  .mblog{
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 100%;
      min-height: 700px;
      padding: 20px 15px;
  }
  </style>
  

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

再导入样式：

import 'github-markdown.css'

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

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

6、路由权限拦截

页面已经开发完毕之后，我们来控制一下哪些页面是需要登录之后才能跳转的，如果未登录访问就直接重定向到登录页面，因此我们在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的状态，觉得是否需要跳转到登录页面。

{
  path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
  name: 'BlogAdd',
  meta: {
    requireAuth: true
  },
  component: BlogEdit
}

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

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

7、小结

前端到这就算到一段落，对于组件的使用，vue的声明周期还是理解的太浅，后面多接触 肯定没问题