UNIAPP实战项目笔记27 商品详情对应数据渲染 EXPRESS 设置跨域访问

亦凉 2024-04-01 11:19 86阅读 0赞

### UNIAPP实战项目笔记27 商品详情对应数据渲染 ###

#### EXPRESS 设置跨域访问 ####

//设置跨域访问（设置在所有的请求前面即可）
    router.all("*", function (req, res, next) {
        
    	//设置允许跨域的域名，*代表允许任意域名跨域
    	res.header("Access-Control-Allow-Origin", "*");
    	//允许的header类型
    	res.header("Access-Control-Allow-Headers", "content-type");
    	//跨域允许的请求方式 
    	res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    	if (req.method == 'OPTIONS')
    		res.sendStatus(200); //让options尝试请求快速结束
    	else
    		next();
    });

#### 设置后端的接口 ####

*  index.js

#### 设置详情页的参数改为请求过来的值 ####

*  detail.vue

<template>
            <view class="details">
                
                <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item>
                        <view class="swiper-item">
                            <image class="swiper-img" :src="goodsContent.imgUrl" mode=""></image>
                        </view>
                    </swiper-item>
                </swiper>
                
                <view class="details-goods">
                    <view class="goods-pprice">¥{
        {
        goodsContent.pprice}} </view>
                    <view class="goods-oprice">¥{
        {
        goodsContent.oprice}} </view>
                    <view class="goods-name">{
        {
        goodsContent.name}} </view>
                </view>
                
                <view class="">
                    <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                    <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                    <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                    <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                    <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                    <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                </view>
                
                
                <Card cardTitle="看了又看"></Card>
                <CommodityList :dataList="dataList"></CommodityList>
                
                
                <view class="details-foot">
                    <view class="iconfont icon-xiaoxi"></view>
                    <view class="iconfont icon-31gouwuche"></view>
                    <view class="add-shopcart" @tap="showPop">加入购物车</view>
                    <view class="purchase" @tap="showPop">立刻购买</view>
                </view>
                
                
                <view class="pop" v-show="isShow" @touchmove.stop="">
                    
                    <view class="pop-mask" @tap="hidePop"> </view>
                    
                    <view class="pop-box" :animation="animationData">
                        <view class="">
                            <image class="pop-img" src="../../static/img/b3.jpg" mode=""></image>
                        </view>
                        <view class="pop-num">
                            <view class="">
                                购买数量
                            </view>
                            <UniNumberBox></UniNumberBox>
                        </view>
                        <view class="pop-sub">
                            确定
                        </view>
                    </view>
                </view>
            </view>
        </template>
    
        <script>
            import $http from '@/common/api/request.js'
            import Card from '@/components/common/Card.vue';
            import CommodityList from '@/components/common/CommodityList.vue';
            import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue';
            export default {
        
                data() {
        
                    return {
        
                        isShow:false,
                        goodsContent:{
        },
                        animationData:{
        },
                        swiperList:[
                            {
        imgUrl:"../../static/img/b3.jpg"},
                            {
        imgUrl:"../../static/img/b3.jpg"},
                            {
        imgUrl:"../../static/img/b3.jpg"}
                        ],
                        dataList:[{
        
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
        
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
        
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }]
                    };
                },
                components:{
        
                    Card,
                    CommodityList,
                    UniNumberBox
                },
                onLoad(e) {
        
                    // console.log(e.id);
                    // 设置默认id=1
                    if(!e.id)
                        e.id = 1;
                    this.getData(e.id);
                },
                // 修改返回默认行为
                onBackPress(){
        
                    if (this.isShow) {
        
                        this.hidePop();
                        return true;  
                    }
                    
                },
                methods:{
        
                    // 请求商品
                    getData(id){
        
                        $http.request({
        
                            url:"/goods/id",
                            data:{
        
                                id:id
                            }
                        }).then((res)=>{
        
                            this.goodsContent = res[0];
                        }).catch(()=>{
        
                            uni.showToast({
        
                                title:'请求失败',
                                icon:'none'
                            })
                        })
                    },
                    showPop(){
        
                        // 初始化一个动画
                        var animation = uni.createAnimation({
        
                            duration:200 // 动画时间
                        });
                        // 定义动画内容
                        animation.translateY(600).step();
                        // 导出动画数据传递给data层
                        this.animationData = animation.export();
                        this.isShow = true;
                        setTimeout(()=>{
        
                            animation.translateY(0).step();
                            this.animationData = animation.export();
                        },200)
                    },
                    hidePop(){
        
                        var animation = uni.createAnimation({
        
                            duration:200
                        });
                        animation.translateY(600).step();
                        this.animationData = animation.export();
                        this.isShow = true;
                        setTimeout(()=>{
        
                            animation.translateY(0).step();
                            this.isShow = false;
                        },200)
                    },
                }
            }
        </script>
    
        <style lang="scss">
        swiper{
        
            width: 100%;
            height: 700rpx;
        }
        .swiper-img{
        
            width: 100%;
            height: 700rpx;
        }
        .details{
        
            padding-bottom: 90rpx;
        }
        .details-goods{
        
            text-align: center;
            font-weight: bold;
            font-size: 36rpx;
            padding: 10rpx 0;
        }
        .details-img{
        
            width: 100%;
        }
        .details-foot{
        
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 90rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FFFFFF;
        }
        .details-foot .iconfont{
        
            width: 60rpx;
            height: 60rpx;
            border-radius: 100%;
            background-color: #000000;
            color: #FFFFFF;
            text-align: center;
            margin: 0 10rpx;
            line-height: 60rpx;
        }
        .add-shopcart{
        
            margin: 0 40rpx;
            padding: 6rpx 30rpx;
            background-color: #000000;
            color: #FFFFFF;
            border-radius: 40rpx;
            
        }
        .purchase{
        
            margin: 0 40rpx;
            padding: 6rpx 30rpx;
            background-color: #49BDFB;
            color: #FFFFFF;
            border-radius: 40rpx;
        }
        .pop{
        
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
        }
        .pop-mask{
        
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .pop-box{
        
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #FFFFFF;
        }
        .pop-img{
        
            width: 260rpx;
            height: 260rpx;
            top:-130rpx;
            border-radius:20rpx 20rpx 0 0;
            margin: 30rpx;
        }
        .pop-sub{
        
            line-height: 80rpx;
            background-color: #49BDFB;
            color: #FFFFFF;
            text-align: center;
        }
        .pop-num{
        
            padding: 20rpx;
            display: flex;
            justify-content: space-between;
        }
    
        </style>

#### 设置点击组件跳转到详情带参数id ####

*  commodity.vue

<template>
        <view class="commodity" 
            :style="'flex-wrap:'+wrap+';'"
        >
            
            <view class="commodity-item"
                v-for="(item,index) in dataList"
                :key="index"
                :style="'width:'+itemW+';'"
                @tap="goDetails(item.id)"
            >
                <image 
                    class="commodity-img" 
                    :src="item.imgUrl"                 
                    :style="'height:'+bigH+';'"
                    mode=""
                ></image>
                <view class="commodity-content">
                    <text class="commodity-name" :style="'font-size:'+nameSize+';'">{
        {
        item.name}}</text>
                    <view class="">
                        <text class="pprice">${
        {
        item.pprice}}</text>
                        <text class="oprice">${
        {
        item.oprice}}</text>
                    </view>
                    <text class="discount">{
        {
        item.discount}}折</text>
                </view>
            </view>
        </view>
    </template>
    
    <script>
        /* 接受数据  dataList*/
        export default {
        
            props:{
        
                //数据
                dataList:Array,
                // 宽度
                itemW:{
        
                    type:String,
                    default:"375rpx" /* 通过传参数来改变组件默认样式*/
                },
                //高度
                bigH:{
        
                    type:String,
                    default:"375rpx" /* 通过传参数来改变组件默认样式*/
                },
                // 是否换行
                wrap:{
        
                    type:String,
                    default:"wrap" /* 通过传参数来改变组件默认样式*/
                },
                //商品文字大小
                nameSize:{
        
                    type:String,
                    default:"26rpx"
                }
            },
            methods:{
        
                goDetails(id){
        
                    uni.navigateTo({
        
                        url:'/pages/details/details?id='+id
                    })
                }
            }
        }
    </script>
    
    <style lang="scss">
    .commodity{
        
        display: flex;
    }
    .commodity-item{
        
        padding-bottom: 20rpx;
    }
    .commodity-img{
        
        width: 100%;
    }
    .commodity-content{
        
        text-align: center;
    }
    .commodity-name{
        
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
        color: #333;
        word-break: break-all;
        padding: 6rpx 20rpx;
    }
    .oprice{
        
        text-decoration: line-through;
        font-size: 24rpx;
        color: #999;
    }
    .discount{
        
        border-radius: 4rpx;
        border: 1px solid #FF3333;
        padding: 2rpx 10rpx;
        font-size: 20rpx;
        color: #FF3333;
    }
    
    </style>

#### 目录结构 ####

![目录结构][4e16d4c4dc654d47986a4247ba92db3b.png]

#### 目录结构 ####

##### 前端目录结构 #####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
     *  details
        
         *  details.vue
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
     *  uni
        
         *  uni-number-box
            
             *  uni-number-box.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css

#### 实例效果图 ####

![商品详情渲染实例效果图][1d3e02f6ba8b458db5c6bd0f99b91c7c.png]

[4e16d4c4dc654d47986a4247ba92db3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/744506dafa0f406ca7e7e91c753ad25a.png
[1d3e02f6ba8b458db5c6bd0f99b91c7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd59c5c7e7ca4d3786f06eac581e9af7.png