Preface
My JavaScript level is average. Well, it's quite average. Therefore, it's really a bit difficult for the latest front-end framework technology, but reality makes me face it. Therefore, learning is the only way out.
I compared N front-end frames vertically and finally chose VUE. Why? The reasons are as follows:
1.angular The future is unknown, 1.x has a high learning curve and seems to have been abandoned, while 2 has not yet been officially launched.
2. React is quite powerful, but has no contact.
3. VUE is simple, and by getting started, it is more suitable for my thinking and level.
4. vue has Chinese documentation, and I look more comfortable.
Since I decided to learn vue, the best way to learn is to practice. I accidentally saw that there is a public API for the cNodeJs.Org forum, which is so convenient. So I decided to use this public API to write a demo.
Interface introduction
This is the interface publicly provided by cNodeJs.Org. Of course, it is not just for us to use for the front-end. It can be used on various programs. The interface address is http://cnodejs.org/api. Through this page, the relevant content is introduced in detail.
The interfaces they provide are complete, which means we can create a forum like them through these interfaces.
Project plan
1. Make a list page that can read the list content of cNodeJs.
2. Make a details page, click the link on the list page, and enter the details page.
3. Use ssi technology to realize the reuse of html code. Search for ssi+shtml to learn about related content.
4. The css code is precompiled using sass.
File Directory
├─index.shtml Rendering list page
├─content.shtml Rendering details page
├─inc fragmented file
│ ├─bar.html Sidebar code
│ ├─footer.html Copyright part of the code
│ ├─head.html head area calls js and other codes
│ └─header.html page header logo and navigation code
└─res resource file
├─image
├─js
│ ├─common My code directory
│ │ ├─common.js Public execution js
│ └─ method.js custom method js
│ ├─jquery jquery source code directory
│ ├─plugins Other plugin directories
│ └─laypage layout page paging plugin
│ └─vue VUE source code directory
└─style
├─style.scss sass source file
├─style.css The compiled css file
├─base
└─scss
Download my source file https://github.com/fengcms/vue-cNodeJsOrgTest
Start writing code
First, follow the above file directory design and start writing files into it. Res is the resource directory. You can take a look at it or know what it is.
In fact, the key point is the index.shtml and content.shtml files.
Prepare the homepage list html file
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>title</title> <link rel="stylesheet" href="res/style/style.css"></head><body> <header> <h1> <a href="index.html">cnNodeJs.Org Home By FungLeo</a> </h1> <nav> <ul> <li> Navigation List</li> </ul> </nav> </header> <section> <section> <ul> <li> <i> <img src="#avatar url"> <span>Username</span> </i> <time>Posted 5 days ago</time> <a href="content.html?Link ID">Position Title</a> </li> </ul> <div></div> </section> <aside> <h3>Instructions on this page</h3> ... </aside> </section> <footer> Copyright Statement</footer> <div></div></body></html>
As mentioned above, it is the static page I wrote first. In conjunction with my css, the effect is shown in the figure below:
Please get the complete code from github
Introduce js files such as vue&jquery
<script src="res/js/jquery/jquery-2.2.3.min.js"></script><script src="res/js/vue/vue.min.js"></script><script src="res/js/common/common.js"></script>
Get data from the interface
First of all, no matter what, we have to get the data from the interface before we can continue to do it. We use jQuery to use the ajax method to take the data over.
The following code:
$(function(){ $.ajax({ type:'get', url:"http://cnodejs.org/api/v1/topics", dataType: 'json', success: function(data){ if (data.success){ console.log(data) }else{ alert(JSON.stringify(data)); } }, error: function(data){ alert(JSON.stringify(data)); } });})The code is as above. Let’s look at the browser console and the screenshot is as follows:
As shown in the figure above, we successfully obtained the data.
Analyze data
As shown in the above figure, the data contains the following content
1. Author
1. Author's avatar url
2. Author username
2. Author ID
3. Post content
4. Release time
5. Is it the essence
6. Post ID
7. Last reply time
8. Number of replies
9.Attribution tags
10. Post title
11. Whether to top it
12. Browse statistics
The data interface is as above. Of course, if you are a full-function forum, these data are useful. In my project, many of them are not used. Let’s take a look at what I need.
<li> <i> <img src="#avatar url"> <span>Username</span> </i> <time>Posted 5 days ago</time> <a href="content.html?Link ID">Posted Title</a></li>
As shown in the above code, what we need to loop includes
1. Author's avatar url
2. Author username
3. Release time
4. Post ID
5. Post title
No problem, all the content and interfaces we need are available.
Encapsulate ajax code
Although the ajax code is not long, I still feel uncomfortable. Therefore, I use the following code to encapsulate it
// ajax get json method function getJson(url,func){ $.ajax({ type:'get', url:url, dataType: 'json', success: function(data){ if (data.success){ func(data); }else{ alert("Interface call failed"); } }, error: function(data){ alert(JSON.stringify(data)); } });}As mentioned above, where needed, we only need to use the getJson(url, func) function.
Reference encapsulated code
$(function(){ var url = "http://cnodejs.org/api/v1/topics"; getJson(url,function(data){ console.log(data); });});After modifying it like this, let's take a look and see if we can print out the data we need? As shown in the figure below:
Without any problems, we still obtained the data. We are encapsulating the callback function and changing it to the following code
$(function(){ var url = "http://cnodejs.org/api/v1/topics"; getJson(url,pushDom);});function pushDom(data){ console.log(data);}OK, if there is no error, the interface data can definitely be printed out. After this operation, our code will be extremely concise and greatly increased readability. What we need to do next is to do it in the pushDom(data) function.
vue rendering code
First, we need to use vue method to write the data we want to insert in the page.
html code part
<li v-for="info in data"> <i> <img src="{{ info.author.avatar_url }}"> <span>{{ info.author.loginname }}</span> </i> <time>{{ info.create_at }}</time> <a href="content.html?{{ info.id }}">{{ info.title }}</a></li>1vue knowledge points
Looping data http://vuejs.org.cn/api/#v-for
JS Code Part
function pushDom(data){ var vm = new Vue({ el: '.list', data: data });}Let's take a look at the effect:
OK, very excited. In just a few lines of code, we successfully rendered the list with vue.
summary
1.ajax is the key to obtaining data
2. Once you understand a little bit of vue content, you can get started.
3. When building a project, the code and files must be clear and clear.
appendix
VUE official website
cNodeJs API details
Download the source code of this series of tutorials
Chapter 1 of VUEJS Practical Tutorial, Building the Basics and Rendering the List
VUEJS practical tutorial Chapter 2, fix errors and beautify time
VUEJS practical tutorial Chapter 3, using the layout plug-in to realize pagination
This article was originally written by FungLeo
First release address: http://blog.csdn.net/FungLeo/article/details/51649074
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.