微信小程序+Django—登录界面交互

最近有一个项目是做微信小程序的开发，由于也是刚刚学习了django，所以准备用django来做微信小程序的后台。
由于没有系统的学习过小程序的开发，有些坑要自己慢慢地爬，特此将自己爬过的坑记录下来。

一、微信小程序页面

getinto.wxml

<!--pages/getinto.wxml-->
<view class='container'><view class="login-icon"><image class='login-img' src='../../img/images/loginLog.jpg'></image></view><view class='login-from'><view class="inputView"><image class='namelmage' src='../../img/images/name.png'></image><label class='loginLab'>账号</label><input class='inputText' bindinput='inputName' placeholder='请输入学号' name='username' type='text'/><view class='line'></view><view class="inputView"><image class='keylmage' src='../../img/images/name.png'></image><label class='loginLab'>密码</label><input class='inputText'password="true" bindinput='inputPwd' placeholder='请输入密码' name='passwd'/></view></view><view class="login"><button class='loginbtn' type='primary ' size='{{primarysize }}'loading='{{loading}}' plain="{{plain}}"bindtap="log">登录</button><view class='info'>{{result}}</view></view></view>
</view>

这里主要是注意一下账号和密码的view标签里的bindinput和登录按钮的bindap，这是绑定js函数的一个标志。

getinto.wxss

page{height: 100%;
}
.container{height: 100%;display:flex;flex-direction: column;padding: 0;box-sizing: border-box;background-color: #f2f2f2}
.login-icon{flex: none;
}
.log-img
{width: 750rpx;
}
.login-from{margin-top: 20px;flex:auto;height: 100%;
}
.inputView{background-color: rgba(223, 205, 205, 0.767);line-height: 44px;width: 300px;}
.loginLab
{margin: 15px 15px 15px 10px;color: #545454;font-size: 14px;}
.inputText{flex: block;float:right;text-align: left;margin-right: 22px;margin-top: 11px;color: #574545;font-size: 14px;
}
.namelmage,.keylmage{margin-left: 22px;
width: 14px;
height:14px;}
.line{width: 100%;height: 1px;background-color: #cccccc;margin-top: 1px;
}
.login{width: 100%;height:auto;margin-top: 0px;margin-bottom: 0px;padding-bottom:0px; }
.loginbtn{background-color: #28d130; width: 80%;margin-top: 35px;
}.info{text-align: center;
}

getinto.js

const app = getApp()Page({data:{        //此处定义本页面中的全局变量result: '',        username: '',passwd: ''},inputName: function(e){    // 用于获取输入的账号this.setData({username: e.detail.value  //将获取到的账号赋值给username变量})},inputPwd: function (e) {      // 用于获取输入的密码this.setData({passwd: e.detail.value    //将获取到的账号赋值给passwd变量})},log: function(e){       //与服务器进行交互wx.request({url: 'http://192.168.137.1:8000/login', //获取服务器地址，此处为本地地址header:{"content-type": "application/x-www-form-urlencoded"     //使用POST方法要带上这个header},method: "POST",data: {     //向服务器发送的信息username: this.data.username,passwd: this.data.passwd},success: res => {if (res.statusCode == 200) {this.setData({result: res.data //服务器返回的结果})}}})}
})

这里有几个注意点：
1、小程序通过POST请求服务器，一般情况下记得要用header:{
“content-type”: “application/x-www-form-urlencoded” }
2、小程序使用真机调试的时候，访问localhost需要手机与电脑处在同一局域网下，并且url要用电脑的局域网ip，我的就是192.168.137.1。

二、Django

首先，这是我的项目结构目录：

models.py

from django.db import models# Create your models here.class User(models.Model):# 用户账号、要唯一userAccount = models.CharField(max_length=20, unique=True)# 密码userPasswd = models.CharField(max_length=20)# 昵称userName = models.CharField(max_length=20)# 手机号userPhone = models.CharField(max_length=20)# 地址userAdderss = models.CharField(max_length=100)# 头像路径userImg = models.CharField(max_length=150)# 等级userRank = models.IntegerField()# touken 验证值，每次登陆后都会更新userToken = models.CharField(max_length=50)@classmethoddef createuser(cls, account, passwd, name, phone, address, img, rank, token):u = cls(userAccount = account, userPasswd = passwd, userName = name, userPhone = phone, userAdderss = address,\userImg = img, userRank = rank, userToken = token)return u

构造User表，可以直接迁移到数据库中

views.py

from .models import Userfrom django.http import HttpResponsedef login(request):if request.method == "POST":username = request.POST.get('username')passwd = request.POST.get('passwd')try:user = User.objects.get(userAccount=username)if user.userPasswd != passwd:return HttpResponse("用户名或密码错误")except User.DoesNotExist as e:return HttpResponse("用户名不存在")# 登录成功print(username)print(passwd)return HttpResponse("登录成功！")else:return HttpResponse("请求错误")

此处，Django要用python manage.py runserver 0.0.0.0:8000命令来运行，小程序返回的数据可以用request.POST.get(‘username’)获取，再从数据库中获取到username的信息，信息配对成功，则登录成功。

这里主要讲了一下小程序的坑，有时间我还想写一下Django的一些学习经验。

总得来说，总算迈出了第一步，但这还只是简单的数据交互，真正的登录功能还要实现数据加密等等，路漫漫其修远兮呀！

第一次用Markdown写技术博客，还有很多功能不会，连代码高亮都没实现，希望在下次写博客之前能找到比较实用的方法吧！