2index首页

原创 已于 2022-08-25 22:36:16 修改 · 280 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

于 2022-08-25 19:48:35 首次发布

文章目录

一、底部导航

pages 文件夹下 新建四个页面文件夹
>pages

	index
	list
	my
	shopcart

use tabBar 根据官方文档uni-app演示代码学习

创建四个，有选中和未选中两个状态

二、顶部开发

2.1navigation

底色：白色
左侧：放大镜 中间文字 右侧：消息
在这里插入图片描述
navigation pages里自定义导航栏

"style": {
				"navigationBarTitleText": "百年奥莱",
				"navigationBarBackgroundColor":"#FFFFFF",
				"navigationStyle":"custom",
				"app-plus":{
					"titleNView":{
						"buttons":[
							{
								"float":"left",
								"fontSrc":"./static/iconfont.ttf",
								"text":"\ue69d"
							},
							{
								"float":"right",
								"fontSrc":"./static/iconfont.ttf",
								"text":"\ue622"
							}
						]
					}
				}
			}

注：app-plus在app中和H5生效，各种小程序不生效，如需定制小程序的头部需要这样做：
1.2.1 pages.json中加入： “navigationStyle”:“custom”
1.2.1 page/index/index.vue中写入:

		<view>
			....你的小程序头部...
		</view>
	<!-- #endif -->

2.2 swiper

新建IndexSwiper.vue文件，封装，目录结构如图：
在这里插入图片描述
Indexswiper.vue

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image class='swiper-img' src="../../static/img/swiper1.jpg" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image class='swiper-img' src="../../static/img/swiper2.jpg" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image class='swiper-img' src="../../static/img/swiper3.jpg" mode=""></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
</script>

<style scoped>
swiper{
	width:100%;
	height: 400rpx;
}
.swiper-img{
	width:100%;
	height: 400rpx;
}	
</style>

bug：

1、图片显示，height小程序里正常，app不正常
解决：本身swiper里有150px 的默认高度，直接再写一个 swiper

<style scoped>
swiper{
	width:100%;
	height: 400rpx;
}
.swiper-img{
	width:100%;
	height: 400rpx;
}	
</style>

2、改变图片的大小单位用rpx，以前的upx有问题
3、组件名称swiper.vue or Swiper.vue,在传递数据的时候有可能图片就不见了

三、推荐部分

在这里插入图片描述

进行封装
创建 components/Recommend.vue
底色为蓝色，common.css中定义过
分析布局：一张大图
下方三张小图

<template>
	<view class='recommend bg-color'>
		
		<view class='recommend-item'>
			<image class='item-big' src="../../static/img/Children.jpg" mode=""></image>
			<view class='item-small'>
				<image class='item-img' src="../../static/img/Children1.jpg" mode=""></image>
				<image class='item-img' src="../../static/img/Children2.jpg" mode=""></image>
				<image class='item-img' src="../../static/img/Children3.jpg" mode=""></image>
			</view>
		</view>
		
		<view class='recommend-item'>
			<image class='item-big' src="../../static/img/Furnishing.jpg" mode=""></image>
			<view class='item-small'>
				<image class='item-img' src="../../static/img/Furnishing1.jpg" mode=""></image>
				<image class='item-img' src="../../static/img/Furnishing2.jpg" mode=""></image>
				<image class='item-img' src="../../static/img/Furnishing3.jpg" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
</script>

style：
内边距上下左右有空隙，padding：20rpx
图片上下排列：

display: flex;
flex-direction: column;
border-radius: 20rpx;
border: 2rpx solid #CCCCCC;
overflow: hidden;
margin:20rpx 0;

<style scoped>
.recommend{
	padding:20rpx;
}
.recommend-item{
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	border: 2rpx solid #CCCCCC;
	overflow: hidden;
	margin:20rpx 0;
}
.item-big{
	width:100%;
	height: 300rpx;
}
.item-small{
	width:100%;
	height: 240rpx;
}
.item-img{
	width:33.3333%;
	height: 240rpx;
}
</style>

四、猜你喜欢

在这里插入图片描述

4.1文字封装

<template>
	<view class='card'>
		<view>-</view>
		<slot>
			<view class='card-name'>{{cardTitle}}</view>
		</slot>
		<view>-</view>
	</view>
</template>

<script>
export default {
	props:{
		cardTitle:String
	}
}
</script>

<style scoped>
.card{
	padding:20rpx 0;
	display: flex;
	justify-content: center;
	font-weight: bold;
}
.card-name{
	padding:0 20rpx;
	font-size:32rpx;
}
</style>

indxe.vue

<template>
	<view class='index'>
		
		<IndexSwiper></IndexSwiper>
		<Recommend></Recommend>
		<Card cardTitle='猜你喜欢'></Card>
		
		
	</view>
</template>

<script>
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	export default {
		data() {
			return {
			
			}
		},
		components:{
			IndexSwiper,
			Recommend,
			Card
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>

</style>

五、单独商品展示和商品列表

在这里插入图片描述

单个组件：commodity
图片
商品名称
价格 原价
折扣

CommodityList.vue组件为：商品列表组件

CommodityList.vue组件传入数据给Commodity.vue作为展示。

CommodityList.vue代码为：

<template>
	<view class='commodity-list'>
		
		<!-- 商品列表组件 -->
		<Commodity :dataList='commodityList'></Commodity>
		<!--传到commodity.vue -->
		
	</view>
</template>

<script>
import Commodity from './Commodity.vue'
export default {
	data () {
		return {
			commodityList:[
				{
					id:1,
					imgUrl:"../../static/img/commodity1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/commodity2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/commodity3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:4,
					imgUrl:"../../static/img/commodity4.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				}
			]
		}
	},
	components:{
		Commodity
	}
}
</script>

<style>
</style>

Commodity.vue代码为：

<template>
	<view class='commodity'>
		<!-- 单个商品组件 -->
		<!-- 遍历 -->
		<view class='commodity-item' 
			v-for="(item,index) in dataList"
			:key='index'
		>
			<image class='commodity-img' :src="item.imgUrl" mode=""></image>
			<view class='commodity-content'>
				<text class='commodity-name'>{{item.name}}</text>
				<view>
					<text class='pprice'>¥{{item.pprice}}</text>
					<text class='oprice'>¥{{item.oprice}}</text>
				</view>
				<text class='discount'>{{item.discount}}折</text>
			</view>
		</view>
	
	</view>
</template>

<script>
export default {
	props:{
		dataList:Array//接入来自commoditylist.vue的数据
	}
}
</script>

<style scoped>
.commodity{
	display: flex;
	flex-wrap: wrap; //flex 堆叠方式 
}
.commodity-item{
	width: 375rpx;
	padding-bottom:20rpx;
}
.commodity-img{
	width:100%;
	height: 375rpx;
}
.commodity-content{
	text-align: center;
}
.commodity-name{
	overflow: hidden; // overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。
	text-overflow: ellipsis;//用于确定如何提示用户存在隐藏的溢出内容。 
	display: -webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;  //垂直布局
	color:#333333;
	word-break: break-all; //指定了怎样在单词内断行
	padding:6rpx 20rpx;
}
.oprice{
	text-decoration: line-through;
	font-size:24rpx;
	color:#999999;
}
.discount{
	border-radius: 4rpx;
	border:1px solid #FF3333;
	padding:2rpx 10rpx;
	font-size:20rpx;
	color:#FF3333;
}
</style>

五、运动户外页开发

1.1效果图
在这里插入图片描述
1.2 在components/index目录中创建了Banner.vue和Icons.vue组件
1.3 组件说明Banner.vue就是头图的展示。Icons.vue就是大家看到的宫格
1.4 Banner.vue代码如下：

<template>
	<view class='banner'>
		<image class='banner-img' src="../../static/img/banner1.jpg" mode=""></image>
	</view>
</template>

<script>
</script>

<style scoped>
.banner{
	width:100%;
	height: 300rpx;
}
.banner-img{
	width:100%;
	height: 300rpx;
}
</style>

1.5 Icos.vue代码如下：

<template>
	<view class='icons'>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons1.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons2.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons3.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons4.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons5.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons6.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons7.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/img/icons8.png" mode=""></image>
			<text class='f-color'>运动户外</text>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
.icons{
	display: flex;
	flex-wrap: wrap;
}
.icons-item{
	width:25%;
	display: flex;
	flex-direction: column;
	align-items: center; /* Pack items around the center */
	justify-content: center; /* 居中排列 */
	padding-top:20rpx;
}
.icons-img{
	width:110rpx;
	height: 110rpx;
}
</style>

六、热销爆品开发修改商品值

1.1效果图
在这里插入图片描述
1.2 component/index下创建Hot.vue组件
1.3 pages/index/index.vue引入Hot.vue组件
1.4 Hot组件内容为单个商品模块，所有引入了Commodity.vue组件。传递参数调整图片宽度和高度，Hot组件代码如下：

<template>
	<view class='hot'>
		
		<Commodity :dataList='hotList' itemW='250rpx' bigH='220rpx'></Commodity>
		
	</view>
</template>

<script>
import Commodity from '../common/Commodity.vue'
export default{
	data () {
		return {
			hotList:[
				{
					id:1,
					imgUrl:"../../static/img/hot1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/hot2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/hot3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				}
			]
		}
	},
	components:{
		Commodity
	}
}
</script>

<style>
</style>

commodity.vue 下修改接收图片大小调

<script>
export default {
	props:{
		dataList:Array,
		itemW:{
			type:String,
			default:"375rpx"
		},
		bigH:{
			type:String,
			default:"375rpx"
		}
	}
}
</script>

<template>
	<view class='commodity'>
		<!-- 单个商品组件 -->
		
		<view class='commodity-item' 
			v-for="(item,index) in dataList"
			:key='index'
			:style="'width:'+itemW+';'"
		>
			<image 
			class='commodity-img' 
			:src="item.imgUrl"
			 mode=""
			 :style="'height:'+bigH+';'"
			></image>
			
			<view class='commodity-content'>
				<text class='commodity-name'>{{item.name}}</text>
				<view>
					<text class='pprice'>¥{{item.pprice}}</text>
					<text class='oprice'>¥{{item.oprice}}</text>
				</view>
				<text class='discount'>{{item.discount}}折</text>
			</view>
		</view>
	
	</view>
</template>

可以考虑写成除以的倍数，外部传入列数
模板字符串

七、推荐店铺模块开发

1.1 完成后的效果图：

在这里插入图片描述

1.2 components/index目录下新建Shop.vue组件
1.3 pages/index/index.vue引入Shop.vue组件
1.4 Shop.vue组件分为：上大图，下滑块的内容布局，滑块采用uni-app提供组件scroll-view。
1.4.1 scroll-view需要给父元素加入width:100%;white-space: nowrap;其内容需要加入样式display: inline-block;
1.5 滑块内容调用了单个商品组件，其中改变了是否换行以及文字大小，Shop.vue具体代码如下：

<template>
	<view class='shop'>
		<view class='shop-item'>
			<view class='shop-big'>
				<image class='shop-big' src="../../static/img/shop.jpg" mode=""></image>
			</view>
			<scroll-view scroll-x="true" class='scroll-content'>
				<view class='scroll-item'>
					<Commodity 
						:dataList='shopList'
						wrap='no-wrap'
						itemW='200rpx'
						bigH='200rpx'
						nameSize='20rpx'
					></Commodity>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Commodity from '../common/Commodity.vue'
export default {
	data () {
		return {
			shopList:[
				{
					id:1,
					imgUrl:"../../static/img/shop1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/shop2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/shop3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:4,
					imgUrl:"../../static/img/shop4.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:1,
					imgUrl:"../../static/img/shop1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/shop2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/shop3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:4,
					imgUrl:"../../static/img/shop4.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				}
			]
		}
	},
	components:{
		Commodity
	}
}
</script>

<style scoped>
.shop-big{
	width:100%;
	height: 350rpx;
}
.scroll-content{
	width: 100%;
	white-space: nowrap;/*nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。*/
}
.scroll-item{
	display: inline-block;
}
</style>

八、隐藏滚动条和底部

1.1 隐藏全局滚动条，需要在pages.json的"app-plus"下设置一个属性：“scrollIndicator”:“none”
1.2 uniapp文档里了解到隐藏scroll-view滚动条需要在App.vue中添加样式：

::-webkit-scrollbar {  
    display: none;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}

九、顶栏滑块功能开发

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

1.2 顶部滑块数据：
topBar:[
{name:‘推荐’},
{name:‘运动户外’},
{name:‘服饰内衣’},
{name:‘鞋靴箱包’},
{name:‘美妆个护’},
{name:‘家居数码’},
{name:‘食品母婴’}
]
1.3 顶部滑块样式布局：

<view
class=‘scroll-item’
v-for=‘(item,index) in topBar’
:key=‘index’
@tap=‘changeTab(index)’
>
{{item.name}}


1.4 内容滑动部分:change 事件
<swiper @change=‘onChangeTab’ :current=“topBarIndex”>

{{item.name}}


1.5 方法定义点击滑动跳转：
changeTab(index){
if(this.topBarIndex === index){
return ;
}
this.topBarIndex = index;
},
onChangeTab(e){
this.changeTab(e.detail.current);
}

十、顶栏滑动跟随

1.1 顶部滑动跟随需要在scroll-view中添加scroll-into-view属性，其中代表滚动到哪个块中，匹配为子元素的id，也就是子元素需要加入id值，但是id值不可以为数字开头，那么代码如下：

<scroll-view :scroll-into-view='scrollIntoIndex'>
<view  :id="'top'+index" > </view>
</scroll-view>

1.2 在changeTab方法中写入this.scrollIntoIndex = ‘top’+index;

十一、改变内容块高度

bug

1.1 获取可视区域高度可以使用uni.getSystemInfo()，但是在iso中是有bug的，所以的高度值不对。
1.2 我们修正bug思想是：获取组件元素的高度值的合，然后赋值到内容块中（style=’height’）。
1.3 具体代码如下：特别注意需要在onReady中写入

let view = uni.createSelectorQuery().select(".home-data");
		view.boundingClientRect(data => {
		    this.clentHeight = data.height;
		}).exec();

home-data 这个类
获取到data里的height值，赋予给clientheight ，最后用于swiper适合的大小

uni-app开发商城首页实现
qinshi501的博客
12-19 231
准备工作：1 创建一个uni-ui项目，创建完的工程目录如下：uniapp开发项目可以打包成h5,app和小程序，我们可以在微信开发工具中运行效果如下，下面我们实现商城首页。
YII2 添加 force index强制索引
mdjeff的博客
08-19 1572
由于YII2框架的ActiveQuery中，不支持在mysql语句中构造 froce index () 、use index ()、ignore index ()…的写法，所以上网搜索查询后得到以下办法： 下载qamysqlconnection.zip，引入到 common\components 文件夹下。 在main_local.php中，添加类似db连接 'test_db' => [ //'class' => 'yii\db\Connection',// 一般我们使用的连接类 .
oracle中的index函数,index函数_excel中index函数的方法
weixin_42312523的博客
04-02 1674
Excel中经常需要使用到index函数，index函数具体该如何使用呢?下面是由学习啦小编分享的excel中index函数的方法，以供大家阅读和学习。excel中index函数的方法：index函数使用步骤1：下面用2个例子来说明数组形式和引用形式用法。index函数使用步骤2：首先介绍数组形式的使用方法index函数使用步骤3：举例1：在H2单元格中返回数组(D2：F11)中第3行、第3列的值...
python中index函数_详解python中的index函数用法
weixin_39853523的博客
11-26 9086
详解python中的index函数用法1.函数的创建def fun():　　　　　　　 #定义print('hellow') #函数的执行代码retrun 1 #返回值fun() #执行函数2.函数的参数普通参数 ：要按照顺序输入参数def fun(a,b,c):print(a)print(b)print(c)return afun(11,22,33)#输出：11#输出：...
oracle追加index,oracle add index
weixin_36190719的博客
04-05 2020
1.索引分类a) 唯一索引,作用是数据约束，保证数据唯一，还有就是数据索引，提高查询效率b)一般索引，只有数据索引的作用，2.唯一索引的建立create unique index 索引名on表名(字段名)ok,假设有一个Emploeyy表，里面有一个empName字段，我们来为empName添加唯一索引create uniqueindexidx_empname on employee(emp...
pandas不显示index_pandas中的index对象详解
weixin_42128988的博客
12-23 2126
在pandas中，Series和DataFrame对象是介绍的最多的，Index对象作为其构成的一部分，相关的介绍内容却比较少。对于Index对象而言，有以下两大类别IndexMultiIndex二者的区别就在于层级的多少，从字面含义也可以看出，MultiIndex指的是多层索引，Index是单层索引。先从单层索引开始介绍，在声明数据框的时候，如果没有指定index和columns参数，panda...
hexo修改index.html,Hexo自定义页面做首页
weixin_31720623的博客
06-03 1569
如果你想了解如何在 GitHub Pages上传自己写的网页作为首页，hexo博客作为其子页？即自己写的页面作为 http：//user.github.io 的页面，将hexo博客放在http：//user.github.io/blog上，怎么做？那就接着往下看…首先在看接下来的内容之前你至少已经会如何将hexo博客搭建在github page上了，如果还不会的童鞋可以查阅我之前写的文章：如何使用...
项目+swgger2 3.0版本访问不了swagger-ui/index.html
waper97的博客
12-02 2968
网上百度了一大堆，全tm是说什么在config里面配置啥啥的，像下面这种 有个锤子用，而且千篇一律的抄的； 去官网 github的springfox 最终解决： pom.xml引入: <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-boot-starter</artifactId> <version>3.0.0&
nginx配置访问index主页
热门推荐
li12412414的博客
07-27 2万+
一 背景   我们在做一个网站或者是一个网页的时候，一个通常的做法是当输入网站或者网页的域名xxxxx.com的时候就可以访问网站的主页。那么一个比较好的方法就是在nginx中进行配置。那么接下来我们就来讨论一下这个问题。 二 解决方法 在nginx中应当如何进行配置呢？ server { listen 80; server_name xxxxx.com; access_log /...
mysql数据库中index什么意思_MySQL Index详解
weixin_28347369的博客
01-18 4130
FROM:http://blog.csdn.net/tianmo2010/article/details/7930482①MySQL Index一、SHOW INDEX会返回以下字段1、Table 表的名称。2、 Non_unique 如果索引不能包括重复词,则为0,如果可以则为1。3、 Key_name 索引的名称4、 Seq_in_index 索引中的列序列号，从1开始。5、 Column_n...
index-2.html
06-27
支持HTML，有轮播图， 的
index2.html
04-05
响应式动画过渡效果演示
index (2)index (2)
06-24
index (2)
index (2).html
11-08
index (2).html
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 195
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
JavaScript 静态模块声明（静态分析、动态导入）
Irene1991的博客
12-29 488
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
vue2 基于虚拟dom的下拉选择框，保证大数据不卡顿，仿antd功能和样式
licongmingli的博客
12-31 591
本文介绍了一个基于Vue2和Ant Design 1.7.8的虚拟列表下拉选择框组件的封装实现。由于Ant Design原生组件不支持虚拟列表功能，作者结合vue-virtual-scroller和vue-select封装了一个支持多选/单选/清除/搜索功能的选择框组件。文章详细说明了组件实现的技术难点：包括动态挂载DOM的方式解决模板渲染问题、样式适配Ant Design风格的改造过程，以及当前存在的待优化项（下拉列表脱离文档流问题）。组件通过计算属性和监听机制实现了数据同步，并提供了完整的代码示例展示核
A2A协议与LangChain.js实战：构建微型软件工厂
最新发布
Web分享
01-01 794
随着多智能体（Multi-Agent）系统的兴起，单纯的工具调用（Tool Use）已无法满足复杂协作需求。本文将探讨从 MCP（Model Context Protocol）到 A2A（Agent-to-Agent）协议的演进，解析去中心化智能体通信的设计模式，并利用 LangChain.js、Express 和 JSON-RPC 2.0 构建一个包含 PM、Dev、QA 的分布式“微型软件工厂”。
Vue3中v-if与v-show的本质区别及动态组件状态保持的关键策略是什么？
https://blog.cmdragon.cn/
12-30 1225
特性v-ifv-showDOM存在与否销毁/重建始终存在切换成本高（销毁重建）低（改CSS）初始渲染成本低（不满足则不渲染）高（必渲染）适用场景切换频率低（如权限控制）切换频率高（如tab切换）
z-index: 2
12-08
根据提供的引用内容，z-index属性用于控制元素的堆叠顺序。当元素重叠时，z-index值越高的元素会覆盖z-index值较低的元素。因此，如果一个元素的z-index属性设置为2，则它将覆盖z-index值为1或0的元素。 以下是一个示例，其中元素A的z-index属性设置为2，因此它将覆盖元素B和C： ```html <div id="a" style="position:relative;z-index:2;">A</div> <div id="b" style="position:relative;z-index:1;">B</div> <div id="c" style="position:relative;z-index:0;">C</div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值