基于vue-cli+element-ui+mock.js搭建的博客后台管理系统前端部分

浏览次数:1461 发表时间:3/24/2020, 16:21:07 下载次数:296

写在前面

该系统原本是知识共享平台的后台管理系统,使用的是前后端分离的架构模式。后台基于Spring、SpringMVC、MyBatis当下主流框架编写,前端使用VUE.js框架,Element框架,页面简洁大方,知识共享平台的后台管理系统已申请软件著作权。这里我将该系统前端部分抽取出来作为博客后台管理系统分享,使用了Mock.js来模拟后台数据。仅供学习参考,切勿用于商业目的。

项目启动

进入项目的根目录,输入以下命令,即可启动

cnpm install
cnpm start

或者

npm install
npm start

启动成功后打开 http://localhost:8080 即可访问,随意输入用户名与密码即可登录

在线预览:点我在线预览 (仅仅展示前端效果)

API地址:API文档

主要的功能

博客后台管理系统根据实际需求,设计并实现的功能如下:

1. 用户信息管理。记录用户在博客平台中注册过的用户信息,管理员可以对用户信息进行搜索、修改、删除、增加。其中,管理员通过系统可以指派某个用户作为某个版块的版主,协助管理员来管理该版块的文章与评论,减轻管理员的工作量。

2. 文章信息管理。记录了用户在博客平台中发表过的文章,管理员可以管理全部文章,版主可以管理自己管理的版块中的文章,两者可对文章进行查看、删除、搜索操作。值得注意的是不能进行编辑操作,编辑只能由该文章的作者在知识共享平台中进行,其他人不能修改文章内容。

3. 评论信息管理。记录了用户在博客平台中发表过的评论,管理员可以管理全部评论,版主可以管理对应版块中文章的评论,两者可对评论进行查看、删除、搜索操作。

4. 版块信息管理。记录了博客平台中的版块信息,管理员可以自行增加、删除、搜索、查看版块。同时,管理员可以为每个版块委派一个版主,协助管理员管理平台。 

展示效果

在项目开发过程中使用JAVA做后台 ,前后端完全分离 ,API文档,这里我将完整项目的效果图(原系统名称为:知识共享平台后台管理系统)展示:

1.登录,只有版主和管理员才可以登录,版主由管理员委任,所以没有注册页面


2.首页是整体概况,图表使用echart