django+微信小程序

一、后台用django,前端用原生的微信小程序做完整的前后端的微信小程序。
微信小程序的前端界面:
在这里插入图片描述
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>

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;
}

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.1.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 //服务器返回的结果

二、django部分
项目目录:
在这里插入图片描述
model.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)
    @classmethod
    def 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

view.py:`
from .models import User

from django.http import HttpResponse

def 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("请求错误")

`
最后放上成品:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值