Slog50_支配vue框架初阶项目之博客网站-单页-客户端（浏览器）更新头像2
- ArthurSlog
- SLog-50
- Year·1
- Guangzhou·China
- Aug 26th 2018
要成就一番事业 既要靠本事上位 又得懂拉拢站队css
开发环境MacOS(High Sierra 10.13.5)
须要的信息和信息源：
- 统一资源定位符(URL)
- XMLHttpRequest
- vue模版语法 v-bind
- FormData
- FormData 对象的使用
- 经过AJAX提交表单和上传文件能够不使用FormData对象
- URL.createObjectURL()
开始编码
- 首先，先理一下思路：
1.用户登录、客户端（浏览器）登录 -> 2.向服务端发送一条信息，获取用户数据 -> 3.服务端处理客户端发来的数据，返回相应的数据 -> 4.客户端（浏览器）接收返回的数据 -> 5.客户端（浏览器）解析返回的数据 -> 6.客户端（浏览器）根据解析好的数据，进行业务处理 （将处理好的数据路由到相应的前端的逻辑功能） -> 7.客户端（浏览器）渲染页面
- 上一篇文章，实现个头像的更新功能，可是须要从新登录的时候，才会显示更新的图片
- 此次要作的，就是提交更新后让图片立刻更新成最新的图片
- 考虑一下具体的实现逻辑，使用 vue.js框架双向数据流的功能，能够有下面几种方式：
- 客户端（浏览器）在提交图片给服务器成功以后，同时客户端（浏览器）把提交的图片覆盖本地的图片
- 客户端（浏览器）提交图片给服务器后，从新向服务器发送请求，获取最新的图片数据，页面上渲染最新的图片数据
- 客户端（浏览器）在选择了准备传送的图片以后，提交图片给服务器以前，页面渲染最新的图片
- 选择第三种方法，咱们要在选择图片的时候，同时渲染新的图片
- 根据 vue模版语法 v-bind，使用 v-bin 绑定 图片的src，让咱们能够在 client/signup.js 里能够动态修改 图片的src 的值，正由于 vue.js框架双向数据流的特性，当在 client/signup.js 修改 图片的src 的值的时候，页面上也会同时渲染新的图片
- 更新后的完整代码
client/signup.jshtml
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 () {
//当点击登录的时候，在页面上渲染从服务端返回的数据，把其余的部分隐藏掉
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 () {
//当点击注册的时候，在页面上渲染从服务端返回的数据，把其余的部分隐藏掉
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()
}
}
})
- 更新的部分：
server/index.js前端
//data部分
data: {
imageSrc: '/image/ArthurSlog_icon.jpg'
}
//methods部分
methods: {
filesChange: function (event) {
this.image = event.target.files[0]
this.imageSrc = URL.createObjectURL(event.target.files[0])
}
}
- URL.createObjectURL()，使用这个方法生成一个 URL资源定位符赋值给图片的src，更新图片
- 同时，咱们须要更新 html文件，在html文件里使用 vue.js模版语法 v-bin
client/app.htmlvue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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="登录">
</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="12345678@qq.com">
</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="完成注册">
</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>
- 更新部分：
client/app.htmlgit
<div>
<img id="ArthurSlog_icon" v-bind:src="imageSrc" alt="ArthurSlog_icon" />
</div>
- 使用 v-bin 绑定了src的值以后，经过 imageSrc 这个对象，js文件 能够 html文件里面图片的 src的值
- 如今，打开浏览器，输入 127.0.0.1:3000/app.html，点击 signin 按钮
- 输入帐号：ArthurSlog 密码：ArthurSlog，点击登录
- 成功登录以后，点击 “选择文件” 按钮，选择一张你电脑里的图片，而后点击“打开”
- 正常执行的状况下，你会发现，你的头像已经变成了你最新选取的图片了
- 再点击 uploadfiles 按钮，观察 服务端终端，正常状况下成功接收到文件，并打印出文件信息
- 刷新页面，点击 signin 按钮
- 输入帐号：ArthurSlog 密码：ArthurSlog，点击登录
- 正常状况下，头像已经更新为你最近更改的图片了
- 至此，咱们实现了客户端头像选取后即时更新的功能。
欢迎关注个人微信公众号 ArthurSlog
若是你喜欢个人文章 欢迎点赞 留言
谢谢
相关文章
- 1. Slog42_支配vue框架初阶项目之博客网站-单页-默认头像的布局和定位
- 2. 支配vue框架初阶项目之博客网站-注册功能
- 3. 支配vue框架初阶项目之博客网站-登录功能
- 4. Slog34_支配vue框架初阶项目之博客网站-注册页面-先后端的数据交互
- 5. Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片
- 6. Slog29_支配vue框架初阶项目之博客网站-注册页面-单选按钮
- 7. Slog36_支配vue框架初阶项目之博客网站-注册页面-合并登录和注册页面
- 8. Slog30_支配vue框架初阶项目之博客网站-注册页面-选择框
- 9. Slog44_支配vue框架初阶项目之博客网站-单页-客户端与服务端上传功能关联
- 10. Slog33_支配vue框架初阶项目之博客网站-注册页面-数据关联
- 更多相关文章...
- • XSLT - 在客户端 - XSLT 教程
- • MySQL客户端和服务器端工具集 - MySQL教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Slog42_支配vue框架初阶项目之博客网站-单页-默认头像的布局和定位
- 2. 支配vue框架初阶项目之博客网站-注册功能
- 3. 支配vue框架初阶项目之博客网站-登录功能
- 4. Slog34_支配vue框架初阶项目之博客网站-注册页面-先后端的数据交互
- 5. Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片
- 6. Slog29_支配vue框架初阶项目之博客网站-注册页面-单选按钮
- 7. Slog36_支配vue框架初阶项目之博客网站-注册页面-合并登录和注册页面
- 8. Slog30_支配vue框架初阶项目之博客网站-注册页面-选择框
- 9. Slog44_支配vue框架初阶项目之博客网站-单页-客户端与服务端上传功能关联
- 10. Slog33_支配vue框架初阶项目之博客网站-注册页面-数据关联