自强学堂
自强学堂:学习、分享、让你更强!
Django 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 

BVDN-6 用户信息修改

第一部分

上次我们完美地连接了登录按钮和登录页面,使整个用户账户系统变得可用,但是登录进去之后却提示未找到/accounts/profile/


革命尚未成功



个人信息修改页面

这个/accounts/profile/就是我们要做的个人信息修改页面。那么如何做出来它呢?首先,需要在url.py里面添加地址

加入地址

加入了地址后就不会404了,但是随之而来的是500,我们需要写一个响应函数。打开 /main/views.py,加入accounts_profile函数

accounts_profile

为什么和index返回同一个网页啊?别急,先把这条路走通了,然后再做修改。我们再来登录一次:

登录


成功

能够正常显示,说明/accounts/profile/这条路已经走通了,接下来要做的事情就是修改网页呈现的内容了(我已经偷偷的改过主页了,嘿嘿嘿)

在/main/templates里面新建一个文本文档,并改名为accounts_profile.html(同一个功能的不通文件,命名请尽量保持一致),打开它,输入如下内容

extends

看不懂对不对?那么接下来就又到了……

Django模板小课堂

{% extends 'basemain.html' %},表示我这个网页把basemain.html认作干爹,从它那继承大部分内容,剩下的少许不同由{% block %}进行加工。

既然这里有{% block title %},{% block content %}之类的,那说明basemain.html里面也有对应的部分,不然django模板不知道怎么进行加工嘛对不对?没错,我们来看修改后的basemain.html

block

看到了吧,有了extends和block,在加载新的网页时,django模板就会自动进行继承和替换,生成一张完整的网页。我们来再次登录一下

看!

这就叫“动态网页”。那么你会问了:你前前后后说了这么久,个人信息修改呢?我到现在也没法改名字啊。

正式编写修改页面

为了方便和直观,我这次只讲怎么修改姓名,其他的项目以此类推。

我们打开accounts_profile.html,进行编辑

table是表格的意思

改完之后,再次登录

改名输入框

好了,输入框已经有了,现在只要跟后台绑定好,就可以改名字了。

第二部分

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


改名页面

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


Vue.js

打开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教程:

https://www.runoob.com/html/html-forms.html

vuejs


做好后的效果

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

Vue.methods

继续打开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发送到后台即可。具体怎么发送,下次再说


第三部分

上回说到(怎么跟说书一样……)我们成功的把修改后的信息打印在了浏览器的后台

修改后的信息

这回我们要把这些信息发送到服务器,并保存到数据库里,实现真正的修改。


$.post(url, data, function(r, err));

浏览器想向后台发数据有很多办法,但是你既然选择了vue,就最好用ajax发送。

打开accounts_profile.html,在block vuejs里做如下修改

post数据

代码讲解:vue发送数据使用的是jquery的ajax解决方案,其标准格式为:$.post(url, data, function(r, err));

其实仔细看的话很好理解:url是你发送的地址,data是你发送的数据,function是对返回信息的解读,看发送是否成功。

但是!

ajax只能发送字符串!所以你需要先把data转换成字符串,所以才有最上面那一行data_to_send = JSON.stringify (data_to_send);

在网页的发送部分写完了之后我们还得在后台做相应的更改,让服务器处理收到的数据

加入对post的响应

修改完成,这个功能显而易见:在服务器后台终端上显示收到的数据。我们来测试一下:登录,修改个人信息,保存!

bug何其多

这是为什么?原来,django考虑到了安全问题,除了它规定的几个接口以外,其他的通信都禁止了。我们要解封要在basemain.html里加上这一句话

解禁ajax

当然我们不能光写一个引入,却不在相应文件夹里放入csrf.js文件,那么这个csrf.js文件里应该写点啥内容呢?详情请参看涂伟忠大哥自强学堂里的相关内容https://code.ziqiangxuetang.com/django/django-csrf.html

解禁了csrf之后,我们就可以畅快的发送数据了,并且在Anaconda Prompt开启的服务器后台可以收到数据

服务器后台

现在,数据已经传到后台了,接下来就把后台收到的数据存入数据库即可。

存入数据库

在views.py里的accounts_profile函数里做如下修改

收到并保存数据

代码解读:from users.model import User是引入用户账户模型,以便接下来的修改,下面的三句话,第一句是提取要修改的用户(注意get函数),第二句是改名字,第三句是保存。做完这样的修改后,我们终于可以改名字了!

感动得留下了泪水

其他数据修改方法相同,不再赘述。

我们的教程已经10章了,你此刻应该能体会到身为一个程序员的辛苦:即使是如此高集成度的模块,我们做的仅仅是一些拼接工作,仍然每一步都会遇到这样那样的bug,bug复bug,bug何其多,我生debug,万事成蹉跎。

BVDN,傻子也能建网站

自强学堂 源代码下载:https://github.com/twz915/zqxt
服务承诺:2017年03月11日到12日出现了网站不可访问,不少同学发来了邮件关心,感谢大家对自强堂Django教程的支持与厚爱。自强学堂不会关闭,我向大家承诺,我依然会坚持每天答疑,看邮件回复邮件,服务器费用已经缴纳三年,后期会努力提高服务稳定性。我也还至少会再坚持做三年,直到2020年03月12日,我愿意坚持做这件事,是因为我认为这很有意义,2015年劳动节开始写这个教程的时候,我没有想到如今,每天会有5000人来自强学堂看Django教程,我希望能帮助到更多的人。—— 2017年03月12日于北京深夜 涂伟忠