9.开发newapp的首页index

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>

运行效果