码迷,mamicode.com
首页 > 移动开发 > 详细

9.开发newapp的首页index

时间:2020-06-21 09:56:16      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:重要   clist   this   round   lua   int   结束   protect   后台   

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>

运行效果

技术图片技术图片

 

9.开发newapp的首页index

标签:重要   clist   this   round   lua   int   结束   protect   后台   

原文地址:https://www.cnblogs.com/xuepangzi/p/13171240.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!