BVDN-6 用户信息修改
第一部分
上次我们完美地连接了登录按钮和登录页面,使整个用户账户系统变得可用,但是登录进去之后却提示未找到/accounts/profile/
个人信息修改页面
这个/accounts/profile/就是我们要做的个人信息修改页面。那么如何做出来它呢?首先,需要在url.py里面添加地址
加入了地址后就不会404了,但是随之而来的是500,我们需要写一个响应函数。打开 /main/views.py,加入accounts_profile函数
为什么和index返回同一个网页啊?别急,先把这条路走通了,然后再做修改。我们再来登录一次:
能够正常显示,说明/accounts/profile/这条路已经走通了,接下来要做的事情就是修改网页呈现的内容了(我已经偷偷的改过主页了,嘿嘿嘿)
在/main/templates里面新建一个文本文档,并改名为accounts_profile.html(同一个功能的不通文件,命名请尽量保持一致),打开它,输入如下内容
看不懂对不对?那么接下来就又到了……
Django模板小课堂
{% extends 'basemain.html' %},表示我这个网页把basemain.html认作干爹,从它那继承大部分内容,剩下的少许不同由{% block %}进行加工。
既然这里有{% block title %},{% block content %}之类的,那说明basemain.html里面也有对应的部分,不然django模板不知道怎么进行加工嘛对不对?没错,我们来看修改后的basemain.html
看到了吧,有了extends和block,在加载新的网页时,django模板就会自动进行继承和替换,生成一张完整的网页。我们来再次登录一下
这就叫“动态网页”。那么你会问了:你前前后后说了这么久,个人信息修改呢?我到现在也没法改名字啊。
正式编写修改页面
为了方便和直观,我这次只讲怎么修改姓名,其他的项目以此类推。
我们打开accounts_profile.html,进行编辑
改完之后,再次登录
好了,输入框已经有了,现在只要跟后台绑定好,就可以改名字了。
第二部分
上面我们经过一番折腾,终于做出了改名字的页面
但是,这个页面还不能真正的发挥作用。今天我们要让这个页面成为真正可以改你名字的页面,这就该轮到Vue出场了。
Vue.js
打开accounts_profile.html,做如下修改
这里边的id,v-text,v-model就是给Vue用的接口,v-text表示对Vue的变量进行输出,但是你不能修改,span标签专用。而v-model不但输出了Vue的变量,你对它的修改还会真的改动Vue里的变量。
接下来,修改accounts_profile.html,里面的{% block vuejs %}
代码讲解:
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
现在,用户的信息已经显示在表格里了。我们也可以对它进行修改。但是修改之后的内容怎么保存呢?
Vue.methods
继续打开accounts_profile.html,在表格下面添加一个按钮
@click=是Vue特有的接口,区别于html自带的onclick=,那么既然@click="submit"是Vue自己的接口,我们就需要在Vue里添加响应的函数submit()
在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里做如下修改
代码讲解:vue发送数据使用的是jquery的ajax解决方案,其标准格式为:$.post(url, data, function(r, err));
其实仔细看的话很好理解:url是你发送的地址,data是你发送的数据,function是对返回信息的解读,看发送是否成功。
但是!
ajax只能发送字符串!所以你需要先把data转换成字符串,所以才有最上面那一行data_to_send = JSON.stringify (data_to_send);
在网页的发送部分写完了之后我们还得在后台做相应的更改,让服务器处理收到的数据
修改完成,这个功能显而易见:在服务器后台终端上显示收到的数据。我们来测试一下:登录,修改个人信息,保存!
这是为什么?原来,django考虑到了安全问题,除了它规定的几个接口以外,其他的通信都禁止了。我们要解封要在basemain.html里加上这一句话
当然我们不能光写一个引入,却不在相应文件夹里放入csrf.js文件,那么这个csrf.js文件里应该写点啥内容呢?详情请参看涂伟忠大哥自强学堂里的相关内容https://code.tuweizhong.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,傻子也能建网站