BVDN-5 用户信息修改

上一节最后返回的/accounts/profile/就是我们要做的个人信息修改页面

一、添加地址

#mysite/urls.py
path('accounts/profile/',main_views.accounts_profile),

二、添加响应函数

#main/views.py
def accounts_profile(request):
	return render(request,"accounts_profile.html")

三、新建accounts_profile.html模板

{% extends 'basemain.html' %}
{% block title %}个人信息修改{% endblock %}
{% block content %}
<h2>你好！</h2>
<div id="app">
	<table class="table table-hover form-group">
		<thead>
			<tr>
				<th>编号</th>
				<th>项目</th>
				<th>值</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<tb>0</tb>
				<tb>账户(不可改)</tb>
				<tb><span class="form-control"></span></tb>
			</tr>
			<tr>
				<tb>1</tb>
				<tb>姓名</tb>
				<tb><input type="text" class="form-control"></tb>
			</tr>
		</tbody>
</div>
{% block vuejs %}
<script type="text/javascript">
	var v-model=new vue({
		el:'#app',
		data:{
			aaa:'',
		}
	})
	</script>
{% endblock vuejs %}

{% extends ‘basemain.html’ %}，表示我这个网页把basemain.html认作干爹，从它那继承大部分内容，剩下的少许不同由{% block %}进行加工。既然这里有{% block title %}，{% block content %}之类的，那说明basemain.html里面也有对应的部分，不然django模板不知道怎么进行加工，我们来看修改后的basemain.html：

因此有了extends和block，在加载新的网页时，django模板就会自动进行继承和替换，生成一张完整的网页

四、用户信息修改

4.1修改accounts_profile.html

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

{% block vuejs %}
<script type="text/javascript">
	var vm=new vue({
		el:'#app',
		data:{
			email:'{{request.user.email}}',
			name:'{{request.user.name}}',
		}
	})
</script>
{% endblock vuejs %}

代码讲解：
var vm = new Vue是创建Vue对象。有了Vue对象，网页才会活起来，就像汽车有了发动机。el: 表示这个Vue对象要控制的地方，
'#app’对应网页里的id=“app”。说明我们要控制那个改名字的表格。
data: 表示Vue变量，就是上面的v-model和v-text绑定的两个变量，分别是邮箱和名字。
{{ request.user.xxxx }} Django模板，代表当前登录用户的某些信息，这里写的是邮箱和名字
4.3添加一个按钮

<button @click="submit" class="btn btn-primary" type="button">确认修改</button>

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

		methods:{
			submit(){
				data_to_send={
					name:this.name,
					sex:this.sex,
				}；
				console.log(data_to_send);
				data_to_send=JSON.stringify(date_to_send);
				console.log(data_to_send);
		},

函数讲解：Vue的data不能直接发送，会带有许多多余的信息，不利于后台处理，所以我们新建一个data_to_send，把我们想要发送的部分赋值进去。console.log(data_to_send)是将我们刚创建的data_to_send打印在浏览器后台

五、将修改的内容发送到服务器

$.post(url, data, function(r, err));
浏览器想向后台发数据有很多办法，但是你既然选择了vue，就最好用ajax发送。
打开accounts_profile.html，在block vuejs里做如下修改

		$.post('/accounts/profile/', 
				data_to_send,
				function(r, err){
					if(err === 'success') {
						alert('修改乙保存')
						return location.assign('/');
					}else {
						return console.log(err);
					}			
				});

代码讲解：vue发送数据使用的是jquery的ajax解决方案，其标准格式为：$.post(url, data, function(r, err));
其实仔细看的话很好理解：url是你发送的地址，data是你发送的数据，function是对返回信息的解读，看发送是否成功。
ajax只能发送字符串！所以你需要先把data转换成字符串，所以才有最上面那一行data_to_send = JSON.stringify (data_to_send);

六、服务器处理收到的数据

修改views.py如下：

import json
def accounts_profile(request):
if request.method=='POST':
    a=json.loads(request.body)
    print(a)
return render(request,"accounts_profile.html")

七、存入数据库

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

	from users.models import User
	def accounts_profile(request):
    if request.method=='POST':
        a=json.loads(request.body)
        print(a)
        b=User.objects.get(email=request.user.email)
        b.name=a['name']
        b.save()
    return render(request,"accounts_profile.html")

代码解读：
from users.model import User是引入用户账户模型，以便接下来的修改，
第一句是提取要修改的用户（注意get函数），
第二句是改名字，
第三句是保存