当前位置: 首页 > news >正文

【Element-UI】CUD(增删改)及form 表单验证(附源码)

目录

一、导言

1、引言

2、作用

二、CUD

1、增加修改

1.1、添加弹窗

1.2、定义变量

1.3、定义方法

1.4、完整代码

2、删除

2.1、定义方法

三、表单验证

1、添加规则

2、定义规则

3、提交事件

4、前端完整代码


一、导言

1、引言

        增删改是计算机编程和数据库管理中常用的三个操作,使用增删改操作可以帮助我们管理和维护系统或数据库中的数据,确保数据的准确性、完整性和一致性。它们是编程和数据库管理中非常常用的操作,有助于提高系统的灵活性和可维护性

它们的作用:

  1. 增加(Add):通过增加操作,可以向系统或数据库中添加新的数据或功能。这对于扩展系统的能力和功能非常重要。例如,在一个学生成绩管理系统中,可以通过增加操作添加新的学生信息。
  2. 删除(Delete):删除操作可以从系统或数据库中移除不需要的数据或功能。这对于清理和维护数据的一致性非常重要。例如,在一个在线商城的数据库中,可以通过删除操作将已下架或过期的商品从数据库中移除。
  3. 修改(Update):修改操作可以对系统或数据库中已有的数据或功能进行更新或更改。这可以帮助保持数据的准确性和完整性。例如,在一个员工信息管理系统中,可以通过修改操作更新员工的工资信息。

2、作用

        Element UI 是一个基于 Vue.js 的桌面端组件库,它提供了一套丰富的用户界面组件,包括表格、表单、对话框等,用于快速构建现代化的Web应用程序。

 Element UI 中使用增删改操作主要有以下作用:

  1. 增加(Add):在 Element UI 中,可以利用表单组件和对话框组件来实现数据的添加功能。通过表单组件,我们可以收集用户输入的数据,并通过提交操作将数据添加到数据库或服务器中。通过对话框组件,我们可以展示一个弹窗来收集用户输入的数据,然后将数据添加到系统中。
  2. 删除(Delete):在 Element UI 中,可以利用表格组件和对话框组件来实现数据的删除功能。通过表格组件,我们可以展示系统中已有的数据,并提供删除按钮供用户操作,当用户点击删除按钮时,可以弹出对话框来确认删除操作,并在确认后将数据从数据库或服务器中删除。
  3. 修改(Update):在 Element UI 中,可以利用表单组件和对话框组件来实现数据的修改功能。通过表单组件,我们可以展示系统中已有的数据,并提供编辑按钮供用户操作,当用户点击编辑按钮时,可以弹出对话框展示数据的编辑界面,并在用户提交修改后将数据更新到数据库或服务器中。

        增删改操作可以帮助我们在 Element UI 中实现对数据的管理和维护。无论是添加新数据、删除旧数据还是修改现有数据,都可以通过 Element UI 提供的组件和功能快速实现,并提供友好的用户界面和交互体验。这有助于加快开发速度,提高系统的可用性和易用性

二、CUD

1、增加修改

在这之前我们要写好我们的后端代码,以便我们进行之后的操作

1.1、添加弹窗

首先进入我们的组件 | Element的官网,找到我们的弹窗组件。下面我也提供了。

<el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
<!--    弹窗--><el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear"><el-form :model="book"><el-form-item label="书籍名称" :label-width="formLabelWidth"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格" :label-width="formLabelWidth"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类型" :label-width="formLabelWidth"><el-select v-model="book.booktype" placeholder="请选择活动区域"><el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="editSubmit">确 定</el-button></div></el-dialog>

1.2、定义变量

data() {return {// 是否打开弹窗dialogFormVisible: false,// 弹窗标题title: '新增页面',// 定义数组接收数据book:{id: '', bookname: '', price: '', booktype: ''},// 类型types: [],// 输入框长度formLabelWidth: '100px',}}

1.3、定义方法

 // 初始化方法clear() {this.dialogFormVisible = false;this.title = '新增页面';this.book = {id: '',bookname: '',price: '',booktype: ''}}// 编辑handleEdit(index, row) {this.dialogFormVisible = true;if (row) {this.title = '编辑页面';this.book.id = row.id;this.book.bookname = row.bookname;this.book.price = row.price;this.book.booktype = row.booktype;}}// 增加修改提交editSubmit() {//表单验证this.$refs['book'].validate((valid) => {if (valid) {//验证通过执行增加修改方法let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_ADD;if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径url = this.axios.urls.BOOK_EDIT;}this.axios.post(url, params).then(r => {this.clear();//关闭窗口this.query({});//刷新}).catch(e => {});} else {// console.log('error submit!!');return false;}});}created() {this.types = [{id: 1, name: '玄幻'},{id: 2, name: '计算机'},{id: 3, name: '散文'},{id: 4, name: '古典'},{id: 5, name: '文学'},{id: 6, name: '教育'},{id: 7, name: '悬疑'},]
//初始化查询的方法this.query({})}

1.4、完整代码

<template><div class="Book" style="padding: 30px;"><!-- 输入框搜索 --><el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名称 : "><el-input v-model="bookname" placeholder="书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" plain @click="onSubmit">查询</el-button><el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button></el-form-item></el-form><!-- 书籍的书籍表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="书籍ID"></el-table-column><el-table-column prop="bookname" label="书籍名称"></el-table-column><el-table-column prop="price" label="书籍价格"></el-table-column><el-table-column prop="booktype" label="书籍类型"></el-table-column><el-table-column label="操作" min-width="180"><template slot-scope="scope"><el-button size="mini" icon="el-icon-edit-outline" type="primary"@click="handleEdit(scope.$index, scope.row)">编 辑</el-button><el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页 --><div class="block" style="padding: 20px;"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"background :page-sizes="[10, 20, 30, 40]" :page-size="rows"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><!--    弹窗--><el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear"><el-form :model="book"><el-form-item label="书籍名称" :label-width="formLabelWidth"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格" :label-width="formLabelWidth"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类型" :label-width="formLabelWidth"><el-select v-model="book.booktype" placeholder="请选择活动区域"><el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="editSubmit">确 定</el-button></div></el-dialog></div></template><script>
export default {data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,// 是否打开弹窗dialogFormVisible: false,// 弹窗标题title: '新增页面',// 定义数组接收数据book:{id: '', bookname: '', price: '', booktype: ''},// 类型types: [],// 输入框长度formLabelWidth: '100px',}},methods: {// 初始化方法clear() {this.dialogFormVisible = false;this.title = '新增页面';this.book = {id: '',bookname: '',price: '',booktype: ''}},// 编辑handleEdit(index, row) {this.dialogFormVisible = true;if (row) {this.title = '编辑页面';this.book.id = row.id;this.book.bookname = row.bookname;this.book.price = row.price;this.book.booktype = row.booktype;}},// 增加修改提交editSubmit() {let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_ADD;if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径url = this.axios.urls.BOOK_EDIT;}this.axios.post(url, params).then(r => {this.clear();//关闭窗口this.query({});//刷新}).catch(e => {});},handleSizeChange(r) {//当页大小发生变化let params = {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {//当前页码大小发生变化let params = {bookname: this.bookname,rows: this.rows,// 分页page: p}// console.log(params)this.query(params);},query(params) {//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_BOOKLIST;this.axios.get(url, {params: params}).then(d => {this.tableData = d.data.rows;this.total = d.data.total;}).catch(e => {});},onSubmit() {let params = {bookname: this.bookname}console.log(params)this.query(params);this.bookname = ''}},
//初始化调用created() {this.types = [{id: 1, name: '玄幻'},{id: 2, name: '计算机'},{id: 3, name: '散文'},{id: 4, name: '古典'},{id: 5, name: '文学'},{id: 6, name: '教育'},{id: 7, name: '悬疑'},]this.query({})}
}
</script><style>
</style>

2、删除

2.1、定义方法

  // 删除handleDelete(index, row) {console.log(index, row)let url = this.axios.urls.BOOK_DEL;this.axios.post(url, {id: row.id}).then(d => {this.query({})this.$message({message: '恭喜你,删除成功',type: 'success'});}).catch(e => {this.$message('已取消');});}

三、表单验证

1、添加规则

需要在elementui里面的form表单里面添加:model="book" :rules="rules" ref="book":modelref必须是一样的

      <el-form :model="book" :rules="rules" ref="book">

<el-form-item>里面添加prop属性

2、定义规则

      //表单验证rules: {//定义验证格式bookname: [{required: true, message: '请输入书籍名称', trigger: 'blur'},{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}],price: [{required: true, message: '请输入书籍价格', trigger: 'change'},{min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}],booktype: [{required: true, message: '请输入书籍类型', trigger: 'blur'}]}

3、提交事件

在提交的事件里面添加

this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});

formName:form里面:model="book" 或者ref="book"  的名字

    // 增加修改提交editSubmit() {//表单验证this.$refs['book'].validate((valid) => {if (valid) {//验证通过执行增加修改方法let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_ADD;if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径url = this.axios.urls.BOOK_EDIT;}this.axios.post(url, params).then(r => {this.clear();//关闭窗口this.query({});//刷新}).catch(e => {});} else {// console.log('error submit!!');return false;}});}

当你的规则必配了就执行你的增加修改的方法,或者其他的方法

4、前端完整代码

<template><div class="Book" style="padding: 30px;"><!-- 输入框搜索 --><el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名称 : "><el-input v-model="bookname" placeholder="书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" plain @click="onSubmit">查询</el-button><el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button></el-form-item></el-form><!-- 书籍的书籍表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="书籍ID"></el-table-column><el-table-column prop="bookname" label="书籍名称"></el-table-column><el-table-column prop="price" label="书籍价格"></el-table-column><el-table-column prop="booktype" label="书籍类型"></el-table-column><el-table-column label="操作" min-width="180"><template slot-scope="scope"><el-button size="mini" icon="el-icon-edit-outline" type="primary"@click="handleEdit(scope.$index, scope.row)">编 辑</el-button><el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页 --><div class="block" style="padding: 20px;"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"background :page-sizes="[10, 20, 30, 40]" :page-size="rows"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><!--    弹窗--><el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear"><el-form :model="book" :rules="rules" ref="book"><el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype"><el-select v-model="book.booktype" placeholder="请选择活动区域"><el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="editSubmit">确 定</el-button></div></el-dialog></div></template><script>
export default {data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,// 是否打开弹窗dialogFormVisible: false,// 弹窗标题title: '新增页面',// 定义数组接收数据book:{id: '', bookname: '', price: '', booktype: ''},// 类型types: [],// 输入框长度formLabelWidth: '100px',//表单验证rules: {//定义验证格式bookname: [{required: true, message: '请输入书籍名称', trigger: 'blur'},{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}],price: [{required: true, message: '请输入书籍价格', trigger: 'change'},{min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}],booktype: [{required: true, message: '请输入书籍类型', trigger: 'blur'}]},}},methods: {// 初始化方法clear() {this.dialogFormVisible = false;this.title = '新增页面';this.book = {id: '',bookname: '',price: '',booktype: ''}},// 编辑handleEdit(index, row) {this.dialogFormVisible = true;if (row) {this.title = '编辑页面';this.book.id = row.id;this.book.bookname = row.bookname;this.book.price = row.price;this.book.booktype = row.booktype;}},// 删除handleDelete(index, row) {console.log(index, row)let url = this.axios.urls.BOOK_DEL;this.axios.post(url, {id: row.id}).then(d => {this.query({})this.$message({message: '恭喜你,删除成功',type: 'success'});}).catch(e => {this.$message('已取消');});},// 增加修改提交editSubmit() {//表单验证this.$refs['book'].validate((valid) => {if (valid) {//验证通过执行增加修改方法let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_ADD;if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径url = this.axios.urls.BOOK_EDIT;}this.axios.post(url, params).then(r => {this.clear();//关闭窗口this.query({});//刷新}).catch(e => {});} else {// console.log('error submit!!');return false;}});},handleSizeChange(r) {//当页大小发生变化let params = {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {//当前页码大小发生变化let params = {bookname: this.bookname,rows: this.rows,// 分页page: p}// console.log(params)this.query(params);},query(params) {//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_BOOKLIST;this.axios.get(url, {params: params}).then(d => {this.tableData = d.data.rows;this.total = d.data.total;}).catch(e => {});},onSubmit() {let params = {bookname: this.bookname}console.log(params)this.query(params);this.bookname = ''}},created() {this.types = [{id: 1, name: '玄幻'},{id: 2, name: '计算机'},{id: 3, name: '散文'},{id: 4, name: '古典'},{id: 5, name: '文学'},{id: 6, name: '教育'},{id: 7, name: '悬疑'},]this.query({})}
}
</script><style>
</style>

我的分享就到这里,感谢大家在评论区讨论!!!

相关文章:

【Element-UI】CUD(增删改)及form 表单验证(附源码)

目录 一、导言 1、引言 2、作用 二、CUD 1、增加修改 1.1、添加弹窗 1.2、定义变量 1.3、定义方法 1.4、完整代码 2、删除 2.1、定义方法 三、表单验证 1、添加规则 2、定义规则 3、提交事件 4、前端完整代码 一、导言 1、引言 增删改是计算机编程和数据库管理…...

2024年高新技术企业认定标准

1高新技术企业认定八大条件是什么 (1)企业申请认定时须注册成立一年以上。 (2)企业通过自主研发、受让、受赠、并购等方式&#xff0c;获得对其主要产品(服务)在技术上发挥核心支持作用的知识产权的所有权。 (3)对企业主要产品(服务)发挥核心支持作用的技术属于《国家重点支持的…...

励磁工作原理

励磁工作原理是指在电磁设备中通过外加电流或磁场来增强设备中的磁场强度的过程。在电磁设备中&#xff0c;励磁是非常重要的步骤&#xff0c;它能够保证设备正常运行&#xff0c;并实现设备的预期功能。本文将从基本概念、工作原理和应用方面介绍励磁工作原理。 我们来了解…...

【JAVA】获取当前项目的classpath路径

在Java中可以通过以下几种方式获取classpath路径: ClassLoader的getResource方法 String classpath ClassLoader.getSystemResource("").getPath();Web项目 ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext(); String classpath c…...

Sulfo CY3-DBCO蛋白质标记实验-星戈瑞

Sulfo CY3-DBCO是一种荧光标记剂&#xff0c;可以通过点击化学方法将其与蛋白质特异性地标记。以下是一种常见的Sulfo CY3-DBCO蛋白质标记的方法&#xff1a; 实验步骤&#xff1a; 制备目标蛋白质&#xff1a;准备并提取您感兴趣的蛋白质。这可以通过细胞培养、细胞溶解、组织…...

【不规范bug注意】2023.9.26

eigen库的矩阵操作 mn 点乘 n*m 才可以得到一个数。前后大小不满足转置相等关系的有可能可以进行运算而不报错&#xff0c;但结果没有任何意义&#xff1f;多次运行会报段错误 segmentation fault &#xff01; 因为访问了未知区域内存&#xff1f; 错误例子 (m * 1) * ( m * 1…...

it端到端运维监控

公司的运维监控已成为确保业务顺利运行的关键。特别是对于IT部门&#xff0c;端到端运维监控不仅可以帮助企业及时发现和解决问题&#xff0c;还可以提高业务效率&#xff0c;优化客户体验。本文将详细介绍端到端运维监控的概念、重要性及其实施方法。 端到端操作监控的概念 端…...

Vue3根组件设置Transition失效的问题

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN博客专家&#xff0c;阿里云签约博主&#xff0c;InfoQ签约博主&#xff0c;华为云云享专家&#xff0c;51CTO明日之星 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法 &#x1f492; 公众号&#xff1a…...

2023-2024年最新大数据学习路线

文章目录 2023-2024年最新大数据学习路线大数据开发入门*01*阶段案例实战 大数据核心基础*02*阶段案例实战 千亿级数仓技术*03*阶段项目实战 PB级内存计算04阶段项目实战 亚秒级实时计算*05*阶段项目实战 大厂面试*06* 2023-2024年最新大数据学习路线 新路线图在Spark一章不再…...

Cocos Creator3.8 实战问题(三)去除scrollview背景色和label 对齐方式设置无效问题

1、 scrollview 默认背景是白色的&#xff0c; 我们不想要 scrollview 默认的背景颜色&#xff0c;怎么办&#xff1f; 设置 scrollview的color为透明吗&#xff1f; 不对&#xff0c;这会导致 view节点完全透明。 解决方法&#xff1a;直接删除scrollview 的Spritre frame就…...

以太坊代币标准ERC20、ERC165、ERC721

两个概念 ERC(Ethereum Request for Comment) 以太坊意见征集稿EIP(Ethereum Improvement Proposals)以太坊改进提案 ERC和EIP用于使得以太坊更加完善&#xff1b;在ERC中提出了很多标准&#xff0c;用的最多的标准就是它的Token标准; 有哪些标准详细见https://eips.ethereum…...

spring cloud gateway谓词工厂 Predicate Factory

Predicate Factory 称为谓词工厂或断言工厂 默认的工厂类都位于 org.springframework.cloud.gateway.handler.predicate 包下 根据版本不同有多有少 本文spring-cloud.version2021.0.5 spring-cloud-gateway3.1.4 官方文档&#xff1a;https://docs.spring.io/spring-cloud-gat…...

美丽塔O(n)解法单调栈

题目 见上一篇&#xff1a; 较难算法美丽塔时间复杂度O(n)-CSDN博客 时间复杂度 O(n) 分析 接着上篇。从左向右依次处理Left&#xff0c;处理Left[i]时&#xff0c;从右向左寻找第一个符合maxHeights[j]<maxHeights[i]的j。如果j1<j2&#xff0c;且maxHeights[j1]&g…...

​的PDF文件压缩软件PDF Squeezer mac中文版​软件特点

PDF Squeezer mac是一款macOS平台上的PDF文件压缩软件&#xff0c;可以帮助用户快速地压缩PDF文件&#xff0c;从而减小文件大小&#xff0c;使其更容易共享、存储和传输。PDF Squeezer使用先进的压缩算法&#xff0c;可以在不影响文件质量的情况下减小文件大小。 PDF Squeezer…...

JS Ajax 封装

ajax 封装 一、 什么是Ajax&#xff1f;二、 Ajax的优缺点&#xff1f;2.1 优点2.2 缺点 三、 Ajax的使用3.1 状态码3.2 xhr的基本使用3.3 ajax原生封装&#xff1a;3.3.1 触发GET请求&#xff1a;3.3.2 调用POST请求&#xff1a; 四、Ajax的约束 一、 什么是Ajax&#xff1f; …...

观测云产品更新 | 优化日志数据转发、索引绑定、基础设施自定义等

观测云更新 日志 数据转发&#xff1a;新增外部存储转发规则数据查询&#xff1b;支持启用/禁用转发规则&#xff1b;绑定索引&#xff1a;日志易新增标签绑定&#xff0c;从而实现更细颗粒度的数据范围查询授权能力。 基础设施 > 自定义 【默认属性】这一概念更改为【必…...

trio ValueEvent

class AsyncValue(Generic[T]): 值包装器&#xff0c;提供等待值或过渡的能力。 概要&#xff1a; >>> a AsyncValue(0) # 注意&#xff1a;可以包装任何类型&#xff08;枚举&#xff0c;元组&#xff0c;...&#xff09; >>> ... >>> a.valu…...

js 新学一招,点击出现弹框,点击其他地方关闭弹框

文章目录 需求分析 需求 鼠标点击菜单&#xff0c;出现二级菜单&#xff0c;当点击其他地方时&#xff0c;二级菜单自动关闭 分析 <template><el-popoverv-model"visible"></el-popover> </template> <script> export default {dat…...

c#扩展包-Stateless

准备 Stateless是一个有限状态机扩展包。在c#项目中可以直接通过NuGet安装。 使用他需要先用枚举写好你所有可能的状态和子状态。 例如移动&#xff0c;下蹲&#xff0c;空闲&#xff0c;跳跃&#xff0c;游泳&#xff0c;奔跑&#xff0c;走路。 其中&#xff0c;奔跑和走路…...

Lua函数

--函数--无参无返回值 function F1()print("F1函数") end F1() print("*****************")--有参 function F2(a)print("F2函数"..a) end F2(2) --如果传入参数和函数数量不一致 --不会报错只是补空 F2(1,2) print("*****************&quo…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...