订单页面
在前面我们已经构建了,购物车的页面,接下来到了结算页面
1.首先,在购物车页面点击去结算按钮时,我们需要做如下动作
.前端发送生成订单的请求,点击标签内触发事件 create_order
template: <el-col :span="" class="cart-calc"><span @click="create_order">去结算</span></el-col> script,methods中:
create_order(){
// 生成订单
this.$axios.post("http://127.0.0.1:8000/orders/",{},{
headers: {
// 附带已经登录用户的jwt token 提供给后端,一定不能疏忽这个空格
'Authorization': 'JWT ' + this.token
},
responseType: "json",
}).then(response=>{
//在session中保存订单ID,便于在结算页面发送请求时带上order_id,查询订单详情
sessionStorage.order_id = response.data.order_id; // 跳转到结算页面
this.$router.push("/order") }).catch(error=>{
// 生成订单失败
alert("生成订单失败")
})
后端需要对该请求作出处理,将订单保存到mysql中,并返回对应的订单的ID值(不是订单号),但是在做订单保存之前,我们必须先创建订单的数据模型,其中模型如下所示
order.models:
订单的模型:
# Create your models here.
from django.db import models # Create your models here.
from luffy.apps.user.models import User
from luffy.apps.courses.models import Course
class Order(models.Model):
"""订单记录"""
status_choices = (
(0, '未支付'),
(1, '已支付'),
(2, '已取消'),
)
total_price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="订单总价", default=0)
order_number = models.CharField(max_length=32,verbose_name="订单号")
order_status = models.SmallIntegerField(choices=status_choices, default=0, verbose_name="订单状态")
order_desc = models.CharField(max_length=120,verbose_name="订单描述")
created_time = models.DateTimeField(verbose_name="订单生成时间", auto_now_add=True)
pay_time = models.DateTimeField(verbose_name="订单支付时间", auto_now_add=True)
user = models.ForeignKey(User, related_name='user_orders', on_delete=models.DO_NOTHING,verbose_name="用户ID")
class Meta:
db_table="ly_order"
verbose_name= "订单记录"
verbose_name_plural= "订单记录" class OrderDetail(models.Model):
"""订单详情"""
order = models.ForeignKey("Order", related_name='order_course', on_delete=models.CASCADE, verbose_name="订单ID")
course = models.ForeignKey(Course, related_name='course_order', on_delete=models.CASCADE, verbose_name="课程ID")
user = models.ForeignKey(User, null=True, related_name="course", on_delete=models.DO_NOTHING, verbose_name="用户ID")
unit_price = models.DecimalField(max_digits=8, decimal_places=2, null=True, verbose_name="课程价格") class Meta:
db_table="ly_order_detail"
verbose_name= "订单详情"
verbose_name_plural= "订单详情"
而后端的处理代码如下所示
class OrderAPIView(APIView):
def post(self,request):
# 获取用户ID
try:
user_id = request.user.id
except:
return Response({"message": "用户不存在！"})
# 自己生成一个订单号,# 结合时间戳和当前用户ID来生成，才能保证整站唯一
order_number = datetime.now().strftime("%Y%m%d%H%M%S") + "%07d" % int(user_id) + "%04d" % random.randint(0,9999)
# 从redis中获取商品信息[先获取勾选集,然后根据勾选集,到购物车中查询对应的商品价格]
redis = get_redis_connection("cart")
course_id_list = redis.smembers("cart_select_%s" % user_id)
# 计算总价格
total_price = 0
cart_info = redis.hgetall("cart_%s" % user_id) # 返回哈希数据中的键值对
for course_id,course_price in cart_info.items():
if course_id in course_id_list:
total_price += Decimal(course_price.decode())
# 创建订单数据
order = Order.objects.create(
user_id = user_id,
order_number = order_number,
order_status = 0, # 订单状态默认为未支付
order_desc = "路飞学成课程购买", # # 订单描述信息
total_price = total_price
)
# 返回响应信息给客户端
print("order",order)
print("order_type", type(order))
if order:
for course_id in course_id_list:
# 记录订单相关的课程信息到订单详情
OrderDetail.objects.create(
course_id = course_id,
order_id = order.id,
user_id = user_id,
unit_price = redis.hget("cart_%s" % user_id, course_id).decode(),
)
# 删除redis中已经生成订单的商品信息
redis.hdel("cart_%s" % user_id, course_id.decode())
redis.srem("cart_select_%s" % user_id, course_id.decode())
return Response({"order_id": order.id}, status=status.HTTP_200_OK)
else:
return Response({"message": "生成订单失败！"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
2.在1步骤完成后,前端会跳转到order页面,在加载order页面,我们需要将order页面的数据加载过来,需要发送请求
created() {
// 判断用户是否已经登陆了。
if( !this.token){
this.$router.push("/login");
}
let _this = this;
// 发起请求获取购物车中的商品信息,_this.order_id时在cart发送创建订单请求返回数据时,保存在session中的订单ID
_this.$axios.get("http://127.0.0.1:8000/orders/detail/"+_this.order_id,{
headers: {
'Authorization': 'JWT ' + _this.token
},
responseType: 'json',
}).then(response=>{
console.log("response.data",response.data)
_this.course_list = response.data.order_course;
_this.total = response.data.total_price
})
当前端发送请求后,我们需要在后端作出处理来响应请求,返回对应订单的数据
order/views
class OrderDetailAPIView(APIView):
def get(self,request,order_id):
"""显示订单中的商品信息"""
try:
order = Order.objects.get(pk=order_id)
except Order.DoesNotExist():
return Response({"message":"当前订单不存在！"},status=status.HTTP_400_BAD_REQUEST) seriazlier = OrderSerializer(instance=order)
return Response(seriazlier.data,status=status.HTTP_200_OK)
其中使用了序列化器:
from rest_framework import serializers from .models import Order,OrderDetail
from courses.models import Course
class CourseSerializer(serializers.ModelSerializer):
class Meta:
model = Course
fields = ("course_http_img","name") class OrderDetailSerializer(serializers.ModelSerializer):
course = CourseSerializer()
class Meta:
model = OrderDetail
fields = ("course","unit_price") class OrderSerializer(serializers.ModelSerializer):
order_course = OrderDetailSerializer(many=True)
class Meta:
model= Order
fields = ("id","total_price","order_course")
可以看到上面代码的序列化器中,有些字段嵌套了三层,
order_course ==> order_course = OrderDetailSerializer(many=True) ==> course = CourseSerializer()
注意:在CourseSerializer这个序列化器中,
class CourseSerializer(serializers.ModelSerializer):
class Meta:
model = Course
fields = ("course_http_img","name")
字段 course_http_img 原本是不在模型表中的,是我们自定义的一个字段,需要在对应的models中,做出定义,如下代码
courses/models:
class Course(models.Model):
..... # 自定义显示字段
def course_http_img(self):
return settings.HOST + self.course_img.url
3.前端接收到后端返回的数据,进行数据渲染即可
完整前后端代码如下:
order.vue:
<template>
<div class="cart">
<Header/>
<div class="cart-info">
<h3 class="cart-top">购物车结算 <span>共1门课程</span></h3>
<div class="cart-title">
<el-row>
<el-col :span="2"> </el-col>
<el-col :span="10">课程</el-col>
<el-col :span="8">有效期</el-col>
<el-col :span="4">价格</el-col>
</el-row>
</div>
<div class="cart-item" v-for="item in course_list" >
<el-row>
<el-col :span="2" class="checkbox"> </el-col>
<el-col :span="10" class="course-info">
<img :src="item.course.course_http_img" alt="">
<span>{{item.course.name}}</span>
</el-col>
<el-col :span="8"><span>永久有效</span></el-col>
<el-col :span="4" class="course-price">¥{{item.unit_price}}</el-col>
</el-row>
</div>
<div class="calc">
<el-row class="pay-row">
<el-col :span="4" class="pay-col"><span class="pay-text">支付方式：</span></el-col>
<el-col :span="4"><span class="alipay"><img src="../../static/images/1554167287107.png" alt=""></span></el-col>
<el-col :span="12" class="count">实付款： <span>¥{{total}}</span></el-col>
<el-col :span="4" class="cart-pay"><span >支付宝支付</span></el-col>
</el-row>
</div>
</div>
<Footer/>
</div>
</template> <script>
import Header from "./common/Header"
import Footer from "./common/Footer" export default {
name:"Order",
data(){
return {
total:0,
course_list:[],
token: localStorage.token || sessionStorage.token,
id : localStorage.id || sessionStorage.id,
order_id:sessionStorage.order_id || null,
}
}, components:{
Header,
Footer, },
methods:{ },
created() {
// 判断用户是否已经登陆了。
if( !this.token){
this.$router.push("/login");
} let _this = this;
// 发起请求获取购物车中的商品信息
_this.$axios.get("http://127.0.0.1:8000/orders/detail/"+_this.order_id,{
headers: {
'Authorization': 'JWT ' + _this.token
},
responseType: 'json',
}).then(response=>{
console.log("response.data",response.data)
_this.course_list = response.data.order_course;
_this.total = response.data.total_price })
},
}
</script> <style scoped>
.cart{
margin-top: 80px;
}
.cart-info{
overflow: hidden;
width: 1200px;
margin: auto;
}
.cart-top{
font-size: 18px;
color: #666;
margin: 25px 0;
font-weight: normal;
}
.cart-top span{
font-size: 12px;
color: #d0d0d0;
display: inline-block;
}
.cart-title{
background: #F7F7F7;
height: 70px;
}
.calc{
margin-top: 25px;
margin-bottom: 40px;
} .calc .count{
text-align: right;
margin-right: 10px;
vertical-align: middle;
}
.calc .count span{
font-size: 36px;
color: #333;
}
.calc .cart-pay{
margin-top: 5px;
width: 110px;
height: 38px;
outline: none;
border: none;
color: #fff;
line-height: 38px;
background: #ffc210;
border-radius: 4px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.cart-item{
height: 120px;
line-height: 120px;
}
.course-info img{
width: 175px;
height: 115px;
margin-right: 35px;
vertical-align: middle;
}
.alipay{
display: block;
height: 48px;
}
.alipay img{
height: 100%;
width:auto;
} .pay-text{
display: block;
text-align: right;
height: 100%;
line-height: 100%;
vertical-align: middle;
margin-top: 20px;
}
</style>
order.views:
import random
from datetime import datetime
from decimal import Decimal
from django_redis import get_redis_connection
from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView from luffy.apps.orders.models import Order, OrderDetail
from luffy.apps.orders.serializers import OrderSerializer class OrderAPIView(APIView):
def get(self,request):
# 获取用户ID
user_id = request.user.id return Response({"message":"ok"})
def post(self,request):
# 获取用户ID
try:
user_id = request.user.id
except:
return Response({"message": "用户不存在！"}) # 自己生成一个订单号,# 结合时间戳和当前用户ID来生成，才能保证整站唯一
order_number = datetime.now().strftime("%Y%m%d%H%M%S") + "%07d" % int(user_id) + "%04d" % random.randint(0,9999)
# 从redis中获取商品信息[先获取勾选集,然后根据勾选集,到购物车中查询对应的商品价格]
redis = get_redis_connection("cart")
course_id_list = redis.smembers("cart_select_%s" % user_id)
# 计算总价格
total_price = 0
cart_info = redis.hgetall("cart_%s" % user_id) # 返回哈希数据中的键值对
for course_id,course_price in cart_info.items():
if course_id in course_id_list:
total_price += Decimal(course_price.decode())
# 创建订单数据
order = Order.objects.create(
user_id = user_id,
order_number = order_number,
order_status = 0, # 订单状态默认为未支付
order_desc = "路飞学成课程购买", # # 订单描述信息
total_price = total_price
)
# 返回响应信息给客户端
print("order",order)
print("order_type", type(order))
if order:
for course_id in course_id_list:
# 记录订单相关的课程信息到订单详情
OrderDetail.objects.create(
course_id = course_id,
order_id = order.id,
user_id = user_id,
unit_price = redis.hget("cart_%s" % user_id, course_id).decode(),
)
# 删除redis中已经生成订单的商品信息
redis.hdel("cart_%s" % user_id, course_id.decode())
redis.srem("cart_select_%s" % user_id, course_id.decode()) return Response({"order_id": order.id}, status=status.HTTP_200_OK)
else:
return Response({"message": "生成订单失败！"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR) class OrderDetailAPIView(APIView):
def get(self,request,order_id):
"""显示订单中的商品信息"""
try:
order = Order.objects.get(pk=order_id)
except Order.DoesNotExist():
return Response({"message":"当前订单不存在！"},status=status.HTTP_400_BAD_REQUEST) seriazlier = OrderSerializer(instance=order)
return Response(seriazlier.data,status=status.HTTP_200_OK)
order/serializer:
from rest_framework import serializers from luffy.apps.courses.models import Course
from luffy.apps.orders.models import Order, OrderDetail class CourseDetailSerializer(serializers.ModelSerializer):
class Meta:
model = Course
fields=("course_http_img","name") class OrderDetailSerializer(serializers.ModelSerializer):
course = CourseDetailSerializer()
class Meta:
model = OrderDetail
fields=("unit_price","course") class OrderSerializer(serializers.ModelSerializer):
order_course = OrderDetailSerializer(many=True)
class Meta:
model = Order
fields=("id","total_price","order_course")