搭建环境

node.js搭建

• node.js官网(https://nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，即具备node和npm的环境
• 下载完成后，在cmd 输入 node -v npm -v
  

安装vue

在node.js的安装盘符

安装淘宝npm
npm install -g cnpm - -registry = https://registry.npm.taobao.org
vue-cli 安装依赖包
cnpm install - -g  vue-cli

分别安装了淘宝npm，cnpm是为了提高我们安装依赖的速度

vue ui

• vue ui是@vue/cli3.0增加一个可视化项目管理工具，可以运行项目、打包项目，检查等操作

• 在IDEA项目的部署目录（需要建立vue项目的地方）中，打开powerShell（按住shift再右击目录会显示在此打开power shell 或者在文件夹左上角点击文件，然后有以管理员身份运行powershell）

• 注意在上一步下载的vue，在打开的powershell中执行 vue ui 无法打开可视化界面

  • vue -V发现为2.9.6版本，需要3X以上版本可以使用vue ui命令
  • npm uninstall vue-cli -g 删除现在已有的vue，再用 npm install -g @vue/cli 重新下载，
  • 再重新执行 vue ui 即可

• 运行时依然报错如下，解决方法时再系统环境变量上添加发现是：用户变量的path没有配置C:\Windows\System32，添加即可
  

• 运行后依然报错，找不到应用程序
  -

解决方法是重新安装Chrome谷歌浏览器，然后重新vue ui（可能是本地的浏览器不支持vue ui打开界面，重新安装chrome后，会弹出浏览器选择框，选择新安装的chrome浏览器即可）

新建项目

成功执行vue ui后 如下图所示

• 创建—>再此创建新项目—>填写必要信息后—>下一步
  
  选择手动配置项目
  
  勾选上Router Vuex（可以选择去掉Linter/Formatter） 下一步
  
  选择使用历史路由—>创建项目—>创建项目，不保存预设
  

• 创建项目后，为了方便开发，可以使用webstorm，vscode，也可以使用IDEA 只是需要给IDEA集成一个Vue.js插件（然后再重启IDEA），此处采用IDEA来进行开发

• 项目创建完成后如下所示

• 

项目导入IDEA

在IDEA中 File导入该项目即可（已经集成插件的基础上）

• /src/components 公共组件
• /sec/router 前端路由
• /src/views 路由跳转的view，页面目录
• /src/store 组件可以监视store中的数据
• App.vue

集成element-ui

• 直接在IDEA中对项目进行布置

• 引入element-ui组件（https://element.eleme.cn）可以获得好看的vue组件用以渲染数据，开发好看的博客界面

• 注意安装命令均在IDEA的控制台Terminal执行

    # 切换到项目根目录cd vueblog-vue# 安装element-ui# 安装element-uicnpm install element-ui --save
  

• 在main.js中引入elenment-ui

    打开项目src目录下的main.js，引入element-ui依赖import Element from 'element-ui'import "element-ui/lib/theme-chalk/index.css"Vue.use(Element)  //全局进行使用element-ui组件
  

• 至此可以在官网上选择组件复制代码到我们项目中直接使用

• 测试element-ui组件时，启动项目 ，发现组件成功渲染在页面时，即成功

  • 在控制台执行： npm run serve
  • 在Run/Debug Configurations 配置

安装axios

• 基于promise的HTTP库，这个这个工具可以再前后端对接时大大提高开发效率

• IDEA的控制台Terminal执

    cnpm install axios --save
  

• main.js引入axios依赖

    打开项目src目录下的main.js，在main.js中全局引入axiosimport axios from 'axios'Vue.prototype.$axios = axios
  

• 至此在组件中可以通过this.$axios.get()来发起请求

页面路由

定义页面

本项目由于页面较少，可以先定义好路由页面，在需要链接的地方就可以直接使用

• 在views文件夹下定义几个页面(new component)
  • BlogDetail.vue（博客详情页）
  • BlogEdit.vue（编辑博客）
  • Blogs.vue（博客列表）
  • Login.vue（登录页面）
  • 删除掉原生的Home.vue

页面简单定义

• .vue下template标签内只能放一个标签（入放一个< div>）

路由中心配置

• 注意要先把上一步定义的几个.vue导入进index.js

router\index.js

	import Vue from 'vue'import VueRouter from 'vue-router'import Login from '../views/Login.vue'import BlogDetail from '../views/BlogDetail.vue'import BlogEdit from '../views/BlogEdit.vue'Vue.use(VueRouter)const routes = [{   path: '/',    name: 'Blogs',   redirect: { name: 'Blogs' }//主页面，重定向},{    path: '/login',    name: 'Login',   component: Login }, {   path: '/blogs', name: 'Blogs',   // 懒加载   component: () => import('../views/Blogs.vue')  }, {   path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前 name: 'BlogAdd', meta: {     requireAuth: true },  component: BlogEdit  },{ path: '/blog/:blogId',  name: 'BlogDetail',  //显示某篇博客详情，需要id  component: BlogDetail }, { path: '/blog/:blogId/edit',  //需要制定修改哪一个blog故需要传递id name: 'BlogEdit',   meta: {    requireAuth: true }, component: BlogEdit}];const router = new VueRouter({mode: 'history', base: process.env.BASE_URL,  routes})export default router

• 带有meta：requireAuth: true说明是需要登录字后才能访问的受限资源
• 注意路由的顺序严格要求，例如把path: '/blog/:blogId’这个路由放在path: '/blog/add’之前，则访问blog/add可能路由到/blog/:blogId，则不会进入add

登录页面开发

布局

• 在element-ui中 Container（布局容器），有许多布局样式
• 选择常见的三项布局，将其代码放入login.vue的< template>标签中，（将附带的一些样式拷进< script> 中）
• 在element-ui找到布局表单Form控件，找到一个有表单校验规则控件，修改一下，只留下两个输入框和一个提交按钮（注意同时修改校验规则）

views/Login.vue

• 表单校验（固定写法）

• 登录按钮的点击登录事件

    < template>< div><el-container>//el-header是el-container的头部区域<el-header><img class="mlogo" src="xxxxx" alt=""></el-header><el-main><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><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>

<  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 到 15 个字符', trigger: 'blur' }],password: [{ required: true, message: '请选择密码', trigger: 'change' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {const _this = thisthis.$axios.post('/login', this.ruleForm).then(res => {console.log(res.data)const jwt = res.headers['authorization']const userInfo = res.data.data// 把数据共享出去，存入/strore/index.js_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>

		<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: 160px;}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: 60%;margin-top: 10px;}.demo-ruleForm {max-width: 500px;margin: 0 auto;}</style>

发起请求

• 将表单的数据提交给后端，由后端进行校验返回jwt（token）
• 以前通过ajax发起异步请求，在Vue中采用基于promise的axios

views/Login.vue的提交表单方法

	submitForm(formName) { this.$ refs[formName].validate((valid) => {  if (valid) { const _this = this//发起axios请求后，后面的this代表的是该请求的this，想要调用index.js中定义的全局参数必须先预存该代表整个vue项目的this// 提交逻辑            //注意，此处的post请求括号内指令前的URL在axios中定义了，此处会自动加上，避免硬编码this.$axios.post(‘/login', this.ruleForm).then((res)=>{             const token = res.headers['authorization']   //发起请求后的结果需要赋给//登陆成功还会返回用户信息通过res.data.data获取//传统项目token是放在cookie中的，vue项目一般会放在localstorage中  //Vue项目时单页面项目SPA（改变路由时不会刷新整个页面，而是刷新App.vue中<router-view/>中的内容）//因此多组件的SPA保证都能获取如Jwt，则需要配置到全局参数//获取参数_this.$store.commit('SET_TOKEN', token)       _this.$store.commit('SET_USERINFO', res.data.data)        //跳转页面    _this.$router.push("/blogs")     })      } else {        console.log('error submit!!');          return false;    }    });  },

配置全局参数

• 进行token等数据状态同步，存储token，用localStorage；存储用户信息用sessionStorage
• localStorage，sessionStoraage在页面上

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: {    //类似于java bean的setter方法//第一个参数上面定义，第二个为传入的值SET_TOKEN: (state, token) => {    state.token = token     //赋值后存到localStorage，浏览器关闭后仍保存一段时间localStorage.setItem("token", token) },SET_USERINFO: (state, userInfo) => {      state.userInfo = userInfo  //sessionStorage不能存储对象，只能存字符串之类的值sessionStorage.setItem("userInfo", JSON.stringify(userInfo))  },//调用remove方法删除掉localStorage，sessionStorage中的数据REMOVE_INFO: (state) => {    	localStorage.setItem("token", '')      		 sessionStorage.setItem("userInfo", JSON.stringify(''))      	state.userInfo = {}   }}，//初始化时直接从sessionStorage中获取（拿到的是序列化的字符串，需要反序列化）getters: { getUser: state => {      return state.userInfo    } },
}
actions: {},modules: {}
})

• 完成上述配置后，输入用户名密码正确时会跳转到博客界面，但是输入错误时却不会由弹窗提示
• 此时需要一个全局处理登录异常，可以弹窗提示
• 做一个全局axios拦截对登陆错误的结果进行弹窗处理

全局axios拦截

• 对axios做了个后置拦截器，就是返回数据时候，如果结果的code或者status不正常，由对应弹窗提示

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

     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("后置拦截")//注意这里是采用了http的状态码  // 当结果的code是否为200的情况  if (res.code === 200) {    return response  } else {// 弹窗异常信息   //element-ui的一个组件，要在上方先导入依赖Element.Message({//弹窗信息message: response.data.msg,  type: 'error',//弹窗过期时间   duration: 2 * 1000    })// 直接拒绝往下面返回结果信息 （不再执行login.vue中后续的逻辑）   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)})
  

• 编写完axios.js,再往main.js中导入axios.js

博客列表

公共组件Header

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

构建Header组件

首先在/src新建一个目录components，新建一个Header.vue

头部用户信息

头部的用户信息，应该包含三部分信息：id，头像、用户名，而这些信息在登录之后就已经存在了sessionStorage。可以通过store的getters获取到用户信息

Header代码

• created()中初始化用户的信息

• 通过hasLogin的状态来控制登录和退出按钮的切换，以及发表文章链接的disabled，这样用户的信息就能展示出来了（发表文章这个控件绑定了url指向/blog/add）

• 退出按钮，在methods中有个logout()方法，直接访问/logout(因为之前axios.js中已经设置axios请求的baseURL，不再需要链接的前缀)，清除掉srore中的数据，并跳转到登陆页面

  -为什么退出仍然要 this.$axios.get(‘http://localhost:8081/logout’？在AccountController中的logout要将当前角色退出shiro

• 登录之后才能访问的受限资源，所以在header中带上了Authorization。返回结果清除store中的用户信息和token信息，跳转到登录页面
  
  < template>

    <template><div class="m-content"><h3>欢迎来到MarkerHub的博客</h3><div class="block">//el的头像组件<el-avatar :size="50" :src="user.avatar"></el-avatar><div>{{ user.username }}</div></div><div class="maction">// el-link标签<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-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span><span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span></div></div></template>
  

< script>

		<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.usernamethis.user.avatar = this.$store.getters.getUser.avatarthis.hasLogin = true}}}</script>

< syle>

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

集成Header组件

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

博客分页

• 列表页面，需要做分页，列表我们在element-ui中直接使用时间线组件来作为我们列表样式和分页组件
• 需要几部分信息
  • 分页信息
  • 博客列表内容，包括id、标题、摘要、创建时间

views\Blogs.vue

• data()中直接定义博客列表blogs、以及一些分页信息
• methods()中定义分页的调用接口page（currentPage），参数是需要调整的页码currentPage，得到结果之后直接赋值即可
• 初始化时候，直接在mounted()方法中调用第一页this.page(1)
• 注意标题这里我们添加了链接，使用的是标签
• < el-card>展示了每个标签的内容会展示博客名字，同时有个超链接指向具体的博客详情（需要传递参数blog的id）

< template>

	<template><div class="mcontaner"><Header></Header><div class="block"><el-timeline><el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">//卡片组建用于展示分页上的博客信息，如下用标题形式展示了博客的id等<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"backgroundlayout="prev, pager, next":current-page="currentPage":page-size="pageSize":total="total"@current-change=page></el-pagination></div></div></template>

< script>

	<script>import Header from "../components/Header";export default {name: "Blogs.vue",components: {Header},data() {return {blogs: {},//传给pagination分页插件的参数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.current_this.total = res.data.data.total_this.pageSize = res.data.data.size})}},created() {this.page(1)}}</script>

< style>

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

博客编辑（发表）

• 在博客（展示页面）页面，点击header上的发表文章（页面路由）跳转到博客编辑页面
• 点击击发表博客链接调整到/blog/add页面，需要用到一个markdown编辑器，在vue组件中，比较好用的是mavon-editor，先来安装mavon-editor相关组件

安装mavon-editor

• 基于Vue的markdown编辑器mavon-editor

    cnpm install mavon-editor --save
  

• 在main.js中全局注册

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

view\BlogEdit.vue

• 校验表单，然后点击按钮提交表单，注意头部加上Authorization信息，返回结果弹窗提示操作成功，然后跳转到博客列表页面

• 编辑和添加是同一个页面，所以有了create()(在内容开始渲染时就开始)方法，比如从编辑连接/blog/7/edit中获取blogId为7的这个id。然后回显博客信息。获取方式是const blogId = this.$route.params.blogId

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

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

< template>

		< 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>

		<script>import Header from "../components/Header";export default {name: "BlogEdit.vue",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: [{ trequired: true, message: '请输入内容', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {const _this = thisthis.$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() {//拿到blog idconst blogId = this.$route.params.blogIdconsole.log(blogId)const _this = thisif(blogId) {//发送ajax请求，获得进行查询拿到blodid对于的blog内容,	    //生命周期函数在加载后拿到id发送ajax请求将得到的博客内容展示在页面上行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>

< Script>

博客详情

• 博客详情中需要回显博客信息，
• 后端传过来的是博客内容是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 （判断博文作者与登录用户是否同一人）来判断按钮是否显示出来

< template>

		<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>

	<script>import 'github-markdown-css'import Header from "../components/Header";export default {name: "BlogDetail.vue",components: {Header},data() {return {blog: {id: "",title: "",content: ""},ownBlog: false}},created() {const blogId = this.$route.params.blogIdconsole.log(blogId)const _this = thisthis.$axios.get('/blog/' + blogId).then(res => {const blog = res.data.data_this.blog.id = blog.id_this.blog.title = blog.titlevar MardownIt = require("markdown-it")var md = new MardownIt()var result = md.render(blog.content)_this.blog.content = result_this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)})}}</script>

< style>

		<style scoped>.mblog {box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 100%;min-height: 700px;padding: 20px 15px;}</style>

路由权限拦截

• 页面已经开发完毕之后，控制一下哪些页面是需要登录之后才能跳转的

• 如果未登录访问就直接重定向到登录页面

• 在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’ // 路由拦截