python前后端开发网站_【实战演练】Python+Django网站开发系列08-JavaScript/JQuery前后端交互...

#本文欢迎转载，转载请注明出处和作者

1、修改密码

编辑mopasswd.html页面，使用magicbox快速拖拉拽出一个前端页面(主要是form表单)，然后将代码粘贴进html页面进行修改。

如果忘记了magixbox前端页面的使用，可以参考之前文章：繁星亮与鲍包包：【实战演练】Python+Django网站开发系列04-Django导航BASE页开发​zhuanlan.zhihu.com

原密码：

新密码：

确认新密码：

提交

取消

编辑views.py的函数，增加业务逻辑。

def mopasswd(request):

if request.method == 'POST' and request.POST:

oldpassword = request.POST['oldpassword']

newpassword1 = request.POST['newpassword1']

newpassword2 = request.POST['newpassword2']

username = request.session['username']

userinfo = auth.authenticate(username=username, password=oldpassword)

if userinfo and newpassword1 == newpassword2:

user = User.objects.get(username=username)

user.set_password(newpassword2)

user.save()

return render(request, 'mopasswd.html')

return render(request,'mopasswd.html')

其中，用了auth.authenticate判断了当前用户名密码认证是否通过，以及newpassword1 == newpassword2判断了2次新密码是否相同，当上述两个条件都满足，就会修改密码。

修改完成后，注销然后重新登录，使用新密码登录，测试新密码是否能够成功修改。

但是其实当前的用户体验是非常不友好的，因为无论密码修改成功与否(可能有多种因素导致不成功)，都没有任何提示，都是会刷新回返到修改用户密码界面。因此如果需要有反馈提示给用户修改失败，可以考虑两种方式：

1)直接在提交按钮或者用户名密码输入框下面，文字显示错误提示。例如两次输入的新密码不一致，或者密码不能为空。需要提前在提示未知预留一个标签，然后使用JavaScript来进行判断，然后根据不同的判断结果，进行不同的动作。

2)弹层：即在页面上面再弹一层对话框出来，提示错误情况。

下面针对两种方式的实现分开讲述。

2、JavaScript简介

JavaScript是一种脚本语言，与C语言、Python等一样有各种变量、if...else、for等语句，这里我们只针最常用的部分做一些介绍，更多详细的JavaScript教程，可参考W3School的教程：W3Schoot JavaScript 教程​www.w3school.com.cn

2.1变量

JavaScrpit的变量，需要用var声明，并且语句要用分号结束

var username;

与CSS类似，可以用#或者.来获取HTML对象，其中：

$("#XXX")是匹配id="XXX"的元素

$(".XXX")是匹配class="XXX"的元素

$("#XXX").val()是id="XXX"的元素的值，这样就可以获取特定id的标签的值了。

2.2函数

正常书写JavaScript函数，与其他语言一样，function(){}，在花括弧里面编写内容。

function functionname(){

$("#button").click()

}

但是JavaScript函数内嵌在HTML页面里面的时候，写法不一样，要在外面包一层$()

$(

function functionname(){

$("#button").click()

}

)

2.3引用

2.3.1内嵌到HTML页面

JavaScript引用方式常用的有2种，一种是直接内嵌在HTML页面里面，在页面最下方编写，但是这种方式的JavaScript会在加载HTML页面的时候，自动执行一次。

在BASE02.html的