基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）

简介

前面我们实现了博客系统的前台展示页面，还有留言功能没有实现，实现留言功能无非就是在后端增加留言表，对留言进行增删改查。和文章表类似，这里就不在赘述。

既然作为一款动态博客，那么后台管理是必不可少的。为了不重复造轮子，我们直接使用开源项目 vue-element-admin

github: https://github.com/PanJiaChen/vue-element-admin
中文文档：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide

文档中有专门的教程，教你实现一个后台管理系统，有兴趣的朋友可以自行研究

步骤

文章管理页面

1、首先，根据文档提示，下载 vue-admin-template ，安装依赖，运行程序

# 安装依赖
npm install
# 运行后台管理程序
npm run dev

说明：

使用 vue-admin-template 的时候我们可以同时下载 vue-admin-template 和 vue-element-admin 两个项目，vue-admin-template 用于开发，需要使用到哪个组件就参考 vue-element-admin 的写法来写

2、根据提示进行登录，可以看到主界面

3、可见 vue-admin-template 给我们提供了一些常见的例子，我们这里只做文章管理部分，下面修改一下路由@/router/index.js

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)/* Layout */
import Layout from '@/layout'export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},{path: '/404',component: () => import('@/views/404'),hidden: true},{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '仪表盘', icon: 'dashboard' }}]},{path: '/example',component: Layout,redirect: '/example/table',name: 'Example',meta: { title: '我的文章', icon: 'el-icon-document' },children: [{path: 'table',name: 'Table',component: () => import('@/views/table/index'),meta: { title: '文章管理', icon: 'table' }},{path: 'tree',name: 'Tree',component: () => import('@/views/tree/index'),meta: { title: '写文章', icon: 'el-icon-edit' }}]},{path: 'external-link',component: Layout,children: [{path: 'https://www.gitee.com/qianyucc/',meta: { title: '码云', icon: 'link' }}]},// 404 page must be placed at the end !!!{ path: '*', redirect: '/404', hidden: true }
]const createRouter = () => new Router({mode: 'history', // require service supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes
})const router = createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter = createRouter()router.matcher = newRouter.matcher // reset router
}export default router

说明：

配置路由的 mode 为 history，这个根据个人喜好，需要注意的是，如果配置成 history 模式的话，部署项目的时候需要在服务器进行配置
删除不用的路由，修改路由的 meta 字段，其中 title 为展示在浏览器标题文字，以及面包屑、侧边栏上的文字；icon 为图标，我们可以使用 vue-admin-template 的图标，也可以使用 element-UI的图标，也可以使用第三方图标

vue-admin-template 图标：https://panjiachen.gitee.io/vue-element-admin/#/icon/index
element-UI图标：https://element.eleme.cn/#/zh-CN/component/icon
阿里巴巴矢量图标库：https://www.iconfont.cn/

效果如下：

4、修改@/main.js将语言改为中文

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

说明：

如果不进行修改的话，Element-UI的组件中的文字是以英文显示的

5、修改@/utils/request.js中的相应拦截

    // ...if (res.code !== 20000 && res.code !== 0) {Message({message: res.msg || '网络忙，请稍后再试',type: 'error',duration: 5 * 1000})// ...

说明：

因为我们自己写的接口的返回值中 code 为0表示请求成功
保留 res.code !== 20000 是因为我们还需要用 vue-admin-template 的登录功能

6、在vue.config.js中配置代理

  // ...devServer: {port: port,open: true,overlay: {warnings: false,errors: true},before: require('./mock/mock-server.js'),proxy: {'/api/v1': {target: process.env.VUE_APP_LOCAL_ADDR,}}},// ...

说明：

这里代理的含义为当遇到以/api/v1开头的请求的时候，转发到process.env.VUE_APP_LOCAL_ADDR，这里 VUE_APP_LOCAL_ADDR 在的配置文件.env.development中配置（如下）

# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = '/api/v1'VUE_APP_LOCAL_ADDR = 'http://localhost:9000'

说明：

注意文件中的配置必须以VUE_APP_开头
VUE_APP_LOCAL_ADDR 为本地后端服务的地址（也就是我们的SpringBoot项目）
VUE_APP_BASE_API 为前端请求地址的前缀，在@/utils/request.js中可以找到

7、修改完vue.config.js之后要重新启动项目，这个时候，我们新建@/api/article.js封装关于文章接口的请求

import request from '@/utils/request'export function getArticleList(params) {return request({url: '/articles',method: 'get',params})
}

8、随后我们修改@/views/table/index.vue，在组件 created 的时候获取数据，进行渲染，并添加分页功能

<template><div class="app-container"><el-tablev-loading="listLoading":data="pageInfo.records"element-loading-text="加载中......"borderfithighlight-current-row><el-table-column label="标题"><template slot-scope="scope">{{ scope.row.title }}</template></el-table-column><el-table-column label="作者" width="90" align="center"><template slot-scope="scope"><span>{{ scope.row.author }}</span></template></el-table-column><el-table-column label="类型" width="50" align="center"><template slot-scope="scope">{{ scope.row.type }}</template></el-table-column><el-table-column label="分类" width="110" align="center"><template slot-scope="scope">{{ scope.row.category }}</template></el-table-column><el-table-column class-name="status-col" label="标签" width="150" align="center"><template slot-scope="scope"><el-tagv-for="(tag,index) in scope.row.tags":key="index"size="mini"type="success">{{ tag }}</el-tag></template></el-table-column><el-table-column align="center" prop="created_at" label="创建时间" width="200"><template slot-scope="scope"><i class="el-icon-time" /><span>{{ scope.row.gmtCreate }}</span></template></el-table-column><el-table-column align="center" prop="created_at" label="更新时间" width="200"><template slot-scope="scope"><i class="el-icon-time" /><span>{{ scope.row.gmtUpdate }}</span></template></el-table-column><el-table-column label="操作" align="center" width="230"><template><el-button type="primary" size="mini">删除</el-button><el-button type="primary" size="mini">修改</el-button></template></el-table-column></el-table><el-paginationbackground:hide-on-single-page="true"@current-change="handleCurrentChange":current-page="pageInfo.current":page-size="pageInfo.size"layout="total, prev, pager, next, jumper":total="pageInfo.total"></el-pagination></div>
</template><script>
import { getArticleList } from "@/api/article";export default {data() {return {pageInfo: {size: 10,current: 1,total: 0,records: [],},listLoading: true,};},created() {this.fetchData(1, 10);},methods: {fetchData(page, limit) {this.listLoading = true;getArticleList({ page, limit }).then((res) => {this.pageInfo = res.data;this.listLoading = false;});},handleCurrentChange(page) {this.fetchData(page, 10);},},
};
</script><style lang="scss" scoped>
.el-tag {margin: 0 5px;
}
.el-pagination {margin-top: 10px;
}
</style>

说明：

这里的表格组件可参考 vue-admin-template 官网，使用起来还是挺简单的
这里使用了 CSS 预处理器 SASS ，实际上就是以一种更加方便的形式来书写 CSS ，详情可以参考官网：https://www.sass.hk/

这个时候，我们切换到【文章管理】，可以查看效果

参考代码：https://gitee.com/qianyucc/QBlog2/tree/v-9.0

基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）相关推荐

基于springboot搭建的个人博客系统
源码下载地址:blog blog是基于springboot搭建的个人博客,响应式前端技术:html.css.js.jq.bootstrap 后台技术:springboot.thymeleaf.myb ...
基于SpringBoot和Vue的个人博客系统
基于SpringBoot和Vue的个人博客系统前言本期项目分享一个漫威主题的炫酷博客系统,基于SpringBoot和Vue开发的前端分离项目.博客系统分为博客前台和博客后台两部分,游客可以访问 ...
基于Spring Boot的个人博客系统的设计与实现毕业设计源码271611
目录摘要 1 绪论 1.1研究意义 1.2开发背景 1.3系统开发技术的特色 1.4论文结构与章节安排 2个人博客系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 ...
使用 ThinkJS + Vue.js 开发博客系统
编者注:ThinkJS 作为一款 Node.js 高性能企业级 Web 框架,收到了越来越多的用户的喜爱.今天我们请来了 ThinkJS 用户 @lscho 同学为我们分享他基于 ThinkJS 开发 ...
基于Spring Boot技术栈博客系统企业级前后端实战之课程导论(零)
零.说明(必读) 一.课程概述 1.1 名称 1.2 功能 1.3 技术点 1.4 目标二.核心功能 2.1 用户管理 2.2 安全设置 2.3 博客管理 2.4 评论管理 2.5 点赞管理 2.6 ...
一个 Vue + Node + MongoDB 博客系统
源码耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...
java ssm框架论文,基于SSM框架的个人博客系统(源码+论文)
需求分析使用spring+springmvc+mybatis实现一个个人博客系统,可以记录个人生活日志, 进行技术分享, 并且浏览者可以对博客进行阅览与评论本站提供了其他类型的在线个人博客网站源 ...
基于Spring Boot的个人博客系统（源码+数据库）
目录一.系统功能框架图二.开发技术三.开发环境四.页面展示 1.登录页面 2.首页 3.文章详情页面 4.文章评论页面 5.后台页面 6.后台文件编辑页面 7.后台文章管理列表页面五.文 ...
推荐一个基于Springboot+Vue的开源博客系统
简介这是一个基于Springboot2.x,vue2.x的前后端分离的开源博客系统,提供前端界面+管理界面+后台服务的整套系统源码.响应式设计,手机.平板.PC,都有良好的视觉效果! 你可以拿它 ...

基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）

简介

步骤

文章管理页面

基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）相关推荐

最新文章

热门文章