背景管理系統發開發完了，就是部落格的開發了。
就以首頁為例來記錄下
首先是前端：
把部落格的頭部和尾部分離出來成單獨的元件
頭部元件：
<template>
<header>
<div class="box">
<div class="logo"><a href="/">LT's Blog</a></div>
<nav>
<ul id="starlist">
<li><a href="index">網站首頁</a></li>
<li><a href="blog">生活日記</a></li>
<li><a href="photos">我的相冊</a></li>
<li><a href="mood">心情說說</a></li>
<li><a href="about">關于我</a></li>
<li><a href="/blog_allInfo">歸檔</a></li>
<li><a href="/blog_comment">留言闆</a></li>
</ul>
<h2 id="mnavh"><span class="navicon"></span></h2>
<div class="is-search"> <i></i> </div>
<div class="search-page">
<div class="search_box">
<div class="search">
<div name="searchform" id="searchform">
<input name="keyboard" id="keyboard" v-model="keyword" class="input_text" placeholder="請輸入标題關鍵字詞" style="color: rgb(153, 153, 153);" onfocus="if(placeholder=='請輸入标題關鍵字詞'){this.style.color='#000';placeholder=''}" onblur="if(placeholder==''){this.style.color='#999';placeholder='請輸入标題關鍵字詞'}" type="text">
<input name="show" value="title" type="hidden">
<input name="tempid" value="1" type="hidden">
<input name="tbname" value="news" type="hidden">
<input name="Submit" class="input_submit" value="搜尋" @click="searchSubmit" type="submit">
</div>
</div>
</div>
</div>
<!--search end-->
</nav>
</div>
</header>
</template>
<script>
import '../assets/blog/js/jquery-3.6.0.min.js'
import '../assets/blog/js/comm.js'
import {ref} from "vue";
import { ElMessage } from "element-plus";
import {useRouter} from "vue-router";
export default {
setup() {
const keyword = ref('');
const router = useRouter();
const searchSubmit = () => {
if(keyword.value == ''){
ElMessage.error("請輸入搜尋關鍵詞")
return false;
}
if(calculatebyte(keyword.value) > 20){
ElMessage.error("搜尋關鍵詞不可大于20個字元")
return false;
}
router.push({path:"/search_list",query: {keyword:keyword.value}});
}
const calculatebyte = (sTargetStr) => {
var sTmpStr, sTmpChar;
var nOriginLen = 0;
var nStrLength = 0;
sTmpStr = new String(sTargetStr);
nOriginLen = sTmpStr.length;
for ( var i=0 ; i < nOriginLen ; i++ ) {
sTmpChar = sTmpStr.charAt(i);
if (escape(sTmpChar).length > 4) {
nStrLength += 2;
} else if (sTmpChar!='/r') {
nStrLength ++;
}
}
return nStrLength;
}
return {
searchSubmit,
keyword
};
},
};
</script> 複制
尾部元件：因為部落格沒咋用架構純css開發的，是以把css引用放在了尾部
<template>
<footer>
<div class="box">
<ul class="footer_nav">
<li><a href="https://www.zjlovelt.com/feed.xml" target="_blank">rss訂閱</a></li>
<li><a href="/blog_allInfo" target="_blank">所有文章</a></li>
<li><a href="/blog_tags" target="_blank">标簽合集</a></li>
<li><a href="https://tongji.baidu.com" target="_blank">通路統計</a></li>
</ul>
<div class="copyright">
<p>LT's blog 版權所有 </p>
<p>Copyright © <a href="https://www.zjlovelt.com/" target="_blank">www.zjlovelt.com</a> All Rights Reserved.</p>
<p>備案号：<a href="https://beian.miit.gov.cn/" target="_blank">浙ICP備18031328号-2</a><i class="ga"><img src="../assets/blog/images/ga.png" alt="公安備案号"></i>浙公網安備 暫未備案 号</p>
</div>
</div>
</footer>
<a href="#" title="傳回頂部" class="icon-top"></a>
</template>
<style>
@import "../assets/blog/css/base.css";
@import "../assets/blog/css/m.css";
</style> 複制
首頁：
<template>
<blog-head></blog-head>
<div class="clear"></div>
<div class="box">
<div class="blogs">
<ul>
<li class="blogs_list" v-for="(item,i) in newArticles" :key="i">
<a v-bind:href="'/blog_info?id=' + item.articleId" target="_blank"><em>{{ item.typeName }}</em><i><img v-bind:src="item.articleImg" alt="圖檔加載失敗"></i>
<h2>{{ item.title }}</h2>
<p>{{ item.summary }}</p>
<div class="blogs_base"><span class="blogs_time">{{item.articleDate}}</span><span class="blogs_onclick">{{item.accessNum}}</span></div>
</a>
</li>
</ul>
</div>
<aside class="rbox">
<div class="mycard">
<h2><span>世界上最甜的崽</span>小甜崽</h2>
<p>網站：ltBlog</p>
<p>郵箱：[email protected]</p>
<p>已運作：{{blogRunTime}}</p>
<img src="../assets/blog/images/wx.png" alt="微信"> </div>
<div class="isgood_news">
<h3 class="h_title">推薦文章</h3>
<ul>
<li v-for="(item,i) in statusArticles" :key="i"><a v-bind:href="'/blog_info?id=' + item.articleId" v-bind:title="item.title" target="_blank"> {{ item.title }} </a></li>
</ul>
</div>
<div class="hot_news">
<h3 class="h_title">人氣點選</h3>
<ol start="1">
<li v-for="(item,i) in hotArticles" :key="i">
<a v-bind:href="'/blog_info?id=' + item.articleId" v-bind:title="item.title" target="_blank"><p>{{ item.title }}</p></a><span>{{ item.accessNum }}</span>
</li>
</ol>
</div>
<div class="tagsclous">
<h3 class="h_title">标簽雲</h3>
<ul>
<a v-bind:href="'/blog_tags_list?keyword=' + item.name" target="_blank" v-for="(item,i) in keywords" :key="i">{{ item.name }}</a>
</ul>
</div>
<div class="tongji">
<h3 class="h_title">站點資訊</h3>
<ol class="person">
<li><a href="blog_allInfo">{{ webInfo.articleCount }} <span>博文</span></a></li>
<li><a href="photos">{{ webInfo.albumCount }} <span>相冊</span></a></li>
<li><a href="">{{ webInfo.visitCount }} <span>通路</span></a></li>
</ol>
<ul>
<li><b>上線時間</b>：2022年05月20日</li>
<li><b>網站程式</b>：SpringBoot+Vue</li>
<li><b>網站空間</b>：<a>阿裡雲伺服器</a></li>
<li class="tongji_gzh"><i><img src="../assets/blog/images/wx.png" alt="微信二維碼">掃描二維碼，加好友</i><i><img src="../assets/blog/images/wxgzh.jpg" alt="手機上檢視">手機上檢視</i></li>
</ul>
</div>
<div class="links">
<h3 class="h_title">友情連結</h3>
<ul>
<li v-for="(item,i) in friendLinks" :key="i"><a v-bind:href="item.url" target="_blank">{{ item.title }}</a></li>
</ul>
</div>
</aside>
</div>
<blog-bottom/>
</template>
<script>
import '../assets/blog/js/jquery-3.6.0.min.js'
import '../assets/blog/js/comm.js'
import BlogHead from '../components/blog_head.vue'
import BlogBottom from '../components/blog_bottom.vue'
import { useRouter } from "vue-router";
import {ref,onMounted,onDeactivated} from "vue";
import {
getArticleForIndex,
getArticleKeyWords,
getArticleWithHot,
getArticleWithStatus,
getFriendLinks,
getWebInfo
} from "../api";
export default {
name: "index",
components:{
BlogHead,BlogBottom
},
setup() {
const router = useRouter();
//首頁最新文章清單
const newArticles = ref([]);
getArticleForIndex().then((res) => {
newArticles.value = res;
});
//最熱文章
const hotArticles = ref([]);
getArticleWithHot().then((res) => {
hotArticles.value = res;
});
//站長推薦文章
const statusArticles = ref([]);
getArticleWithStatus().then((res) => {
statusArticles.value = res;
});
//标簽雲
const keywords = ref([]);
getArticleKeyWords().then((res) => {
keywords.value = res;
});
//網站資訊
const webInfo = ref({});
getWebInfo().then((res) => {
webInfo.value = res.data;
});
//友鍊清單
const friendLinks = ref([]);
getFriendLinks().then((res) => {
friendLinks.value = res;
});
const timer = ref(0)
const blogRunTime = ref()
onMounted(()=>{ //元件挂載時的生命周期執行的方法
timer.value = window.setInterval(function logname() {
let staytimeGap = new Date().getTime() - new Date('2022-05-12 12:00:00').getTime();
let stayDay = Math.floor(staytimeGap/(3600*1000*24));
let leave = staytimeGap%(3600*1000*24);
let stayHour = Math.floor(leave/(3600*1000));
let leave1 = leave%(3600*1000);
let stayMin = Math.floor(leave1/(60*1000));
let leave2 = leave1%(60*1000);
let staySec = Math.floor(leave2/1000);
blogRunTime.value = stayDay + "天" +stayHour + "時" + stayMin + "分" + staySec + "秒";
}, 1000);
})
onDeactivated(()=>{ //離開目前元件的生命周期執行的方法
window.clearInterval(timer.value);
})
return {
newArticles,
hotArticles,
statusArticles,
keywords,
webInfo,
friendLinks,
blogRunTime
};
},
};
</script> 複制
這就是完整的首頁代碼了，vue真的是很好用，遇到了很多不懂的地方好在都解決了，就很nice~~
後面就是部落格的其他頁面一個一個的開發，開發思路就是後端寫好接口，前端頁面做好再調用接口擷取資料，整個系統的開發一個月左右，利用下班後的時候做的，而且有時候有别的事耽擱也就幾天沒動過，是以實際花費的時間并不多，最後也是按時完成了~~ 5.20上線了嘻嘻，并發給了女朋友。還是有意義的，全是加班做的呀對不~
在背景開發完成的時候其實就開始申請域名了，然後是域名備案，差點來不及，好在稽核時間比預料的短，後面就是再記錄下伺服器部署相關的就over啦