【前端】Vue项目：旅游App-（23）detail：房东介绍、热门评论、预定须知组件

news2024/9/27 9:30:24

文章目录

    • 目标
    • 过程与代码
      • 房东介绍landlord
      • 热门评论HotComment
      • 预定须知Book
    • 效果
    • 总代码
      • 修改或添加的文件
      • detail.vue
      • detail-book.vue
      • detail-hotComment.vue
      • detail-landlord.vue
    • 参考

本项目博客总结：【前端】Vue项目：旅游App-博客总结

目标

根据detail页面获得的数据完成房东介绍、热门评论和预定须知模块。

房东介绍：

在这里插入图片描述
热门评论：

在这里插入图片描述

预定须知：

在这里插入图片描述

过程与代码

房东介绍landlord

目标：

在这里插入图片描述
相关数据：

在这里插入图片描述
数据对应：

ps：后来发现这个V4房东是固定的背景，不是businessType：https://pic.tujia.com/upload/festatic/crn/v4landlord.png

在这里插入图片描述

传入数据：

<!-- 房东介绍 -->
<detailSection :header-text="'房东介绍'" :more-text="'房东主页'">
    <detailLandlord :landlord-module="detailData.mainPart.dynamicModule.landlordModule"/>
</detailSection>

在控制台把数据打印出来：

在这里插入图片描述
根据数据写html：

<template>
    <div class="landlord">
        <div class="bg">
            <img src="https://pic.tujia.com/upload/festatic/crn/v4landlord.png" alt="">
        </div>
        <div class="hotelInfo">
            <div class="logo">
                <img :src="props.landlordModule.hotelLogo" alt="">
            </div>
            <div class="name">
                <div class="name1">{{ props.landlordModule.hotelName }}</div>
                <div class="nameInfo">
                    <template v-for="(item, index) in props.landlordModule.hotelTags" :key="index">
                        <div class="separate" v-if="index !== 0" :style="{ color: item.tagText.color }">|</div>
                        <div class="text" :style="{ color: item.tagText.color }">{{ item.tagText.text }}</div>
                    </template>
                </div>
            </div>

            <div class="button">
                <span>联系房东</span>
            </div>
        </div>
        <div class="summary">
            <template v-for="(item, index) in props.landlordModule.hotelSummary" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="intro">{{ item.introduction }}</div>
                <div class="tip">{{ item.tip }}</div>
            </template>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    landlordModule: {
        type: Object,
        default: () => ({})
    }
})

console.log(props.landlordModule)
</script>

效果：

在这里插入图片描述
加上样式css：

.landlord {
    .bg {
        img {
            width: 100%;
        }
    }

    .hotelInfo {
        display: flex;
        justify-content: left;
        align-items: center;

        padding: 16px 0;

        .logo {
            img {
                width: 54px;
                height: 54px;
            }
        }

        .name {
            margin-left: 12px;
            margin-right: 16px;

            .name1 {
                font-weight: 700;
                font-size: 16px;
                color: #333;
            }

            .nameInfo {
                display: flex;
                align-items: center;
                margin-top: 5px;
                font-size: 12px;

                .separate {
                    padding: 0 2px;
                }
            }
        }

        .button {
            width: 72px;
            height: 24px;
            // 垂直水平居中
            line-height: 24px;
            text-align: center;
            background-image: var(--theme-linear-gradient);
            color: #fff;
            font-weight: 600;
            font-size: 12px;
            border-radius: 4px;
        }
    }

    .summary {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 22px 0 20px 0;

        .item {
            display: flex;
            flex-direction: column;
        }

        .title {
            color: #999;
            font-size: 12px;
        }

        .intro {
            color: #333;
            font-weight: 700;
            font-size: 18px;
            margin: 4px 0 2px 0;
        }

        .tip {
            color: #666;
            font-size: 12px;
        }
    }
}

效果：
在这里插入图片描述

热门评论HotComment

相关数据：

在这里插入图片描述
在控制台打印数据：

在这里插入图片描述

数据的对应：

在这里插入图片描述

根据数据写html：

<template>
    <div class="Comment">
        <div class="info">
            <div class="summary">
                <div class="overall">{{ props.hotComment.overall }}</div>
                <div class="scoreTitle">{{ props.hotComment.scoreTitle }}</div>
                <div class="totalCount">{{ props.hotComment.totalCount }}条评论</div>
                <div class="star">
                    <van-rate v-model="starValue" readonly allow-half />
                </div>
            </div>
            <div class="summaryTag">
                <template v-for="(item, index) in props.hotComment.subScores" :key="index">
                    <div>{{ item }}</div>
                </template>
            </div>
        </div>
        <div class="tag">
            <template v-for="(item, index) in props.hotComment.commentTagVo" :key="index">
                <div class="item" :style="{ color: item.color, backgroundColor: item.backgroundColor }">{{ item.text }}</div>
            </template>
        </div>
        <div class="comment">
            <div class="user">
                <div class="img">
                    <img :src="props.hotComment.comment.userAvatars" alt="">
                </div>
                <div class="name">
                    <div class="userName">{{ props.hotComment.comment.userName }}</div>
                    <div class="time">{{ props.hotComment.comment.checkInDate }}</div>
                </div>
            </div>
            <div class="content">
                {{ props.hotComment.comment.commentDetail }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    hotComment: {
        type: Object,
        default: () => ({})
    }
})
const starValue = ref(props.hotComment.overall);
console.log(props.hotComment)
</script>

效果：

在这里插入图片描述
加上样式：

.Comment {
    .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-bottom: 13px;

        .summary {
            display: flex;
            align-items: center;
            justify-content: left;

            .overall {
                font-size: 48px;
                font-weight: 700;
                color: #333;
                text-decoration: underline var(--primary-color);
            }

            .otherComment {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                margin-left: 10px;

                .scoreTitle {
                    font-size: 12px;
                    color: #333;
                    margin-bottom: 3px;
                }

                .totalCount {
                    font-size: 12px;
                    color: #999;
                    margin-bottom: 3px;
                }
            }

        }

        .summaryTag {
            display: grid;
            grid-template-columns: auto auto;
            color: #999;
            font-size: 12px;

            .item2 {
                margin: 0 2px 2px 0;
            }
        }
    }

    .tag {
        display: flex;
        flex-wrap: wrap;
        margin: 3px 0;

        .item {
            font-size: 12px;
            margin: 0 4px 4px 0;
            padding: 4px 8px;
            border-radius: 7px;
        }
    }

    .comment {
        background-color: #f7f9fb;
        margin: 8px 0 0;
        padding: 12px;

        .user {
            display: flex;
            justify-content: left;
            align-items: center;

            .img {
                width: 40px;

                img {
                    width: 100%;
                    border-radius: 50%;
                }
            }

            .name {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                margin-left: 5px;

                .userName {
                    font-weight: 600;
                    color: #333;
                    margin-bottom: 3px;
                }

                .time {
                    color: #999;
                }
            }


        }

        .content {
            color: #333;
            font-size: 12px;
            margin: 10px 0;
        }
    }
}

效果：
在这里插入图片描述

预定须知Book

相关数据：

在这里插入图片描述

数据对应：

在这里插入图片描述

在控制台打印数据：

在这里插入图片描述
根据数据搭建html：

<template>
    <div class="book">
        <div class="order">
            <template v-for="(item, index) in props.book.orderRules" :key="index">
                <div class="item">
                    <div class="title">{{ item.title }}</div>
                    <div class="if" v-if="item.icon !== null" :style="{ backgroundColor: item.color, color: '#fff' }">{{
                        item.icon
                    }}</div>
                    <div class="content">{{ item.introduction }}</div>
                </div>
            </template>
        </div>
        <div class="cancel">
            <template v-for="(item, index) in props.book.cancelRules" :key="index">
                <div class="content">
                    <div class="introduction">{{ item.introduction }}</div>
                    <div class="tip" :style="{ color: item.tipColor, backgroundColor: item.backColor }">{{ item.tip }}
                    </div>
                </div>
            </template>
        </div>
        <div class="checkIn">
            <div class="item">
                <div class="title">{{ props.book.checkInRules[0].title }}</div>
                <div class="content">
                    <template v-for="(item, index) in props.book.checkInRules[0].items" :key="index">
                        <div class="content-item">
                            <div class="icon">
                                <div v-if="item.isDeleted">
                                    <van-icon name="close" />
                                </div>
                                <div v-else="item.isDeleted">
                                    <van-icon name="passed" />
                                </div>
                            </div>
                            <div class="text">{{ item.introduction }}</div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="checkOther">
            <div class="item">
                <div class="title" v-if="props.book.checkinOtherInfo[0].title!==null">{{ props.book.checkinOtherInfo.title }}</div>
                <div class="content">
                    <template v-for="(item,index) in props.book.checkinOtherInfo[0].items" :key="index">
                        {{ item.introduction }}
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    book: {
        type: Object,
        default: () => ({})
    }
})

console.log(props.book)
</script>

<style lang="less" scoped>

</style>

效果：

在这里插入图片描述

加上样式：

.item {
    display: flex;
    align-items: center;

    margin-top: 20px;
    font-size: 12px;
    line-height: 15px;

    .title {
        color: #666;
        width: 64px;
        height: 15px;
    }

    .content {
        color: #333;
    }
}

.book {
    .order {
        .if {
            margin-right: 4px;
            padding: 1px 4px;
            border-radius: 3px;
        }
    }

    .checkIn {
        .content2 {
            display: grid;
            grid-template-columns: 100% 100%;          
            
            .content-item {
                display: flex;
                margin-bottom: 5px;

                .icon {
                    margin-right: 3px;
                }
            }
        }

    }

    .checkOther{
        .content{
            color: #666;
        }
    }
}

在这里插入图片描述

效果

在这里插入图片描述

在这里插入图片描述

总代码

修改或添加的文件

在这里插入图片描述

detail.vue

房屋详情页总页。

<template>
    <div class="detail top-page">
        <!-- 返回上级的导航栏 -->
        <van-nav-bar title="房屋详情" left-text="旅途" left-arrow @click-left="onClickLeft" />


        <div class="main" v-if="detailData.mainPart">
            <!-- 轮播图 -->
            <detailSwipe :swipe-data="detailData.mainPart.topModule.housePicture.housePics" />
            <!-- 标题 -->
            <div class="info">
                <detailInfo :house-info="detailData.mainPart.topModule" />
            </div>
            <!-- 内容 -->
            <detailSection :header-text="'房屋设施'" :more-text="'全部房屋设施'">
                <!-- 插槽内容 -->
                <detailFacility :houseFacility="detailData.mainPart.dynamicModule.facilityModule.houseFacility" />
            </detailSection>

            <!-- 房东介绍 -->
            <detailSection :header-text="'房东介绍'" :more-text="'房东主页'">
                <detailLandlord :landlord-module="detailData.mainPart.dynamicModule.landlordModule" />
            </detailSection>

            <!-- 热门评论 -->
            <detailSection :header-text="'热门评论'" :more-text="'全部'+detailData.mainPart.dynamicModule.commentModule.totalCountStr+'条评论'">
                <detailHotComment :hot-comment="detailData.mainPart.dynamicModule.commentModule" />
            </detailSection>

            <!-- 预定须知 -->
            <detailSection :header-text="'预定须知'">
                <detailBook :book="detailData.mainPart.dynamicModule.rulesModule"/>
            </detailSection>
            
        </div>

    </div>
</template>

<script setup>
import useDetailStore from '@/store/modules/detail';
import detailSwipe from '../detail/cpns/detail-swipe.vue'
import detailInfo from './cpns/detail-info.vue';
import detailSection from '@/components/detail-section/detail-section.vue';
import detailFacility from './cpns/detail-facility.vue';
import detailLandlord from './cpns/detail-landlord.vue';
import detailHotComment from './cpns/detail-hotComment.vue';
import detailBook from './cpns/detail-book.vue';

import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';

// const
const detailStore = useDetailStore()
const route = useRoute()

// 返回导航栏
const onClickLeft = () => history.back();

// 相关参数:在store前
const houseId = route.params.id

// store
detailStore.fetchDetailData(houseId)
const { detailData } = storeToRefs(detailStore)




</script>

<style lang="less" scoped>
.detail {

    .info {
        margin: 9px;
    }
}
</style>

detail-book.vue

预定须知组件。

<template>
    <div class="book">
        <div class="order">
            <template v-for="(item, index) in props.book.orderRules" :key="index">
                <div class="item">
                    <div class="title">{{ item.title }}</div>
                    <div class="if" v-if="item.icon !== null" :style="{ backgroundColor: item.color, color: '#fff' }">{{
                        item.icon
                    }}</div>
                    <div class="content">{{ item.introduction }}</div>
                </div>
            </template>
        </div>
        <div class="checkIn">
            <div class="item">
                <div class="title">{{ props.book.checkInRules[0].title }}</div>
                <div class="content">
                    <div class="content2">
                        <template v-for="(item, index) in props.book.checkInRules[0].items" :key="index">
                            <div class="content-item">
                                <div class="icon">
                                    <div v-if="item.isDeleted">
                                        <van-icon name="close" color="#ff6666" />
                                    </div>
                                    <div v-else="item.isDeleted">
                                        <van-icon name="passed" color="#17d2bc" />
                                    </div>
                                </div>
                                <div class="text">{{ item.introduction }}</div>
                            </div>
                        </template>
                    </div>

                </div>
            </div>
        </div>
        <div class="checkOther">
            <div class="item">
                <div class="title" v-if="props.book.checkinOtherInfo[0].title !== null">{{
                    props.book.checkinOtherInfo.title
                }}</div>
                <div class="title" v-else >    </div>
                <div class="content">
                    <template v-for="(item, index) in props.book.checkinOtherInfo[0].items" :key="index">
                        {{ item.introduction }}
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    book: {
        type: Object,
        default: () => ({})
    }
})

console.log(props.book)
</script>

<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;

    margin-top: 20px;
    font-size: 12px;
    line-height: 15px;

    .title {
        color: #666;
        width: 64px;
        height: 15px;
    }

    .content {
        color: #333;
    }
}

.book {
    .order {
        .if {
            margin-right: 4px;
            padding: 1px 4px;
            border-radius: 3px;
        }
    }

    .checkIn {
        .content2 {
            display: grid;
            grid-template-columns: 100% 100%;          
            
            .content-item {
                display: flex;
                margin-bottom: 5px;

                .icon {
                    margin-right: 3px;
                }
            }
        }

    }

    .checkOther{
        .content{
            color: #666;
        }
    }
}
</style>

detail-hotComment.vue

热门评论组件。

<template>
    <div class="Comment">
        <div class="info">
            <div class="summary">
                <div class="overall">{{ props.hotComment.overall }}</div>
                <div class="otherComment">
                    <div class="scoreTitle">{{ props.hotComment.scoreTitle }}</div>
                    <div class="totalCount">{{ props.hotComment.totalCount }}条评论</div>
                    <div class="star">
                        <van-rate v-model="starValue" readonly allow-half size="10px" color="var(--primary-color)" />
                    </div>
                </div>
            </div>
            <div class="summaryTag">
                <template v-for="(item, index) in props.hotComment.subScoresFocus" :key="index">
                    <div class="item2">{{ item.text }}</div>
                </template>
            </div>
        </div>
        <div class="tag">
            <template v-for="(item, index) in props.hotComment.commentTagVo" :key="index">
                <div class="item" :style="{ color: item.color, backgroundColor: item.backgroundColor }">{{ item.text }}
                </div>
            </template>
        </div>
        <div class="comment">
            <div class="user">
                <div class="img">
                    <img :src="props.hotComment.comment.userAvatars" alt="">
                </div>
                <div class="name">
                    <div class="userName">{{ props.hotComment.comment.userName }}</div>
                    <div class="time">{{ props.hotComment.comment.checkInDate }}</div>
                </div>
            </div>
            <div class="content">
                {{ props.hotComment.comment.commentDetail }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    hotComment: {
        type: Object,
        default: () => ({})
    }
})
const starValue = ref(props.hotComment.overall);
// console.log(props.hotComment)
</script>

<style lang="less" scoped>
.Comment {
    .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-bottom: 13px;

        .summary {
            display: flex;
            align-items: center;
            justify-content: left;

            .overall {
                font-size: 48px;
                font-weight: 700;
                color: #333;
                text-decoration: underline var(--primary-color);
            }

            .otherComment {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                margin-left: 10px;

                .scoreTitle {
                    font-size: 12px;
                    color: #333;
                    margin-bottom: 3px;
                }

                .totalCount {
                    font-size: 12px;
                    color: #999;
                    margin-bottom: 3px;
                }
            }

        }

        .summaryTag {
            display: grid;
            grid-template-columns: auto auto;
            color: #999;
            font-size: 12px;

            .item2 {
                margin: 0 2px 2px 0;
            }
        }
    }

    .tag {
        display: flex;
        flex-wrap: wrap;
        margin: 3px 0;

        .item {
            font-size: 12px;
            margin: 0 4px 4px 0;
            padding: 4px 8px;
            border-radius: 7px;
        }
    }

    .comment {
        background-color: #f7f9fb;
        margin: 8px 0 0;
        padding: 12px;

        .user {
            display: flex;
            justify-content: left;
            align-items: center;

            .img {
                width: 40px;

                img {
                    width: 100%;
                    border-radius: 50%;
                }
            }

            .name {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                margin-left: 5px;

                .userName {
                    font-weight: 600;
                    color: #333;
                    margin-bottom: 3px;
                }

                .time {
                    color: #999;
                }
            }


        }

        .content {
            color: #333;
            font-size: 12px;
            margin: 10px 0;
        }
    }
}
</style>

detail-landlord.vue

房东介绍组件。

<template>
    <div class="landlord">
        <div class="bg">
            <img src="https://pic.tujia.com/upload/festatic/crn/v4landlord.png" alt="">
        </div>
        <div class="hotelInfo">
            <div class="logo">
                <img :src="props.landlordModule.hotelLogo" alt="">
            </div>
            <div class="name">
                <div class="name1">{{ props.landlordModule.hotelName }}</div>
                <div class="nameInfo">
                    <template v-for="(item, index) in props.landlordModule.hotelTags" :key="index">
                        <div class="separate " v-if="index !== 0" :style="{ color: item.tagText.color }">|</div>
                        <div class="text " :style="{ color: item.tagText.color }">{{ item.tagText.text }}</div>
                    </template>
                </div>
            </div>

            <div class="button">
                <span>联系房东</span>
            </div>
        </div>
        <div class="summary">
            <template v-for="(item, index) in props.landlordModule.hotelSummary" :key="index">
                <div class="item">
                    <div class="title">{{ item.title }}</div>
                    <div class="intro">{{ item.introduction }}</div>
                    <div class="tip">{{ item.tip }}</div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    landlordModule: {
        type: Object,
        default: () => ({})
    }
})

// console.log(props.landlordModule)
</script>

<style lang="less" scoped>
.landlord {
    .bg {
        img {
            width: 100%;
        }
    }

    .hotelInfo {
        display: flex;
        justify-content: left;
        align-items: center;

        padding: 16px 0;

        .logo {
            img {
                width: 54px;
                height: 54px;
            }
        }

        .name {
            margin-left: 12px;
            margin-right: 16px;

            .name1 {
                font-weight: 700;
                font-size: 16px;
                color: #333;
            }

            .nameInfo {
                display: flex;
                align-items: center;
                margin-top: 5px;
                font-size: 12px;

                .separate {
                    padding: 0 2px;
                }
            }
        }

        .button {
            width: 72px;
            height: 24px;
            // 垂直水平居中
            line-height: 24px;
            text-align: center;
            background-image: var(--theme-linear-gradient);
            color: #fff;
            font-weight: 600;
            font-size: 12px;
            border-radius: 4px;
        }
    }

    .summary {
        display: flex;
        justify-content: space-around;
        align-items: center;

        padding: 22px 0 20px 0;

        .item {
            display: flex;
            flex-direction: column;
        }

        .title {
            color: #999;
            font-size: 12px;
        }

        .intro {
            color: #333;
            font-weight: 700;
            font-size: 18px;
            margin: 4px 0 2px 0;
        }

        .tip {
            color: #666;
            font-size: 12px;
        }
    }
}
</style>

参考

html图像和屏幕一样宽_林小李的博客-CSDN博客_html图片宽度和页面一样宽
css里面div如何居中显示文字-css教程-PHP中文网
CSS text-decoration 属性 | 菜鸟教程 (runoob.com)
最强大的 CSS 布局 —— Grid 布局 - 掘金 (juejin.cn)
CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/340051.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

我用python/C++调用ChatGPT自制了一个聊天问答机器人

我用python/C++调用ChatGPT自制了一个聊天问答机器人

目录1 ChatGPT完整版2 Python/C调用ChatGPT2.1 获取API秘钥2.2 测试API功能2.3 设计简单UI3 聊天问答1 ChatGPT完整版 2015年&#xff0c;OpenAI由马斯克、美国创业孵化器Y Combinator总裁阿尔特曼、全球在线支付平台PayPal联合创始人彼得蒂尔等硅谷科技大亨创立&#xff0c;公…
阅读更多...
【脚本开发】运维人员必备技能图谱

【脚本开发】运维人员必备技能图谱

脚本&#xff08;Script&#xff09;语言是一种动态的、解释性的语言&#xff0c;依据一定的格式编写的可执行文件&#xff0c;又称作宏或批处理文件。脚本语言具有小巧便捷、快速开发的特点&#xff1b;常见的脚本语言有Windows批处理脚本bat、Linux脚本语言shell以及python、…
阅读更多...
Spring缓存Demo

Spring缓存Demo

Spring中的缓存用法:有说错请指正 启动类加EnableCache 注解很多,这里举例几个实用的 第一组 value和key都没什么特别的含义,随你自己取,注意key里面是包了一层的 Cacheable(value"user",key "findUsers") 第一次查询的时候,会查数据库,然后将返回结果…
阅读更多...
【GlobalMapper精品教程】045：空间分析工具(2)——相交

【GlobalMapper精品教程】045：空间分析工具(2)——相交

GlobalMapper提供的空间分析（操作）的方法有：交集、并集、单并集、差异、对称差集、相交、重叠、接触、包含、等于、内部、分离等，本文主要讲述相交工具的使用。 文章目录 一、实验数据二、符号化设置三、相交运算四、结果展示五、心灵感悟一、实验数据 加载配套实验数据（…
阅读更多...
Hadoop安装 --- 简易安装Hadoop

Hadoop安装 --- 简易安装Hadoop

目录 1、使用xftp工具 在opt目录下创建install和soft文件 2、使用xftp工具 将压缩包上传到install文件 3、编写shell脚本 3.1、创建目录来放shell脚本 3.2、创建autoinsatll.sh文件并修改权限 3.3、编写autoinsatll.sh 文件 刷新资源 运行文件 格式化 启动所有进程 Ha…
阅读更多...
ChatGPT到底有多牛？博主带你亲测

ChatGPT到底有多牛？博主带你亲测

文章目录论文项目代码算法学习情感职业回答知乎ChatGpt网页版与客户端版个人评价论文 问他毕设框架&#xff1a; 让他帮我写一段毕设背景部分&#xff1a; 项目代码 我让他帮我用Django写一个demo网站&#xff1a; 算法 matlab写遗传算法&#xff1a; 问一个数据结构&…
阅读更多...
Java是如何创建线程的（二）从glibc到kernel thread

Java是如何创建线程的（二）从glibc到kernel thread

Java是如何创建线程的&#xff08;二&#xff09;从glibc到kernel thread 背景 上一节我们讨论了java线程是如何创建的&#xff0c;看了看从java代码层面到jvm层面的源码里都干了什么。 整个流程还是比较复杂的&#xff0c;我将上一节总结的调用时序图贴在下面&#xff0c;方…
阅读更多...
Flutter Widget - Container 容器

Flutter Widget - Container 容器

Container 属性 child 容器包含的子组件color 容器背景色padding 内边距margin 外边距decoration 定义容器形状、颜色alignment 子组件在容器内的对齐方式constraints 定义宽高width 宽(可选)height 高(可选)transform 变换transformAlignment 变换原点的相对位置foregroundDe…
阅读更多...
【Unity3D 常用插件】Haste插件

【Unity3D 常用插件】Haste插件

一&#xff0c;Haste介绍 Haste插件是一款针对 Unity 3D 的 Everthing软件&#xff0c;可以实现基于名称快速定位对象的功能。Unity 3D 编辑器也自带了搜索功能&#xff0c;但是在 project视图 和 Hierarchy视图 中的对象需要分别查找&#xff0c;不支持模糊匹配。Haste插件就…
阅读更多...
MySQL-InnoDB数据页结构浅析

MySQL-InnoDB数据页结构浅析

在MySQL-InnoDB行格式浅析中&#xff0c;们简单提了一下 页 的概念&#xff0c;它是 InnoDB 管理存储空间的基本单位&#xff0c;一个页的大小一般是 16KB 。 InnoDB 为了不同的目的而设计了许多种不同类型的 页&#xff1a; 存放表空间头部信息的页存放 Insert Buffer信息的…
阅读更多...
Maven专题总结

Maven专题总结

1. 什么是Maven Maven 是一个项目管理工具&#xff0c;它包含了一个项目对象模型 (POM&#xff1a; Project Object Model)&#xff0c;一组标准集合&#xff0c;一个项目生命周期(Project Lifecycle)&#xff0c;一个依赖管理系统(Dependency Management System)&#xff0c;和…
阅读更多...
3分钟，学会了一个调试CSS的小妙招

3分钟，学会了一个调试CSS的小妙招

Ⅰ. 作用 用于调试CSS , 比控制台添更加方便&#xff0c;不需要寻找 &#xff1b;边添加样式&#xff0c;边可以查看效果&#xff0c;适合初学者对CSS 的理解和学习&#xff1b; Ⅱ. 快速实现&#xff08;两边&#xff09; ① 显示这个样式眶 给 head 和 style 标签添加一个…
阅读更多...
Power BI 筛选器函数---Window实例详解

Power BI 筛选器函数---Window实例详解

一、Window函数 语法&#xff1a; Window ( <起始位置>,<起始位置类型>,<结束位置>,<结束位置类型>, [<关系>], [<OrderBy>],[空白],[PartitionBy] ) 含义&#xff1a; 对指定分区&#xff08;PartitioinBy)中的行&#xff08;关系表&…
阅读更多...
getchar()的用法

getchar()的用法

getchar的功能 它的作用是从stdin流中读入一个字符&#xff0c;也就是说&#xff0c;如果stdin有数据的话不用输入它就可以直接读取了&#xff0c;第一次getchar()时&#xff0c;确实需要人工的输入&#xff0c;但是如果你输了多个字符&#xff0c;以后的getchar()再执行时就会…
阅读更多...
python+django高校师生健康信息管理系统pycharm

python+django高校师生健康信息管理系统pycharm

管理员功能模块 4.1登录页面 管理员登录&#xff0c;通过填写注册时输入的用户名、密码、角色进行登录&#xff0c;如图所示。 4.2系统首页 管理员登录进入师生健康信息管理系统可以查看个人中心、学生管理、教师管理、数据收集管理、问卷分类管理、疫情问卷管理、问卷调查管理…
阅读更多...
大数据框架之Hadoop：HDFS（一）HDFS概述

大数据框架之Hadoop：HDFS（一）HDFS概述

1.1HDFS产出背景及定义 HDFS 产生背景 随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切需要一种系统来管理多台机器上的文件&#xff0c;这就是分布式文件…
阅读更多...
查缺补漏三：事务隔离级别

查缺补漏三：事务隔离级别

什么是事务&#xff1f; 事务就是一组操作的集合&#xff0c;事务将整组操作作为一个整体&#xff0c;共同提交或者共同撤销 这些操作只能同时成功或者同时失败&#xff0c;成功即可提交事务&#xff0c;失败就执行事务回滚 MySQL的事务默认是自动提交的&#xff0c;一条语句执…
阅读更多...
【LeetCode第 332 场周赛】

【LeetCode第 332 场周赛】

传送门 文章目录6354. 找出数组的串联值6355. 统计公平数对的数目6356. 子字符串异或查询6357. 最少得分子序列6354. 找出数组的串联值 题目 思路 前后指针 代码 class Solution { public:long long findTheArrayConcVal(vector<int>& nums) {long long res 0;i…
阅读更多...
多线程相关面试题

多线程相关面试题

讲解下你自己理解的 CAS 机制 ? 全称 Compare and swap, 即 “比较并交换”. 相当于通过一个原子的操作, 同时完成 “读取内存, 比较是否相等, 修改内存” 这三个步骤. 本质上需要 CPU 指令的支撑. ABA问题怎么解决&#xff1f; 给要修改的数据引入版本号. 在 CAS 比较数据…
阅读更多...
微搭低代码从入门到精通06-代码编辑器

微搭低代码从入门到精通06-代码编辑器

有初学的同学一直有个疑问&#xff0c;什么叫低代码。低代码的特点是提供了大量的前端组件&#xff0c;我们在开发小程序的时候可以直接拖拽就完成了界面的开发。 但是一款APP的开发只有界面是不够的&#xff0c;还需要有交互逻辑&#xff0c;比如我们在会员小程序里充值的时候…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023