Vue博客前端页面及交互
二、Vue前端接下来，我们来完成vueblog前端的部分功能。可能会使用的到技术如下：vueelement-uiaxiosmavon-editormarkdown-itgithub-markdown-css1、环境搭建1 下载node.jsnode.js官网检查版本（是否安装成功）2 安装Vue环境# 安装淘宝npm npm install -g cnpm --registry=https://r
二、Vue前端
接下来，我们来完成vueblog前端的部分功能。可能会使用的到技术如下：
- vue
- element-ui
- axios
- mavon-editor
- markdown-it
- github-markdown-css
1、环境搭建
1 下载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
<template>
<div>
<el-container>
<el-header>
<img class="mlogo" src="https://www.markerhub.com/dist/images/logo/markerhub-logo.png" 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>
export default {
name: "Login",
data() {
return {
ruleForm: {
username: 'erran',
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 = this
this.$axios.post('http://localhost:8081/login', this.ruleForm).then(res => {
console.log(res.data)
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")
})
} 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: 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>
上面代码中，其实主要做了两件事情
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
-
<template> <div class="m-content"> <h3>欢迎来到耳冉的博客</h3> <div class="block"> <el-avatar :size="50" :src="user.avatar"></el-avatar> <div>{{ user.username }}</div> </div> <div class="maction"> <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> 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; } .maction { margin: 10px 0; } </style>上面代码created()中初始化用户的信息，通过hasLogin的状态来控制登录和退出按钮的切换，以及发表文章链接的disabled，这样用户的信息就能展示出来了。 然后这里有个退出按钮，在methods中有个logout()方法，逻辑比较简单，直接访问/logout，因为之前axios.js中我们已经设置axios请求的baseURL，所以这里我们不再需要链接的前缀了哈。因为是登录之后才能访问的受限资源，所以在header中带上了Authorization。返回结果清楚store中的用户信息和token信息，跳转到登录页面。
然后需要头部用户信息的页面只需要几个步骤：
7、博客分页
接下来就是列表页面，需要做分页，列表我们在element-ui中直接使用时间线组件来作为我们的列表样式，还是挺好看的。还有我们的分页组件。
需要几部分信息：
- 分页信息
- 博客列表内容，包括id、标题、摘要、创建时间
- views\Blogs.vue
<template>
<div class="mcontaner">
<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.vue",
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.current
_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、以及一些分页信息。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
<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.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 = 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
console.log(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。
9、博客详情
博客详情中需要回显博客信息，然后有个问题就是，后端传过来的是博客内容是markdown格式的内容，我们需要进行渲染然后显示出来，这里我们使用一个插件markdown-it，用于解析md文档，然后导入github-markdown-c，所谓md的样式。
方法如下：
# 用于解析md文档
cnpm install markdown-it --save
# md样式
cnpm 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 '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.blogId console.log(blogId) const _this = this this.$axios.get('/blog/' + blogId).then(res => { const blog = res.data.data _this.blog.id = blog.id _this.blog.title = blog.title var 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 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 （判断博文作者与登录用户是否同一人）来判断按钮是否显示出来。
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' // 路由拦截
完结啦~
慢慢学习，慢慢进步
前往低代码交流专区
更多推荐
14
0- 0
已为社区贡献1条内容
所有评论(0)