-
ArthurSlog
-
SLog-50
-
1 Year,
-
Through China,
-
Aug 26th 2018
-
GitHub
-
The nuggets home page
-
Jane books home page
-
segmentfault
Success is as much about being on top as it is about being on side
Development Environment MacOS(High Sierra 10.13.5)
Required information and information sources:
-
Uniform Resource Locator (URL)
-
XMLHttpRequest
-
Vue template syntax V-bind
-
FormData
-
The use of FormData objects
-
You can submit forms and upload files through AJAX without using FormData objects
-
URL.createObjectURL()
Start coding
- First, let’s get the idea straight:
1. User login, client (browser) login -> 2. Send a message to the server to obtain user data -> 3. The server processes the data sent by the client and returns the corresponding data -> 4. The client (browser) receives the returned data -> 5. The client (browser) parses the returned data -> 6. According to the parsed data, the client (browser) carries out business processing (routing the processed data to the corresponding front-end logic function) -> 7. The client (browser) renders the pageCopy the code-
In the last article, you can update your avatar, but only when you log in again will the updated image be displayed
-
All you need to do this time is update the image to the latest image as soon as you submit the update
-
Consider the implementation logic, using vue.js framework bidirectional data flow features, can be in the following ways:
-
After the client (browser) successfully submits the image to the server, the client (browser) overwrites the submitted image to the local image
-
After submitting the picture to the server, the client (browser) sends a request to the server again to obtain the latest picture data and render the latest picture data on the page
-
After the client (browser) selects the image to be sent, the page renders the latest image before submitting the image to the server
-
For the third method, we will render the new image while selecting the image
-
Vue template syntax v-bind, using V-bin to bind the SRC of the image, allows us to dynamically change the SRC value of the image in client/signup.js. When the SRC value of the image is changed in client/signup.js, the new image will be rendered at the same time
-
The updated complete code client/signup.js
var host = 'http://127.0.0.1:3000/';
var signup_container = new Vue({
el: '#signup-container'.data: {
name_signin: ' '.password_signin: ' '.name: ' '.password: ' '.repassword: ' '.firstname: ' '.lastname: ' '.birthday: ' '.sexs: ['male'.'female'].currentSex: 'male'.ages: ['1'.'2'.'3'.'4'.'5'.'6'.'7'.'8'.'9'.'10'.'11'.'12'.'13'.'14'.'15'.'16'.'17'.'18'].currentAge: '18'.wechart: ' '.qq: ' '.email: ' '.contury: ' '.address: ' '.phone: ' '.websize: ' '.github: ' '.bio: ' '.commits: null.pagestate: '0'.image: ' '.imageSrc: '/image/ArthurSlog_icon.jpg'
},
methods: {
uploadfiles: function () {
var xhr = new XMLHttpRequest()
var fd = new FormData()
var self = this
xhr.open('POST', host + 'uploadfiles'.true)
xhr.onload = function () {
//self.commits = xhr.responseText
self.commits = xhr.responseText
}
fd.append('myFile'.this.image)
xhr.send(fd)
},
filesChange: function (event) {
this.image = event.target.files[0]
this.imageSrc = window.URL.createObjectURL(event.target.files[0])},return_index: function () {
this.pagestate = '0'
},
signin_index: function () {
this.pagestate = '1'
},
signup_index: function () {
this.pagestate = '2'
},
signin: function () {
// When clicking login, render the data returned from the server on the page and hide the rest of the page
this.pagestate = '3'
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signin? ' + 'name=' + self.name_signin + '&password=' + self.password_signin, true)
xhr.onload = function () {
//self.commits = xhr.responseText
var myObj = JSON.parse(xhr.responseText);
self.commits = myObj
}
xhr.send()
},
addUser: function () {
// When registering, render the data returned from the server on the page and hide the rest of the page
this.pagestate = '3'
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signup? ' + 'name=' + self.name + '&password=' + self.password + '&firstname=' +
self.firstname + '&lastname=' + self.lastname + '&birthday=' + self.birthday
+ '&sex=' + self.currentSex + '&age=' + self.currentAge + '&wechart=' + self.wechart
+ '&qq=' + self.qq + '&email=' + self.email + '&contury=' + self.contury
+ '&address=' + self.address + '&phone=' + self.phone + '&websize=' + self.websize
+ '&github=' + self.github + '&bio=' + self.bio, true)
xhr.onload = function () {
self.commits = xhr.responseText
}
xhr.send()
}
}
})
Copy the code- Updated parts:
server/index.js
/ / data portion
data: {
imageSrc: '/image/ArthurSlog_icon.jpg'
}
/ / the methods section
methods: {
filesChange: function (event) {
this.image = event.target.files[0]
this.imageSrc = URL.createObjectURL(event.target.files[0])}}Copy the code-
Url.createobjecturl (), which uses this method to generate a URL resource locator assigned to the SRC of the image, updating the image
-
At the same time, we need to update the HTML file to use the vue.js template syntax V-bin in the HTML file
client/app.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<! -- Development environment version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signin_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<template class="container" v-if="pagestate === '0'">
<div>This is index's page by ArthurSlog</div>
<br>
<button v-on:click="signin_index">Signin</button>
<br>
<button v-on:click="signup_index">Signup</button>
</template>
<template id="Signin" v-else-if="pagestate === '1'">
<div>This is signin's page by ArthurSlog</div>
<p>Singin</p>
<form id="form1" v-on:submit.prevent="signin">
<br>
<div>
Account: {{ name_signin }}
<br>
<input type="text" v-model="name_signin" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password_signin }}
<br>
<input type="text" v-model="password_signin" placeholder="password">
</div>
<br>
<input type="submit" value="Login">
</form>
<br>
<button v-on:click="return_index">ReturnIndex</button>
</template>
<template id="Signup" v-else-if="pagestate === '2'">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form2" v-on:submit.prevent="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="[email protected]">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138 * * * * * * * *">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="Complete registration">
</form>
<button v-on:click="addUser">addUser</button>
<br>
<button v-on:click="return_index">ReturnIndex</button>
<br>
</template>
<template id="returnResult" v-else-if="pagestate === '3'">
<div>
<img id="ArthurSlog_icon" v-bind:src="imageSrc" alt="ArthurSlog_icon" />
</div>
<div>
<div>Uploading {{ image }} files...</div>
<br>
<input type="file" v-on:change="filesChange">
<br>
<button v-on:click="uploadfiles">uploadfiles</button>
</div>
<div id="signinResult">
<div v-for="(value, key) in commits">
{{ key }}: {{ value }}
</div>
</div>
</template>
</div>
<script src="./js/signup.js"></script>
</body>
</html>
Copy the code- Update:
client/app.html
<div>
<img id="ArthurSlog_icon" v-bind:src="imageSrc" alt="ArthurSlog_icon" />
</div>
Copy the code-
After binding the SRC value with v-bin, the js file can use the SRC value of the image in the HTML file via the imageSrc object
-
Now, open your browser, type 127.0.0.1:3000/app.html, and click the Signin button
-
Enter account: ArthurSlog Password: ArthurSlog, click login
-
Once you have logged in successfully, click the “Select File” button, select an image from your computer, and click “Open”
-
In normal execution, you will notice that your avatar has become your latest image
-
Then click uploadFiles button, observe the server terminal, under normal circumstances successfully received the file, and print out the file information
-
To refresh the page, click the Signin button
-
Enter account: ArthurSlog Password: ArthurSlog, click login
-
Normally, the avatar has been updated with your most recently changed image
-
So far, we have implemented the function of updating the client image immediately after it is selected.
Please follow my wechat account ArthurSlog