• 交友盲盒完整版——详细源码分享

    现在目前比较火热的一款app交友盲盒是通过uniapp+springboot技术来制作的，原理其实很简单，大家一看便知。

    大家自行下载到手机里面去使用即可，不支持ios手机

    演示地址：https://share.weiyun.com/l3ovztce

    下面就是给大家分享源码了，实现原理就是前端像后端发请求拿到数据渲染页面就这么简单

    首页页面： 

    1. <template>
    2. 	<view class="content">
    3. 		<view class="top">
    4. 			<image src="../../static/bg.png" mode="widthFix">image>
    5. 		view>
    6. 		<view class="subject">
    7. 			<view class="left">
    8. 				<view class="imgman">
    9. 					<image src="../../static/man.png" mode="">image>
    10. 				view>
    11. 				<view class="chair">
    12.  
    13. 				view>
    14. 				<view class="man">
    15. 					男生盒子
    16. 				view>
    17. 				<view class="enter" @click="enterman">
    18. 					放入男生纸条
    19. 				view>
    20. 				<view class="out" @click="outman">
    21. 					取出男生纸条
    22. 				view>
    23. 			view>
    24. 			<view class="right">
    25. 				<view class="imgwuman">
    26. 					<image src="../../static/wuman.png" mode="">image>
    27. 				view>
    28. 				<view class="chair">
    29.  
    30. 				view>
    31. 				<view class="man">
    32. 					女生盒子
    33. 				view>
    34. 				<view class="enter" @click="wumen">
    35. 					放入女生纸条
    36. 				view>
    37. 				<view class="out" @click="outmen">
    38. 					取出女生纸条
    39. 				view>
    40. 			view>
    41. 		view>
    42. 		<view class="sub">
    43. 			我的纸条
    44. 		view>
    45. 	view>
    46. template>
    47.  
    48. <script>
    49. 	export default {
    50. 		data() {
    51. 			return {
    52. 				title: 'Hello'
    53. 			}
    54. 		},
    55. 		onLoad() {
    56.  
    57. 		},
    58. 		methods: {
    59. 			wumen() {
    60. 				uni.navigateTo({
    61. 					url: "/pages/index/from/from"
    62. 				})
    63. 			},
    64. 			outmen() {
    65. 				uni.navigateTo({
    66. 					url: "/pages/index/from/from1"
    67. 				})
    68. 			},
    69. 			enterman() {
    70. 				uni.navigateTo({
    71. 					url: "/pages/index/from/from2"
    72. 				})
    73. 			},
    74. 			outman() {
    75. 				uni.navigateTo({
    76. 					url: "/pages/index/from/from3"
    77. 				})
    78. 			}
    79. 		}
    80. 	}
    81. script>
    82.  
    83. <style scoped lang="scss">
    84. 	.imgwuman {
    85. 		image {
    86. 			width: 800rpx;
    87. 			height: 800rpx;
    88. 		}
    89.  
    90. 		position: absolute;
    91. 		top: -78%;
    92. 		left: -68%;
    93. 	}
    94.  
    95. 	.imgman {
    96. 		image {
    97. 			width: 800rpx;
    98. 			height: 800rpx;
    99. 		}
    100.  
    101. 		position: absolute;
    102. 		top: -78%;
    103. 		left: -65%;
    104. 	}
    105.  
    106. 	.top {
    107. 		width: 100%;
    108. 		height: 300rpx;
    109. 		/* background-color: pink; */
    110. 		border-radius: 50rpx;
    111. 		box-sizing: border-box;
    112. 	}
    113.  
    114. 	.top image {
    115. 		box-sizing: border-box;
    116. 		width: 100%;
    117. 		height: 100%;
    118. 	}
    119.  
    120. 	.subject {
    121. 		height: 600rpx;
    122. 		margin-top: 10%;
    123. 		// background-color: aliceblue;
    124. 		display: flex;
    125. 		justify-content: center;
    126. 		align-items: center;
    127. 	}
    128.  
    129. 	.subject .left {
    130. 		position: relative;
    131. 		width: 45%;
    132. 		height: 550rpx;
    133. 		background-color: #119DFC;
    134. 		margin-right: 30rpx;
    135. 	}
    136.  
    137. 	.subject .left {
    138. 		border-radius: 20rpx;
    139.  
    140. 		.chair {
    141. 			width: 200rpx;
    142. 			height: 30rpx;
    143. 			border-radius: 50rpx;
    144. 			background-color: #fff;
    145. 			margin: 50rpx auto;
    146. 		}
    147.  
    148. 		.man {
    149. 			font-size: 50rpx;
    150. 			font-family: "宋体";
    151. 			text-align: center;
    152. 			color: #fff;
    153. 		}
    154. 	}
    155.  
    156. 	.subject .right {
    157. 		position: relative;
    158. 		border-radius: 20rpx;
    159. 		width: 45%;
    160. 		height: 550rpx;
    161. 		background-color: #FF538F;
    162. 	}
    163.  
    164. 	.subject .right {
    165. 		border-radius: 20rpx;
    166.  
    167. 		.chair {
    168. 			width: 200rpx;
    169. 			height: 30rpx;
    170. 			border-radius: 50rpx;
    171. 			background-color: #fff;
    172. 			margin: 50rpx auto;
    173. 		}
    174.  
    175. 		.man {
    176. 			font-size: 50rpx;
    177. 			font-family: "宋体";
    178. 			text-align: center;
    179. 			color: #fff;
    180. 		}
    181. 	}
    182.  
    183. 	.enter,
    184. 	.out {
    185. 		position: relative;
    186. 		z-index: 9;
    187. 		width: 300rpx;
    188. 		height: 100rpx;
    189. 		background-color: #000;
    190. 		color: #fff;
    191. 		text-align: center;
    192. 		border-radius: 15rpx;
    193. 		margin: 0 auto;
    194. 		margin-top: 18%;
    195. 		line-height: 100rpx;
    196. 	}
    197.  
    198. 	.sub {
    199. 		width: 90%;
    200. 		height: 100rpx;
    201. 		background-color: #FA91A8;
    202. 		margin: 0 auto;
    203. 		margin-top: 5%;
    204. 		border-radius: 50rpx;
    205. 		text-align: center;
    206. 		line-height: 100rpx;
    207. 	}
    208. style>

    男生放入卡片页面：

    1. <template>
    2. 	<view class="">
    3. 		<u-form :model="form" ref="uForm">
    4. 			<u-form-item label="姓名" prop="name">
    5. 				<u-input v-model="form.name" />
    6. 			u-form-item>
    7. 			<u-form-item label="QQ号" prop="num">
    8. 				<u-input v-model="form.num" />
    9. 			u-form-item>
    10. 			<u-form-item label="微信" prop="intro">
    11. 				<u-input v-model="form.intro" />
    12. 			u-form-item>
    13. 			<u-form-item label="手机" prop="phone">
    14. 				<u-input v-model="form.phone" />
    15. 			u-form-item>
    16. 		u-form>
    17. 		<u-button @click="submit">提交u-button>
    18. 	view>
    19. template>
    20.  
    21. <script>
    22. 	export default {
    23. 		data() {
    24. 			return {
    25. 				form: {
    26. 					name: '',
    27. 					intro: '',
    28. 					num: '',
    29. 					phone: ''
    30. 				},
    31. 				rules: {
    32. 					name: [{
    33. 						required: true,
    34. 						message: '请输入姓名',
    35. 						// 可以单个或者同时写两个触发验证方式 
    36. 						trigger: ['change', 'blur'],
    37. 					}],
    38. 					num: [{
    39. 							required: true,
    40. 							message: '请输入QQ号',
    41. 							trigger: ['change', 'blur']
    42. 						},
    43. 						{
    44. 							type: 'number',
    45. 							message: 'QQ号必须为数字',
    46. 							trigger: ['change']
    47. 						},
    48. 						{
    49.  
    50. 						}
    51. 					],
    52. 					intro: [{
    53.  
    54. 					}]
    55. 				}
    56. 			};
    57. 		},
    58. 		methods: {
    59. 			submit() {
    60. 				let that = this;
    61. 				this.$refs.uForm.validate(valid => {
    62. 					if (valid) {
    63. 						console.log('验证通过');
    64. 						uni.request({
    65. 							url: "http://8.130.120.38:5531/girl/add",
    66. 							method: 'POST',
    67. 							data: {
    68. 								name: that.form.name,
    69. 								qq: that.form.num,
    70. 								weixi: that.form.intro,
    71. 								phone: that.form.phone,
    72. 							},
    73. 							success: (res => {
    74. 								if (res.data.data == "添加成功") {
    75. 									uni.showToast({
    76. 										title: '添加成功',
    77. 										mask: true
    78. 									});
    79. 									that.form.name = '';
    80. 									that.form.num = '';
    81. 									that.form.intro = '';
    82. 									that.form.phone = '';
    83. 									setTimeout(() => {
    84. 										uni.switchTab({
    85. 											url: '/pages/index/index'
    86. 										});
    87. 									}, 1500);
    88.  
    89. 								}
    90. 								console.log(res);
    91. 							})
    92. 						})
    93. 					} else {
    94. 						console.log('验证失败');
    95. 					}
    96. 				});
    97. 			}
    98. 		},
    99. 		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    100. 		onReady() {
    101. 			this.$refs.uForm.setRules(this.rules);
    102. 		}
    103. 	};
    104. script>

    男生取出卡片页面：

    1. <template>
    2. 	<view class="">
    3. 		<u-form :model="form" ref="uForm">
    4. 			<u-form-item label="姓名" prop="name">
    5. 				<u-input v-model="form.name" />
    6. 			u-form-item>
    7. 			<u-form-item label="QQ号" prop="num">
    8. 				<u-input v-model="form.num" />
    9. 			u-form-item>
    10. 			<u-form-item label="微信" prop="intro">
    11. 				<u-input v-model="form.intro" />
    12. 			u-form-item>
    13. 			<u-form-item label="手机" prop="phone">
    14. 				<u-input v-model="form.phone" />
    15. 			u-form-item>
    16. 		u-form>
    17. 		<u-button @click="submit">提交u-button>
    18. 	view>
    19. template>
    20.  
    21. <script>
    22. 	export default {
    23. 		data() {
    24. 			return {
    25. 				form: {
    26. 					name: '',
    27. 					intro: '',
    28. 					num: '',
    29. 					phone: ''
    30. 				},
    31. 				rules: {
    32. 					name: [{
    33. 						required: true,
    34. 						message: '请输入姓名',
    35. 						// 可以单个或者同时写两个触发验证方式 
    36. 						trigger: ['change', 'blur'],
    37. 					}],
    38. 					num: [{
    39. 							required: true,
    40. 							message: '请输入QQ号',
    41. 							trigger: ['change', 'blur']
    42. 						},
    43. 						{
    44. 							type: 'number',
    45. 							message: 'QQ号必须为数字',
    46. 							trigger: ['change']
    47. 						},
    48.  
    49. 					],
    50. 					intro: [{
    51.  
    52. 					}]
    53. 				}
    54. 			};
    55. 		},
    56. 		methods: {
    57. 			submit() {
    58. 				let that = this;
    59. 				this.$refs.uForm.validate(valid => {
    60. 					if (valid) {
    61. 						console.log('验证通过');
    62. 						uni.request({
    63. 							url: "http://8.130.120.38:5531/man/add",
    64. 							method: 'POST',
    65. 							data: {
    66. 								name: that.form.name,
    67. 								qq: that.form.num,
    68. 								weixi: that.form.intro,
    69. 								phone: that.form.phone,
    70. 							},
    71. 							success: (res => {
    72. 								if (res.data.data == "添加成功") {
    73. 									uni.showToast({
    74. 										title: '添加成功',
    75. 										mask: true
    76. 									});
    77. 									that.form.name = '';
    78. 									that.form.num = '';
    79. 									that.form.intro = '';
    80. 									that.form.phone = '';
    81. 									setTimeout(() => {
    82. 										uni.switchTab({
    83. 											url: '/pages/index/index'
    84. 										});
    85. 									}, 1500);
    86. 								}
    87. 								console.log(res);
    88. 							})
    89. 						})
    90. 					} else {
    91. 						console.log('验证失败');
    92. 					}
    93. 				});
    94. 			}
    95. 		},
    96. 		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    97. 		onReady() {
    98. 			this.$refs.uForm.setRules(this.rules);
    99. 		}
    100. 	};
    101. script>

    女生的取出和放入都是和男生一样的

    pages.json页面设置：

    1. {
    2. 	// pages.json
    3. 	"easycom": {
    4. 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    5. 	},
    6. 	// "easycom": {
    7. 	// 	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
    8. 	// 	"autoscan": true,
    9. 	// 	"custom": {
    10. 	// 		"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    11. 	// 		"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
    12. 	// 	}
    13. 	// },
    14. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    15. 		{
    16. 			"path": "pages/index/index",
    17. 			"style": {
    18. 				"navigationBarTitleText": "交友盲盒"
    19. 			}
    20. 		}, {
    21. 			"path": "pages/mine/mine",
    22. 			"style": {
    23. 				"navigationBarTitleText": "个人信息",
    24. 				"enablePullDownRefresh": false
    25. 			}
    26.  
    27. 		}, {
    28. 			"path": "pages/index/from/from",
    29. 			"style": {
    30. 				"navigationBarTitleText": "放入女生纸条",
    31. 				"enablePullDownRefresh": false
    32. 			}
    33. 		},
    34. 		{
    35. 			"path": "pages/index/from/from1",
    36. 			"style": {
    37. 				"navigationBarTitleText": "取出女生纸条",
    38. 				"enablePullDownRefresh": false
    39. 			}
    40. 		},
    41. 		{
    42. 			"path": "pages/index/from/from2",
    43. 			"style": {
    44. 				"navigationBarTitleText": "放入男生纸条",
    45. 				"enablePullDownRefresh": false
    46. 			}
    47. 		},
    48. 		{
    49. 			"path": "pages/index/from/from3",
    50. 			"style": {
    51. 				"navigationBarTitleText": "取出男生纸条",
    52. 				"enablePullDownRefresh": false
    53. 			}
    54. 		},
    55. 		{
    56. 			"path": "pages/getcode/getcode",
    57. 			"style": {
    58. 				"navigationBarTitleText": "取出男生信息",
    59. 				"enablePullDownRefresh": false
    60. 			}
    61. 		},
    62. 		{
    63. 			"path": "pages/getcode/getcodenv",
    64. 			"style": {
    65. 				"navigationBarTitleText": "取出女生信息",
    66. 				"enablePullDownRefresh": false
    67. 			}
    68. 		}
    69. 	],
    70. 	"globalStyle": {
    71. 		"navigationBarTextStyle": "black",
    72. 		"navigationBarTitleText": "uni-app",
    73. 		"navigationBarBackgroundColor": "#F8F8F8",
    74. 		"backgroundColor": "#F8F8F8"
    75. 	},
    76. 	"uniIdRouter": {},
    77. 	"tabBar": {
    78. 		"selectedColor": "#F394AA",
    79. 		"list": [{
    80. 				"text": "首页",
    81. 				"pagePath": "pages/index/index",
    82. 				"iconPath": "static/sy.png",
    83. 				"selectedIconPath": "static/syxz.png"
    84.  
    85. 			},
    86. 			{
    87. 				"text": "我的",
    88. 				"pagePath": "pages/mine/mine",
    89. 				"iconPath": "static/wd.png",
    90. 				"selectedIconPath": "static/w.png"
    91. 			}
    92. 		]
    93. 	}
    94. }

    注意：代码里面使用了uview-ui框架，大家需要自己引入自己的项目哦，传送教程：https://xuqu.gitee.io/components/downloadSetting.html

  • 相关阅读:
    Obsidian之利用MaoXian获取网页信息
    Web3.0的测试题
    Jenkins系列-安装maven
    ip地址范围不是整体范围的子集
    Fecify 跨境电商系统，有哪些优势？
    5-1 Dataset和DataLoader
    精选版：用Java扩展Nginx（nginx-clojure 入门）
    swin transformer详解
    glide set gif start stop
    ESP32设备驱动-VCNL4010光传感器驱动
  • 原文地址：https://blog.csdn.net/qq_63656102/article/details/132774713