6.获取片区轮播图

获取片区轮播图

1.在后端NewCenter部分：

1.在apps/users/views.py中：

from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView,Response
from random import choice
from .models import UserProfile,PianQu,LouMing
import datetime,json,time,hashlib
from .serializers import PianQuModelSerializer
# Create your views here.


#……

class GetPianquListView(APIView):
    """获取片区列表"""

    def get(self, request):
        token = request.GET.get('roottoken')
        #print(token)
        if token:
            user = UserProfile.objects.filter(username='admin',token=token).first()
            if user:
                p_list=PianQu.objects.all()
                re=PianQuModelSerializer(p_list,many=True)
                return Response(re.data)
            else:
                result = {"status": "403", "data": {'msg': '请重新登录。'}}
        else:
            result = {"status": "403", "data": {'msg': '参数不足'}}
        return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")

2.在apps/users目录下新建序列化文件serializers.py：

from rest_framework import serializers
from .models import UserProfile,PianQu,LouMing,DanYuan,ZhuHu


class UserProfileModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserProfile
        fields=("id","username","name","minzu","sex","mobile","address","danwei","zhiwei","is_dangyuan","hujixz","huji","wenhua",
                "hunyin","no","chusheng","is_teshu","teshu","beizhu","power","img","work")

class PianQuModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = PianQu
        fields="__all__"


class LouMingModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = LouMing
        fields="__all__"


class DanYuanModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = DanYuan
        fields="__all__"


class ZhuHuModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = ZhuHu
        fields="__all__"

3.在apps/users/urls.py中：

from django.urls import path
from .views import RootLoginView,GetPianquListView

urlpatterns = [
    path('rlogin/',RootLoginView.as_view()),#管理员登录
    path('getpqlist/',GetPianquListView.as_view()),#获取片区列表
]

2.在newpc前端部分：

1.在src/api/api.js中：

import { get, post } from './request'
const host='http://127.0.0.1:8000'
const media_host='http://127.0.0.1:8000/media/'

export {
    host,
    media_host
}

//登录
export function tologin(params2) {
    return post(host+'/users/rlogin/', {pwd:params2});
}

//获取片区列表
export function getpianqulist(params2) {
    return get(host+'/users/getpqlist/', {roottoken:params2});
}

2.在src/components/Index.vue中：

<template>
  <div id="index">
    
      <div class="content">
            <el-carousel :interval="3000" type="card" height="600px">
                <el-carousel-item v-for="(item,index) in data" :key="index" >
                    <img :src="item.banner" :alt="item.title" @click="ToLou(item.id)">
                </el-carousel-item>
            </el-carousel>
      </div>

  </div>
</template>
<script>
// 引入模块
import storage from '@/storage.js';
import { host,getpianqulist } from "@/api/api.js";
export default {
  name: 'index',
  data () {
    return {
      msg:'首页',
      data:[
      ]
    }
  },
  methods:{
    //跳转到楼列表页
    ToLou(e){
          e=e+""
          this.$router.push({path:'/loulist.html?aid='+e})
      },
    //查看是否登录
    me_init(){
      if(storage.get('roottoken')){
        return true
      }else{
        this.$router.push({path:'/login.html'})
      }
    },
    //获取片区列表信息
    getPian(){
      console.log('获取片区列表')
      // ----向后端发送数据开始----
      getpianqulist(storage.get('roottoken')).then(res => {
          // console.log(res)
          if(res.status==403){
            storage.remove('roottoken')
            this.$router.push({path:'/login.html'})
          }else{
            for(var i=0;i<res.length;i++){
              res[i]["banner"]=host+res[i]["banner"]
            }
            this.data=res
          }
      }).catch(error => {console.log(error);});
      // -----向后端发送数据结束-----
    }
  },
  
  mounted(){
    this.me_init()
    this.getPian()
  }
}
</script>
<style scoped>
.content{
    /* width: 80%;
    margin: 0 auto; */
    margin-top: 60px;
    margin-bottom: 60px;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  img{
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: inherit;
  }
</style>