Do website from scratch 11- blog development

The background management system has been developed , Is the development of Blog .

Take the home page as an example to record

First, the front end ：

Separate the head and tail of the blog into separate components

Head assembly ：

<template>
  <header>
    <div class="box">
      <div class="logo"><a href="/">LT's Blog</a></div>
      <nav>
        <ul id="starlist">
          <li><a href="index"> homepage </a></li>
          <li><a href="blog"> Life diary </a></li>
          <li><a href="photos"> My album </a></li>
          <li><a href="mood"> Talk about your mood </a></li>
          <li><a href="about"> About me </a></li>
          <li><a href="/blog_allInfo"> file </a></li>
          <li><a href="/blog_comment"> Message board </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=" Please enter the title key words " style="color: rgb(153, 153, 153);" onfocus="if(placeholder==' Please enter the title key words '){this.style.color='#000';placeholder=''}" onblur="if(placeholder==''){this.style.color='#999';placeholder=' Please enter the title key words '}" 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=" Search for " @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(" Please enter search keywords ")
        return false;
      }
      if(calculatebyte(keyword.value) > 20){
        ElMessage.error(" Search keywords cannot be greater than 20 Characters ")
        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>

Copy

Tail Unit ： Because the blog doesn't use the framework very much css Developed , So the css The reference is placed at the end

<template>
  <footer>
    <div class="box">
      <ul class="footer_nav">
        <li><a href="https://www.zjlovelt.com/feed.xml" target="_blank">rss subscribe </a></li>
        <li><a href="/blog_allInfo" target="_blank"> All articles </a></li>
        <li><a href="/blog_tags" target="_blank"> Label collection </a></li>
        <li><a href="https://tongji.baidu.com" target="_blank"> Interview Statistics </a></li>
      </ul>
      <div class="copyright">
        <p>LT's blog  copyright  </p>
        <p>Copyright  <a href="https://www.zjlovelt.com/" target="_blank">www.zjlovelt.com</a> All Rights Reserved.</p>
        <p> Record number ：<a href="https://beian.miit.gov.cn/" target="_blank"> Zhejiang ICP To prepare 18031328 Number -2</a><i class="ga"><img src="../assets/blog/images/ga.png" alt=" Public security record number "></i> Zhejiang public network security   Not filed yet   Number </p>
      </div>
    </div>
  </footer>
  <a href="#" title=" Return to the top " class="icon-top"></a>
</template>
<style>
@import "../assets/blog/css/base.css";
@import "../assets/blog/css/m.css";
</style>

Copy

home page ：

<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=" Image load failed "></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> The sweetest baby in the world </span> Sweet baby </h2>
        <p> Website ：ltBlog</p>
        <p> mailbox ：[email protected]</p>
        <p> Has run ：{{blogRunTime}}</p>
        <img src="../assets/blog/images/wx.png" alt=" WeChat "> </div>
      <div class="isgood_news">
        <h3 class="h_title"> Recommended articles </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"> Popular click </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"> Tag cloud </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"> Site information </h3>
        <ol class="person">
          <li><a href="blog_allInfo">{{ webInfo.articleCount }} <span> post </span></a></li>
          <li><a href="photos">{{ webInfo.albumCount }} <span> Photo album </span></a></li>
          <li><a href="">{{ webInfo.visitCount }} <span> visit </span></a></li>
        </ol>
        <ul>
          <li><b> On-line time </b>：2022 year 05 month 20 Japan </li>
          <li><b> Website program </b>：SpringBoot+Vue</li>
          <li><b> Website space </b>：<a> Aliyun server </a></li>
          <li class="tongji_gzh"><i><img src="../assets/blog/images/wx.png" alt=" WeChat qr code "> Scan QR code , add friends </i><i><img src="../assets/blog/images/wxgzh.jpg" alt=" Check on your phone "> Check on your phone </i></li>
        </ul>
      </div>
      <div class="links">
        <h3 class="h_title"> link </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();

      // List of the latest articles on the home page 
      const newArticles = ref([]);
      getArticleForIndex().then((res) => {
        newArticles.value = res;
      });
      // The hottest article 
      const hotArticles = ref([]);
      getArticleWithHot().then((res) => {
        hotArticles.value = res;
      });
      // The webmaster recommends articles 
      const statusArticles = ref([]);
      getArticleWithStatus().then((res) => {
        statusArticles.value = res;
      });
      // Tag cloud 
      const keywords = ref([]);
      getArticleKeyWords().then((res) => {
        keywords.value = res;
      });
      // Website information 
      const webInfo = ref({});
      getWebInfo().then((res) => {
        webInfo.value = res.data;
      });
      // Friend chain list 
      const friendLinks = ref([]);
      getFriendLinks().then((res) => {
        friendLinks.value = res;
      });

      const timer = ref(0)
      const blogRunTime = ref()
      onMounted(()=>{ // The life cycle execution method when the component is mounted 
        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 + " God " +stayHour + " when " + stayMin + " branch " + staySec + " second ";
        }, 1000);
      })
      onDeactivated(()=>{ // The method to execute away from the life cycle of the current component 
        window.clearInterval(timer.value);
      })

      return {
        newArticles,
        hotArticles,
        statusArticles,
        keywords,
        webInfo,
        friendLinks,
        blogRunTime
      };
    },
};
</script>

Copy

This is the complete homepage code ,vue It's really easy to use , I met many things I didn't understand. Fortunately, I solved them , It is very nice~~

The other pages of the blog are developed one by one , The development idea is to write interfaces at the back end , When the front page is ready, call the interface to get data , The development of the whole system took about a month , Use what you do after work , And sometimes there are other things that have been delayed for only a few days , So it doesn't take much time , Finally, it was completed on time ~~ 5.20 Online, hee hee , And sent it to his girlfriend . It makes sense , It's all overtime, right ~

When the background development is completed, the domain name application starts , Then the domain name filing , It was almost too late , Fortunately, the audit time is shorter than expected , The next step is to record the server deployment related information over La