用Django框架完成一个相对完善的一个手机商城（二）

用Django框架完成一个相对完善的一个手机商城

• 标题上一篇写了一个后台视图的代码展示，这一篇我们写一下前台视图的代码展示

首先让我们看一下前台登录注册，这里我用了一个互亿无线的一个短信接口，首先说一下这个短信前十条是免费的，有兴趣的朋友可以试一下，下面来看一下代码：

from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from django.contrib.auth.hashers import make_password, check_password
from myadmin.models import Users

# Create your views here.

# 显示登录页面
def myhome_login(request):
    # 加载页面
    return render(request,'myhome/login/login.html')

# 执行登录
def myhome_dologin(request):
    # 验证手机号 用户是否存在
    try:
        ob = Users.objects.get(phone=request.POST['phone'])
        # 验证密码
        res =  check_password(request.POST['password'],ob.password)
        if res:
            # 验证成功
            request.session['VipUser'] = {'uid':ob.id,'nikename':ob.nikename,'phone':ob.phone,'pic_url':ob.pic_url}
            return HttpResponse('<script>alert("登录成功");location.href="/";</script>')
            
    except:
        pass

    return HttpResponse('<script>alert("手机号或密码不正确");location.href="/login/";</script>')

# 退出登录
def myhome_logout(request):
    del request.session['VipUser']
    return HttpResponse('<script>alert("退出登录");location.href="/";</script>')
    


# 显示注册页面
def myhome_register(request):
    # 加载页面
    return render(request,'myhome/login/register.html')

# 执行注册
def myhome_doregister(request):
    try:
        # 接收表单注册的数据
        data = request.POST.dict()
        data.pop('csrfmiddlewaretoken')

        # 验证手机短信验证码是否正确
        msgcode = request.session['msgcode']
        if data['vcode'] == msgcode['code'] and data['phone'] == msgcode['phone']:
            # 删除表单中的 vcode
            data.pop('vcode')
            # # 验证手机号是否存在
            # res = Users.objects.filter(phone=data['phone']).count()
            # if res:
            #     # 手机号已存在
            #     return HttpResponse('<script>alert("手机号已存在");history.back(-1);</script>')
            # 密码进行加密处理
            data['password'] = make_password(data['password'], None, 'pbkdf2_sha256')

            # 执行注册 ,数据的添加
            ob = Users(**data)
            ob.save()
            return HttpResponse('<script>alert("注册成功,请登录");location.href="/login/";</script>')

        else:
            return HttpResponse('<script>alert("手机验证码错误");history.back(-1);</script>')
        
    except:
        pass

    return HttpResponse('<script>alert("注册失败,请联系管理员");location.href="/register/";</script>')


# 短信发送...
def myhome_sendMsg(request):
    import random
    # 接收手机号码
    phone = request.GET.get('phone')
    # 随机验证码
    code = str(random.randint(10000,99999))
    # 把验证码存入session
    request.session['msgcode'] = {'code':code,'phone':phone}

    # 调用方法 发送短信验证
    res = hywx_send(phone,code)
    # 返回json数据
    return JsonResponse(res)

def hywx_send(mobile,code):
    #接口类型：互亿无线触发短信接口，支持发送验证码短信、订单通知短信等。
    #账户注册：请通过该地址开通账户http://user.ihuyi.com/register.html
    #注意事项：
    #（1）调试期间，请用默认的模板进行测试，默认模板详见接口文档；
    #（2）请使用 用户名 及 APIkey来调用接口，APIkey在会员中心可以获取；
    #（3）该代码仅供接入互亿无线短信接口参考使用，客户可根据实际需要自行编写；
      
    # import urllib2
    import urllib
    import urllib.request
    import json
 
    #用户名 查看用户名请登录用户中心->验证码、通知短信->帐户及签名设置->APIID
    account  = "C38835597" 
    #密码 查看密码请登录用户中心->验证码、通知短信->帐户及签名设置->APIKEY
    password = "b51ce646656d57b3b3a6051e4aaa1a8d"
    # mobile = request.GET.get('phone')
  
    text = "您的验证码是："+code+"。请不要把验证码泄露给其他人。"
    data = {'account': account, 'password' : password, 'content': text, 'mobile':mobile,'format':'json' }
    # req = urllib.request.urlopen(
    #     url= 'http://106.ihuyi.com/webservice/sms.php?method=Submit',
    #     data= urllib.parse.urlencode(data).encode('utf-8')
    # )
    # 获取接口响应的内容
    # content = req.read()
    # res = json.loads(content.decode('utf-8'))

    res = {'code':2,'msg':'提交成功','id':'1111','yzm':code}
    return res

接下来我们看一下首页的视图代码

from django.shortcuts import render
from django.http import HttpResponse,Http404

from myadmin.models import Cates,Goods

# Create your views here.


# 首页
def myhome_index(request):

    '''
        data = [
            {
                'name':'手机',
                'sub':[
                        {'name':'魅蓝手机','goodslist':[{},{},{}]},
                        {'name':'没煮手机','goodslist':[{},{},{}]}
                    ]
            },
            {
                'name':'智能设备',
                'sub':[
                        {'name':'智能手环','goodslist':[{},{},{}]},
                        {'name':'智能厨房','goodslist':[{},{},{}]}
                    ]
            }
        ]
    '''
    # 先获取一级分类
    data = Cates.objects.filter(pid=0)
    # 在一级分类下 追加一个sub属性,
    for x in data:
        # sub属性里存放的是当前一级分类下的 二级子类
        x.sub = Cates.objects.filter(pid=x.id)


    # 分配数据
    context = {'navdata':data}

    # 加载模板
    return render(request,'myhome/index/index.html',context)

# 列表
def myhome_list(request,cid):
    # 根据cid获取当前分类对象
    ob = Cates.objects.get(id=cid)
    # 判断当前是否为一级类
    if ob.pid == 0:
        # 获取当前一级类的所有子类
        ob.sub = Cates.objects.filter(pid=ob.id)
        # 获取当前二级分类下的所有商品
        goods = []
        for x in ob.sub:
            goods += x.goods_set.all().values()
        # 把当前分类下商品追加到数据中
        ob.goods = goods
        # 分配数据
        context = {'Cateslist':ob}
    else:
        # 获取当前分类的 父级
        pob = Cates.objects.get(id=ob.pid)
        # 获取当前二级分类的 同级分类
        pob.sub = Cates.objects.filter(pid=pob.id)
        for x in pob.sub:
            if x.id == ob.id:
                # 给当前的二级类加一个标识
                x.index = True
                
        # 获取当前类下商品,不要同类的商品
        pob.goods = ob.goods_set.all()
        # 分配数据
        context = {'Cateslist':pob}



    '''
    ob
    {
        'name':'手机',
        'sub':[{'name':'魅族'},{'name':'魅蓝'}],
        'goods':[]
    }
    pob
    {
        'name':'手机',
        'sub':[{'name':'魅族'},{'name':'魅蓝'}],
        'goods':[]

    }
    '''


    # 加载模板
    return render(request,'myhome/index/list.html',context)

# 详情
def myhome_info(request):
    try:
        # 根据商品id获取商品数据
        ob = Goods.objects.get(id=request.GET.get('goodsid'))
        # 分配数据
        context = {'goods':ob}
        # 加载模板
        return render(request,'myhome/index/info.html',context)
    except:
        pass

    raise Http404('您需要的页面找不到了...')
        

购物车的视图代码

from django.shortcuts import render
from django.http import HttpResponse,Http404,JsonResponse

from myadmin.models import Cates,Goods,Cart,Users

# Create your views here.
# 购物车的添加
def myhome_cart_add(request):
    try:
        # 执行购物车的商品添加
        data = request.GET.dict()
        data['goodsid'] = Goods.objects.get(id=data['goodsid'])
        data['uid'] = Users.objects.get(id=request.session.get('VipUser')['uid'])
        # 先检测当前的商品是否已经在当前用户的购物车中
        ob = Cart.objects.filter(uid=data['uid']).filter(goodsid=data['goodsid'])
        if ob.count():
            # 存在 获取当前购物车对象
            cart = Cart.objects.get(id=ob[0].id)
            cart.num += int(data['num'])
            cart.save()
        else:
            # 不存在
            # 存入 cart模型中
            ob = Cart(**data)
            ob.save()
        return JsonResponse({'code':0,'msg':'加入购物车成功'})
    except:
        pass
    return JsonResponse({'code':1,'msg':'加入购物车失败'})


# 购物车的列表
def myhome_cart_index(request):

    # 获取当前用户的购物车数据
    VipUser = request.session.get('VipUser')
    data = Cart.objects.filter(uid=VipUser['uid'])
    # 分配数据
    context = {'cartdata':data}
    # 加载模板
    return render(request,'myhome/cart/index.html',context)


# 购物车商品的删除
def myhome_cart_del(request):
    try:
        # cartid 
        cartid = request.GET.get('cartid')
        # 获取当前购物车商品对象
        ob = Cart.objects.get(id=cartid)
        # 执行删除
        ob.delete()
        return JsonResponse({'code':0,'msg':'删除成功'})
    except:
        pass

    return JsonResponse({'code':1,'msg':'删除失败'})



# 购物车商品数量的修改
def myhome_cart_edit(request):
    try:
        cartid = request.GET.get('cartid')
        num = request.GET.get('num')
        # 根据id获取购物车对象
        ob = Cart.objects.get(id=cartid)
        ob.num = num
        ob.save()
        return JsonResponse({'code':0,'msg':'修改成功'})
    except:
        pass

    return JsonResponse({'code':1,'msg':'修改失败'})


# 购物车商品的清空
def myhome_cart_clear(request):

    return HttpResponse('myhome_cart_clear')

订单的视图代码

from django.shortcuts import render
from django.http import HttpResponse,Http404,JsonResponse

from myadmin.models import Cates,Goods,Cart,Users,Order,OrderInfo


# 订单确认页
def myhome_order_confirm(request):

    # 获取选择的购物车id
    cartidstr = request.GET.get('cartids')
    cartids = cartidstr.split(',')
    
    # 把当前选择的购物车数据查询处理
    data = Cart.objects.filter(id__in=cartids)

    # 分配数据
    context = {'cartdata':data}
    
    # 加载模板
    return render(request,'myhome/order/confirm.html',context)



# 订单的创建
def myhome_order_create(request):
    # 接受数据
    data = request.POST.dict()
    data.pop('csrfmiddlewaretoken')

    # {'username': '王五', 'address': '北京市', 'cartids': '9,10', 'phone': '13701383017'}
   

    # 创建订单
    ob = Order()
    ob.uid = Users.objects.get(id=request.session.get('VipUser')['uid'])
    ob.username = data['username']
    ob.phone = data['phone']
    ob.address = data['address']
    ob.totalprice = 0
    ob.save()

    # 创建订单详情
    cartdata = Cart.objects.filter(id__in = data['cartids'].split(','))
    totalprice = 0
    for x in cartdata:
        # 创建订单详情
        obinfo = OrderInfo()
        obinfo.orderid = ob
        obinfo.goodsid = x.goodsid
        obinfo.num = x.num
        obinfo.save()
        # 计算总价
        totalprice += x.num*x.goodsid.price
        # 删除购物车中已经下单的商品
        x.delete()

    # 修改订单的总价
    ob.totalprice = totalprice
    ob.save()

    # 重定向到支付页面
    return HttpResponse('<script>alert("订单创建成功,请支付");location.href="/order/pay/?orderid='+str(ob.id)+'"</script>')


# 订单支付
def myhome_order_pay(request):
    orderid = request.GET.get('orderid')

    return HttpResponse('请支付您的订单.订单号为:'+str(orderid))

个人中心的代码

from django.shortcuts import render
from django.http import HttpResponse,Http404,JsonResponse

from myadmin.models import Cates,Goods,Cart,Users,Order,OrderInfo


# 订单确认页
def myhome_order_confirm(request):

    # 获取选择的购物车id
    cartidstr = request.GET.get('cartids')
    cartids = cartidstr.split(',')
    
    # 把当前选择的购物车数据查询处理
    data = Cart.objects.filter(id__in=cartids)

    # 分配数据
    context = {'cartdata':data}
    
    # 加载模板
    return render(request,'myhome/order/confirm.html',context)



# 订单的创建
def myhome_order_create(request):
    # 接受数据
    data = request.POST.dict()
    data.pop('csrfmiddlewaretoken')

    # {'username': '王五', 'address': '北京市', 'cartids': '9,10', 'phone': '13701383017'}
   

    # 创建订单
    ob = Order()
    ob.uid = Users.objects.get(id=request.session.get('VipUser')['uid'])
    ob.username = data['username']
    ob.phone = data['phone']
    ob.address = data['address']
    ob.totalprice = 0
    ob.save()

    # 创建订单详情
    cartdata = Cart.objects.filter(id__in = data['cartids'].split(','))
    totalprice = 0
    for x in cartdata:
        # 创建订单详情
        obinfo = OrderInfo()
        obinfo.orderid = ob
        obinfo.goodsid = x.goodsid
        obinfo.num = x.num
        obinfo.save()
        # 计算总价
        totalprice += x.num*x.goodsid.price
        # 删除购物车中已经下单的商品
        x.delete()

    # 修改订单的总价
    ob.totalprice = totalprice
    ob.save()

    # 重定向到支付页面
    return HttpResponse('<script>alert("订单创建成功,请支付");location.href="/order/pay/?orderid='+str(ob.id)+'"</script>')


# 订单支付
def myhome_order_pay(request):
    orderid = request.GET.get('orderid')

    return HttpResponse('请支付您的订单.订单号为:'+str(orderid))

这里基本上最难点的展示完了，关于所实现的界面各种前端代码我会在后面给大家一次展示