devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django入门项目实战_django实战

作者：Gausst松鼠会 | 2024-06-15 17:04:36

赞

踩

django实战

一、redis通用命令

redis默认有16个 数据库（0-15） select 3 切换到数据库3

info 查看redis服务的信息 info replication查看主从复制的状况

keys * 查看所有的key, 生产环境中不使用 可能阻塞redis

查看key的数据类型 type key1

key 是否存在 exists key1

删除一个key del key1

重命名 rename key key1

flushdb # 清空当前数据库

flushall # 清空所有数据库

二、git 常用命令

1.初始化仓库：git init

2.查看状态：git status

3.添加文件：git add 文件名(*指的是全部)

4.配置个人信息：

git config user.name 你的名字

git config user.email 你的邮箱

5.提交代码：git commit -m 版本信息

6.查看日志信息：git log --oneline

7.回退：git reset --hard HEAD/版本号

8.关联远程仓库：git remote add origin ‘码云地址’

9.提交代码到远程仓库：git push -u origin "master"

10.获取远程仓库的代码：git pull origin master

11.分支操作：

#查看分支 git branch

#创建分支 git branch b1

#切换到b1分支 git switch b1

#将b1分支合并到master git switch master git merge b1

项目实战配置文件

  1. INSTALLED_APPS = [
  2.     'django.contrib.admin',
  3.     'django.contrib.auth',
  4.     'django.contrib.contenttypes',
  5.     'django.contrib.sessions',
  6.     'django.contrib.messages',
  7.     'django.contrib.staticfiles',
  8.     'corsheaders', # 跨域
  9.     'user', # user应用名
  10.     'rest_framework', # drf框架
  11.     'goods' # goods应用名
  12. ]
  13.  
  14. MIDDLEWARE = [
  15.     'django.middleware.security.SecurityMiddleware',
  16.     'django.contrib.sessions.middleware.SessionMiddleware',
  17.     'django.middleware.common.CommonMiddleware',
  18.     # 'django.middleware.csrf.CsrfViewMiddleware', # 注册drf 中间件
  19.     'django.contrib.auth.middleware.AuthenticationMiddleware',
  20.     'django.contrib.messages.middleware.MessageMiddleware',
  21.     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  22.     'corsheaders.middleware.CorsMiddleware', # 添加跨域中间件
  23.     'middleware.middleware.CheckUserMiddleware',
  24. ]
  25.  
  26. CORS_ORIGIN_WHITELIST = [
  27.     # 配置ip白名单
  28.     'http://127.0.0.1:8080',
  29.     'http://localhost:8080'
  30. ]
  31. # credentials
  32. # methods
  33. # headers
  34. CORS_ALLOW_CREDENTIALS = True # 配置允许cookie
  35. CORS_ALLOW_METHODS = ['*'] # 允许的请求方式
  36. CORS_ALLOW_HEADERS = ['*'] # 允许的请求头
  37.  
  38.  
  39.  
  40.  
  41. DATABASES = {
  42.     'default': {
  43.         'ENGINE': 'django.db.backends.mysql', # 配置mysql数据库
  44.         'NAME': 'djangoproject',
  45.         'USER':'root',
  46.         'PASSWORD':'123',
  47.         'HOST':'localhost',
  48.         'PORT':3306
  49.     }
  50. }
  51.  
  52.  
  53.  
  54. AUTH_USER_MODEL = 'user.User' # 使用自定义 用户模型类 app.模型类
  55.  
  56. STATICFILES_DIRS = [
  57.     os.path.join(BASE_DIR,'static')
  58. ]

三、django，vue前后端注册代码

1.手机号跟用户名判断是否重复

  1. from django.shortcuts import render
  2. from rest_framework.views import APIView
  3. from rest_framework.response import Response
  4. import re
  5. from user.models import User
  6. # Create your views here.
  7.  
  8. # 用户名
  9. class CheckUsername(APIView):
  10.     def get(self,request,username):
  11.         # 1.判断用户名格式
  12.         # 要求字母开头，中间为字母，数字，下划线，长度5-16
  13.         if not re.findall(r'^[a-zA-Z]\w{4,15}$',username):
  14.             return Response({
  15.                 'code':404,
  16.                 'msg':'用户名格式不正确'
  17.             })
  18.         # 2.判断用户是否存在
  19.         if User.objects.filter(username=username):
  20.             return Response({'msg':'用户名重复','code':400})
  21.         else:
  22.             return Response({'msg':'ok','code':200})
  23.  
  24. # 手机号
  25. class MobileAPIView(APIView):
  26.     def get(self,request,mobile):
  27.         # 1. 判断手机号格式是否满足要求
  28.         if not re.findall(r'^1[3-9]\d{9}$',mobile):
  29.             return Response({
  30.                 'msg':'手机号格式不正确',
  31.                 'code':404
  32.             })
  33.         # 2. 判断手机号是否存在
  34.         if User.objects.filter(mobile=mobile):
  35.             return Response({
  36.                 'msg':'手机号重复',
  37.                 'code':400
  38.             })
  39.         else:
  40.             return Response({
  41.                 'msg':'ok',
  42.                 'code':200
  43.             })

2.前端用户名手机号，判断密码是否一致请求

  1.  // 用户名的校验方法
  2.     let validateName = (rule, value, callback) => {
  3.       if (!value) {
  4.         return callback(new Error("用户名不能为空"));
  5.       }
  6.       // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
  7.       const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
  8.       if (userNameRule.test(value)) {
  9.         // 前端校验，用户名复合规则
  10.         //请求后端， 判断用户名是否重复
  11.         this.$axios
  12.           .get("/users/check/username/" + value + "/"
  13.           )
  14.           .then((res) => {
  15.             // 200代表用户名不重复，可以注册
  16.             console.log("校验用户名是否重复：", res);
  17.             if (res.data.code == 200) {
  18.               this.$refs.ruleForm.validateField("checkPass");
  19.               return callback();
  20.             } else {
  21.               // 用户名重复或者不符合规则
  22.               return callback(new Error(res.data.msg));
  23.             }
  24.           })
  25.           .catch((err) => {
  26.             return Promise.reject(err);
  27.           });
  28.       } else {
  29.         // 前端校验，用户名不符合规则
  30.         return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
  31.       }
  32.     };
  33.  
  34.  
  35.     // 手机号的校验方法
  36.     let validateMobile = (rule, value, callback) => {
  37.       if (value === "") {
  38.         return callback(new Error("请输入手机号"));
  39.       }
  40.       // 手机号以1开头,第二位3-9之间的数字，长度为11,只允许数字
  41.       const mobileRule = /^1[3-9]\d{9}$/;
  42.       if (mobileRule.test(value)) {
  43.         this.$axios.get("/users/check/mobile/" + this.RegisterUser.mobile + "/")
  44.         .then(res=>{
  45.           console.log("验证手机号是否可用:", res)
  46.           if(res.data.code == 200){
  47.             this.$refs.ruleForm.validateField("checkPass");
  48.             return callback();
  49.           }else{
  50.             return callback(new Error(res.data.msg))
  51.           }
  52.         }).catch(err=>{
  53.           return Promise.reject(err)
  54.         })
  55.       } else {
  56.         return callback(new Error("手机号不符合格式"));
  57.       }
  58.     };
  59.  
  60.  
  61.     // 密码的校验方法
  62.     let validatePass = (rule, value, callback) => {
  63.       if (value === "") {
  64.         return callback(new Error("请输入密码"));
  65.       }
  66.  
  67.       // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
  68.       const passwordRule = /^[a-zA-Z]\w{5,17}$/;
  69.       if (passwordRule.test(value)) {
  70.         this.$refs.ruleForm.validateField("checkPass");
  71.         return callback();
  72.       } else {
  73.         return callback(
  74.           new Error("字母开头,长度6-18之间,允许字母数字和下划线")
  75.         );
  76.       }
  77.     };
  78.  
  79.  
  80.     // 确认密码的校验方法
  81.     let validateConfirmPass = (rule, value, callback) => {
  82.       if (value === "") {
  83.         return callback(new Error("请输入确认密码"));
  84.       }
  85.  
  86.       // 校验是否以密码一致
  87.       if (this.RegisterUser.pass != "" && value === this.RegisterUser.pass) {
  88.         this.$refs.ruleForm.validateField("checkPass");
  89.         return callback();
  90.       } else {
  91.         return callback(new Error("两次输入的密码不一致"));
  92.       }
  93.     };

3.django后端实现图形验证码及注册功能

  1. # 图形验证码
  2. class ImgCode(APIView):
  3.     def get(self,request,uuid):
  4.         # 1.生成4位验证码
  5.         # string.ascii_letters 随机字母 a-zA-Z
  6.         # string.digits 随机数字 0-9
  7.         code = ''.join(random.sample(string.ascii_letters+string.digits,4))
  8.         # 2.生成图形验证码
  9.         cap = ImageCaptcha() # 定义对象
  10.         img_code = cap.generate(code) # 生成图形验证码 de 图片
  11.         # 3.保存验证码
  12.         r = redis.Redis(host='localhost',port=6379,password='password',db=0)
  13.         r.set(uuid,code,ex=60)
  14.         r.close()
  15.         # 4.返回图形验证码,使用httpResponse返回，需要加上数据类型context_type
  16.         return HttpResponse(img_code,content_type='image/png')
  17.  
  18. # 校验图形验证码
  19. class CheckImageCode(APIView):
  20.     def post(self,request):
  21.         # 1.提取get参数中的uuid和验证码
  22.         uuid = request.data.get('imageCodeID')
  23.         img_code = request.data.get('imageCode')
  24.         # 2.读取redis数据库中的验证码
  25.         r = redis.Redis(host='localhost',password='password',port=6379,db=0)
  26.         r_code = r.get(uuid).decode()
  27.         if not r_code:
  28.             return Response({
  29.                 'msg':'验证码过期',
  30.                 'code':204
  31.             })
  32.         # redis数据库中存的是二进制
  33.         # lower()都转换为小写
  34.         # decode()解码
  35.         if img_code.lower() == r_code.lower():
  36.             return Response({'msg':'ok','code':200})
  37.         else:
  38.             return Response({'msg':'验证码错误','code':404})
  39.  
  40. # 用户注册
  41. class Register(APIView):
  42.     def post(self,request):
  43.         # 获取前端提交数据
  44.         username = request.data.get('userName')
  45.         pwd = request.data.get('pwd')
  46.         mobile = request.data.get('mobile')
  47.         aggree = request.data.get('aggree')
  48.  
  49.         # 2.判断数据是否齐全
  50.         if not all([username,pwd,mobile]):
  51.             return Response({
  52.                 'msg':'用户的注册信息不完整',
  53.                 'code':204
  54.             })
  55.         # 3.判断是否同意协议
  56.         if not aggree:
  57.             return Response({
  58.                 'msg':'用户未同意协议',
  59.                 'code':204
  60.             })
  61.         # 4.往数据库中保存数据 create_user是AbstractUser提供的注册方法,会对密码进行加密
  62.         User.objects.create_user(username=username,password=pwd,mobile=mobile)
  63.         return Response({'msg':'注册成功','code':200})

4.vue前端实现图形验证码及用户注册

  1.  // 校验图片验证码
  2.     let validateImageCode = (rule, value, callback) => {
  3.       if (value === "") {
  4.         return callback(new Error("请输入图片验证码"));
  5.       }
  6.       // 图片验证码是由字母、数字组成，长度为4
  7.       const iamgeCodeRule = /^[a-zA-Z0-9]{4}$/;
  8.       if (iamgeCodeRule.test(value)) {
  9.         this.$axios.post("/users/check_image_code/", {imageCode:this.RegisterUser.imageCode,imageCodeID:this.imageCodeID})
  10.         // this.$axios.post("/users/test/", {username:'laufing1', password:"laufing123",mobile:123})
  11.         .then(res => {
  12.           if(res.data.code == 200){
  13.             this.$refs.ruleForm.validateField("checkPass");
  14.             return callback();
  15.           }else{
  16.             return callback(new Error(res.data.msg))
  17.           }
  18.         }).catch(err => {
  19.           return Promise.reject(err)
  20.         })
  21.       } else {
  22.         return callback(new Error("图片验证码不正确！"));
  23.       }
  24.     };
  1.     // 用户注册
  2.     Register() {
  3.       // 是否同意用户协议
  4.       if(!this.aggree){
  5.         this.flag = true
  6.         return
  7.       }
  8.       // 已勾选，则不显示提示信息
  9.       this.flag = false
  10.       // 通过element自定义表单校验规则，校验用户输入的用户信息
  11.       this.$refs["ruleForm"].validate((valid) => {
  12.         //如果通过校验开始注册
  13.         if (valid) {
  14.           this.$axios
  15.             .post("/users/register/", {
  16.               userName: this.RegisterUser.name,
  17.               pwd: this.RegisterUser.pass,
  18.               mobile: this.RegisterUser.mobile,
  19.               aggree: this.aggree,
  20.             })
  21.             .then((res) => {
  22.               // 200代表注册成功，其他的均为失败
  23.               if (res.data.code == 200) {
  24.                 // 隐藏注册组件
  25.                 this.isRegister = false;
  26.                 // 弹出通知框提示注册成功信息
  27.                 this.notifySucceed(res.data.msg);
  28.               } else {
  29.                 // 弹出通知框提示注册失败信息
  30.                 this.notifyError(res.data.msg);
  31.               }
  32.             })
  33.             .catch((err) => {
  34.               return Promise.reject(err);
  35.             });
  36.         } else {
  37.           return false;
  38.         }
  39.       });
  40.     },

 四、登录及退出登录

  1. from django.db.models import Q
  2. # 用户登录
  3. class Login(APIView):
  4.     def post(self,request):
  5.         username = request.data.get('username')
  6.         pwd = request.data.get('password')
  7.         try:
  8.             user = User.objects.get(Q(username=username)|Q(mobile=username))
  9.         except Exception as e:
  10.             print(e)
  11.             return Response({
  12.                 'msg': '用户名不存在',
  13.                 'code': 204
  14.             })
  15.         if not user.check_password(pwd):
  16.             return Response({
  17.                 'msg':'用户名或密码不正确',
  18.                 'code':204
  19.             })
  20.         token = generate_jwt_token(user)
  21.         return Response({
  22.                 'msg':'登录成功',
  23.                 'code':200,
  24.                 'user':{
  25.                     'username':user.username,
  26.                     'uid':user.id
  27.                 },
  28.                 'token':token,
  29.             })
  30.     
  31. # jwt token
  32. def generate_jwt_token(user):
  33.     payload = {
  34.         'id':user.id,
  35.         'username':user.username,
  36.         'mobile':user.mobile,
  37.         'exp':datetime.datetime.now() + datetime.timedelta(seconds=300)
  38.     }
  39.     # 进行加密，生成 jwt token
  40.     token = jwt.encode(payload=payload,key=settings.SECRET_KEY,algorithm='HS256')
  41.     # 返回token
  42.     return  token
  1. // 退出登录
  2.     logout() {
  3.       // 不显示退出登录框
  4.       this.visible = false;
  5.  
  6.       this.$axios.get("/users/exit/").then((res) => {
  7.         console.log("@@退出登录的响应:", res);
  8.  
  9.         if (res.data.code == 200) {
  10.           // 清空本地登录信息
  11.           // localStorage.setItem("user", "");
  12.           localStorage.removeItem("user");
  13.           localStorage.removeItem("token")
  14.  
  15.           // 清空vuex登录信息
  16.           this.setUser("");
  17.           this.notifySucceed("成功退出登录");
  18.         } else {
  19.           console.log("退出请求失败")
  20.         }
  21.       }).catch(err => {
  22.         return Promise.reject(err)
  23.       })
  24.     },
  1.  // 点击登录触发
  2.     Login() {
  3.       // 通过element自定义表单校验规则，校验用户输入的用户信息
  4.       this.$refs["ruleForm"].validate(valid => {
  5.         //如果通过校验开始登录
  6.         if (valid) {
  7.  
  8.           // 发送ajax
  9.           this.$axios.post("/users/login/", {
  10.               user: this.LoginUser.name,
  11.               pwd: this.LoginUser.pass,
  12.               // withCredentials: true,
  13.             })
  14.             .then(res => {
  15.               console.log("@@登录的响应：", res)
  16.               // 200代表登录成功，其他的均为失败
  17.               if (res.data.code == 200) {
  18.                 // res.data为后端响应的json
  19.                 // 隐藏登录组件
  20.                 this.isLogin = false;
  21.                 // 登录信息存到本地缓存
  22.                 let user = JSON.stringify(res.data.user);
  23.                 console.log("@@user", user)
  24.                 //要求后台返回什么样的数据？
  25.                 //{
  26.                 //     "code":200, 
  27.                 //     'msg': "欢迎user",
  28.                 //     "user":{
  29.                 //       userName:"xxx",
  30.                 //     },
  31.                 //
  32.                 //}
  33.                 // 前端存储用户信息，表示登录成功
  34.                 localStorage.setItem("user", user);
  35.                 localStorage.setItem("token", res.data.token)
  36.                 // sessionStorage.setItem("")
  37.                 // 登录信息存到vuex,控制页面欢迎信息
  38.                 // console.log("@@res.data.user", res.data.user)
  39.                 this.setUser(res.data.user);
  40.                 // 弹出通知框提示登录成功信息
  41.                 this.notifySucceed(res.data.msg);
  42.               } else {//响应不是200
  43.                 // 清空输入框的校验状态
  44.                 this.$refs["ruleForm"].resetFields();
  45.                 // 弹出通知框提示登录失败信息
  46.                 this.notifyError(res.data.msg);
  47.               }
  48.             })
  49.             .catch(err => {
  50.               console.log(err)
  51.               return Promise.reject(err);
  52.             });
  53.         } else {//未通过用户校验
  54.           return false;
  55.         }
  56.       });
  57.     }

五、商品模型类

  1. from django.db import models
  2.  
  3. # 商品类别表Category：类别名 cate_name
  4. class Category(models.Model):
  5.     cate_name = models.CharField("类别名",max_length=50)
  6.     class Meta:
  7.         db_table = 'category'
  8.         verbose_name_plural = '商品类别表'
  9.     def __str__(self):
  10.        return self.cate_name
  11.  
  12. # 商品信息表Goods：商品名sku_name  价格price 售价selling_price 默认图片img  商品标题title   描述instruction 销量 count 库存stock  cate类别**外键**  是否在销售online
  13. class Goods(models.Model):
  14.     sku_name = models.CharField("商品名",max_length=100)
  15.     price = models.DecimalField("价格",max_digits=9,decimal_places=2)
  16.     selling_price = models.DecimalField("售价",max_digits=9,decimal_places=2)
  17.     img = models.CharField("默认图片",max_length=200)
  18.     title = models.CharField("商品标题",max_length=30,null=True)
  19.     instruction = models.TextField("商品的描述信息")
  20.     count = models.IntegerField("商品的销售数量",default=0)
  21.     stock = models.IntegerField("商品的库存数量",default=0)
  22.     cate = models.ForeignKey(Category,on_delete=models.CASCADE,verbose_name='商品类别')
  23.     online = models.BooleanField("是否在售",default=True)
  24.     class Meta:
  25.         db_table = 'goods'
  26.         verbose_name_plural = '商品信息'
  27.     def __str__(self):
  28.         return self.sku_name
  29.  
  30. # 商品图片表GoodImg： 图片img  图片描述title good外键所属商品
  31. class Goodimg(models.Model):
  32.     img = models.CharField(max_length=200,verbose_name='图片')
  33.     title = models.CharField("图片描述",max_length=200,null=True)
  34.     good = models.ForeignKey(to=Goods,on_delete=models.CASCADE,verbose_name='所属商品')
  35.     class Meta:
  36.         db_table = 'goodimg'
  37.         verbose_name_plural = '商品图片'
  38.     def __str__(self):
  39.         return self.title
  40.  
  41. # 轮播图Carousel： imgPath图片路径  describes图片描述
  42. class Carousel(models.Model):
  43.     imgPath = models.CharField("轮播图路径",max_length=200)
  44.     describes = models.CharField("图片描述",max_length=200,null=True)
  45.     class Meta:
  46.         db_table = 'carousel_t'
  47.         verbose_name_plural = "轮播图"
  48.     def __str__(self):
  49.         return self.describes

六、获取首页轮播图商品

  1. class CarouselAPIVIew(APIView):
  2.     def get(self,request):
  3.         try:
  4.             car_data = Carousel.objects.all()
  5.             ser = CarouselSerializer(car_data,many=True)
  6.             return Response({
  7.                 'code':200,
  8.                 'msg':'获取轮播图成功！',
  9.                 'carousel':ser.data
  10.             })
  11.         except Exception as e:
  12.             return Response({
  13.                 'code': 200,
  14.                 'msg': '获取轮播图失败',
  15.             })
  1.   created() {
  2.     // 获取轮播图数据
  3.     this.$axios
  4.       .get("/goods/carousel/")
  5.       .then(res => {
  6.         console.log("@@carousel res:",res)
  7.  
  8.         /***
  9.          *
  10.          *  return Response({
  11.          *   "code":"",
  12.          *   "msg":"",
  13.          *   "carousel":[{
  14.          *     ”imgPath“：”“，
  15.          *     ”describes“：”“，
  16.          *   }，{...}，{...}，{...}])
  17.          */
  18.  
  19.         this.carousel = res.data.carousel;
  20.       })
  21.       .catch(err => {
  22.         return Promise.reject(err);
  23.       });

七、根据类型获取商品和热门商品

  1. # 获取一类商品信息
  2. class OneCategory(APIView):
  3.     # 获取一类商品信息
  4.     def get(self,request):
  5.         # 1.获取种类信息
  6.         cate_name = request.query_params.get('categoryName')
  7.         # 2.ORM操作，获取种类信息
  8.         try:
  9.             cate_data = Category.objects.get(cate_name=cate_name)
  10.         except Exception as e:
  11.             print(e)
  12.             return Response({
  13.                 'code':204,
  14.                 'msg':'此商品不存在'
  15.             })
  16.         # 3.根据类别 获取 商品信息
  17.         goods_data = cate_data.goods_set.all()
  18.         # 4.序列化商品信息
  19.         ser = GoodsSerializer(goods_data,many=True)
  20.         return Response({
  21.             'msg':'成功获取商品信息',
  22.             'code':200,
  23.             'result':ser.data
  24.         })
  25.  
  26. # 热门商品
  27. class HotProduct(APIView):
  28.     def get(self,request):
  29.         # 获取种类信息，热门商品是一个列表
  30.         cate_list = request.query_params.getlist('categoryName[]')
  31.         # 根据类别名获取种类信息（orm数据）
  32.         cate_data_list = []
  33.         for i in cate_list:
  34.             cate_data = Category.objects.get(cate_name=i)
  35.             cate_data_list.append(cate_data)
  36.         # 根据类别 获取 商品信息
  37.         goods_date_list = []
  38.         for i in cate_data_list:
  39.             goods_date_list.append(i.goods_set.all())
  40.         # 将商品信息合并
  41.         from functools import reduce
  42.         goods_data_queryset = reduce((lambda x,y:x|y),goods_date_list)
  43.         # 序列化
  44.         ser = GoodsSerializer(goods_data_queryset,many=True)
  45.         return Response({
  46.             'msg':'获取热门商品成功',
  47.             'code':200,
  48.             'result':ser.data
  49.         })
  1. getPromo(categoryName, val, api) {
  2.       // 有API传入时，例子
  3.       // categoryName:["电视机", "空调", "洗衣机"],
  4.       // val:"applianceList",
  5.       // api:"/goods/getHotProduct/"
  6.       // 判断是否有api传进来
  7.       api = api != undefined ? api : "/goods/oneCategory/all/";
  8.  
  9.       // if (api == undefined){
  10.       //   api = "/goods/oneCategory/all/"
  11.       // }else{
  12.       //   api = api
  13.       // }
  14.       //
  15.  
  16.       this.$axios
  17.         .get(api, {
  18.           params: {categoryName:categoryName},
  19.         })
  20.         .then(res => {
  21.           console.log("@@获取"+categoryName+"的响应", res)
  22.           //获取属性，并赋值，如'phoneList'
  23.           this[val] = res.data.result;
  24.         })
  25.         .catch(err => {
  26.           return Promise.reject(err);
  27.         });
  28.     }
  29.   }

八、点击商品获取商品信息

  1. # 获取一个商品的信息
  2. class oneGoodAPIView(APIView):
  3.     def get(self,request):
  4.         # 1.获取商品id
  5.         good_id = request.query_params.get('productID')
  6.         # 2.根据id查询数据
  7.         try:
  8.             good_data = Goods.objects.get(id=good_id)
  9.         except Exception as e:
  10.             return Response({'msg':'商品不存在','code':204})
  11.         # 3.序列化数据
  12.         ser = GoodsSerializer(good_data)
  13.         return  Response(ser.data)
  14.  
  15. # 获取一个商品的轮播图
  16. class OneImg(APIView):
  17.     def get(self,request):
  18.         good_id = request.query_params.get('productID')
  19.         try:
  20.             good_data = Goods.objects.get(id=good_id)
  21.         except Exception as e:
  22.             return Response({
  23.                 'msg':'图片不存在',
  24.                 'code':204
  25.             })
  26.         img_data = good_data.goodimg_set.all()
  27.         ser = GoodimgSerializer(img_data,many=True)
  28.         return Response(ser.data)
  1.    getDetails(val) {//val为商品id
  2.       this.$axios
  3.         .get("/goods/onegood/", {
  4.           params:{productID: val}
  5.         })
  6.         .then(res => {
  7.           console.log("@@一个商品:", res)
  8.           this.productDetails = res.data;
  9.           // 然后模板就可以解析数据了
  10.         })
  11.         .catch(err => {
  12.           return Promise.reject(err);
  13.         });
  14.     },
  15.     // 获取商品图片
  16.     getDetailsPicture(val) {//通过商品id获取其图片
  17.       this.$axios
  18.         .get("/goods/onegood/imgs/", {
  19.           params:{productID: val}
  20.         })
  21.         .then(res => {
  22.           console.log("@详情页轮播图：",res)
  23.           this.productPicture = res.data;
  24.         })
  25.         .catch(err => {
  26.           return Promise.reject(err);
  27.         });
  28.     },

九、浏览历史记录

  1. # 添加历史记录
  2. class History(APIView):
  3.     def post(self,request):
  4.         # 1.判断用户是否登录
  5.         try:
  6.             user = User.objects.get(id=request.user_info.get('id'))
  7.         except Exception as e:
  8.             print(e)
  9.             return Response({'msg': '用户不存在或未登录', 'code': 204})
  10.         # 2.获取商品id
  11.         good_id = request.data.get('productID')
  12.         # 3.判断商品是否存在
  13.         try:
  14.             good_data = Goods.objects.get(id=good_id)
  15.         except Exception as e:
  16.             print(e)
  17.             return Response({'msg':'商品不存在','code':204})
  18.         # 4.添加历史记录
  19.         history_key = "history_%s"%user.username
  20.         r = redis.Redis(host='localhost',port=6379,password='password',db=0)
  21.         r.lrem(history_key,0,good_id)
  22.         r.lpush(history_key,good_id)
  23.         r.ltrim(history_key,0,4)
  24.         r.close()
  25.         return Response({'msg':'历史记录添加成功','code':200})
  1. // 加入历史记录
  2.     addHistory(productID){
  3.       // 页面挂载完成，请求后端加入历史记录
  4.       this.$axios.post('/goods/oneGood/history/', {
  5.         productID: productID,
  6.       },{
  7.       headers:{
  8.         token: localStorage.getItem('token')||''  // JWT token
  9.       }})
  10.       .then(res => {
  11.         console.log("加入历史记录的响应：", res)
  12.       })
  13.       .catch(err => {
  14.         return Promise.reject(err)
  15.       })
  16.     },

十、收藏商品

  1. # 收藏模型类
  2. class GoodsCollect(models.Model):
  3.     user = models.ForeignKey(to=User,on_delete=models.CASCADE,verbose_name='用户')
  4.     goods = models.ForeignKey(to=Goods,on_delete=models.CASCADE,verbose_name='商品')
  5.     class Meta:
  6.         db_table = 'goods_collect'
  7.         verbose_name_plural = '商品收藏'
  8.     def __str__(self):
  9.         return '%S:%S' % (self.user.username,self.goods.sku_name)
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16. from .models import GoodsCollect
  17. # 收藏
  18. class Collection(APIView):
  19.     # 添加收藏
  20.     def post(self,request):
  21.         # 1.判断用户是否登录
  22.         try:
  23.             user = User.objects.get(id=request.user_info.get('id'))
  24.         except Exception as e:
  25.             print(e)
  26.             return Response({'msg': '用户不存在或未登录', 'code': 204})
  27.         # 2.判断收藏是否存在
  28.         good_id = request.data.get('productID')
  29.         collect_data = GoodsCollect.objects.filter(user=user,goods_id=good_id)
  30.         if collect_data.count()>0:
  31.             return Response({'msg': '收藏已存在', 'code': 204})
  32.         # 3.收藏不存在，添加收藏
  33.         try:
  34.             GoodsCollect.objects.create(
  35.                 user=user,
  36.                 goods_id=good_id
  37.             )
  38.         except Exception as e:
  39.             print(e)
  40.             return Response({'msg': '添加收藏失败', 'code': 204})
  41.         return Response({'msg': '添加收藏成功', 'code': 200})
  42.     # 查询收藏
  43.     def get(self,request):
  44.         # 1.判断用户是否登录
  45.         try:
  46.             user = User.objects.get(id=request.user_info.get('id'))
  47.         except Exception as e:
  48.             print(e)
  49.             return Response({'msg': '用户不存在或未登录', 'code': 204})
  50.         # 2.查询用户的收藏
  51.         collec_data = GoodsCollect.objects.filter(user=user)
  52.         if collec_data.count() == 0:
  53.             return Response({'msg':'没有任何收藏','code':204})
  54.         # 3.处理收藏的数据
  55.         collec_list = []
  56.         for i in collec_data:
  57.             collec_list.append({
  58.                 "id": i.goods.id,
  59.                 "sku_name": i.goods.sku_name,
  60.                 "title": i.goods.title,
  61.                 "price": i.goods.price,
  62.                 "selling_price": i.goods.selling_price,
  63.                 "img": i.goods.img,
  64.             })
  65.         # 4.返回结果
  66.         return Response({'code':200,'collectList':collec_list})
  67.     # 删除收藏
  68.     def delete(self,request):
  69.         # 1.判断用户是否登录
  70.         try:
  71.             user = User.objects.get(id=request.user_info.get('id'))
  72.         except Exception as e:
  73.             print(e)
  74.             return Response({'msg': '用户不存在或未登录', 'code': 204})
  75.         # 2.根据商品id删除收藏
  76.         good_id = request.data.get('productID')
  77.         try:
  78.             GoodsCollect.objects.get(user=user,goods_id=good_id).delete()
  79.         except Exception as e:
  80.             print(e)
  81.             return Response({'msg':'删除收藏失败','code':204})
  82.         return Response({'msg':'删除收藏成功','code':200})
  1. addCollect() {
  2.       // 判断是否登录,没有登录则显示登录组件
  3.       if (!this.$store.getters.getUser) {
  4.         this.$store.dispatch("setShowLogin", true);
  5.         return;
  6.       }
  7.       this.$axios
  8.           // 修改接口为goods
  9.         .post("/goods/user/collection/", {
  10.           productID: this.productID
  11.         },{headers:{token:localStorage.getItem("token") || ""}})
  12.         .then(res => {
  13.           console.log("@@添加收藏的响应：", res)
  14.           if (res.data.code == 200) {
  15.             // 添加收藏成功
  16.             this.notifySucceed(res.data.msg);
  17.           } else {
  18.             // 添加收藏失败
  19.             this.notifyError(res.data.msg);
  20.           }
  21.         })
  22.         .catch(err => {
  23.           return Promise.reject(err);
  24.         });
  25.     }
  26.   }
  27. };

十一、加入购物车

  1. # 购物车
  2. class UserCart(APIView):
  3.     def post(self,reqeust):
  4.         # 1.判断用户是否登录
  5.         try:
  6.             user = User.objects.get(id=reqeust.user_info.get('id'))
  7.         except Exception as e:
  8.             print(e)
  9.             return Response({'msg': '用户不存在或未登录', 'code': 204})
  10.  
  11.         # 2.获取商品信息
  12.         good_id = reqeust.data.get('productID')
  13.         good_data = Goods.objects.get(id=good_id)
  14.  
  15.         # 拼接购物车的键
  16.         cart_key = "cart_%s"%user.username
  17.         # 添加购物车的商品自动勾选上
  18.         cart_selected_key = "cart_selected_%s"%user.username
  19.  
  20.         # 3.判断库存
  21.         if good_data.stock<=0:
  22.             return Response({'msg':'库存不足,无法购买','code':203})
  23.  
  24.         # 4.判断购物车是否存在该商品
  25.         r = redis.Redis(host='localhost',port=6379,db=0,password='password')
  26.         # 获取商品在购物车中的数量
  27.         num = r.hget(cart_key,good_id)
  28.  
  29.         if num: # 购物车已存在商品
  30.             num = int(num.decode()) + 1
  31.             if num > good_data.stock:
  32.                 return Response({'code':202,'msg':'加购达到限购数量'})
  33.             r.hset(cart_key,good_id,str(num)) # 购物车数量+1
  34.             r.sadd(cart_selected_key,good_id) # 选中商品
  35.             return Response({'code': 201, 'msg': '该商品已存在购物车，数量+1'})
  36.         else: # 购物车不存在该商品
  37.             r.hset(cart_key,good_id,1) # 添加商品到购物车
  38.             r.sadd(cart_selected_key, good_id)  # 选中商品
  39.             r.close()
  40.             return Response({
  41.                 'msg':'加入购物车成功',
  42.                 'code':200,
  43.                 'shoppingCartData':{
  44.                     'id':cart_key, # 购物车名字
  45.                     'productID':good_id, # 商品id
  46.                     'productName':good_data.sku_name, # 商品名
  47.                     'productImg':good_data.img,
  48.                     'price':good_data.price,
  49.                     'num':1,
  50.                     'maxNum':good_data.stock,
  51.                     'check':True
  52.                 }
  53.             })
  54.     def get(self,reqeust):
  55.         # 1.判断用户是否登录
  56.         try:
  57.             user = User.objects.get(id=reqeust.user_info.get('id'))
  58.         except Exception as e:
  59.             print(e)
  60.             return Response({'msg': '用户不存在或未登录', 'code': 204})
  61.         # 拼接redis数据库中的键
  62.         cart_key = "cart_%s" % user.username
  63.         # 添加购物车的商品自动勾选上
  64.         cart_selected_key = "cart_selected_%s" % user.username
  65.         # 2.获取数据
  66.         r = redis.Redis(host='localhost',port=6379,password='password',db=0)
  67.         cart_list = r.hgetall(cart_key) # 读取购物车中的数据
  68.         select_list = r.smembers(cart_selected_key) # 读取选中的商品
  69.         select_list_2 = [i.decode() for i in select_list] # 解码
  70.  
  71.         result_data = []
  72.         # key 商品id value 商品数量
  73.         for key,value in cart_list.items():
  74.             good_id  = key.decode()
  75.             good_data = Goods.objects.get(id=good_id)
  76.             result_data.append({
  77.                 'id':cart_key,
  78.                 'productId':good_data.id,
  79.                 'productName':good_data.sku_name,
  80.                 'productImg':good_data.img,
  81.                 'price':good_data.price,
  82.                 'num':value.decode(),
  83.                 'maxNum':good_data.stock,
  84.                 # 如果商品id在 select_list_2里，就是选中的
  85.                 'check':good_id in select_list_2,
  86.             })
  87.         return Response({
  88.             'msg':'查询购物车成功',
  89.             'code':200,
  90.             'shoppingCartData':result_data,
  91.         })
  1. this.$axios
  2.           // 接口cart要改成goods
  3.         .post("/goods/user/cart/", {
  4.           productID: this.productID
  5.         }, {headers:{token:localStorage.getItem("token")||""}})
  6.         .then(res => {
  7.           console.log("@@添加购物车res:", res)
  8.           //
  9.           // 处理购物车的响应
  10.           switch (res.data.code) {
  11.             case 200:
  12.               // 新加入购物车成功
  13.               this.unshiftShoppingCart(res.data.shoppingCartData);
  14.               this.notifySucceed(res.data.msg);
  15.               break;
  16.             case 201:
  17.               // 该商品已经在购物车，数量+1
  18.               this.addShoppingCartNum(this.productID);
  19.               this.notifySucceed(res.data.msg);
  20.               break;
  21.             case 202:
  22.               // 商品数量达到限购数量(即库存量)
  23.               this.dis = true; //购物车按钮不可点击
  24.               this.notifyError(res.data.msg);
  25.               break;
  26.             case 203:
  27.             default:
  28.               this.notifyError(res.data.msg);
  29.           }
  30.         })
  31.         .catch(err => {
  32.           return Promise.reject(err);
  33.         });
  34.     },

十二、购物车中全选与数量加减

  1.     def put(self,request):
  2.         try:
  3.             user_info = request.user_info
  4.             user = User.objects.get(id=user_info.get('id'))
  5.         except Exception as e:
  6.             print(e)
  7.             return Response({'msg':'用户不存在或未登录!','code':404})
  8.     #     2.获取商品id和商品数量
  9.         good_id =request.data.get('productID')
  10.         num = request.data.get('num')
  11.         cart_key = 'cart_%s'%user.username
  12.         r = redis.Redis(host='localhost',port=6379,db=0,password='password')
  13.         r.hset(cart_key,good_id,num)
  14.         r.close()
  15.         return Response({'code':200,'msg':'数量修改成功'})
  1.  
  2. class GoodsSelect(APIView):
  3.  
  4.     def put(self,request):
  5.         try:
  6.             user_info = request.user_info
  7.             user = User.objects.get(id=user_info.get('id'))
  8.         except Exception as e:
  9.             print(e)
  10.             return Response({'msg':'用户不存在或未登录!','code':204})
  11.     #     2.获取商品id和商品数量
  12.         good_id =request.data.get('productID')
  13.         select_flag = request.data.get('val')
  14.         cart_selected_key = 'cart_selected_%s' %user.username
  15.  
  16. #         3.修改redis数据库中的数据
  17.         r = redis.Redis(host='localhost', port=6379, db=0,password='password')
  18.         if select_flag:
  19.             r.sadd(cart_selected_key,good_id)
  20.             r.close()
  21.             return Response({'code': 200, 'msg': '%s修改成功' % good_id})
  22.         else:
  23.             r.srem(cart_selected_key,good_id)
  24.             r.close()
  25.             return Response({'code': 200, 'msg': '%s取消修改成功' % good_id})
  26.  
  27.     def post(self, request):
  28.             # 1.判断用户是否登录
  29.             try:
  30.                 user_info = request.user_info
  31.                 user = User.objects.get(id=user_info.get("id"))
  32.             except Exception as e:
  33.                 print(e)
  34.                 return Response({
  35.                     "code": 204,
  36.                     "msg": '用户不存在或未登录'
  37.                 })
  38.             # 2.获取全选的状态
  39.             all_flag = request.data.get("val")
  40.             cart_key = "cart_%s" % user.username
  41.             cart_selected_key = "cart_selected_key_%s" % user.username
  42.             # 3.修改选中状态
  43.             r = redis.Redis(host="localhost", port=6379,db=0,password='password')
  44.             if all_flag:  # 全选
  45.                 # 获取购物车中的商品id
  46.                 good_id_list = r.hkeys(cart_key)
  47.                 # 添加选中的商品
  48.                 for i in good_id_list:
  49.                     r.sadd(cart_selected_key, i.decode())
  50.                 r.close()
  51.                 return Response({
  52.                     "code": 200,
  53.                     "msg": '全选成功'
  54.                 })
  55.             else:  # 取消全选
  56.                 # 删掉全选中的商品
  57.                 r.delete(cart_selected_key)
  58.                 r.close()
  59.  
  60.             return Response({
  61.                 "code": 200,
  62.                 "msg": '取消全选成功'
  63.             })
  1. this.$axios
  2.           // cart改成goods
  3.           .put("/goods/user/cart/", {
  4.             productID: productID,
  5.             num: currentValue,//更新过后的值
  6.           }, {headers: {'token': localStorage.getItem("token") || ""}})
  7.           .then(res => {
  8.             console.log("@@更新购物车的后端响应：", res)
  9.             switch (res.data.code) {
  10.               case 200:
  11.                 // 200代表更新成功
  12.                 // 更新vuex状态
  13.                 this.updateShoppingCart({
  14.                   key: key,
  15.                   prop: "num",
  16.                   val: currentValue
  17.                 });
  18.                 // 提示更新成功信息
  19.                 this.notifySucceed(res.data.msg);
  20.                 break;
  21.               default:
  22.                 // 提示更新失败信息
  23.                 this.notifyError(res.data.msg);
  24.             }
  25.           })
  26.           .catch(err => {
  27.             return Promise.reject(err);
  28.           });
  29.     },
  30.     // 单选
  31.     checkChange(val, key, cartID) {
  32.       console.log("单选的勾选状态:", val, key, cartID)
  33.       const productID = this.getShoppingCart[key].productID
  34.  
  35.       // carts 改goods
  36.       this.$axios.put("/goods/user/selection/", {
  37.         productID,
  38.         val,
  39.       }, {headers: {token: localStorage.getItem("token") || ""}})
  40.           .then(res => {
  41.             if (res.data.code == 200) {
  42.               // 更新前端vuex中购物车商品勾选状态
  43.               this.updateShoppingCart({key: key, prop: "check", val: val});
  44.               this.notifySucceed(res.data.msg)
  45.             } else {
  46.               this.notifyError(res.data.msg)
  47.             }
  48.           })
  49.           .catch(err => {
  50.             return Promise.reject(err)
  51.           })
  52.  
  53.     },

十三、实现获取用户信息、修改，添加，删除，地址

  1. class UserCenter(APIView):
  2.     # 用户信息更新
  3.     def put(self,request):
  4.         # 1.判断用户是否登录
  5.         try:
  6.             user_info = request.user_info
  7.             user = User.objects.get(id=user_info.get('id'))
  8.         except Exception as e:
  9.             return Response({'code': 204, 'msg': '用户不存在或未登录!'})
  10.         # 2.获取前端提交的数据
  11.         phone = request.data.get('phone')
  12.         addrs_list = request.data.get('addrs')
  13.         # 3.修改用户的手机号
  14.         if not re.findall(r'^1[3-9]\d{9}$',phone):
  15.             return Response({'code':204,'msg':'手机号不正确'})
  16.         user.mobile = phone
  17.         user.save()
  18.         # 4.修改地址 循环 一个一个去改
  19.         for i in addrs_list:
  20.             Addr.objects.filter(id=i.get('id')).update(
  21.                 receiver =i.get('receiver'),
  22.                 receive_mobile = i.get('receive_mobile'),
  23.                 receive_addr = i.get('receive_addr'),
  24.                 is_default = i.get("is_default")
  25.             )
  26.         return Response({'msg':'修改信息成功','code':200})
  27.  
  28.     # 获取用户信息
  29.     def get(self,request):
  30.         # 1.判断用户是否登录
  31.         try:
  32.             user_info = request.user_info
  33.             user = User.objects.get(id=user_info.get('id'))
  34.         except Exception as e:
  35.             return Response({'code':204,'msg':'用户不存在或未登录!'})
  36.         # 2.返回前端需要的数据
  37.         # addrs_list = []
  38.         # 查询用户的地址信息
  39.         addrs_data = user.addr_set.all()
  40.         ser = Addrser(addrs_data,many=True)
  41.         # for i in addrs_data:
  42.         #     addrs_list.append({
  43.         #         'id':i.id,
  44.         #         'receiver':i.receiver,
  45.         #         'receive_mobile':i.receive_mobile,
  46.         #         'receive_addr':i.receive_addr,
  47.         #         'is_default':i.is_default
  48.         #     })
  49.         return Response({
  50.             'code':200,
  51.             'msg':'获取用户信息成功',
  52.             'userInfo':{
  53.                 'username':user.username,
  54.                 'phone':user.mobile,
  55.                 'addrs':ser.data
  56.             }
  57.         })
  1. # 添加用户收货地址
  2. class UserAddr(APIView):
  3.     def post(self,request):
  4.         # 1.判断用户是否登录
  5.         try:
  6.             user_info = request.user_info
  7.             user = User.objects.get(id=user_info.get('id'))
  8.         except Exception as e:
  9.             return Response({'code':204,'msg':'用户不存在或未登录!'})
  10.         # 2.获取前端提交的数据
  11.         receiver = request.data.get('receiver')
  12.         receive_mobile = request.data.get('receive_mobile')
  13.         receive_addr = request.data.get('receive_addr')
  14.         is_default = request.data.get('is_default')
  15.         # 3.判断数据是否齐全,手机号是否符合要求
  16.         if not all([receive_addr,receive_mobile,receiver]):
  17.             return Response({'msg':'信息不全','code':200})
  18.         if not re.findall(r'^1[3-9]\d{9}$',receive_mobile):
  19.             return Response({'msg':'手机不正确','code':204})
  20.         # 4.默认收货地址处理：只能有一个
  21.         if is_default:
  22.             # 查看该用户是否有默认地址
  23.             default_addr = Addr.objects.filter(user=user,is_default=True)
  24.             default_addr.update(is_default=False)
  25.  
  26.         # 5.添加新地址
  27.         new_addr = Addr.objects.create(
  28.             receiver=receiver,
  29.             receive_mobile=receive_mobile,
  30.             receive_addr=receive_addr,
  31.             is_default=is_default,
  32.             user=user
  33.         )
  34.         ser = Addrser(new_addr)
  35.         return Response({'msg':'地址添加成功','code':200,'addr':ser.data})
  36.     # 删除地址
  37.     def delete(self,request):
  38.         # 1.判断用户是否登录
  39.         try:
  40.             user_info = request.user_info
  41.             user = User.objects.get(id=user_info.get('id'))
  42.         except Exception as e:
  43.             return Response({'code':204,'msg':'用户不存在或未登录!'})
  44.         addr_id = request.data.get('addr_id')
  45.         Addr.objects.filter(id=addr_id).delete()
  46.         return Response({'msg':'删除成功','code':200})
  1.  activated() {
  2.     //   未登录时，弹出登录组件
  3.     if (!this.$store.getters.getUser.userName) {
  4.       this.$store.dispatch("setShowLogin", true);
  5.     }
  6.     // 已登录，发送ajax请求，获取用户信息
  7.     this.$axios
  8.         .get("/users/user/", {
  9.           headers: {token: localStorage.getItem('token') || ""}
  10.         })
  11.         .then((res) => {
  12.           console.log("@@获取用户的信息：", res);
  13.           if (res.data.code == 200) {
  14.             this.userInfo = res.data.userInfo;
  15.           } else {
  16.             this.notifyError(res.data.msg);
  17.           }
  18.         })
  19.         .catch((err) => {
  20.           return Promise.reject(err);
  21.         });
  22.   },
  23.  
  24.   methods: {
  25.     // 修改个人信息
  26.     updateUserInfo() {
  27.       console.log("修改个人信息...");
  28.       this.$axios.put("/users/user/", {
  29.         phone: this.userInfo.phone,
  30.         addrs: this.userInfo.addrs,
  31.       }, {
  32.         headers: {
  33.           token: localStorage.getItem("token") || ""
  34.         }
  35.       }).then(res => {
  36.         if (res.data.code == 200) {
  37.           this.notifySucceed(res.data.msg)
  38.         } else {
  39.           this.notifyError(res.data.msg)
  40.         }
  41.       })
  42.     },
  43.  
  44.     // 添加地址
  45.     addAddr() {
  46.       console.log("增加地址...");
  47.       this.$axios
  48.           .post("/users/user/addr/", {
  49.             receiver: this.receiver,
  50.             receive_mobile: this.receive_mobile,
  51.             receive_addr: this.receive_addr, //字符串地址
  52.             is_default: this.is_default, //是否默认地址}
  53.           }, {
  54.             headers: {
  55.               token: localStorage.getItem("token") || ""
  56.             }
  57.           })
  58.           .then((res) => {
  59.             console.log("添加地址的响应:", res);
  60.             if (res.data.code == 200) {
  61.               this.userInfo.addrs.push(res.data.addr);
  62.               this.receiver = ""
  63.               this.receive_mobile = ""
  64.               this.receive_addr = ""
  65.               this.notifySucceed(res.data.msg);
  66.             } else {
  67.               this.notifyError(res.data.msg);
  68.             }
  69.           })
  70.           .catch((err) => {
  71.             return Promise.reject(err);
  72.           });
  73.     deleteAddr(e, addr_id) {
  74.       // 删除该地址
  75.       this.$axios.delete("/users/user/addr/", {
  76.         data: {addr_id: addr_id},
  77.         headers: {  // 补上header
  78.           token: localStorage.getItem("token") || ""
  79.         },
  80.       }).then(res => {
  81.         if (res.data.code == 200) {
  82.           // 删除User组件中的对应地址
  83.           for (let i = 0; i < this.userInfo.addrs.length; i++) {
  84.             let temp = this.userInfo.addrs[i]
  85.             if (temp.id == addr_id) {
  86.               this.userInfo.addrs.splice(i, 1)
  87.             }
  88.           }
  89.           this.notifySucceed(res.data.msg)
  90.         } else {
  91.           // this.notifyError
  92.  
  93.           this.notifyError(res.data.msg) // 补上
  94.         }
  95.       })
  96.     },

 十四、修改密码

  1.  
  2. # 修改密码
  3. class UpadatePass(APIView):
  4.     def put(self,request):
  5.         # 1.判断用户是否登录
  6.         try:
  7.             user_info = request.user_info
  8.             user = User.objects.get(id=user_info.get('id'))
  9.         except Exception as e:
  10.             return Response({'code':204,'msg':'用户不存在或未登录!'})
  11.         # 2.获取前端提交的数据
  12.         originPw = request.data.get('originPw')
  13.         newPw = request.data.get('newPw')
  14.         confirmNewPw = request.data.get('confirmNewPw')
  15.         # 3.判断原始密码是否正确
  16.         if not user.check_password(originPw):
  17.             return Response({'msg':'密码错误','code':204})
  18.         # 4.判断新密码和原密码是否一样
  19.         if originPw == newPw:
  20.             return Response({'msg': '密码没有修改', 'code': 204})
  21.         # 5.新密码两次密码不一致
  22.         if newPw != confirmNewPw:
  23.             return Response({'msg': '两次密码不一致', 'code': 204})
  24.         # 6.保存新密码
  25.         user.set_password(newPw)
  26.         user.save()
  27.         return Response({'msg': '修改密码成功', 'code': 200})
  1.     // 更改个人密码
  2.     updatePassword() {
  3.       console.log("修改个人密码...");
  4.       this.$store.dispatch("setUpdatePw", true);
  5.     },
  6.  
  7.   // 点击修改密码触发
  8.     updatePassword() {
  9.       // 通过element自定义表单校验规则，校验用户输入的用户信息
  10.       this.$refs["ruleForm"].validate((valid) => {
  11.         //如果通过校验开始请求后端
  12.         if (valid) {
  13.           // 发送ajax
  14.           // this.$axios
  15.           console.log("开始发送请求，修改密码...")
  16.           axios
  17.               .put("/users/user/password/", {
  18.                 originPw: this.LoginUser.originPw,
  19.                 newPw: this.LoginUser.newPw,
  20.                 confirmNewPw: this.LoginUser.confirmNewPw,
  21.                 // withCredentials: true,
  22.               }, { // 补上header
  23.                 headers: {
  24.                   token: localStorage.getItem("token") || ""
  25.                 },
  26.               })
  27.               .then((res) => {
  28.                 console.log("@@res", res);
  29.                 // 200代表登录成功，其他的均为失败
  30.                 if (res.data.code == 200) {
  31.                   // res.data为后端响应的json
  32.                   // 隐藏修改密码组件
  33.                   this.isUpdatePw = false;
  34.                   // 重新登录
  35.                   // this.setUser("");
  36.                   // 弹出通知框提示登录成功信息
  37.                   this.notifySucceed(res.data.msg);
  38.                 } else {
  39.                   //响应不是200
  40.                   // 清空输入框的校验状态
  41.                   this.$refs["ruleForm"].resetFields();
  42.                   // 弹出通知框提示登录失败信息
  43.                   this.notifyError(res.data.msg);
  44.                 }
  45.               })
  46.               .catch((err) => {
  47.                 console.log(err);
  48.                 return Promise.reject(err);
  49.               });
  50.         } else {
  51.           //未通过用户校验
  52.           return false;
  53.         }
  54.       });
  55.     },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/723097
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号