山东大学暑期项目实训（第二周）

最新推荐文章于 2021-07-30 17:15:15 发布

cxyjy123

最新推荐文章于 2021-07-30 17:15:15 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/cxyjy123/article/details/118685407

版权

在暑期项目实训的第二周，我们完成了知识汇聚平台的前端页面框架，并开始专注于细化功能和后端连接。我负责设计了一个使用ElementUI的博客搜索页面，简化了页面构建过程。页面关键代码包括路由配置，涉及登录、首页、文章管理、用户管理和数据统计等多个模块，实现了文章列表、发表文章、博客详情等操作。

摘要由CSDN通过智能技术生成

暑期项目实训第二周（一）

（一）经过一周的学习和大家的努力，我们做的知识汇聚平台的前端页面框架也大致完成了，这周需要做的是精细各种按键的功能和跳转功能，以及解决和后端的连接问题。这两天我的工作是设计一个博客搜索的页面。借用element ui的一些好用的功能，将页面的设计简易化了。

页面设计的一部分关键代码：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import ArticleList from '@/components/ArticleList'
import CateMana from '@/components/CateMana'
import DataCharts from '@/components/DataCharts'
import PostArticle from '@/components/PostArticle'
import UserMana from '@/components/UserMana'
import BlogDetail from '@/components/BlogDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '登录',
      hidden: true,
      component: Login
    }, {
      path: '/home',
      name: '',
      component: Home,
      hidden: true
    }, {
      path: '/home',
      component: Home,
      name: '文章管理',
      iconCls: 'fa fa-file-text-o',
      children: [
        {
          path: '/articleList',
          name: '文章列表',
          component: ArticleList,
          meta: {
            keepAlive: true
          }
        }, {
          path: '/postArticle',
          name: '发表文章',
          component: PostArticle,
          meta: {
            keepAlive: false
          }
        }, {
          path: '/blogDetail',
          name: '博客详情',
          component: BlogDetail,
          hidden: true,
          meta: {
            keepAlive: false
          }
        }, {
          path: '/editBlog',
          name: '编辑博客',
          component: PostArticle,
          hidden: true,
          meta: {
            keepAlive: false
          }
        }
      ]
    }, {
      path: '/home',
      component: Home,
      name: '用户管理',
      children: [
        {
          path: '/user',
          iconCls: 'fa fa-user-o',
          name: '用户管理',
          component: UserMana
        }
      ]
    }, {
      path: '/home',
      component: Home,
      name: '栏目管理',
      children: [
        {
          path: '/cateMana',
          iconCls: 'fa fa-reorder',
          name: '栏目管理',
          component: CateMana
        }
      ]
    }, {
      path: '/home',
      component: Home,
      name: '数据统计',
      iconCls: 'fa fa-bar-chart',
      children: [
        {
          path: '/charts',
          iconCls: 'fa fa-bar-chart',
          name: '数据统计',
          component: DataCharts
        }
      ]
    }
  ]
})