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

最新推荐文章于 2024-06-16 09:44:58 发布

风絮_

最新推荐文章于 2024-06-16 09:44:58 发布

阅读量2.8k

点赞数 1

分类专栏：基于SpringBoot + Vue的个人博客系统文章标签： vue java spring boot

本文链接：https://blog.csdn.net/li3455277925/article/details/108349377

版权

基于SpringBoot + Vue的个人博客系统专栏收录该内容

18 篇文章 99 订阅

订阅专栏

简介

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

既然作为一款动态博客，那么后台管理是必不可少的。为了不重复造轮子，我们直接使用开源项目 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 ，安装依赖，运行程序

下载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 support
  scrollBehavior: () => ({ 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中可以找到

使用VUE_APP_BASE_API的位置

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-table
      v-loading="listLoading"
      :data="pageInfo.records"
      element-loading-text="加载中......"
      border
      fit
      highlight-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-tag
            v-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-pagination
      background
      :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

风絮_

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）

简介前面我们实现了博客系统的前台展示页面，还有留言功能没有实现，实现留言功能无非就是在后端增加留言表，对留言进行增删改查。和文章表类似，这里就不在赘述。既然作为一款动态博客，那么后台管理是必不可少的。为了不重复造轮子，我们直接使用开源项目 vue-element-admingithub: https://github.com/PanJiaChen/vue-element-admin中文文档：https://panjiachen.gitee.io/vue-element-admin-site/zh/
复制链接

扫一扫