博客后臺管理系統(tǒng)

• 博客后臺管理系統(tǒng)背景介紹
• 一、項目介紹
• • 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 數(shù)據(jù)可視化-ECharts
  • • 3.5.1 部分代碼展示
• 個人總結(jié)

---

博客后臺管理系統(tǒng)背景介紹

??在學(xué)校的課程開設(shè)的影響下，對前端WEB開發(fā)有著濃厚的興趣，于是在經(jīng)過了對大學(xué)前兩年專業(yè)知識的學(xué)習(xí)，并下定決心能運用所學(xué)知識進行自主網(wǎng)頁開發(fā)。為此我在學(xué)習(xí)學(xué)?；A(chǔ)課程的同時，利用課外的空閑時間去探索前端開發(fā)領(lǐng)域，對前端開發(fā)技術(shù)一點點積累學(xué)習(xí)，最后將知識點進行整合運用，產(chǎn)生了開發(fā)個人博客項目的想法。該博客后臺項目是本人在大二暑假實現(xiàn)。
????用到的技術(shù)棧：
??????前端：Element-UI + Vue2.0 + Axois + Vue-Router + 其他第三方中間件
??????后端：Node.js + Express框架
??????數(shù)據(jù)庫：MySQL
??????項目版本控制工具: Git分布式版本控制系統(tǒng)

---

項目GitHub開源鏈接：個人博客后臺管理系統(tǒng)

一、項目介紹

1.1 登錄

1.2 文章管理頁

1.3 撰寫文章頁

1.4 文章分類頁

1.5 用戶管理頁

1.6 管理員添加頁

1.7 博主個人信息頁

二、部分代碼

2.1 登錄

代碼如下：

<template><div id="login-container"><!-- 使用原生的Div+Css進行登錄頁面的樣式設(shè)計 --><div class="login"><form action="" style="height: 100%" method="post"><!-- 整個的登錄框內(nèi)容 --><div class="login-box"><!-- 登錄框標題內(nèi)容 --><div class="login-text"><h3>個人博客后臺管理</h3></div><!-- 登錄框用戶名內(nèi)容 --><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><!-- 登錄框密碼內(nèi)容 --><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><!-- 登錄框提交內(nèi)容 --><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數(shù)據(jù)列 --><el-table-column label="ID" width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template></el-table-column><!-- 文章所屬分類數(shù)據(jù)列 --><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><!-- 文章所屬副分類數(shù)據(jù)列 --><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><!-- 文章標題內(nèi)容數(shù)據(jù)列 --><el-table-column label="標題內(nèi)容" 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><!-- 文章創(chuàng)建日期數(shù)據(jù)列 --><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><!-- 文章信息編輯模態(tài)框 --><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><!-- 文章的標題內(nèi)容 --><el-form-item label="標題內(nèi)容" :label-width="formLabelWidth"><el-input v-model="form.md_content" autocomplete="off"></el-input></el-form-item></el-form><!-- 模態(tài)框的取消和確定按鈕 --><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="人生哲學(xué)" value="人生哲學(xué)"></el-option><el-option label="體育" value="體育"></el-option><el-option label="散文欣賞" value="散文欣賞"></el-option><el-option label="數(shù)據(jù)結(jié)構(gòu)" value="數(shù)據(jù)結(jié)構(gòu)"></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="標題內(nèi)容"><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="文章內(nèi)容"><el-input type="textarea" :rows="6" placeholder="請輸入內(nèi)容" v-model="sizeForm.content"></el-input></el-form-item><el-form-item label="創(chuàng)建時間"><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="文章數(shù)" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>分類名稱: {{ scope.row.tname }}</p><p>數(shù)量: {{ 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">用戶已經(jīng)存在！！</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><!-- 設(shè)置對應(yīng)的唯一的最外層標簽，進行包裹 --><div><el-table :data="userList" style="width: 100%"><!-- ID數(shù)據(jù)列 --><el-table-column label="ID" width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template></el-table-column><!-- 管理員數(shù)據(jù)列 --><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><!-- 管理員登錄密碼數(shù)據(jù)列 --><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><!-- 管理員職業(yè)數(shù)據(jù)列 --><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><!-- 管理員部分信息數(shù)據(jù)列 --><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><!-- 模態(tài)框 --><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>學(xué)校：<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><!-- 修改信息模態(tài)框，使用Element-Ui實現(xiàn) --><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="學(xué)校：" :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作為當前最主流的前端框架，給開發(fā)者提供了一套簡潔方便的代碼規(guī)范，在本項目中就是以Vue為核心框架進行網(wǎng)頁與數(shù)據(jù)的雙向綁定從而實現(xiàn)MVVM模式，大大減少了使用原生代碼開發(fā)的時間，提高了開發(fā)人員的工作效率。

3.2 Axois

??Axios時目前最流行的ajax封裝庫之一，用于很方便地實現(xiàn)ajax請求的發(fā)送。在項目中View與View-Model之間的數(shù)據(jù)交互均由使用Axois發(fā)起的ajax請求實現(xiàn)，具體的實現(xiàn)過程原理如下：在Express框架中掛載對應(yīng)的路由，網(wǎng)頁標簽進行事件綁定，當用戶觸發(fā)了事件執(zhí)行的條件進行ajax異步請求再由路由進行數(shù)據(jù)庫MySQL的數(shù)據(jù)請求通過Response向網(wǎng)頁提供得到的數(shù)據(jù)，并渲染到頁面。

3.2.1 部分代碼展示

// 使用axois發(fā)送ajax請求，并將行es6進行解構(gòu)接收數(shù)據(jù)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}})// 后端返回的結(jié)果字符串判斷if (res === 'success') {this.$message({message: '添加成功！！',type: 'success'})// 路由進行編程式跳轉(zhuǎn)this.$router.replace('/layout/article1/' + window.localStorage.getItem('username'))} else {this.$message.error('添加失敗！！')} // (二十二) 創(chuàng)建添加文章的路由，進行article表的數(shù)據(jù)更新 app.get('/article/add', (req, res) => {// 22.1 獲取url中的查詢參數(shù)const params = req.query// 22.2 設(shè)置對應(yīng)的sql語句const sql = "insert into article values(null, ?, ?, ?, ?, 1, 1, 1)"// 22.3 執(zhí)行對應(yīng)的sql語句conn.query(sql, [params.title, params.subtitle, params.md_content, params.creatdate], (err, results) => {// 22.3.1 倘若執(zhí)行過程中出現(xiàn)錯誤，將錯誤信息打印并直接停止后續(xù)代碼的執(zhí)行if (err) {console.log(err.message);return}// 22.3.2 執(zhí)行成功使用res.send()方法向客戶端響應(yīng)對應(yīng)的字符串if (results.affectedRows > 0) {res.send('success')}}) })

3.3 Vue-Router

??本項目使用Vue-cli單頁面開發(fā)模式，App.vue作為根組件，其他vue組件之間的跳轉(zhuǎn)由Vue-Router插件提供技術(shù)實現(xiàn)，即相當于Html中的a標簽進行頁面間的跳轉(zhuǎn)。

3.3.1 部分代碼展示

// (三) 創(chuàng)建對應(yīng)的Router插件的實例對象 const router = new Router({// 3.1 路由規(guī)則routes: [// 3.1.1 當用戶輸入的是'/'時,頁面重定向到管理員登錄頁面{ path: '/administrator/login', component: Login },{ path: '/', redirect: '/administrator/login' },// 3.1.2 注意下面的props屬性，用來使用路由中的動態(tài)id的傳輸(倘若子規(guī)則開啟，父規(guī)則也需要開啟){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

??第一次使用現(xiàn)有的框架進行網(wǎng)頁的開發(fā)，網(wǎng)頁的美化展示效果讓用戶舒適的用時，不缺乏實用的功能。由于是第一次使用開發(fā)過程基本是以查閱文檔進行開發(fā)為主，希望后續(xù)自己可以對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 數(shù)據(jù)可視化-ECharts

??為了讓用戶對數(shù)據(jù)查看有更直觀的感受，因此使用ECharts對部分數(shù)據(jù)進行餅狀圖的形式進行展示。

3.5.1 部分代碼展示

etEchartData() {const chart = this.$refs.datasif (chart) {const myChart = this.$echarts.init(document.getElementById('datas'))const option = {title: {text: '統(tǒng)計',subtext: '文章數(shù)',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: '人生哲學(xué)' },{ value: 1, name: '體育' },{ value: 1, name: '散文欣賞' },{ value: 1, name: '數(shù)據(jù)結(jié)構(gòu)' },{ 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();});})}

個人總結(jié)

??在學(xué)校課程開設(shè)中，慢慢對前端產(chǎn)生興趣，這次的個人博客系統(tǒng)自己做前端和后端，由于學(xué)校課程沒有需要用的技術(shù)棧，所以自學(xué)了需要的技術(shù)棧，Node.js也是自己先過了一遍再進行Vue2.0的學(xué)習(xí)，兩大技術(shù)支持學(xué)習(xí)完成后就進行項目的部署，在開發(fā)中達到使用鞏固。這次的項目讓我提升了獨立自主學(xué)習(xí)，解決困難的能力。需要的同學(xué)可以私聊我拿源碼，一起交流學(xué)習(xí)，一起進步。
??自知自身技術(shù)的局限性，在后續(xù)的學(xué)習(xí)中將不斷學(xué)習(xí)更多前端知識，并在本項目基礎(chǔ)上不斷改進完善。

總結(jié)

以上是生活随笔為你收集整理的个人博客后台管理系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。