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=302.下载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 migrate2.在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>运行效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录