博客后台管理系统

博客后台管理系统背景介绍
一、项目介绍
- 1.1 登录
- 1.2 文章管理页
- 1.3 撰写文章页
- 1.4 文章分类页
- 1.5 用户管理页
- 1.6 管理员添加页
- 1.7 博主个人信息页
二、部分代码
- 2.1 登录
- 2.2 文章管理
- 2.3 文章撰写
- 2.4 文章分类
- 2.5 管理员添加
- 2.6 管理员信息
- 2.7 博主个人信息
三项目核心介绍
- 3.1 Vue2.0
- 3.2 Axois
- - 3.2.1 部分代码展示
- 3.3 Vue-Router
- - 3.3.1 部分代码展示
- 3.4 Element-UI
- - 3.4.1 Element-UI在Vue中的引入方式
- 3.5 数据可视化-ECharts
- - 3.5.1 部分代码展示
个人总结

博客后台管理系统背景介绍

在学校的课程开设的影响下，对前端WEB开发有着浓厚的兴趣，于是在经过了对大学前两年专业知识的学习，并下定决心能运用所学知识进行自主网页开发。为此我在学习学校基础课程的同时，利用课外的空闲时间去探索前端开发领域，对前端开发技术一点点积累学习，最后将知识点进行整合运用，产生了开发个人博客项目的想法。该博客后台项目是本人在大二暑假实现。
用到的技术栈：
前端：Element-UI + Vue2.0 + Axois + Vue-Router + 其他第三方中间件
后端：Node.js + Express框架
数据库：MySQL
项目版本控制工具: Git分布式版本控制系统

项目GitHub开源链接：个人博客后台管理系统

一、项目介绍

1.1 登录

1.2 文章管理页

1.3 撰写文章页

1.4 文章分类页

1.5 用户管理页

1.6 管理员添加页

1.7 博主个人信息页

二、部分代码

2.1 登录

代码如下：

<template><div id="login-container"><!-- 使用原生的Div+Css进行登录页面的样式设计 --><div class="login"><form action="" style="height: 100%" method="post"><!-- 整个的登录框内容 --><div class="login-box"><!-- 登录框标题内容 --><div class="login-text"><h3>个人博客后台管理</h3></div><!-- 登录框用户名内容 --><div class="login-username"><input type="text" v-model="username" name="username" @blur="login" placeholder="请输入用户名"><span class="info1" v-if="context === 'usn'"><strong>{{ info1 }}</strong></span><span class="info1" v-if="context === 'isnull'"><strong>{{ info3 }}</strong></span></div><!-- 登录框密码内容 --><div class="login-password"><input type="password" v-model="password" name="passowrd" placeholder="请输入用户密码"><span class="info2" v-if="context === 'psw'"><strong>{{ info2 }}</strong></span></div><!-- 登录框提交内容 --><div class="login-submit"><router-link :to="url"><button type="submit" id="submit" @click="login">登录</button></router-link></div></div></form></div></div>
</template>

2.2 文章管理

代码如下：

<template><div id="classify-container"><div id="search"><input type="text" placeholder="输入副分类进行搜索" v-model="searchMsg" @keyup.enter="search" /><el-button type="primary" size="mini" @click="search">搜索文章</el-button></div><el-table :data="currentList" style="width: 100%"><!-- 文章ID数据列 --><el-table-column label="ID" width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template></el-table-column><!-- 文章所属分类数据列 --><el-table-column label="分类" width="180"><template slot-scope="scope"><i class="el-icon-collection-tag"></i><span style="margin-left: 10px">{{ scope.row.title }}</span></template></el-table-column><!-- 文章所属副分类数据列 --><el-table-column label="副分类" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.subtitle }}</span></template></el-table-column><!-- 文章标题内容数据列 --><el-table-column label="标题内容" width="180"><template slot-scope="scope"><i class="el-icon-document-copy"></i><span style="margin-left: 10px">{{ scope.row.md_content }}</span></template></el-table-column><!-- 文章创建日期数据列 --><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-date"></i><span style="margin-left: 10px">{{ scope.row.creatdate }}</span></template></el-table-column><!-- 文章操作列 --><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!-- 文章信息编辑模态框 --><el-dialog title="文章信息修改" :visible.sync="dialogFormVisible"><el-form :model="form"><!-- 文章的所属分类 --><el-form-item label="分类" :label-width="formLabelWidth"><el-input v-model="form.title" autocomplete="off"></el-input></el-form-item><!-- 文章的所属副分类 --><el-form-item label="副分类" :label-width="formLabelWidth"><el-input v-model="form.subtitle" autocomplete="off"></el-input></el-form-item><!-- 文章的标题内容 --><el-form-item label="标题内容" :label-width="formLabelWidth"><el-input v-model="form.md_content" autocomplete="off"></el-input></el-form-item></el-form><!-- 模态框的取消和确定按钮 --><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="close">确 定</el-button></div></el-dialog><!-- 页面上下页操作按钮列 --><div class="operations"><!-- 上一页操作按钮 --><el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="pre"></el-button><el-button type="primary" size="mini" plain>{{ page }} / {{ pages }}</el-button><el-button type="primary" size="mini" plain>总{{ allPage}}条</el-button><!-- 下一页操作按钮 --><el-button type="primary" size="mini" @click="next" icon="el-icon-arrow-right"></el-button></div></div>
</template>

2.3 文章撰写

代码如下：

<template><div class="container"><el-form ref="form" :model="sizeForm" label-width="80px" size="mini" style="padding: 5%"><el-form-item label="主标题"><el-input v-model="sizeForm.title"></el-input></el-form-item><el-form-item label="副标题"><el-select v-model="sizeForm.subtitle" placeholder="请选择副标题类型"><el-option label="JavaWeb笔记" value="JavaWeb笔记">JavaWeb笔记</el-option><el-option label="Java笔记" value="Java笔记"></el-option><el-option label="Vue笔记" value="Vue笔记"></el-option><el-option label="人生哲学" value="人生哲学"></el-option><el-option label="体育" value="体育"></el-option><el-option label="散文欣赏" value="散文欣赏"></el-option><el-option label="数据结构" value="数据结构"></el-option><el-option label="生活点滴" value="生活点滴"></el-option><el-option label="竞赛" value="竞赛"></el-option><el-option label="算法笔记" value="算法笔记"></el-option></el-select></el-form-item><el-form-item label="标题内容"><el-input v-model="sizeForm.md_content" size="small"></el-input></el-form-item><el-form-item label="是否置顶"><el-radio-group v-model="sizeForm.resource" size="medium"><el-radio border label="是"></el-radio><el-radio border label="否"></el-radio></el-radio-group></el-form-item><el-form-item label="文章内容"><el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="sizeForm.content"></el-input></el-form-item><el-form-item label="创建时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item size="large"><el-button type="primary" @click="onSubmit">立即撰写</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template>

2.4 文章分类

<template><div id="classify-container" style="height: 100%; background: white"><div class="add-classify"><h3>添加</h3><div><div style="font-size: 16px; font-weight:600">类别:</div><input type="text" v-model="classification1" placeholder="二级类别" /></div><div><div style="font-size: 16px; font-weight:600">所属类别:</div><input type="text" v-model="classification2" placeholder="一级类别" /></div><div style="float: right"><el-button type="primary" size="mini" v-on:click="add">点击添加</el-button></div></div><div style="float: right; width: 70%"><h3>管理</h3><el-table :data="tableData" style="width: 100%" border><el-table-column label="分类名称" width="230"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.tname }}</span></template></el-table-column><el-table-column label="文章数" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>分类名称: {{ scope.row.tname }}</p><p>数量: {{ scope.row.number }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.number }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="danger" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button></template></el-table-column></el-table><!-- 页面上下页操作按钮列 --><div class="operations"><el-button type="primary" size="mini" @click="pre"><i class="el-icon-arrow-left"></i></el-button><el-button type="primary" size="mini" plain>{{ current }} / {{ pages }}</el-button><el-button type="primary" size="mini" plain>总{{ allPage }}条</el-button><el-button type="primary" size="mini" @click="next"><i class="el-icon-arrow-right"></i></el-button></div></div></div>
</template>

代码如下：

2.5 管理员添加

代码如下：

<template><div id="register-container"><div id="app"><!-- Element-UI表单标签 --><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"class="demo-ruleForm"><!-- 用户名输入框 --><el-form-item label="用户名:" prop="username"><el-input type="text" v-model="ruleForm.username" autocomplete="off" id="username" @blur="Check"></el-input><span class="information">用户已经存在！！</span></el-form-item><!-- 密码输入框 --><el-form-item label="密码:" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><!-- 确认密码输入框 --><el-form-item label="确认密码:" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><!-- 年龄输入框 --><el-form-item label="身份:" prop="position"><el-input v-model="ruleForm.position"></el-input></el-form-item><!-- 地址输入框 --><el-form-item label="住址:" prop="address"><el-input v-model="ruleForm.address"></el-input></el-form-item><!-- 操作按钮 --><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button type="danger" @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div></div>
</template>

2.6 管理员信息

代码如下：

<template><!-- 设置对应的唯一的最外层标签，进行包裹 --><div><el-table :data="userList" style="width: 100%"><!-- ID数据列 --><el-table-column label="ID" width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template></el-table-column><!-- 管理员数据列 --><el-table-column label="用户名" width="180"><template slot-scope="scope"><i class="el-icon-user"></i><span style="margin-left: 10px">{{ scope.row.username }}</span></template></el-table-column><!-- 管理员登录密码数据列 --><el-table-column label="密码" width="180"><template slot-scope="scope"><i class="el-icon-lock"></i><span style="margin-left: 10px">{{ scope.row.password }}</span></template></el-table-column><!-- 管理员职业数据列 --><el-table-column label="职位" width="180"><template slot-scope="scope"><i class="el-icon-school"></i><span style="margin-left: 10px">{{ scope.row.position }}</span></template></el-table-column><!-- 管理员部分信息数据列 --><el-table-column label="用户名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>职位: {{ scope.row.position }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.username }}</el-tag></div></el-popover></template></el-table-column><!-- 管理员操作列 --><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!-- 模态框 --><el-dialog title="管理信息修改" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="用户名：" :label-width="formLabelWidth"><el-input v-model="form.username" autocomplete="off"></el-input></el-form-item><el-form-item label="用户密码：" :label-width="formLabelWidth"><el-input v-model="form.password" autocomplete="off"></el-input></el-form-item><el-form-item label="职位：" :label-width="formLabelWidth"><el-input v-model="form.position" autocomplete="off"></el-input></el-form-item><el-form-item label="地址：" :label-width="formLabelWidth"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="close">确 定</el-button></div></el-dialog></div>
</template>

2.7 博主个人信息

代码如下：

<template><div class="manager-container"><!-- 个人信息展示布局，这里使用的是原生的DIV+CSS布局 --><div class="manager-context"><div class="content"><h4>个人主页</h4><el-button type="primary" style="height:35px; margin-top:1%; line-height:9px"@click="dialogFormVisible = true">修改信息</el-button></div><div class="content1"><span>头像:</span><img src="../assets/image6.webp" alt="blank"></div><div class="content2" style="min-height: 60px; line-height: 60px"><div>工号： <span>{{ blogerList.id }} </span></div></div><div class="content2" style="min-height: 60px; line-height: 60px; clear:both"><div>姓名：<span>{{ blogerList.name }}</span></div></div><div class="content2" style="min-height: 60px; line-height: 60px"><div>年龄：<span>{{ blogerList.age }}</span></div></div><div class="content2" style="min-height: 60px; line-height: 60px"><div>电话：<span>{{ blogerList.tel }}</span></div></div><div class="content2" style="min-height: 60px; line-height: 60px"><div>学校：<span>{{ blogerList.school }}</span></div></div><div class="content2" style="min-height: 60px; line-height: 60px"><div>地址：<span>{{ blogerList.address }}</span></div></div><div class="content2" style="min-height: 60px; line-height: 60px"><div>上次修改时间：<span>{{ blogerList.edit }}</span></div></div><!-- 修改信息模态框，使用Element-Ui实现 --><el-dialog title="个人信息修改" :visible.sync="dialogFormVisible" width="65%"><el-form :model="form"><el-form-item label="年龄：" :label-width="formLabelWidth"><el-input v-model="form.age" autocomplete="on"></el-input></el-form-item><el-form-item label="电话：" :label-width="formLabelWidth"><el-input v-model="form.tel" autocomplete="on"></el-input></el-form-item><el-form-item label="学校：" :label-width="formLabelWidth"><el-input v-model="form.school" autocomplete="on"></el-input></el-form-item><el-form-item label="地址：" :label-width="formLabelWidth"><el-input v-model="form.address" autocomplete="on"></el-input></el-form-item></el-form><!-- 页脚处的按钮，进行信息的取消或者确定 --><div slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></div></el-dialog></div></div>
</template>

三项目核心介绍

3.1 Vue2.0

Vue作为当前最主流的前端框架，给开发者提供了一套简洁方便的代码规范，在本项目中就是以Vue为核心框架进行网页与数据的双向绑定从而实现MVVM模式，大大减少了使用原生代码开发的时间，提高了开发人员的工作效率。

3.2 Axois

Axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。在项目中View与View-Model之间的数据交互均由使用Axois发起的ajax请求实现，具体的实现过程原理如下：在Express框架中挂载对应的路由，网页标签进行事件绑定，当用户触发了事件执行的条件进行ajax异步请求再由路由进行数据库MySQL的数据请求通过Response向网页提供得到的数据，并渲染到页面。

3.2.1 部分代码展示

// 使用axois发送ajax请求，并将行es6进行解构接收数据const { data: res } = await this.$http.get("/article/add", {params: {'title': this.sizeForm.title,'subtitle': this.sizeForm.subtitle,'md_content': this.sizeForm.md_content,'creatdate': date}})// 后端返回的结果字符串判断if (res === 'success') {this.$message({message: '添加成功！！',type: 'success'})// 路由进行编程式跳转this.$router.replace('/layout/article1/' + window.localStorage.getItem('username'))} else {this.$message.error('添加失败！！')}

// (二十二) 创建添加文章的路由，进行article表的数据更新
app.get('/article/add', (req, res) => {// 22.1 获取url中的查询参数const params = req.query// 22.2 设置对应的sql语句const sql = "insert into article values(null, ?, ?, ?, ?, 1, 1, 1)"// 22.3 执行对应的sql语句conn.query(sql, [params.title, params.subtitle, params.md_content, params.creatdate], (err, results) => {// 22.3.1 倘若执行过程中出现错误，将错误信息打印并直接停止后续代码的执行if (err) {console.log(err.message);return}// 22.3.2 执行成功使用res.send()方法向客户端响应对应的字符串if (results.affectedRows > 0) {res.send('success')}})
})

3.3 Vue-Router

本项目使用Vue-cli单页面开发模式，App.vue作为根组件，其他vue组件之间的跳转由Vue-Router插件提供技术实现，即相当于Html中的a标签进行页面间的跳转。

3.3.1 部分代码展示

// (三) 创建对应的Router插件的实例对象
const router = new Router({// 3.1 路由规则routes: [// 3.1.1 当用户输入的是'/'时,页面重定向到管理员登录页面{ path: '/administrator/login', component: Login },{ path: '/', redirect: '/administrator/login' },// 3.1.2 注意下面的props属性，用来使用路由中的动态id的传输(倘若子规则开启，父规则也需要开启){path: '/layout', component: Layout, children: [{ path: 'article1/:username', component: Article1 },{ path: 'userInfo', component: UserInfo },{ path: 'addAdmin', component: AddAdmin },{ path: 'article2', component: Article2 },{ path: 'classify', component: Classify },{ path: 'manager', component: Manager },{ path: 'userInfoBack', component: UserInfoBack}]},]
})

3.4 Element-UI

第一次使用现有的框架进行网页的开发，网页的美化展示效果让用户舒适的用时，不缺乏实用的功能。由于是第一次使用开发过程基本是以查阅文档进行开发为主，希望后续自己可以对Element-UI的使用运用更佳运用于心。

3.4.1 Element-UI在Vue中的引入方式

import router from './router'
import axios from 'axios'
import jquery from "jquery";Vue.prototype.$ = jquery;Vue.config.productionTip = falseaxios.defaults.baseURL = "http://localhost:8000"
Vue.prototype.$http = axiosimport ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)

3.5 数据可视化-ECharts

为了让用户对数据查看有更直观的感受，因此使用ECharts对部分数据进行饼状图的形式进行展示。

3.5.1 部分代码展示

etEchartData() {const chart = this.$refs.datasif (chart) {const myChart = this.$echarts.init(document.getElementById('datas'))const option = {title: {text: '统计',subtext: '文章数',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 10, name: 'JavaWeb笔记' },{ value: 2, name: 'Java笔记' },{ value: 1, name: 'Vue笔记' },{ value: 1, name: '人生哲学' },{ value: 1, name: '体育' },{ value: 1, name: '散文欣赏' },{ value: 1, name: '数据结构' },{ value: 13, name: '生活点滴' },{ value: 1, name: '竞赛' },{ value: 2, name: '算法笔记' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart.setOption(option)window.addEventListener("resize", function () {myChart.resize()})}this.$on('hook:destroyed', () => {window.removeEventListener("resize", function () {myChart.resize();});})}

个人总结

在学校课程开设中，慢慢对前端产生兴趣，这次的个人博客系统自己做前端和后端，由于学校课程没有需要用的技术栈，所以自学了需要的技术栈，Node.js也是自己先过了一遍再进行Vue2.0的学习，两大技术支持学习完成后就进行项目的部署，在开发中达到使用巩固。这次的项目让我提升了独立自主学习，解决困难的能力。需要的同学可以私聊我拿源码，一起交流学习，一起进步。
自知自身技术的局限性，在后续的学习中将不断学习更多前端知识，并在本项目基础上不断改进完善。

个人博客后台管理系统相关推荐

Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
使用react全家桶制作博客后台管理系统
前面的话笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统概述该项目是基于react全家桶(React.React-r ...
记——博客后台管理系统
博客后台管理系统博客后台管理系统背景介绍项目截图部分代码登录主页文章列表评论页个人总结博客后台管理系统背景介绍在学校的时候闲来无事喜欢研究研究技术,对前端开发有浓厚的兴趣,于是 ...
Vue实战狗尾草博客后台管理系统第三章
Vue实战狗尾草博客后台管理系统第三章 Vue实现狗尾草博客后台管理系统第三章本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自 ...
Vue实战狗尾草博客后台管理系统第七章
Vue实战狗尾草博客后台管理平台第七章本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...
基于Laravel开发博客应用系列 —— 构建博客后台管理系统
一个完整的博客应用不能没有后台管理系统.所以在本节中我们将继续完善博客应用 -- 开发后台管理系统. 1.创建路由在上一节十分钟创建博客项目中,已经设置过了 app/Http/routes.php, ...
个人博客-后台管理系统前台系统 api系统开发记录未完时刻更新中
目录 1 登录 2 css变量的处理 3 数据接口处理 4一个逗号引发的血案- 5再看父子组件的传值(这一条之前理解稍微有误,可以跳过) 前台博客记录如何找到其他网站的源码实现如何找到其他网站的源 ...
JavaWeb个人博客项目：手把手教你实现博客后台系统之管理员管理模块5
上一篇博文介绍了注册和登录模块,未看过的人欢迎翻我之前博文~ 接下来就进入登录成功后的主界面,这里主要实现主界面的基础布局和管理员管理模块=w= GitHub地址:https://github.com ...
JavaWeb个人博客项目：手把手教你实现博客后台系统之界面图展示1
这几天期末答辩,老师要求做一个JavaWeb项目.由于我是一个人,思来想去之后,我就去做了个人博客系统.包含前台系统和后台系统. 这里我就主要记录一下我是如何一个星期做完我的后台系统的,前台等以后有空 ...

个人博客后台管理系统