前言
就是很多初学者在学习HTML和小程序这类编程语言的时候，往往会接触一个东西那就是账号的登录和密码的修改。今天我们先来介绍下密码的修改，因为密码修改这类操作还可以用于修改一些商品信息或者是一些网络数据等等。本篇博客采用的后台是PHP,用JAVA或PYthon的朋友可以出门右转（开玩笑），这里用的PHP很简单，大概了解下思想，也可以用其他的语言来写。
前端
请各位注意下，这里用的标签并不是HTML而是微信里面的标签，但是都大同小异，不了解微信小程序标签的同学开启传送门，这里是微信小程序开发者文档，通俗易懂。https://developers.weixin.qq.com/miniprogram/dev/component/。我设计的修改密码界面可能有点丑，还望大家不要见怪。
<view class='h2'>修改密码</view>
<view class='content'>
<form bindsubmit="formSubmit">
<view class='content_one'>
<view class='pass'>
<text>账号</text>
<input name="Username" placeholder='请输入用户名' />
</view>
<view class='pass'>
<text>原密码</text>
<input password='true'name="oldpassword" placeholder='请输入旧密码' />
</view>
<view class='pass'>
<text>新密码</text>
<input password='true' name="Password" placeholder='请输入新密码' />
</view>
</view>
<button form-type="submit" class='btn'>提交</button>
</form>
</view>
/* pages/password/password.wxss */
.h2{
width: 100%;
height: 70rpx;
background: linear-gradient(#6495ED, #00CED1);
color: #FFE4E1;
line-height: 60rpx;
text-align: center;
border-radius: 15px;
}
page{
background: #FFFFE0;
}
.content{
height:500px;
width: 300px;
margin:0px auto;
display: flex;
flex-direction: column;
}
.content_one{
width: 500px;
height: 280px;
/* background: red; */
}
input{
height: 40px;
border-bottom: 1px solid #00FA9A;
}
.pass{
width: 300px;
height: 80px;
margin-top: 30rpx;
background:#F0F8FF;
border-radius: 30rpx;
}
.btn{
width: 300px;
background: #20B2AA;
border-radius: 10px;
color:#FFF0F5;
}
交互
最最为重要的恐怕就是交互和后台数据库了，毕竟花瓶再破也是要有作用的嘛。
- 我这里要先用下md5的加密包，没有md5加密的童鞋朋友可以忽略这步，因为我的后台数据库是加密过后的，我采用的方法是通过前端的输入数据进行加密然后对后台取出来的加密数据进行比较然后再修改密码。
var util = require('../md5.js') // pages/password/password.js - 接下来我把所有的介绍都写在代码的注释里面，请各位仔细查阅。
formSubmit: function (e) {
//首先是用var函数获取input的输入信息
var oldpassword = e.detail.value.oldpassword;
var Password = e.detail.value.Password;
var Username = e.detail.value.Username;
//判断一下这个人输入没，有一个没输入就用showToast提醒他下
if (oldpassword == '' || Password == '' || Username == '') {
wx.showToast({
title: '检查输入',
icon: 'none',
duration: 1000
})
}
//接下来开始修改密码showLoading是让客户们稍等片刻
else {
wx.showLoading({
title: '网络请求中......',
})
//wx.request是微信小程序发送到后台的一种方式
wx.request({
url: "http://localhost/test5.php",//写清楚你要调用哪一个后台文件
method: 'POST',//method有两种方式，发送一般用POST，接收一般用GET
data: {//data里面的数据你把它当成一个快递，包装所有文件然后发送出去
Username:Username,
oldpassword: oldpassword,
Password: Password,
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {//当成功的时候使用success函数进行下一步
console.log(res.data);//console.log类似c语言的printf,c++的cout，python的print。主要是用来调试的，后期可以删掉。
console.log(Password)
if (res.data.error) {//res.data.error的意思是如果数据错误
wx.showToast({
icon: 'none',
duration: 2000,
})
} else {
wx.showToast({
icon: 'success',//这里用success可以在客户成功修改后弹出一个√
duration: 1000,//duration是等待，1000为1秒
success: function () {
setTimeout(function () {
wx.navigateTo({
url: '../log on/log on',//成功修改密码后我们返回登录界面（登录界面地址自行修改）
})
}, 2000)
}
})
}
}
})
}
},后台
<?php
//首先接收从前端发送过来的数据，然后给这些数据取个名字，也就是$XXX
$Username = $_POST["Username"];
$Password = $_POST["Password"];
$oldpassword = $_POST["oldpassword"];
//造连接对象
$conn = mysqli_connect("localhost", "root","root","xcx");//连接MYSQL数据库,‘后台地址，账户，密码，表名字’
if (mysqli_connect_errno())//如果连接错误，就返回数据error到前端。
{
echo "mistake: " . mysqli_connect_error();
}
//UPDATA是更新函数用来更新密码，SET用来把从前端发送过来的数据先md5加密化然后传递给accout_password，updata更新这个数据库里面的account_password
mysqli_query($conn,"UPDATE account_password SET Password=md5('$Password')
//WHERE后面的意思是当用户名和密码前后台相对照再修改密码
WHERE Username='$Username' and Password=md5('$oldpassword') ");
mysqli_close($conn);//最后关闭连接，你总不可能一直把家门打开吧。后序
本人目前是大二的小萌新，若是本文有诸多不当之处，还望多多海涵指教，谢谢。与此同时我们诚邀各方有志之士加入我们的大学生代码学习群交流：871352155（无论你会C/C++还是Java，Python还是PHP......有兴趣我们都欢迎你的加入，不过还请各位认真填写加群信息。群内目前多为大学生，打广告的先生女士就请不要步足了。我们也希望有远见卓识的前辈能为即将步入社会的初犊提出建议指引方向。）
喜欢用HTML做成礼物或者贺卡等的朋友详情请看我的B站合集https://www.bilibili.com/video/av84894004不定时更新
