9.开发newapp的首页index

大道之行，天下为公。这篇文章主要讲述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 GetPianQuBannerViewurlpatterns = [ 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 xadminurlpatterns = [ #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="https://www.songbingjia.com/android/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>

重新启动项目后：

文章图片

【9.开发newapp的首页index】
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_namedef __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 Noticeclass 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,GetNoticeListViewurlpatterns = [ 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="https://www.songbingjia.com/android/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>

运行效果