uniapp-商城-50-后台 商家信息（输入进行自定义规则验证）

news2025/5/13 0:48:16

        本文介绍了如何在后台管理系统中添加和展示商家信息，包括商家logo、名称、电话、地址和介绍等内容，并支持后期上传营业许可等文件。通过使用uni-app的uni-forms组件，可以方便地实现表单的创建、校验和管理操作。文章详细说明了组件的引入、页面结构的搭建、数据的绑定和验证规则的设置，并提供了具体的代码示例。通过这种方式，可以高效地管理和展示商家信息，同时确保数据的准确性和完整性。

        如下图的，logo和名称都时后台商户的数据。

1、主要代码直观感受

1.1代码截图

2、实现准备

        使用的组件时，可以使用的u-view的中的u-form的组件，其中有很多校验的功能，

可以参考：

Form 表单 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uviewui.com/components/form.html

        我们这里实现使用uniapp自己的扩展组件，uni-forms来进行实现的。它里面也有很多校验。比如邮箱，性别、电话号码等等一系列的数据校验。就不需要再自己写正则来校验。不用自己再重复造轮子了。

uni-app官网uni-app,uniCloud,serverless,介绍,基本用法,对齐方式,表单校验,如何使用,校验规则说明,rules 属性说明,validateFunction 自定义校验规则使用说明,validateFunction 异步校验,动态表单校验,表单校验时机说明,API,Forms Prophttps://uniapp.dcloud.net.cn/component/uniui/uni-forms.html

3、具体实现

3.1 引入该组件

tip1：但是在uni-id的时，它全部给我们安装和引入了，我们就不用再安装和引入了。

tip2：我们开始写我们需要的代码，一般的加一些属性值，都会提示一些参考值，如果没有提示，一般都是自己代码哪里写错了。

3.2 页面基本格式

3.2.1、使用一个盒子包起来 view

3.2.2、写一个 uni-forms  注意 包含 ref 这是一个tag。他是代表这份表单

            https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
            ref 就是定义这个表单的标识
            model：数据
            rules：校验规则
            label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
            label-align 对齐方式

3.2.3、uni-forms-item  是表单中的一个标签 在标签中可添加 uni-file-picker ，uni-easyinput

uni-file-picker 可以上传文件

<uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />

格式我们这里写的是图片

v-model是一个双向绑定，一个是用于读取数据库显示，一个用来上传数据立即展示

3.2.4、button 可以放在uni-forms组件。

<button type="primary" @click="onSubmit">提交信息</button>

type是样式，click是一个动作

3.2.5、具体代码如下：

<template>
	<view class="brand">
		<!-- <uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right"> -->
		<uni-forms ref="brandRef" :model="brandFormData" :label-width="100" label-align="right">
			<!--
			https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
			ref 就是定义这个表单的标识 
			model：数据
			rules：校验规则
			label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
			label-align 对齐方式
			-->
			<uni-forms-item label="品牌招牌" required name="thumb">
				<uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
			</uni-forms-item>


			<uni-forms-item label="品牌名称" name="name" required>
				<!-- name 是标签名字 后面借来标识是哪一个被验证  required 是强制输入项目 必填-->
				<uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" />
			</uni-forms-item>

			<uni-forms-item label="商户电话" name="mobile" required>
				<uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
			</uni-forms-item>

			<uni-forms-item label="商户地址" name="address" required>
				<uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" />
			</uni-forms-item>

			<uni-forms-item label="商家介绍" name="about">
				<uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" />
			</uni-forms-item>


			<button type="primary" @click="onSubmit">提交信息</button>
			<!-- type 按钮样式选择  -->
		</uni-forms>
	</view>
</template>

3.3 数据和验证

<uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right">

这一行是我们注释的代码，但是最开始就是这样，为什么要注释？接下来在说。

3.3.1 注意：

brandFormData是数据。

brandRules是验证规则。

label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx

label-align 对齐方式

3.3.2 数据定义

brandFormData: {
					thumb: [],
					name: "", //品牌名称
					mobile: "",
					address: "",
					about: ""
				},

3.3.3 验证规则

这里主要包含几个规则，一个必填项目，需要在页面上写 required 在验证规则也要写

3.3.3.1 页面required
<uni-forms-item label="商户电话" name="mobile" required>
    <uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
</uni-forms-item>
 3.3.3.2 规则中需要 required
mobile: {
    rules: [{
                required: true,
	            errorMessage: "请输入正确的手机号码"
	        }, {
		        validateFunction: function(rule, value, data, callback) {
			    let res = /^1[3-9]\d{9}$/.test(value);
			    if (!res) {
                        callback("手机格式不正确")
			        }
			      return;
                }
		    }]
		},
3.3.3.3 电话规则

电话的规则，没有只有自己写正则。按理说这个是应该有的。

具体代码见上面2.

其中需要的函数是：
        validateFunction: function(rule, value, data, callback) {

                let res = /^1[3-9]\d{9}$/.test(value);

                if (!res) {

                callback("手机格式不正确") 

                }

                return;

        }

3.3.3.4 详细验证规则
brandRules: {
					thumb: {
						rules: [{
							required: true,
							errorMessage: "品牌招聘需要上传"
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的品牌名称"
						}, {
							minLength: 3,
							maxLength: 20,
							errorMessage: '长度在{minLength}到{maxLength}的字符'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的手机号码"
						}, {
							validateFunction: function(rule, value, data, callback) {
								let res = /^1[3-9]\d{9}$/.test(value);
								if (!res) {
									callback("手机格式不正确")
								}
								return;
							}
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的商户地址"
						}, {
							minLength: 6,
							maxLength: 100,
							errorMessage: '长度在{minLength}到{maxLength}的字符'
						}]
					}

				}
			};
		},

4、重点一般在最后    validateFunction使用

注意

  • 需要注意，如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则
  • 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
  • 如果使用了 validateFunction 且 required 为 false的情况，表现为不填写内容不校验，有内容才校验，所以内容为空时 validateFunction 不会执行

其实：该函数在h5 和web上可以正常运行

就是直接 按照普通写法，不用管注意事项。

4.1 普通写法

在forms 中就写上rules就好。如下普通写法，在web 和 H5 正常，但是在微信小程序就是不正常。

<template>
	<view class="brand">
		<uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right">
			<!--
			https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
			ref 就是定义这个表单的标识 
			model：数据
			rules：校验规则
			label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
			label-align 对齐方式
			-->
			<uni-forms-item label="品牌招牌" required name="thumb">
				<uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
			</uni-forms-item>


			<uni-forms-item label="品牌名称" name="name" required>
				<!-- name 是标签名字 后面借来标识是哪一个被验证  required 是强制输入项目 必填-->
				<uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" />
			</uni-forms-item>

			<uni-forms-item label="商户电话" name="mobile" required>
				<uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
			</uni-forms-item>

			<uni-forms-item label="商户地址" name="address">
				<uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" />
			</uni-forms-item>

			<uni-forms-item label="商家介绍" name="about">
				<uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" />
			</uni-forms-item>


			<button type="primary" @click="onSubmit">提交信息</button>
			<!-- type 按钮样式选择  -->
		</uni-forms>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	const brandCloudObj = uniCloud.importObject("kt-mall-brand")
	export default {
		data() {
			return {
				brandFormData: {
					thumb: [],
					name: "", //品牌名称
					mobile: "",
					address: "",
					about: ""
				},
				brandRules: {
					thumb: {
						rules: [{
							required: true,
							errorMessage: "品牌招聘需要上传"
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的品牌名称"
						}, {
							minLength: 3,
							maxLength: 20,
							errorMessage: '长度在{minLength}到{maxLength}的字符'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的品牌电话"
						}, {
							validateFunction: function(rule, value, data, callback) {
								let res = /^1[3-9]\d{9}$/.test(value);
								if (!res) {
									callback("手机格式不正确")
								}
								return;
							}
						}]
					}

				}
			};
		},

		onLoad() {
			this.isManage();
			this.getBrand();
		},



		methods: {
			...mapMutations(["SET_BRAND"]),
			//获取数据库中的品牌信息
			getBrand() {
				brandCloudObj.get().then(res => {
					if (!res.data.length) return;
					this.brandFormData = res.data[0]
				})
			},


			//点击提交按钮
			onSubmit() {
				this.$refs.brandRef.validate().then(res => {
					let arr = this.brandFormData.thumb.map(item => {
						return {
							extname: item.extname,
							url: item.url,
							name: item.name,
							size: item.size
						}
					})
					this.brandFormData.thumb = arr;
					this.addAndUpdate();
				}).catch(err => {
					console.log(err);
				})
			},
			//新增或者修改品牌啊信息
			async addAndUpdate() {
				let title;
				if (this.brandFormData._id) {
					let res = await brandCloudObj.update(this.brandFormData)
					title = "修改成功"
				} else {
					//新增
					await brandCloudObj.add(this.brandFormData)
					title = "新增成功"
				}

				uni.showToast({
					title,
					mask: true
				})

				setTimeout(() => {
					uni.navigateBack();
				}, 1500)

				this.SET_BRAND(this.brandFormData);




			}
		}
	}
</script>

<style lang="scss" scoped>
	.brand {
		padding: 30rpx;
		//间距是30rpx， 每一个标签之 标签内部 需要label-width 来调整
	}
</style>

4.2 修改后兼容写法

这给写好了，应该有人点赞，我简直不能太详细了。看到这里一般都是人才。

这也是前面3.3 我说的为什么要屏蔽掉普通写法的代码.

tmd普通写法就是不能兼容wx，需要删除rules，在onready中设置绑定rules就好了。

		//这是日狗了，它大爷的
		onReady() {
			this.$nextTick(() => {
				this.$refs.brandRef.setRules(this.brandRules);
			});
		},

4.2.1 具体代码：

<template>
	<view class="brand">
		<!-- <uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right"> -->
		<uni-forms ref="brandRef" :model="brandFormData" :label-width="100" label-align="right">
			<!--
			https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
			ref 就是定义这个表单的标识 
			model：数据
			rules：校验规则
			label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
			label-align 对齐方式
			-->
			<uni-forms-item label="品牌招牌" required name="thumb">
				<uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
			</uni-forms-item>


			<uni-forms-item label="品牌名称" name="name" required>
				<!-- name 是标签名字 后面借来标识是哪一个被验证  required 是强制输入项目 必填-->
				<uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" />
			</uni-forms-item>

			<uni-forms-item label="商户电话" name="mobile" required>
				<uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
			</uni-forms-item>

			<uni-forms-item label="商户地址" name="address" required>
				<uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" />
			</uni-forms-item>

			<uni-forms-item label="商家介绍" name="about">
				<uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" />
			</uni-forms-item>


			<button type="primary" @click="onSubmit">提交信息</button>
			<!-- type 按钮样式选择  -->
		</uni-forms>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	const brandCloudObj = uniCloud.importObject("kt-mall-brand")
	export default {
		data() {
			return {
				brandFormData: {
					thumb: [],
					name: "", //品牌名称
					mobile: "",
					address: "",
					about: ""
				},
				brandRules: {
					thumb: {
						rules: [{
							required: true,
							errorMessage: "品牌招聘需要上传"
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的品牌名称"
						}, {
							minLength: 3,
							maxLength: 20,
							errorMessage: '长度在{minLength}到{maxLength}的字符'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的手机号码"
						}, {
							validateFunction: function(rule, value, data, callback) {
								let res = /^1[3-9]\d{9}$/.test(value);
								if (!res) {
									callback("手机格式不正确")
								}
								return;
							}
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: "请输入正确的商户地址"
						}, {
							minLength: 6,
							maxLength: 100,
							errorMessage: '长度在{minLength}到{maxLength}的字符'
						}]
					}

				}
			};
		},

		onLoad() {
			this.isManage();
			this.getBrand();
		},
		
		//这是日狗了，它大爷的
		onReady() {
			this.$nextTick(() => {
				this.$refs.brandRef.setRules(this.brandRules);
			});
		},




		methods: {
			...mapMutations(["SET_BRAND"]),
			//获取数据库中的品牌信息
			getBrand() {
				brandCloudObj.get().then(res => {
					if (!res.data.length) return;
					this.brandFormData = res.data[0]
				})
			},


			//点击提交按钮
			onSubmit() {
				this.$refs.brandRef.validate().then(res => {
					let arr = this.brandFormData.thumb.map(item => {
						return {
							extname: item.extname,
							url: item.url,
							name: item.name,
							size: item.size
						}
					})
					this.brandFormData.thumb = arr;
					this.addAndUpdate();
				}).catch(err => {
					// console.log(err);
				})
			},
			//新增或者修改品牌啊信息
			async addAndUpdate() {
				let title;
				if (this.brandFormData._id) {
					let res = await brandCloudObj.update(this.brandFormData)
					title = "修改成功"
				} else {
					//新增
					await brandCloudObj.add(this.brandFormData)
					title = "新增成功"
				}

				uni.showToast({
					title,
					mask: true
				})

				setTimeout(() => {
					uni.navigateBack();
				}, 1500)

				this.SET_BRAND(this.brandFormData);




			}
		}
	}
</script>

<style lang="scss" scoped>
	.brand {
		padding: 30rpx;
		//间距是30rpx， 每一个标签之 标签内部 需要label-width 来调整
	}
</style>

5 关于方法，后面再说

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

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

相关文章

网页版部署MySQL + Qwen3-0.5B + Flask + Dify 工作流部署指南

网页版部署MySQL + Qwen3-0.5B + Flask + Dify 工作流部署指南

1. 安装MySQL和PyMySQL 安装MySQL # 在Ubuntu/Debian上安装 sudo apt update sudo apt install mysql-server sudo mysql_secure_installation# 启动MySQL服务 sudo systemctl start mysql sudo systemctl enable mysql 安装PyMySQL pip install pymysql 使用 apt 安装 My…
阅读更多...
WEBSTORM前端 —— 第2章：CSS —— 第8节：网页制作2（小兔鲜儿）

WEBSTORM前端 —— 第2章：CSS —— 第8节：网页制作2（小兔鲜儿）

目录 1.项目目录 2.SEO 三大标签 3.Favicon 图标 4.版心 5.快捷导航（shortcut） 6.头部（header） 7.底部（footer） 8.banner 9.banner – 圆点 10.新鲜好物（goods） 11.热门品牌（brand） 12.生鲜（fresh） 13.最新专题（topic） 1.项目目录 【xtx-pc】 ima…
阅读更多...
仓储车间安全革命：AI叉车防撞装置系统如何化解操作风险

仓储车间安全革命：AI叉车防撞装置系统如何化解操作风险

在现代物流体系中&#xff0c;仓储承担着货物储存、保管、分拣和配送等重要任务。但现代仓储行业的安全现状却不容乐观&#xff0c;诸多痛点严重制约着其发展&#xff0c;其中叉车作业的安全问题尤为突出。相关数据显示&#xff0c;全球范围内&#xff0c;每年因叉车事故导致的…
阅读更多...
修改图像分辨率

修改图像分辨率

在这个教程中&#xff0c;您将学习如何使用Python和深度学习技术来调整图像的分辨率。我们将从基础的图像处理技术开始&#xff0c;逐步深入到使用预训练的深度学习模型进行图像超分辨率处理。 一、常规修改方法 1. 安装Pillow库 首先&#xff0c;你需要确保你的Python环境中…
阅读更多...
Redis 主从同步与对象模型（四）

Redis 主从同步与对象模型（四）

目录 1.淘汰策略 1.1 expire/pexpire&#xff08;设置键的过期时间&#xff09; 1.2 配置 1.maxmemory 2.maxmemory-policy 3.maxmemory-samples 2.持久化 2.1背景 2.2 fork 的写时复制机制 2.3 大 key 3.持久化方式 3.1 aof&#xff08;Apped Only File&#xff09…
阅读更多...
Linux系列：如何用perf跟踪.NET程序的mmap泄露

Linux系列：如何用perf跟踪.NET程序的mmap泄露

一&#xff1a;背景 1. 讲故事 如何跟踪.NET程序的mmap泄露&#xff0c;这个问题困扰了我差不多一年的时间&#xff0c;即使在官方的github库中也找不到切实可行的方案&#xff0c;更多海外大佬只是推荐valgrind这款工具&#xff0c;但这款工具底层原理是利用模拟器&#xff…
阅读更多...
如何租用服务器并通过ssh连接远程服务器终端

如何租用服务器并通过ssh连接远程服务器终端

这里我使用的是智算云扉 没有打广告 但确实很便宜 还有二十小时免费额度 链接如下 注册之后 租用新实例 选择操作系统 选择显卡型号 点击租用 选择计费方式 选择镜像 如果跑深度学习的话 就选项目对应的torch版本 没有的话 就创建纯净的cuda 自己安装 点击创建实例 创建之后 …
阅读更多...
华为设备链路聚合实验：网络工程实战指南

华为设备链路聚合实验：网络工程实战指南

链路聚合就像为网络搭建 “并行高速路”&#xff0c;既能扩容带宽&#xff0c;又能保障链路冗余&#xff0c;超实用&#xff01; 一、实验拓扑速览 图中两台交换机 LSW1 和 LSW2&#xff0c;PC1、PC2 归属 VLAN 10&#xff0c;PC3 归属 VLAN 30。LSW1 与 LSW2 通过 GE0/0/1、…
阅读更多...
AUTOSAR图解==＞AUTOSAR_TR_AIDesignPatternsCatalogue

AUTOSAR图解==＞AUTOSAR_TR_AIDesignPatternsCatalogue

AUTOSAR 人工智能设计模式目录 AUTOSAR传感器执行器与仲裁设计模式的深入解析与图解 目录 简介传感器和执行器模式 架构概述组件结构交互流程应用场景 多请求者或提供者之间的仲裁模式 架构概述组件结构仲裁流程应用场景 总结 1. 简介 AUTOSAR&#xff08;AUTomotive Open Sy…
阅读更多...
双系统电脑中如何把ubuntu装进外接移动固态硬盘

双系统电脑中如何把ubuntu装进外接移动固态硬盘

电脑&#xff1a;win11 ubuntu22.04 实体机 虚拟机&#xff1a;VMware17 镜像文件&#xff1a;ubuntu-22.04.4-desktop-amd64.iso 或者 ubuntu20.4的镜像 外接固态硬盘1个 一、首先win11中安装vmware17 具体安装方法&#xff0c;网上很多教程 二、磁盘分区 1.在笔…
阅读更多...
【C语言】程序的预处理，#define详解

【C语言】程序的预处理，#define详解

一、预定义符号 二、#define 1.#define定义标识符 #define &#xff0b; 自定义名称 &#xff0b; 代替的内容 例&#xff1a; #define MAX 100 #define CASE break;case #define CASE break;caseint main() {int n 0;switch (n){case 1:CASE 2:CASE 3:CASE 4:}return …
阅读更多...
NVM完全指南：安装、配置与最佳实践

NVM完全指南：安装、配置与最佳实践

发布于 2025年5月7日 • 阅读时间&#xff1a;10分钟 &#x1f4a1; TL;DR: 本文详细介绍了如何完整卸载旧版Node.js&#xff0c;安装NVM&#xff0c;配置阿里云镜像源&#xff0c;以及设置node_global与node_cache目录&#xff0c;打造高效Node.js开发环境。 &#x1f4cb; 目…
阅读更多...
（二）毛子整洁架构（CQRS/Dapper/领域事件处理器/垂直切片）

（二）毛子整洁架构（CQRS/Dapper/领域事件处理器/垂直切片）

文章目录 项目地址一、Application 层1.1 定义CQRS的接口以及其他服务1. Command2. IQuery查询3. 当前时间服务接口4. 邮件发送服务接口 1.2 ReserveBooking Command1. 处理传入的参数2. ReserveBookingCommandHandler3. BookingReservedDomainEvent 1.3 Query使用Sql查询1. 创…
阅读更多...
如何修改MySQL数据库密码

如何修改MySQL数据库密码

文章目录 一、忘记数据库密码该如何修改1. 关闭数据库的服务2.跳过安全检查3. 重置密码4.查询用户是否存在5.退出验证密码是否正确 二、未忘记密码该如何修改密码1.直接修改密码2.登录mysql 时间久了&#xff0c;忘记数据库密码了。。。。。 一、忘记数据库密码该如何修改 1. …
阅读更多...
【Python】mat npy npz 文件格式

【Python】mat npy npz 文件格式

1、简介 MAT 文件和 NP&#xff08;.npy 或 .npz&#xff09;文件是两种不同的格式&#xff0c;用于存储数组数据。它们分别由 MATLAB 和 NumPy 开发&#xff0c;主要用于各自环境中的数据存储和交换。以下是这两种格式的主要区别&#xff1a; 1.1 格式和用途 MAT 文件&…
阅读更多...
SpringBoot快速入门WebSocket(​​JSR-356附Demo源码)

SpringBoot快速入门WebSocket(​​JSR-356附Demo源码)

现在我想写一篇Java快速入门WebSocket,就使用 JSR-356的websocket,我想分以下几点, 1. websocket介绍, 1.1 介绍 什么是WebSocket&#xff1f;​​ WebSocket 是一种基于 ​​TCP​​ 的​​全双工通信协议​​&#xff0c;允许客户端和服务器在​​单个长连接​​上实…
阅读更多...
【安装配置教程】ubuntu安装配置Kodbox

【安装配置教程】ubuntu安装配置Kodbox

目录 一、引言 二、环境配置 1. 服务器配置​ 2. 必备组件​ 三、安装基础环境​ 1. 安装 PHP 8.1 及扩展​ 2. 安装 MySQL 数据库 3.安装 Redis&#xff08;可选&#xff0c;提升缓存性能&#xff09; 4. 配置nginx文件 4.1. 创建 Kodbox 站点目录​ 4.2. 编写 Ng…
阅读更多...
LabVIEW车牌自动识别系统

LabVIEW车牌自动识别系统

在智能交通快速发展的时代&#xff0c;车牌自动识别系统成为提升交通管理效率的关键技术。本案例详细介绍了基于 LabVIEW 平台&#xff0c;搭配大恒品牌相机构建的车牌自动识别系统&#xff0c;该系统在多个场景中发挥着重要作用&#xff0c;为交通管理提供了高效、精准的解决方…
阅读更多...
c语言第一个小游戏：贪吃蛇小游戏01

c语言第一个小游戏：贪吃蛇小游戏01

hello啊大家好 今天我们用一个小游戏来增强我们的c语言&#xff01; 那就是贪吃蛇 为什么要做一个贪吃蛇小游戏呢&#xff1f; 因为这个小游戏所涉及到的知识有c语言的指针、数组、链表、函数等等可以让我们通过这个游戏来巩固c语言&#xff0c;进一步认识c语言。 一.我们先…
阅读更多...
[项目总结] 抽奖系统项目技术应用总结

[项目总结] 抽奖系统项目技术应用总结

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023