BVDN-9 用户信息修改（2）

2017-12-31 本文已影响0人邵靖隆

上节我们经过一番折腾，终于做出了改名字的页面

改名页面

但是，这个页面还不能真正的发挥作用。今天我们要让这个页面成为真正可以改你名字的页面，这就该轮到Vue出场了。

打开accounts_profile.html，做如下修改

v-text，v-model

这里边的id，v-text，v-model就是给Vue用的接口，v-text表示对Vue的变量进行输出，但是你不能修改，span标签专用。而v-model不但输出了Vue的变量，你对它的修改还会真的改动Vue里的变量。

接下来，修改accounts_profile.html，里面的{% block vuejs %}

Vue代码

代码讲解：

var vm = new Vue是创建Vue对象。有了Vue对象，网页才会活起来，就像汽车有了发动机。

el: 表示这个Vue对象要控制的地方，'#app'对应网页里的id="app"。说明我们要控制那个改名字的表格。

data: 表示Vue变量，就是上面的v-model和v-text绑定的两个变量，分别是邮箱和名字。

{{ request.user.xxxx }} Django模板，代表当前登录用户的某些信息，这里写的是邮箱和名字。保存后，我们刷新页面，可以看到

成了！

除了名字之外的其他信息，用相同的方法写

搬砖重复性工作

（汉字看着很怪对不对，这其实是日语汉字，sublime text这点挺蛋疼的，不过不会影响实际使用就是了）这里要注意一下，不同的信息，标签是不一样的。比如日期就用<input type="date">，下拉选框就用<select>和<option>。具体内容可以查询html教程：

vuejs

做好后的效果

现在，用户的信息已经显示在表格里了。我们也可以对它进行修改。但是修改之后的内容怎么保存呢？

继续打开accounts_profile.html，在表格下面添加一个按钮

@click是Vue特有的

@click=是Vue特有的接口，区别于html自带的onclick=，那么既然@click="submit"是Vue自己的接口，我们就需要在Vue里添加响应的函数submit()

添加于data下面

在data下面添加上methods，加上submit函数。

函数讲解：Vue的data不能直接发送，会带有许多多余的信息，不利于后台处理，所以我们新建一个data_to_send，把我们想要发送的部分赋值进去。

console.log(data_to_send)是将我们刚创建的data_to_send打印在浏览器后台，我们可以在浏览器里按右键，点“检查”，打开浏览器后台。

在某些浏览器叫审查元素

刷新页面，做少许修改，然后点保存修改按钮，

保存修改按钮

之后打开后台我们可以看到

成功

看到这个，说明我们之前的修改都是成功的，接下来只要把data_to_send发送到后台即可。具体怎么发送，下次再说

BVDN，傻子也能建网站