In this chapter, the following recipes will be covered:
Web applications rarely work all by themselves. What makes them interesting is actually the fact that they enable us to communicate with the world in innovative ways that didn't exist just a few years ago.
Vue, by itself, doesn't contain any mechanism or library to make AJAX requests or open web sockets. In this chapter, we will, therefore, explore how Vue interacts with built-in mechanisms and external libraries to connect to external services.
You will start by making basic AJAX requests with the help of an external library. Then, you'll explore some common patterns with sending and getting data in forms. Finally, there are some recipes with real-world applications and how to build a RESTful client.
Axios is the recommended library for Vue for making HTTP requests. It's a very simple library, but it has some built-in features that help you in carrying out common operations. It implements a REST pattern for making requests with HTTP verbs and can also deal with concurrency (spawning multiple requests at the same time) in a function call. You can find more information at https://github.com/mzabriskie/axios.
For this recipe, you don't need any particular knowledge of Vue. We will use Axios, which itself uses JavaScript promises. If you have never heard of promises, you can have a primer at https://developers.google.com/web/fundamentals/getting-started/primers/promises.
Generally, users hate forms. While we can't do much to change that, we can make it less frustrating for them by providing relevant instructions on how to fill them in. In this recipe, we will create a form, and we will leverage HTML standards to provide the user with a nice guidance on how to complete it.
This recipe does not need previous knowledge to be completed. While we will build a form (the Sending basic AJAX requests with Axios recipe), we will fake the AJAX call and concentrate on the validation.
We will build a very simple form: one field for the username and one for the user e-mail, plus one button to submit the information.
Type in this HTML:
<div id="app">
<form @submit.prevent="vueSubmit">
<div>
<label>Name</label>
<input type="text" required>
</div>
<div>
<label>Email</label>
<input type="email" required...HTML forms are a standard way to interact with your user. You can gather their data to register within the site, make them log in, or even carry out more advanced interactions. In this recipe, you will build your first form with Vue.
This recipe is very easy, but it assumes that you already know about AJAX and you want to apply your knowledge on Vue.
Let's pretend that we have a blog, and we want to write a new post. For that, we need a form. Here is how you lay out the HTML:
<div id="app">
<h3>Write a new post</h3>
<form>
<div>
<label>Title of your post:</label>
<input type="text" v-model="title">
</div>
<div>
<label>Write your thoughts for the day</label>
<textarea v-model="body"></textarea>
</div>
<div>
<button @click.prevent="submit">Submit</button...Requests to an external service take ages from the perspective of a computer. In human terms, it would be like sending a satellite to Jupiter and waiting for it to come back to Earth. You can't be 100% sure that the travel will ever be complete and how much time will the travel actually take. Networks are notoriously flacky and it's better to come prepared in case our request does not complete successfully.
This recipe is a little complex, but, does not use advanced concepts. You are expected, nonetheless, to be familiar with using Vue.
We will be using Axios for this recipe. You can complete the Sending basic AJAX requests with Axios recipe if you are unsure of what it exactly entails.
In this recipe, we will learn about REST and how to build a REST client. To build a REST client, we will need a server that exposes a REST interface; we will build that also. Wait a minute! A whole REST server is a side note in a recipe in a book about Vue? Just follow along and you won't be disappointed.
This recipe is fairly advanced in the sense that you will need to be comfortable with the architecture of client and server and at least have heard or read about REST interfaces. You will also need to be familiar with the command line and have npm installed. You can read all about it in the Choosing a development environment recipe.
Axios will also need to be installed; read more about this in the first recipe of this chapter.
Infinite scrolling is a fine example of what you can do with Vue and AJAX. It is also quite popular and can improve interaction for some kind of content. You will build a random word generator that works with infinite scrolling.
We will use Axios. Take a look at the Sending basic AJAX requests with Axios recipe to know how to install it and its basic functionality. Other than that, you don't need to know much to follow along.
To make our app work, we will ask random words from the http://www.setgetgo.com/randomword/get.php endpoint. Every time you point the browser at this address, you will get a random word.
The whole page will consist solely of an infinite list of words. Write the following HTML:
<div id="app">
<p v-for="word in words">{{word}}</p>
</div>The list of words needs to grow as we scroll down. So we need two things: understanding when the user reaches the bottom of the page, and getting new words...
This recipe teaches you how to use interceptors to edit your request before it goes out to the Internet. This can be useful in some cases, such as when you need to supply an authorization token along with all the requests to your server or when you need a single point to edit how your API calls are performed.
This recipe uses Axios (the Sending basic AJAX requests with Axios recipe); apart from that, it will be useful to have completed the How to validate user data before sending it recipe since we will build a small form for demonstration.
In this recipe, you will build a filter for curse words for a hypothetical comment system. Suppose there's an article on our website that can potentially start a flame war:
<div id="app"> <h3>Who's better: Socrates or Plato?</h3> <p>Technically, without Plato we wouldn't have<br> much to go on when it comes to information about<br> Socrates...
Writing applications without thinking about security will inevitably lead to vulnerabilities, especially if it has to run on a web server. Cross site scripting (XSS) is among the most popular security issues nowadays; even if you are not a security expert, you should be aware of how it works and how to prevent it in a Vue application.
This recipe does not need any previous knowledge except for Axios. You can find more on Axios and how to install it in the Sending basic AJAX requests with Axios recipe.
The first thing you should do is to discover how your backend is giving you the CSRF token (more on this in the next paragraph). We will suppose that the server will place a cookie in your browser with the name, XSRF-TOKEN.
You can simulate your server, setting a cookie with the document.cookie = 'XSRF-TOKEN=abc123' command issued in the browser console (in the developer tools).
Axios automatically reads such a cookie and transmits...
© 2017 Packt Publishing Limited All Rights Reserved
