个人博客后台管理系统
博客后臺管理系統(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS逆向之巨量星图sign签名
- 下一篇: 【前端】制作个人博客第三天