9.开发newapp的首页index

Posted 2020-12-11 雪落忆海

1.轮播图效果

1.在后端开发获取banner的api：

1.在后端项目NewCenter/apps/user_operations/views.py中开发获取片区banner图的视图：

from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView,Response
from users.models import PianQu
from users.serializers import PianQuModelSerializer
# Create your views here.


class GetPianQuBannerView(APIView):
    """获取片区banner图"""
    def get(self, request):
        p_list=PianQu.objects.all()
        re=PianQuModelSerializer(p_list,many=True)
        return Response(re.data)

2.在apps/user_operations目录下新建urls.py：

from django.urls import path
from .views import GetPianQuBannerView

urlpatterns = [
    path(\'getbanner/\',GetPianQuBannerView.as_view()),#手机端获取banner图

]

3.在NewCenter/urls.py中：

from django.contrib import admin
from django.urls import path,include
from django.views.static import serve
from NewCenter.settings import MEDIA_ROOT
import xadmin

urlpatterns = [
    #path(\'admin/\', admin.site.urls),
    path(\'xadmin/\', xadmin.site.urls),
    path(\'media/<path:path>\',serve,{\'document_root\':MEDIA_ROOT}),
    path(\'users/\',include(\'users.urls\')),
    path(\'user_operations/\',include(\'user_operations.urls\'))
]

2.在uni-app项目端newapp/pages/index/index.vue中：

<template>
    <view class="content">
        <swiper class="card-swiper" :class="dotStyle?\'square-dot\':\'round-dot\'" :indicator-dots="true" :circular="true"
         :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
         indicator-active-color="#0081ff">
            <swiper-item v-for="(item,index) in banner_list" :key="index" :class="cardCur==index?\'cur\':\'\'">
                <view class="swiper-item">
                    <image :src="item.banner" mode="aspectFill"></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
import {host,get,post} from \'@/commons/post_and_get.js\';
    export default {
        data() {
            return {
                title: \'Hello 新中街\',
                // 与轮播图有关的参数开始
                cardCur: 0,
                banner_list:[],
                //与轮播图有关的参数结束
            }
        },
        onLoad() {
            this.getBannerList()
        },
        methods: {
            //获取banner图列表
            async getBannerList(){
                let re=await get(\'/user_operations/getbanner/\')
                console.log(re)
                for(var i=0;i<re.length;i++){
                    re[i].banner=host+re[i].banner
                }
                this.banner_list=re
                console.log(this.banner_list)
            },
            // cardSwiper 与轮播图有关的方法开始
            cardSwiper(e) {
                this.cardCur = e.detail.current
            },
            //与轮播图有关的方法结束
        }
    }
</script>

<style>
    
</style>

重新启动项目后：

 

2.通告栏

1.通用组件通告栏组件介绍：

https://ext.dcloud.net.cn/plugin?id=30

2.下载zip包，解压后，将components整个文件夹，复制到项目newapp目录下

3.在pages/index/index.vue中引用：

<template>
    <view class="content">
…… 
        <uni-notice-bar showIcon="true" scrollable="true" single="true" :text="notText"></uni-notice-bar>
……
    </view>
</template>

<script>……
import uniNoticeBar from \'@/components/uni-notice-bar/uni-notice-bar.vue\'
    export default {
        data() {
            return {
                ……
                notText:\'灰色代表常规公告，绿色代表普通公告，蓝色代表重要公告，红色代表非常重要的公告。\'
            }
        },
        ……
        components: {uniNoticeBar} 
    }
</script>

<style>
    
</style>

运行效果

 

 3.公告列表功能开发

1.在后端，修改user_operations.models.py下的公告表为：

1.models.py：

from django.db import models
from users.models import UserProfile
from datetime import datetime
# Create your models here.


class Notice(models.Model):
    """公告"""

    user=models.ForeignKey(UserProfile,verbose_name=\'发布者\',on_delete=models.PROTECT,null=True,blank=True)
    jibie = models.IntegerField(choices=((1, \'常规公告\'), (2, \'不可忽略公告\'),(3,\'强制力公告\'),(4,\'重大公告\')), verbose_name=\'公告级别\', default=1,
                                 help_text=\'1：常规公告，2：不可忽略公告，3：强制力公告，4：重大公告\')
    content=models.CharField(max_length=200,verbose_name=\'公告内容\',help_text=\'最多200字\')
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

    class Meta:
        verbose_name = "公告表"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.content

执行数据更新命令

python manage.py makemigrations
python manage.py migrate

2.在apps/user_operations/新建serializers.py:

from rest_framework import serializers
from .models import Notice


class NoticeModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Notice
        fields="__all__"

3.在apps/user_operations/views.py中写获取公告列表的视图：

from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView,Response
from users.models import PianQu
from users.serializers import PianQuModelSerializer
from .models import Notice
from .serializers import NoticeModelSerializer
# Create your views here.

#……

class GetNoticeListView(APIView):
    """获取公告列表"""
    def get(self, request):
        n_list=Notice.objects.all().order_by(\'-add_time\')
        re=NoticeModelSerializer(n_list,many=True)
        return Response(re.data)

4.在apps/user_operations/urls.py中配置路由：

from django.urls import path
from .views import GetPianQuBannerView,GetNoticeListView

urlpatterns = [
    path(\'getbanner/\',GetPianQuBannerView.as_view()),#手机端获取banner图
    path(\'getnoticeclist/\',GetNoticeListView.as_view()),#获取公告列表
]

5.在xadmin后台添加一些公告的实验数据

 

 

2.在newapp中

1.在newapp/pages/index/index.vue：

<template>
    <view class="content">
        <swiper class="card-swiper" :class="dotStyle?\'square-dot\':\'round-dot\'" :indicator-dots="true" :circular="true"
         :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
         indicator-active-color="#0081ff">
            <swiper-item v-for="(item,index) in banner_list" :key="index" :class="cardCur==index?\'cur\':\'\'">
                <view class="swiper-item">
                    <image :src="item.banner" mode="aspectFill"></image>
                </view>
            </swiper-item>
        </swiper>
        
        <uni-notice-bar showIcon="true" scrollable="true" single="true" :text="notText"></uni-notice-bar>
        
        <view class="cu-timeline">
            <view v-for="(item,index) in notice_list" :key="index" :class="item.bclass">
                <view :class="item.bgclass">
                    <view class="cu-capsule radius">
                        <view class="cu-tag bg-black">{{item.add_time}}</view>
                        <view class="cu-tag line-black">【公告】</view>
                    </view>
                    <view class="margin-top">{{item.content}}</view>
                </view>
            </view>
        </view>
        
        <!-- 版权信息 -->
        <view class="solid-bottom padding text-center">
            ©由赤峰市落忆网络科技有限公司提供技术支持
        </view>
        

    </view>
</template>

<script>
import {host,get,post} from \'@/commons/post_and_get.js\';
import uniNoticeBar from \'@/components/uni-notice-bar/uni-notice-bar.vue\'
    export default {
        data() {
            return {
                title: \'Hello 新中街\',
                // 与轮播图有关的参数开始
                cardCur: 0,
                banner_list:[],
                //与轮播图有关的参数结束
                notText:\'灰色代表常规公告，绿色代表普通公告，蓝色代表重要公告，红色代表非常重要的公告。\',
                notice_list:[],
            }
        },
        onLoad() {
            this.getBannerList(),
            this.getNoticeList()
        },
        methods: {
            //获取banner图列表
            async getBannerList(){
                let re=await get(\'/user_operations/getbanner/\')
                console.log(re)
                for(var i=0;i<re.length;i++){
                    re[i].banner=host+re[i].banner
                }
                this.banner_list=re
                console.log(this.banner_list)
            },
            
            // cardSwiper 与轮播图有关的方法开始
            cardSwiper(e) {
                this.cardCur = e.detail.current
            },
            //与轮播图有关的方法结束
            
            async getNoticeList(){
                let re=await get(\'/user_operations/getnoticeclist/\')
                console.log(re)
                for(var i=0;i<re.length;i++){
                    if(re[i].jibie==1){
                        re[i][\'bclass\']=\'cu-item text-grey cuIcon-evaluate_fill\'
                        re[i][\'bgclass\']=\'content bg-grey shadow-blur\'
                    }
                    if(re[i].jibie==2){
                        re[i][\'bclass\']=\'cu-item text-green cuIcon-evaluate_fill\'
                        re[i][\'bgclass\']=\'content bg-green shadow-blur\'
                    }
                    if(re[i].jibie==3){
                        re[i][\'bclass\']=\'cu-item text-blue cuIcon-evaluate_fill\'
                        re[i][\'bgclass\']=\'content bg-blue shadow-blur\'
                    }
                    if(re[i].jibie==4){
                        re[i][\'bclass\']=\'cu-item text-red cuIcon-evaluate_fill\'
                        re[i][\'bgclass\']=\'content bg-red shadow-blur\'
                    }
                }
                this.notice_list=re
                console.log(re)
            }
        },
        components: {uniNoticeBar}
        
    }
</script>

<style>
    
</style>

运行效果