首页 > 数据库 > MySQL

Slog50_支配vue框架初阶项目之博客网站-单页-客户端（浏览器）更新头像2

来源：SegmentFault

时间：2023-01-23 15:10:38 328浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个数据库开发实战，手把手教大家学习《Slog50_支配vue框架初阶项目之博客网站-单页-客户端（浏览器）更新头像2》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

ArthurSlog
SLog-50
Year·1
Guangzhou·China
Aug 26th 2018

要成就一番事业既要靠本事上位又得懂拉拢站队

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

开始编码

首先，先理一下思路：

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.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 () {
      //当点击登陆的时候，在页面上渲染从服务端返回的数据，把其他的部分隐藏掉
      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])
    }
}