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

ゝ一纸荒年。 2022-12-03 05:16 113阅读 0赞

## 简介 ##

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

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

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

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

![后台管理教程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center]

## 步骤 ##

#### 文章管理页面 ####

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

![下载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、根据提示进行登录，可以看到主界面

![登录界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 1]

![主界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 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/

效果如下：

![图标效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 3]

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的位置][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/

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

![文章管理效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 4]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/24db2436a9cb4d988d79c6818acc8f39.png
[vue-admin-template]: /images/20221123/0ea7dee8d4ce4e598670390bdba92010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a803da6e776b4d738eaf48f57ea0d556.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2df8c70e96f04910910f2cd3d801112f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/7d46dddfe99248b79667a24f3d1e13ab.png
[VUE_APP_BASE_API]: /images/20221123/3c28b28a8c2a4460857e1129fcffd570.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/8ad842fcf0c8463a86e3e29fd268c8c4.png