Practical article
Basic architecture of the CNode community
Components:
- The Header in the head
- Posltlist Home page list
- Article Details page of the Article
- The Sidebar Sidebar
- Userinfo User information
- Psgination paging component
Preparation: Use Header components from 0
Operations in the CMDER
- Go to directory – Initialize the project
Vue init webpack (my-project) cnode — Cnode has a series of yes or no operations for the project name.
- Into the project
cd cnode
- Install dependencies
cnpm install
- Start the project
NPM run dev now has a url, and cnode folder, also created a lot of files.
Operations in vscode
- Introduce cnode files in vscode;
- Delete SRC \ Components \HelloWorld. Vue, the HelloWorld.
- Delete the app. Vue
<img src="./assets/logo.png"> <router-view/>
As well as
#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }
Create a Header
- Here’s what the header looks like: images, lists
- Create a new component called header.vue under Component;
- There can only be one root component in the template, so there can only be one div.
– Create list ul>li*5, add href because the subtitle of the list has a link.
< the template > < div class = "header" > < img SRC = "" Alt =" "> < ul > < li > < a href =" # "> home page < / a > < / li > < li > < a href =" # "> the new < / a > < / li > < li > < a href = "#" > API < / a > < / li > < li > < a href = "#" > about < / a > < / li > < li > < a href = "#" > register < / a > < / li > < li > < a href = "#" > login < / a > < / li > < / ul > </div> </template> <script> export default{ name:"Header" } </script> <style scoped> .header{ Background - color: RGB (68,68,68); height:50px; } img{ max-width:120px; margin-left:50px; margin-top:10px; } ul{ list-style:none; float:right; margin:4px; } li{ display:inline-block; padding:10px 15px; } a{ text-decoration:none; color:#ccc; font-size: 14px; } </style>Copy the code
Introduce the Header component you just created in app.vue
<template>
<div id="app">
<Header></Header>
</div>
</template>
<script>
import Header from './components/Header'
export default {
name: 'App',
components:{
Header
}
}
</script>
Copy the code
Note: Refreshing the page at this point will cause an error because the helloWorld file introduced earlier in the router’s index.js file has not been deleted.
- Delete the logo.png file contained within assets.
- Put the corresponding image in assets and import it in the background of header. vue
<img src=".. /assets/cnodejs_light.svg" alt="">
- Set the image size below. Scoped is only valid for the current component, without scoped it is valid for the entire application. In style you can set the size, alignment and so on.
Create a PostList component
-
- Create a PostList component in components;
-
- Create a root div component in the template. Add two divs, one for slow loading and the other for normal content.
<div class="loading" v-if="isLoading"> <img SRC =".. /assets/loading.gif" > </div> <! Once the data is returned, the following div is displayed, The theme of the post, we need to post some of the data, so want to use an official API https://cnodejs.org/api/v1/topics, used to retrieve posts list -- > < div class = "posts" v - else > < ul > < li > < div class = "toobar > < span > all < / span > < span > essence < / span > < span > share < / span > < span > q&a < / span > < span > recruitment < / span > < / div > < / li > < / ul > </div> <li v-for="post in posts"> <! - image - > < img: SRC = "post. Author. Avatar_url" Alt = "" > <! - reply/view - > < span class = "allcount" > < span class = "reply_count" > {{post. Reply_count}} < / span > / {{post. Visit_count}} < / span > <! --> Post.good is true, <span :class="[{put_good:(post.good == true),put_top:(post.top == true), topiclist-tab:(post.good != true && post.top != true)}]"> <span> {{post | tabFormatter}} </span> </span> <! - the title - > < the router - link: to = "{name: 'post_content, params: {id: post id, name:post.author.loginname } }"> <span> {{post.title}} </span> </router-link> <! - the ultimate recovery time - > < span class = "last_reply" > {{post. Last_reply_at | formatDate}} < / span > < / li > < li > <! -- pagination --> <pagination @handlelist ="renderList"></pagination> </li> </ul> </div> </div> </template> <script> export default { name: "PostList", data(){ return{ isLoading:false } } } </script> <style scoped> </style>Copy the code
-
- API: cnodejs.org/api/v1/topi… Get the list of posts limit(how many posts are displayed per page) page
API parameter analysis:
- Picture: the author avatar_url
- Number of replies/views :reply_count/visit_count
- The title of the post: Title
- Filters need to be used:
- Time (post time) : last_reply_at
- Post category: top: whether the representative is the top; TAB is the partition except for top and essence; – share share; – ask questions; – job recruitment
- Install AXIOS in the new terminal to link to the API
- NPM install axios
- Import Axios from ‘Axios’ (introduced in main.js, some globally used files are in main.js
3. vue.prototype. HTTP =Axios; // To do so, use this. HTTP = Axios; // To do so, use this. HTTP =Axios; // This allows the request to be launched using this. HTTP 4. The filter for the final reply time is written in main.js because it is global.
Filter of time
Vue.filter('formatDate', function (str) { if (! STR) return "var date = new date (STR) var time = new date ().getTime() -date.getTime () If (time < 0) {return ''} else if ((time / 1000 < 30)) {return 'just'} else if (time / 1000 < 60) {return ParseInt ((time / 1000)) + 'before'} else if ((time / 60000) < 60) {return parseInt((time / 60000)) + 'before'} else if ((time / 60000) < 60) {return parseInt((time / 60000)) + 'before'} else if (parseInt((time / 60000)) + 'before'} ((time / 3600000) < 24) {return parseInt(time / 3600000) + 'hours ago'} else if ((time / 86400000) < 31) {return parseInt(time / 3600000) + 'hours ago'} else if ((time / 86400000) < 31) {return ParseInt (time / 2592000000) + '1'} else if ((time / 2592000000) < 12) {return parseInt(time / 2592000000) + '1'} else {return parseInt(time / 31536000000) + 'before'}})Copy the code
‘mock.hunger-valley.com/cnode/api/v… ‘