VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)

Time:2019-10-5

Preceding text

Top: https://segmentfault.com/a/11…
Intermediate: https://segmentfault.com/a/11…

Github address: https://github.com/ssevenk/ss…

Now all that’s left is to show it.

page

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)

There are four kinds of pages (actually four components):
Articles, gossip, collection, specific articles or gossip
Although the first three layouts are the same, their functions are slightly different, taking into account that different layouts may need to be made for different types in the future.
I still define three components
ShowBlogs、ShowEssays、ShowArticles
And the specific one
TheOne

You can see that they share a headed logo and navigation bar
So I wrote this part in.frontComponent
The rest uses routing to decide which component to show.

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)
Using nested routing

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)

Data display

This is very simple, just after the initial request for the back end to get the data

created() {
    this.getData();
  },
methods: {
getData() {
  this.$axios.get("/data/blog").then(res => {
    this.blogs = res.data;
    this.show = this.blogs;
  });
}

usev-fortakerouter-linkCirculate
Every data is onelinkYou can jump to specific content pages

<router-link class='ShowBlogs-blog'
    :to="{ name:'TheOne',params:{ kind:'blog',id:item._id }}"
    tag="li"
    v-for="item in show.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    :key="item._id"
  >
    <span>{{ item.date }}</span>
    {{ item.title }}
  </router-link>

paging

You should notice in the code above that you see something very familiar.

show.slice((currentPage-1)*pageSize,currentPage*pageSize)

This is the paging we used in the background management system.
I will not repeat it here.

search

But the search function is a little different from background management.
This time I defined ashowarray
After clicking on the search, call the function to search and store the search results inshowin
So we’ve been showing it all along.showarray

Because all three pages use search boxes
So I made the search box into a single component.
Not introduced.main.jsMake it a global component
Because we want it to exist as a sub-component of ShowBlogs, ShowEssays and ShowArticles to facilitate the invocation of methods provided by the parent component.

import mySearch from "./mySearch";

Each component is introduced once
When clicking on the search, the content in the search box is sent to the parent component and the method of the parent component is invoked.

//mySearch.vue
 methods:{
      search() {
          this.$emit('search',this.content)
      }
  }

In the parent component

<mySearch @search="searchfor"></mySearch>

methods:{
searchfor(s) {
  this.show = (this.blogs.filter(item => {
    if (item.title.includes(s)) {
      return item;
    }
  }));
}}

For each component, the color of the search box is different
Use here$route.pathTo judge
Write it in the component of the search box

VueCli+Node+mongodb Create Personal Blog (including Front Show and Background Management System) (Part II)
usepathTo decide which style to use

<input type= "text" v-model= "content": class= "classipt" placeholder= "please enter keyword search">
<button @click="search" :class="classbtn">

Specific articles or gossip

Get back-end data (strings)
callsimpleMDEThe prototype method converts it to HTML format

this.contentMarkdown=SimpleMDE.prototype.markdown(this.theOne.content)

usev-htmlShow it out

<div id='markdownArticle' v-html="contentMarkdown"></div>

Comment function

Establish input boxes for readers to comment on
Every article or chat has its owncommentsarray
Just save this new comment.

pushComment() {
  if (this.comment.name && this.comment.content) {
    var comment = {
      name: this.comment.name,
      content: this.comment.content,
      date: Math.random()
        .toString(36)
        .substr(2)
    };
    this.theOne.comments.push(comment);
    this.$axios.post(`/data/${this.kind}/${this.$route.params.id}`, {
      id: this.$route.params.id,
      title: this.theOne.title,
      content: this.theOne.content,
      comments: this.theOne.comments
    });
  }
  this.comment.name = "";
  this.comment.content = "";
}

Before saving, we define a local variable and assign the value of the input box to it.
Then put this local variable in it.
Bidirectional binding still exists if the value of the input box is stored directly.
Modify the contents of the input box, and the comments that have been saved will change as well.

Favorites

Click on Jump External Link

<li class='ShowBlogs-article'
    v-for="item in show.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    :key="item._id"
    @click="jumpTo(item.link)"
  >
  
  jumpTo(link) {
  // window. location. href = link // current window opens
  window.open(link)}

summary

So far, my personal blog project has been completed.
There are many other areas that need to be optimized, such as password authentication for managing pages, rationality and beauty of page layout, mobile responsive design, future online deployment, and so on.
But it’s also accomplished the expected goal at the beginning, and all the things we’ve learned come in handy.
Keep working hard~