uniapp项目-懂你找图

news2024/12/23 8:17:53

文章目录

    • 项目介绍
    • 项目搭建
        • 1.项目创建
      • 2.新增tabbar
        • 3引入字体图标
    • uni-ui
        • 介绍
        • 使用
    • uni-api
        • 介绍
    • 首页模块
        • 功能分析
        • 搭建子页面
            • 分段器介绍
        • 封装自己的异步请求
            • 为什么要封装
            • 封装的思路
        • 编写首页-推荐页面
            • 分页功能
        • 专辑列表
        • 获取专辑详情数据

项目介绍

微信小程序，提供图片、视频的浏览、下载功能。

项目搭建

1.项目创建

创建项目 vue create -p dcloudio/uni-preset-vue my-project
安装sass依赖npm install sass-loader node-sass

2.新增tabbar

(创建页面放在src下面)
页面名称 路径
首页 home/index.vue
横屏 horizontal/index.vue
精美视频 vedio/index.vue
搜索 search/index.vue
我的 mine/index.vue

page.json:

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/horizontal/index",
			"style": {
				"navigationBarTitleText": "横屏"
			}
		},
		{
			"path": "pages/video/index",
			"style": {
				"navigationBarTitleText": "精美视频"
			}
		},
		{
			"path": "pages/search/index",
			"style": {
				"navigationBarTitleText": "搜索"
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}				
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		//如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
		    "color":"#8a8a8a",//tab 上的文字默认颜色
			"selectedColor":"#d4237a",//tab 上的文字选中时的颜色
			"backgroundColor":"#fff",//tab 的背景色
			"position":"bottom",//可选值 bottom、top，top 值仅微信小程序支持
			"borderStyle":"black",//tabbar 上边框的颜色，可选值 black/white
			"list": [{//tab 的列表，
			  "pagePath": "pages/home/index",//	页面路径，必须在 pages 中先定义
			  "text": "首页",//tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			  "iconPath":"./static/item/home1.png",//图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
			  "selectedIconPath":"static/item/home.png"//选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
			},{
			  "pagePath": "pages/horizontal/index",
			  "text": "横屏",
			  "iconPath":"./static/item/img1.png",
			  "selectedIconPath":"static/item/img.png"
			}, {
			  "pagePath": "pages/video/index",
			  "text": "精美视频",
			  "iconPath":"./static/item/vedio1.png",
			  "selectedIconPath":"static/item/vedio.png"
			}, {
			  "pagePath": "pages/search/index",
			  "text": "搜索",
			  "iconPath":"./static/item/search1.png",
			  "selectedIconPath":"static/item/search.png"
			}, {
			  "pagePath": "pages/mine/index",
			  "text": "我的",
			  "iconPath":"./static/item/mine1.png",
			  "selectedIconPath":"static/item/mine.png"
			} 
		]
	}
}

在这里插入图片描述

3引入字体图标

使用阿里矢量图标库：
选择图标,加入购物车->添加至项目->点击下载至本地
：
在这里插入图片描述
将iconfont.css打开将文件路径换成外网的
在这里插入图片描述
另存为wxss文件，复制粘贴至项目->在App.vue文件中引入，

@import url("./styles/iconfont.wxss");

就可以通过class使用

<view>首页
	<text class="iconfont icon-shouye"></text>
	</view>

uni-ui

介绍
  • https://uniapp.dcloud.io/component/README
  • uni-ui是DClound提供的一个跨端ui库，它基于vue组件、flex布局、无dom的跨全端ui框架
  • uni-ui不包括基础组件，它是基础组件的补充
  • 数字角标、日历、卡片、折叠面板、倒计时、抽屉、悬浮按钮、收藏按钮、底部购物导航、宫格、图标、索引列表、列表、加载更多、自定义导航、通告栏、数字输入框、分页器、弹出层、评分、搜索栏、分段器、步骤条、滑动操作、轮播图指示点、标签
使用
  • https://github.com/dcloudio/uni-ui
  • 安装uni-ui
npm install @dcloudio/uni-ui
  • 局部引入组件
  • 注册组件
  • 使用组件
<template>
	<view>首页
	<text class="iconfont icon-shouye"></text>
	<!--使用组件-->
	<uni-badge text="1"></uni-badge>
	<uni-badge text="2" type="success" ></uni-badge>
	<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
	</view>
	
</template>

<script>
	import {uniBadge} from '@dcloudio/uni-ui'//局部引入组件
	export default {//注册组件
	    components: {uniBadge}
	}
</script>

<style>
</style>

在这里插入图片描述

uni-api

介绍
  • https://uniapp.dcloud.io/api/
  • 原生的微信小程序的api不支持promise ，uni-app对大部分的小程序的原生api做了封装，使之支持promise
  • 使用方式：
    - 原生微信小程序wx.request
    - uniapi方式uni.request
    - 其他api使用方式类似
//页面加载完毕
		onLoad(){
			//1原生微信小程序的方式、
			wx.request({
				url:"http://jsonplaceholder.typicode.com/posts",
				success(res) {
					console.log(res);
				}
			})
			//2uni-api
			uni.request({
				url:"http://jsonplaceholder.typicode.com/posts"
			}).then(res=>{
				console.log(res)
			})
			
		}

结果：
在这里插入图片描述第一个是uniapi的请求结果：一个数组，第一个值表示成功还是失败（没有失败就是null），第二个表示返回的数据
第二个是微信小程序的请求结果

首页模块

功能分析

  • 修改导航栏外观

  • 使用分段器搭建子页面

  • 封装自己的异步请求（发送请求的时候想要显示一个等待中的效果，所以封装）

pages.json中修改全局样式

"globalStyle": {
		"navigationBarTextStyle": "white",//只有white/black
		"navigationBarTitleText": "懂你找图",
		"navigationBarBackgroundColor": "#000"
		//"backgroundColor": "#F8F8F8"
	},

在这里插入图片描述

搭建子页面
  • 首页分为四个模块：推荐、分类、最新、专辑
  • 新建自定义组件代替上述四个页面
    home-recommend
    home-category
    home-new
    home-album
分段器介绍

分段器指的是uni-ui的一个组件，其实就是我们俗称的标签页，tab栏。

<template>
	<view>
	    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#d4237a"></uni-segmented-control>
		<view class="content">
				<view v-show="current === 0">
					<home-recommend></home-recommend>
				</view>
				<view v-show="current === 1">
					<home-category></home-category>
				</view>
				<view v-show="current === 2">
					<home-new></home-new>
				</view>
				<view v-show="current === 3">
					<home-album></home-album>
				</view>
		</view>
	</view>
	
</template>

<script>
	
	import homeRecommend from "./home-recommend";
	import homeCategory from "./home-category";
	import homeNew from "./home-new";
	import homeAlbum from "./home-album"
	import {uniSegmentedControl} from '@dcloudio/uni-ui'//局部引入分段器组件
	export default {
		components:{
			homeRecommend,
			homeCategory,
			homeNew,
			homeAlbum,
			uniSegmentedControl
		},
		 data() {
		        return {
		            items: ['推荐','分类','最新','专辑'],
		            current: 0
		        }
		    },
		    methods: {
		        onClickItem(e) {
		            if (this.current !== e.currentIndex) {
		                this.current = e.currentIndex;
		            }
		        }
		    }
	}
</script>

<style>
</style>

在这里插入图片描述

封装自己的异步请求
为什么要封装
  • 原生微信小程序的请求不支持promise
  • uni-api的请求不能够方便添加请求中的效果
  • uni-api请求返回值是个数组，用起来不方便
封装的思路
  • 基于原生promise封装
  • 挂载到vue原型上
  • 通过this.request方式来使用

pages下新建utils文件夹，新建request.js文件

//es6
export default (params)=>{
	//加载中
	uni.showLoading({
		title:"加载中"
	})
	
	return new Promise((resolve,reject)=>{
		wx.request({
			...params,
			success(res) {
				resolve(res)
			},
			fail(error) {
				reject(error)
			},
			complete() {
				uni.hideLoading()
			}
			
		})
	})
}

main.js中引入并挂载到原型上

import request from './utils/request'
Vue.prototype.request=request

页面中使用this.reques

onLoad() {
	this.request({
			url:"http://jsonplaceholder.typicode.com/posts"
		})
		.then(res=>{
			console.log(res)
		})
}

拿到数据
在这里插入图片描述
把请求中成功返回改为res.data，拿到数据就更加简单了。

加载中效果
在这里插入图片描述

编写首页-推荐页面
  • 接口文档https://www.showdoc.cc/414855720281749?page_id=3678621017219602
  • 数据动态渲染
  • JavaScript 日期处理类库moment.js使用
  • “热门”列表基于（原生小程序的）scroll-view的分页加载

uni.scss新增主题色

/*主题颜色*/

$color:#d52a7e;

安装moment.js

npm install moment --sav

homepage_recommands/index.vue

<template>
	<view v-if="recommends.length>0"><!--recommends有数据才显示里面的标签，否则会先显示undefined一闪而过-->
		<!--推荐开始-->
		<view class="recommend_wrap">
			<view class="recommend_item" 
			v-for="item in recommends"
			:key="item.id"
			>
			
			  <image  :src="item.thumb" mode="widthFix"></image>  <!--mode设置为widthFix高度自适应-->
			
			</view>
				
		</view>
		<!--推荐结束-->
		<!--月份开始-->
		<view class="month-wrap">
			<view class="month_title">
				<view class="month_title_info">
					<view class="month_info">
						<text>{{monthes.DD}}</text>
						/{{monthes.MM}}月
					</view>
					<view class="month_text">
						你负责美丽就好
					</view>
				</view>
				<view class="month_title_more">
					更多>
				</view>
			</view>
			<view class="month_content">
				<view  class="month_item"
				 v-for="item in monthes.items" 
				 :key="item.id">
					 <image  :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image><!--缩略图--> 
				</view>
				
			</view>
		</view>
		<!--月份结束-->
		<!--热门开始-->
		<view class="hot_wrap">
			<view class="hot_title">
				<text>热门</text>
			</view>
			<view class="hot_content">
				<view class="hot_item"
				v-for="item in hots"
				:key="item.id"
				>
				<image :src="item.thumb" mode="widthFix"></image>	
				</view>
			</view>
		</view>
		<!--热门结束-->
		
		
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data(){
			return{
				//推荐列表
				recommends:[],
				//月份列表
				monthes:{},
				//热门列表
				hots:[]
				
			}
		},
		mounted(){
			this.request({
				url:"http://service.picasso.adesk.com/v3/homepage/vertical",
				data:{
					limit:30,//获取多少条数据
					order:"hot",//关键字 “hot”
					skip:0//跳过多少条
				}
			})
			.then(result=>{
				console.log(result)
				this.recommends = result.res.homepage[1].items
				this.monthes=result.res.homepage[2]
				//将时间戳改为 xx号/xx月 moment.js
				this.monthes.MM=moment(this.monthes.stime).format("MM")
				this.monthes.DD=moment(this.monthes.stime).format("DD")
				//获取热门列表
				this.hots=result.res.vertical
			})
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_wrap{
		//flex布局
		display: flex;
		flex-wrap: wrap;//让弹性盒元素在必要的时候拆行
		.recommend_item{
			width: 50%;		
			border: 3rpx solid white;
		}
	}
	.month-wrap{
		
		.month_title{
			display: flex;
			justify-content: space-between;
			color: $color;
			padding: 10px;
			.month_title_info{
				font-weight: 600;
				font-size: 30rpx;
				display: flex;
				.month_info{
					text{
						font-size: 36rpx;
						
					}
					
				}
				.month_text{
					font-size: 34rpx;
					color: #666;
					padding-left: 30rpx;
				}
			}
			.month_title_more{
				font-size: 24rpx;
				
			}
			
		}
		.month_content{
			display: flex;
			flex-wrap: wrap;
			.month_item{
				width: 33.33%;
				border: 3rpx solid white;
			}
			
		}
	}
	
	.hot_wrap{
		.hot_title{
			padding: 10rpx;
			text{
				border-left: 15rpx solid $color;
				padding-left: 10px;
				font-size: 26rpx;
				font-weight: 600;
			}
		}
		.hot_content{
			display: flex;
			flex-wrap: wrap;
			.hot_item{
				width: 33.33%;
				border:3rpx solid white ;
			}
		}
	}
		
</style>

在这里插入图片描述在这里插入图片描述

分页功能

使用scroll-view标签充当分页的容器
绑定滚动条触底事件scrolltolower
实现分页逻辑

<template>
	<!--可滚动视图区域  @scrolltolower="handleToLower" 滚动触底事件-->
	<scroll-view  @scrolltolower="handleToLower" class="recommend_view" scroll-y v-if="recommends.length>0"><!--recommends有数据才显示里面的标签，否则会先显示undefined一闪而过-->
		<!--推荐开始-->
		<view class="recommend_wrap">
			<view class="recommend_item" 
			v-for="item in recommends"
			:key="item.id"
			>
			
			  <image  :src="item.thumb" mode="widthFix"></image>  <!--mode设置为widthFix高度自适应-->
			
			</view>
				
		</view>
		<!--推荐结束-->
		<!--月份开始-->
		<view class="month-wrap">
			<view class="month_title">
				<view class="month_title_info">
					<view class="month_info">
						<text>{{monthes.DD}}</text>
						/{{monthes.MM}}月
					</view>
					<view class="month_text">
						你负责美丽就好
					</view>
				</view>
				<view class="month_title_more">
					更多>
				</view>
			</view>
			<view class="month_content">
				<view  class="month_item"
				 v-for="item in monthes.items" 
				 :key="item.id">
					 <image  :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image><!--缩略图--> 
				</view>
				
			</view>
		</view>
		<!--月份结束-->
		<!--热门开始-->
		<view class="hot_wrap">
			<view class="hot_title">
				<text>热门</text>
			</view>
			<view class="hot_content">
				<view class="hot_item"
				v-for="item in hots"
				:key="item.id"
				>
				<image :src="item.thumb" mode="widthFix"></image>	
				</view>
			</view>
		</view>
		<!--热门结束-->
		
		
	</scroll-view>
</template>

<script>
	import moment from 'moment'
	export default {
		data(){
			return{
				//推荐列表
				recommends:[],
				//月份列表
				monthes:{},
				//热门列表
				hots:[],
				//请求参数
				params:{
					limit:30,//获取多少条数据
					order:"hot",//关键字 “hot”
					skip:0//跳过多少条
				},
				hasMore:true//是否还有下一页
				
			}
		},
		mounted(){
			this.getList()
		},
		methods:{
			//获取接口数据
			getList(){
				this.request({
					url:"http://service.picasso.adesk.com/v3/homepage/vertical",
					data:this.params
				})
				.then(result=>{
					//判断还有没有下一页数据
					if(result===0){
						this.hasMore=false
						return
					}
					//console.log(result)
					if(this.recommends.length==0){//第一次发送请求
						this.recommends = result.res.homepage[1].items
						this.monthes=result.res.homepage[2]
						//将时间戳改为 xx号/xx月 moment.js
						this.monthes.MM=moment(this.monthes.stime).format("MM")
						this.monthes.DD=moment(this.monthes.stime).format("DD")
					}
					//获取热门列表
					//数组拼接
					this.hots=[...this.hots,...result.res.vertical]
				})
			},
			//滚动条触底事件
			handleToLower(){
				//修改参数，重新发送请求，请求成功后数据叠加
				if(this.hasMore){
					this.params.skip+=this.params.limit
					this.getList()
				}else{
					//弹窗提示没有下一页
					uni.showToast({
						title:"没有数据了",
						icon:"none"
					})
				}
				
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_view{
		//height:屏幕高度-头部标题高度（tabbar完全不用考虑）
		height:calc(100vh - 46px);//css3中cals()给元素左计算，表达式中有“+”和“-”时，其前后必须要有空格
		
	}
	.recommend_wrap{
		//flex布局
		display: flex;
		flex-wrap: wrap;//让弹性盒元素在必要的时候拆行
		.recommend_item{
			width: 50%;		
			border: 3rpx solid white;
		}
	}
	.month-wrap{
		
		.month_title{
			display: flex;
			justify-content: space-between;
			color: $color;
			padding: 10px;
			.month_title_info{
				font-weight: 600;
				font-size: 30rpx;
				display: flex;
				.month_info{
					text{
						font-size: 36rpx;
						
					}
					
				}
				.month_text{
					font-size: 34rpx;
					color: #666;
					padding-left: 30rpx;
				}
			}
			.month_title_more{
				font-size: 24rpx;
				
			}
			
		}
		.month_content{
			display: flex;
			flex-wrap: wrap;
			.month_item{
				width: 33.33%;
				border: 3rpx solid white;
			}
			
		}
	}
	
	.hot_wrap{
		.hot_title{
			padding: 10rpx;
			text{
				border-left: 15rpx solid $color;
				padding-left: 10px;
				font-size: 26rpx;
				font-weight: 600;
			}
		}
		.hot_content{
			display: flex;
			flex-wrap: wrap;
			.hot_item{
				width: 33.33%;
				border:3rpx solid white ;
			}
		}
	}
		
</style>
专辑列表

使用setNavigationBarTitle修改页面标题

uni.setNavigationBarTitle({
				title:"最新"
			})

发送请求获取数据、使用 Swiper轮播图组件

使用scroll-view组件实现分页
点击跳转到专辑详情页

–home-album.vue

<template>
	<scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower">
		<!--
		轮播图开始
		swiper滑块视图容器
		1.自动轮播autoplay是否自动切换
		2.显示器indicator-dots是否显示面板指示点
		3.衔接轮播circular是否采用衔接滑动
		
		4.swiper高度默认150px(不能实现由内容撑开),swiper-item标签默认高度100%
		5.image默认高度320px  基本样式中修改成了100%
		宽度240px
		6.计算图片高宽比例，写到swiper样式
		
		-->
		<view class="album_swiper">
			<swiper
			autoplay
			indicator-dots
			circular
			>
				<swiper-item
				v-for="item in banner"
				:key="item.id"
				>
					<image  :src="item.thumb" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!--轮播图结束-->
		
		<!--列表开始-->
		<view class="album_list">
			<navigator class="album_item"
			v-for="item in album"
			:key="item.id"
			url="/pages/album/index?id=123"
			>
				<view class="album_img">
					<image :src="item.cover" mode="aspectFill"></image><!--aspectFill整张图片拉伸的效果-->
				</view>
				<view class="album_info">
					<view class="album_name">
						{{item.name}}
					</view>
					<view class="album_desc">
						{{item.desc}}
					</view>
					<view class="album_btn">
						<view class="album_attention">
							关注
						</view>
					</view>
					
				</view>
			</navigator>
			
		</view>
		<!--列表结束-->
	</scroll-view>
</template>

<script>
	export default{
		data(){
			return{
				params:{//请求参数
					limit:30,
					order:"new",
					skip:0
				},
				//轮播图数组
				banner:[],
				//列表数组
				album:[],
				//是否还有数据
				hasMore:true
			}
		},
		mounted(){		
			uni.setNavigationBarTitle({
				title:"专辑"
			})
			this.getList()
		},
		methods:{
			getList(){//获取接口数据
			  this.request({
				  url:"https://service.picasso.adesk.com/v1/wallpaper/album",
				  data:this.params
			  }).then(result=>{
				  console.log(result)
				  if(this.banner.length===0){
					  this.banner=result.res.banner
				  }
				  //
				  if(result.res.album.length===0){
				  	this.hasMore=false
					return
				  }
				  this.album=[...this.album,...result.res.album]
			  })
		    },
			handleToLower(){
				if(this.hasMore){
					this.params.skip+=this.params.limit
					this.getList()
				}else{
					uni.showToast({
						title:"没有数据了",
						icon:"null"
					})
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.album_scroll_view{
		height: calc(100vh - 46px);
	}
	
	.album_swiper{
		swiper{
			height:calc(750rpx / 2.3);
			image{
				height: 100%;
			}
		}
	}
	.album_list{
		padding: 20rpx;
		.album_item{
			padding: 10rpx 0;
			display: flex;
			border-bottom: 1rpx solid #ccc;
			.album_img{
				flex: 1;//左边占一份。右边占两份
				padding: 10rpx;
				image{
					width: 200rpx;
					height: 200rpx;
				}
			}
			.album_info{
				flex: 2;
				padding:0 10rpx;
				overflow: hidden;//若不设置的话，文字溢出不会有省略号，原因在于flex会按照内容来撑大盒子
				.album_name{
					font-size: 30rpx;
					color: #000;
					padding:  10rpx 0;
				}
				.album_desc{
					padding: 10rpx 0;
					font-size: 24rpx;
					
					//文字溢出显示省略号
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.album_btn{
					padding: 5rpx;
					display: flex;
					justify-content: flex-end;
					.album_attention{
						color:$color;
						border: 2rpx solid $color;
						padding: 5rpx;
					}
					
				}
				
			}
		}
	}
</style>

在这里插入图片描述

获取专辑详情数据

专辑组件通过在url上拼接参数
在这里插入图片描述
专辑详情组件通过options接收参数
在这里插入图片描述
子组件就可以得到数据
在这里插入图片描述
将属性名变成一个变量：在前面加上冒号

在这里插入图片描述

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

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

相关文章

苹果开发者账号注册后生成开发证书和发布证书的流程解析

苹果开发者账号注册后生成开发证书和发布证书的流程解析

转载&#xff1a;注册苹果开发者账号的方法 在2020年以前&#xff0c;注册苹果开发者账号后&#xff0c;就可以生成证书。 但2020年后&#xff0c;因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号&#xff0c;所以需要缴费才能创建ios证书了。 所以新政策出…
阅读更多...
【机器学习】机器学习创建算法第3篇：K-近邻算法,学习目标【附代码文档】

【机器学习】机器学习创建算法第3篇：K-近邻算法,学习目标【附代码文档】

机器学习&#xff08;算法篇&#xff09;完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;机器学习算法课程定位、目标&#xff0c;K-近邻算法定位,目标,学习目标,1 什么是K-近邻算法,1 Scikit-learn工具介绍,2 K-近邻算法API。K-近邻算法&#xff0c;1.4 …
阅读更多...
EfficientVMamba实战：使用 EfficientVMamba实现图像分类任务（二）

EfficientVMamba实战：使用 EfficientVMamba实现图像分类任务（二）

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…
阅读更多...
搜索二维矩阵 II - LeetCode 热题 21

搜索二维矩阵 II - LeetCode 热题 21

大家好&#xff01;我是曾续缘&#x1f497; 今天是《LeetCode 热题 100》系列 发车第 21 天 矩阵第 4 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&…
阅读更多...
PHP在线加密系统网站源码

PHP在线加密系统网站源码

源码介绍 PHP在线加密系统网站源码&#xff0c;这个是sg的加密,免费可用(目前)并不会收费 源码说明&#xff1a;下载直接上传即可 下载地址 蓝奏云下载&#xff1a;https://wfr.lanzout.com/i6c331togiji
阅读更多...
关于磁盘算法

关于磁盘算法

性能瓶颈&#xff1a;IO–>IO调度–>IO调度算法–>1楼到顶楼&#xff0c;再从零楼下来&#xff0c;效率高–>IO调度目标–>IO算法–>电梯算法–linux6和Linux7算法不一样–>linux6 单队列 Linux7 多队列 inux6: 试用于不同的环境和介质。 noop 适合闪存&…
阅读更多...
jmeter性能压测

jmeter性能压测

jvm指令 jstat -gcutil -h5 -t 1 3s 发压端的tcp这么达到1000TPS jmeter的jvm的设置
阅读更多...
PW1503限流芯片：可达3A限流，保障USB电源管理安全高效

PW1503限流芯片：可达3A限流，保障USB电源管理安全高效

在电源管理领域&#xff0c;开关的性能直接关系到设备的稳定性和安全性。今天&#xff0c;我们将详细解析一款备受关注的超低RDS&#xff08;ON&#xff09;开关——PW1503。它不仅具有可编程的电流限制功能&#xff0c;还集成了多项保护机制&#xff0c;为各类电子设备提供了高…
阅读更多...
springboot之MybatisPlus

springboot之MybatisPlus

文章目录 一、ORM二、mybatis实际操作三、mybatis-plus 一、ORM 简单来说ORM就是一个能够帮我们把java中Bean类映射到数据库中。 使用mybatis-plus。 配置架包 <!-- MyBatisPlus依赖 --><dependency><groupId>com.baomidou</groupId><art…
阅读更多...
谷粒商城实战(008 缓存)

谷粒商城实战(008 缓存)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第151p-第p157的内容 简介 数据库承担落盘&#xff08;持久化&#xff09;工作 拿map做缓存 这种是本地缓存&#xff0c;会有一些问题 分布…
阅读更多...
注解——自定义注解、元注解、开发Junite框架

注解——自定义注解、元注解、开发Junite框架

官方注解 自定义的注解 元注解 指的是&#xff1a;修饰注解的注解 常用的两个元注解——Target\ Retention 注解的解析 应用场景&#xff1a;开发Junit框架
阅读更多...
KH-IPEX-K501-29

KH-IPEX-K501-29

KH-IPEX-K501-29品牌: kinghelm(金航标)封装: SMD 描述: 1代
阅读更多...
Linux安装Weblogic保姆级教程

Linux安装Weblogic保姆级教程

文章目录 前言一、Weblogic安装包下载二、安装JDK三、Weblogic安装1.创建Linux用户2.创建weblogic的安装目录3.上传weblogic的安装包4.解压缩5.修改 /opt/weblogic 目录的所有权6.创建 oraInst.loc 文件7.创建 wls.rsp 响应文件8.切换用户9.静默安装weblogic10.切换到root用户1…
阅读更多...
【闲聊】-网页划词翻译插件

【闲聊】-网页划词翻译插件

英文之痛 作为程序猿&#xff0c;常常需要接触外文网站&#xff0c;以前很痛苦&#xff0c;现在大模型时代有很多智能工具可以直接翻译&#xff0c;翻译的虽然越来越好&#xff0c;但是还是不如直接看英文能理解本义&#xff0c;相信我&#xff0c;看翻译的理解和看原文的理解…
阅读更多...
Folder Icons for Mac v1.8 激活版文件夹个性化图标修改软件

Folder Icons for Mac v1.8 激活版文件夹个性化图标修改软件

Folder Icons for Mac是一款Mac OS平台上的文件夹图标修改软件&#xff0c;同时也是一款非常有意思的系统美化软件。这款软件的主要功能是可以将Mac的默认文件夹图标更改为非常漂亮有趣的个性化图标。 软件下载&#xff1a;Folder Icons for Mac v1.8 激活版 以下是这款软件的一…
阅读更多...
【mysql 第3-10条记录怎么查】

【mysql 第3-10条记录怎么查】

mysql 第3-10条记录怎么查 在MySQL中&#xff0c;如果你想要查询第3到第10条记录&#xff0c;你通常会使用LIMIT和OFFSET子句。但是&#xff0c;需要注意的是&#xff0c;LIMIT和OFFSET是基于结果集的行数来工作的&#xff0c;而不是基于记录的物理位置。这意味着它们通常与某种…
阅读更多...
构建第一个ArkTS应用（FA模型）

构建第一个ArkTS应用（FA模型）

创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发&#xff08;本文以应用开发为例&#xff0c;Atomic Servi…
阅读更多...
鸿蒙实战开发-如何使用Stage模型卡片

鸿蒙实战开发-如何使用Stage模型卡片

介绍 本示例展示了Stage模型卡片提供方的创建与使用。 用到了卡片扩展模块接口&#xff0c;ohos.app.form.FormExtensionAbility 。 卡片信息和状态等相关类型和枚举接口&#xff0c;ohos.app.form.formInfo 。 卡片提供方相关接口的能力接口&#xff0c;ohos.app.form.for…
阅读更多...
STM32重要参考资料

STM32重要参考资料

stm32f103c8t6 一、引脚定义图 二、时钟树 三、系统结构图 四、启动配置 &#xff08;有时候不小心短接VCC和GND&#xff0c;芯片会锁住&#xff0c;可以BOOT0拉高试试&#xff08;用跳线帽接&#xff09;&#xff09; 五、最小系统原理图 可用于PCB设计
阅读更多...
IP SSL的应用与安装

IP SSL的应用与安装

IP SSL&#xff0c;即互联网协议安全套接字层&#xff0c;它是一种为网络通信提供安全及数据完整性的安全协议。在网络传输过程中&#xff0c;IP SSL可以对数据进行加密&#xff0c;这样即便数据在传输途中被截取&#xff0c;没有相应的解密密钥也无法解读内容。这一过程如同将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023