Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片
来源：SegmentFault
时间：2023-01-16 21:52:37 337浏览 收藏
本篇文章给大家分享《Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片》，覆盖了数据库的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。
- ArthurSlog
- SLog-43
- Year·1
- Guangzhou·China
- Aug 21th 2018
人生就是这样 苦乐相伴 福祸相依
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
- HTTP概述
- HTTP
- 互联网是如何工作的
- 万维网是如何工作的
- 统一资源定位符(URL)
- 什么是超链接
- 创建超链接
- AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）
- XMLHttpRequest
- Using files from web applications
开始编码
- 本篇实现 图片的上传 和 头像的修改
- 我们先梳理一下，首先要在客户端部分（浏览器端）实现文件的选择和文件的上传；在服务端实现文件的接收，重要的是接受之后，把接收到的图片替换掉 client/image 文件夹里的图片文件，这样的话，当下次打开浏览器登陆，重新向服务端拉取数据的时候，就会拉取到更新后的图像了
- 所以，我们确定了需要修改的文件分别是 服务端:serverindex.js、客户端:clientsignup.js、客户端:clientapp.html
- 我们先来更新 html 文件，在页面上增加一个上传图片的功能入口，这里我们分成两个操作：
- 点击选择按钮，弹出本地文件浏览框之后，选择我们要的图片，然后点击确认，锁定我们要的图片
- 点击上传图片，将我们锁定好的图片上传至服务器，显示上传的结果，客户端要做的事情了就到这里为止了
- 参考 vue.js官方手册
<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
- 上面的代码，说明了在使用 vue.js 框架的时候，当你想要关联到 原生DOM事件 的时候，需要做两件事情，第一就是使用 vue.js模版语法 v-on: + 事件（比如 click、change 等等，即：v-on:click、v-on:change）= "方法名（在 js 文件里实现这个方法）"，来创建一个逻辑使 html文件 和 js文件 互相关联；第二件事就是运用（运用的意思就是需要知道这个东西的原理，然后结合场景去使用） 原生DOM事件，通过这个 原生DOM事件，html文件上发生的事件所包含的信息可以传递给 js文件，js文件得到这些信息后 就可以进行加工修改，然后再次渲染到 html文件上
- 首先先观察到关键词 event，google一下“event html”：
HTML事件是HTML元素发生的“事物”。 在HTML页面中使用JavaScript时，JavaScript可以对这些事件 做出“反应”。
- 举个栗子，比如我们编写出一个按钮，然后点击之后会显示“ArthurSlog”
<button onclick="display()">My name is: </button>
<script>
function display() {
document.getElementById("demo").innerHTML = "ArthurSlog";
}
</script><p id="demo"></p>
- 上面的代码，其中事件（event）指的就是“点击按钮”这个动作，也就是“onclick”事件，当发生“onclick”事件的时候，会调用到display（）函数，从而执行display（）函数里面的逻辑，打印出 “ArthurSlog”，上面是没有使用 vue.js 框架时的语法，事件和函数的关联方式就是 onclick=“display()”，而使用 vue.js 框架时，我们需要配合 vue.js 框架使用 vue 的模版语法 “v-on”，所以上面的代码就会变成：
<button v-on:onclick="display">My name is: </button>
<script>
var signup_container = new Vue({
el: '#demo',
data: {
txt: ''
},
methods:{
display: function {
this.txt = "ArthurSlog"
}
}
})
</script><p id="demo">{{ txt }}</p>
- 原来的 onclick=“display()” 变成了 v-on:onclick="display"
- 所以，我们的 html 文件更新为：
client/app.html
<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><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" src="/image/ArthurSlog.png" alt="ArthurSlog_icon"></div>
<div>
<div>Uploading {{ image }} files...</div>
<br><input type="file" v-on:change="filesChange"></div>
<div id="signinResult">
<div v-for="(value, key) in commits">
{{ key }}: {{ value }}
</div>
</div>
</template></div>
<script src="./js/signup.js"></script>
- 其中更新的部分如下：
client/app.html
<div>
<div>Uploading {{ image }} files...</div>
<br><input type="file" v-on:change="filesChange"></div>
- 同时，我们需要更新客户端的 js文件
- 再次参考 vue.js官方手册
<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
- 仔细观察，可以发现在 js文件 里，“alert(event.target.tagName)” 通过，这个语句，js文件获取到了 html文件里的一些信息，那么这些又是些什么信息呢？google一下“event.target.tagName”，找到 Event Object 的官方说明，可以理解为 event 的属性（Properties），其中发现我们在找的 target属性，官方解释如下：
Additional attributes In addition to the common attributes shared by all <input> elements, inputs of type file also support: files A FileList object that lists every selected file. This list has no more than one member unless the multiple attribute is specified.
- 上面的话的意思是什么？首先我们知道 input 元素可以获取的类型有 值类型 和 文件类型，这两种类型拥有一些通用的属性，但是，当 input 获取的元素为 文件类型的时候，会拥有 文件类型特有的属性--文件集合属性（也就是我们要找的东西），其中，每个文件拥有的属性就是文件属性
- 结合上面对 vue.js 模版语法的分析 和 input元素、原生DOM事件（event）的了解，我们对客户端的 js文件 进行更新
client/js/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: ''
},
methods: {
filesChange: function(event) {
this.image = event.target.files[0].name
},
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()
}
}
})
- 更新的部分如下：
client/js/signup.js
filesChange: function(event) {
this.image = event.target.files[0].name
}
- 现在，打开浏览器，输入 127.0.0.1:3000/app.html，点击 signin 按钮
- 输入账号：ArthurSlog 密码：ArthurSlog，点击登陆
- 成功登陆之后，点击 “选择文件” 按钮，选择一张你电脑里的图片，然后点击“打开”
- 此时，如果正常执行，你会看到 “Uploading 你选择的图片的名称 files...”
- 至此，我们完成了第一步 “1. 点击选择按钮，弹出本地文件浏览框之后，选择我们要的图片，然后点击确认，锁定我们要的图片”。
欢迎关注我的微信公众号 ArthurSlog
如果你喜欢我的文章 欢迎点赞 留言
谢谢
今天关于《Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！
声明：本文转载于：SegmentFault 如有侵犯，请联系study_golang@163.com删除
相关阅读
更多>
-
499 收藏
-
244 收藏
-
235 收藏
-
157 收藏
-
101 收藏
最新阅读
更多>
-
278 收藏
-
126 收藏
-
414 收藏
-
320 收藏
-
247 收藏
-
149 收藏
-
392 收藏
-
268 收藏
-
162 收藏
-
349 收藏
-
363 收藏
-
345 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 515次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 499次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 484次学习
评论列表
-
- 稳重的小兔子
- 赞 ??，一直没懂这个问题，但其实工作中常常有遇到...不过今天到这，帮助很大，总算是懂了，感谢老哥分享技术贴！
- 2023-03-11 18:01:51
-
- 阔达的鞋子
- 很详细，码起来，感谢作者大大的这篇文章，我会继续支持！
- 2023-03-09 04:25:00
-
- 直率的小松鼠
- 太细致了，码起来，感谢老哥的这篇博文，我会继续支持！
- 2023-01-30 22:22:02
-
- 受伤的冬瓜
- 这篇技术贴真及时，很详细，赞 ??，码住，关注老哥了！希望老哥能多写数据库相关的文章。
- 2023-01-30 13:24:21
-
- 风中的月饼
- 这篇博文太及时了，细节满满，写的不错，已加入收藏夹了，关注up主了！希望up主能多写数据库相关的文章。
- 2023-01-24 16:35:35
-
- 忧郁的灯泡
- 这篇文章出现的刚刚好，大佬加油！
- 2023-01-24 01:14:49
-
- 难过的牛排
- 太给力了，一直没懂这个问题，但其实工作中常常有遇到...不过今天到这，帮助很大，总算是懂了，感谢博主分享文章内容！
- 2023-01-18 05:12:25