从零开始做网站11-博客开发
后台管理系统发开发完了，就是博客的开发了。
就以首页为例来记录下
image.png
首先是前端：
把博客的头部和尾部分离出来成单独的组件
头部组件：
<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>邮箱：sunonzj128@qq.com</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啦
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务