Vue3实现动态导入Excel表格数据的方法详解

目录

• 1.  前言
• 2.  如何实现
• 2.1使用技术
• 2.2实现思路
• 2.3具体实现方案

1.  前言

在开发工作过程中，我们会遇到各种各样的表格数据导入，大部分我们的解决方案：提供一个模板前端进行下载，然后按照这个模板要求进行数据填充，最后上传导入，这是其中一种解决方案。个人认为还有另外一种解决方案，不一定会前面的方案好，方便，但是可以减少人为操作，减少出错，更为通用，就是进行动态数据导入，前端进行自定义导入数据，配置数据对应关系，最后提交导入结果。

2.  如何实现

2.1使用技术

后台使用.Net6.0,前端使用Vue3

2.2实现思路

• 前端通过Excel表格数据导入，导入后客户可以进行数据编辑（未实现）客户数据确认后进行数据回写主页面
• 设置数据对应关系，也就是后台所需数据格式和前台数据格式进行绑定
• 数据校验，进行数据提交

2.3具体实现方案

2.3.1导入Excel数据

创建列表页面，页面主要布局如下

Table需要绑定的列是未知的,所以el-table绑定的el-table-column是需要动态进行加载，动态定义表格以及变量

const state = reactive({
colunm: [{key: "", lable: ""}],
});

点击导入报名数据，弹出上传数据页面

这一块的功能在之前的一篇文章有写过：.Net6.0+Vue3实现数据简易导入功能全过程

子组件的核心代码

页面布局：

变量定义：

const state = reactive({
  tempTableData: [{}],//临时存储全部数据
  searchInput: { PageIndex: 1, PageSize: 10 },
  tableData: { data: [{}], total: 0 },//表格加载当前页面数据
  dialogVisible: false,
  colunm: [{ key: '', lable: '' }]
});

父页面调用方法,进行表格列头加载，初始化表格数据：

const childMethod = (data) => {
  state.colunm = data;
  state.tableData.data = [];
  state.dialogVisible = true;
}

绑定表格方法,前端进行分页数据处理:(这里可能会有性能问题，暂时没有仔细探究)

const getData = () => {
  const tempData: any = [];
  state.tempTableData.forEach((value, index) => {
    if (index >= ((state.searchInput.PageIndex - 1) * state.searchInput.PageSize) && index < ((state.searchInput.PageIndex) * state.searchInput.PageSize)) {
      tempData.push(value);
    }
  });
  state.tableData.data = tempData;
  state.tableData.total = state.tempTableData.length;
}

提交数据回写父组件方法

const submit = () => {
  console.log(state.tempTableData);
  context.emit('childClick', state.tempTableData,state.colunm)
}

上传Excel读取数据方法，主要动态绑定列以及导入的数据

const uploadChange = async (file) => {
  let dataBinary = await readFile(file.raw)
  let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
  let data: any = XLSX.utils.sheet_to_json(workSheet)

  let mycolunm={};
  Object.setPrototypeOf(mycolunm,data[0]);
  state.colunm=[];
  for(let key in mycolunm){
    state.colunm.push( { lable: key, key: key })
  }
  
  let tHeader = state.colunm.map(obj => obj.lable)
  let filterVal = state.colunm.map(obj => obj.key)
  tHeader.map(val => filterVal.map(obj => val[obj]))
  const tempData: any = [];
  data.forEach((value) => {
    const ob = {};
    tHeader.forEach((item, index) => {
      ob[filterVal[index]] = value[item].toString();
    })
    tempData.push(ob);
  })
  state.tempTableData = tempData;
  getData();
}

这里导入数据后，会调用主组件方法(dataUploadchildClick)用于回写主组件表格数据,列头等数据

const dataUploadchildClick = (data, colunm) => {
  state.colunm = colunm;
  state.tempData = data;
  getData();
  dataUpload.value.cancel();
};

2.3.2设置数据对应关系

定义后台需要的列

SelectData: [
  {key: 'zkzh', type: '', value: '', selectValue: '', title: '准考证号'},
  {key: 'zjlb', type: '', value: '', selectValue: '', title: '证件类别'},
  {key: 'zjhm', type: '', value: '', selectValue: '', title: '证件号码'},
  {key: 'ksxm', type: '', value: '', selectValue: '', title: '考生姓名'},
  {key: 'xb', type: '', value: '', selectValue: '', title: '性别'},
  {key: 'ss', type: '', value: '', selectValue: '', title: '省市'},
  {key: 'kq', type: '', value: '', selectValue: '', title: '考区'},
  {key: 'kdh', type: '', value: '', selectValue: '', title: '考点号'},
  {key: 'kdmc', type: '', value: '', selectValue: '', title: '考点名称'},
  {key: 'kch', type: '', value: '', selectValue: '', title: '考场号'},
  {key: 'kchdz', type: '', value: '', selectValue: '', title: '考场地址'},
  {key: 'zwh', type: '', value: '', selectValue: '', title: '座位号'},
  {key: 'chc', type: '', value: '', selectValue: '', title: '场次'}
]

创建Select组件，组件核心代码

页面布局部分

{{ itemKey }}:

  



  

接受参数定义

props: {
  itemKey: String,
  name: String,
  type: String,
  value: String,
  selectValue: String,
  colunm: Object
},

页面变量定义,这里定义的默认option主要有三个

• 0 固定值，这一列为固定值，不从表格中读取
• 1 下拉框，从导入数据中选择
• 2 自动生成，这里主要是特殊业务，可以进行自定义扩展

const state = reactive({
  value: ref(''),
  type: ref(''),
  selectValue: ref([]),
  ValueOptions:[{}],
  options: [
    {
      value: '0',
      label: '固定值',
    },
    {
      value: '1',
      label: '下拉框',
    },
    {
      value: '2',
      label: '自动生成',
    },
  ],
});

监听下拉框选择类型：

watch(() => state.type, (newVal) => {
      context.emit('update:type', newVal);
    }
);

监听下拉框选择固定，文本框输入的值：

watch(() => state.value, (newVal) => {
  context.emit('update:value', newVal)
})

监听下拉框选择下拉框，后面下拉框选择的值：

watch(() => state.selectValue, (newVal) => {
  context.emit('update:selectValue', newVal)
})

监听表格的列，动态加载下拉框绑定的值：

watch(() => props.colunm, (newVal: any) => {
  state.ValueOptions=newVal;
})

最终的效果:

父页面进行引用

          

            
          
        
 
  
 
2.3.3进行数据提交
 
 
提交数据到后台进行处理，这里可以根据自己的业务进行验证，或则进行其它扩展
 
 
 
  
const Save = () => {
  if (state.tempData.length == 0) {
    state.active=1;
    ElMessage.warning('请导入考生数据');
    return;
  }
  let CheckSelectData = true;
  state.SelectData.forEach((value, index) => {
    if (!value.type) {
      CheckSelectData = false
    }
  });
  if (!CheckSelectData) {
    state.active=2;
    ElMessage.warning('请设置完成数据对应关系');
    return;
  }
  if (state.tableTimeData.data.length==0){
    state.active=3;
    ElMessage.warning('请添加场次数据');
    return;
  }
  if (!state.ExamData.jiancheng||!state.ExamData.kaikaonianyue||!state.ExamData.quancheng){
    state.active=4;
    ElMessage.warning('请设置任务相关信息');
    return;
  }
  axios.post('/GenerateCheckTemplate', state)
      .then(function (response) {
        if (response.status == 200) {
          ElMessage.success(response.data);
          dataUpload.value.cancel();
          getData();
        } else {
          ElMessage.error(response.data)
        }
      })
}
 
 
 
 
后台定义接口:/GenerateCheckTemplate
 
 
定义实体对前台导入数据进行接收：
 
 
 
  
public class GenerateCheckTemplate
    {
        /// 

        /// 考试任务对象
        /// 
        public ExamData ExamData { get; set; }

        /// 

        /// 数据对应关系对象
        /// 
        public List SelectData { get; set; }

        /// 

        /// 导入数据
        /// 
        public List> tempData { get; set; }

        /// 

        /// 导入数据列集合
        /// 
        public List colunm { get; set; }

        /// 

        /// 场次对象
        /// 
        public tableTimeData tableTimeData { get; set; }
}

    /// 

    /// 考试任务对象
    /// 
    public class ExamData
    {
        /// 

        /// 简称
        /// 
        public string jiancheng { get; set; }
        /// 

        /// 考试年月
        /// 
        public string kaikaonianyue { get; set; }
        /// 

        /// 简称
        /// 
        public string quancheng { get; set; }
    }
    /// 

    /// 数据对应关系对象
    /// 
    public class Correspondence
    {
        /// 

        /// key
        /// 
        public string key { get; set; }

        /// 

        /// 下拉选择数据
        /// 
        public string selectValue { get; set; }

        /// 

        /// 标题
        /// 
        public string title { get; set; }

        /// 

        /// 类型 0 固定值 1下拉框选择
        /// 
        public string type { get; set; }

        /// 

        /// 固定值数据
        /// 
        public string value { get; set; }
    }

    /// 

    /// 表格对象
    /// 
    public class tableTimeData
    {
        /// 

        /// 提交表格数据
        /// 
        public List data { get; set; }
        /// 

        /// 总数
        /// 
        public int total { get; set; }
    }

    public class ExamTime
    {
        /// 

        /// 场次编码
        /// 
        public int? ExamTimeCode { get; set; }
        /// 

        /// 场次名称
        /// 

        public string ExamTimeName { get; set; }

        /// 

        /// 开始时间
        /// 
        public string startTime { get; set; }
        /// 

        /// 结束时间
        /// 
        public string endTime { get; set; }

        /// 

        /// 是否编辑状态
        /// 
        public bool Edit { get; set; }
    }
    /// 

    /// 导入数据列对象
    /// 
    public class Colunm
    {
        /// 

        /// 键值
        /// 
        public string key { get; set; }
        /// 

        /// 值
        /// 
        public string lable { get; set; }
    }
 
 
 
 
然后处理前端传过来的数据转换成需要的数据，这里type需要修改成枚举类型,类型可以根据需求进行扩展
 
 
 
  
/// 

        /// 处理前端传过来的数据
        /// 
        /// 
        private void ProcessingData(GenerateCheckTemplate companiesInput, DataTable dataTable)
        {
            Dictionary keyValuePairs = new Dictionary();
            foreach (var data in companiesInput.tempData)
            {
                DataRow dataRow = dataTable.NewRow();

                foreach (Correspondence correspondence in companiesInput.SelectData)
                {
                    if (correspondence.type == "0")
                    {
                        dataRow[correspondence.key] = correspondence.value;
                    }
                    else if (correspondence.type == "1")
                    {
                        dataRow[correspondence.key] = data[correspondence.selectValue];
                    }
                    else if (correspondence.type == "2")
                    {
                        string value = data[correspondence.selectValue];
                        if (keyValuePairs.ContainsKey(value))
                        {
                            dataRow[correspondence.key] = keyValuePairs[value];
                        }
                        else
                        {
                            keyValuePairs.Add(value, (keyValuePairs.Count + 1).ToString().PadLeft(2, '0'));
                            dataRow[correspondence.key] = keyValuePairs[value];
                        }
                    }
                }

                dataTable.Rows.Add(dataRow);
            }
        }
 
 
 
 
整体的功能到这里基本上实现了，具体的细节可能需要根据不同的项目进行优化，有更多的方案可以一起进行交流
 
 
附上源码地址：https://gitee.com/wyf854861085/file-upload.git
 
 
到此这篇关于Vue3实现动态导入Excel表格数据的方法详解的文章就介绍到这了,更多相关Vue动态导入Excel数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                
            
        
    
    

        
你可能感兴趣的:(Vue3实现动态导入Excel表格数据的方法详解)
        

            

                

                    
微信小程序开发之——列表渲染-wxfor(1)
                        wang688699
程序员微信小程序小程序
                        
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名如果列表中项目的位置会动态改变或者有新的项目添加到列表中，需要使用wx:key来指定列表中项目的唯一的标识符二wx:for渲染
                    
                    
学习AI大模型的小白入门建议和具体的学习方法推荐
                        aFakeProgramer
机器学习人工智能人工智能
                        
深度思考我是一名在汽车行业工作的嵌入式系统工程师，现在我想进入人工智能领域，特别是大型语言模型。说到人工智能，我是一个完全的新手，所以我需要弄清楚从哪里开始。让我们把它分解一下。首先，我知道嵌入式系统涉及许多低级编程、微控制器、实时操作系统等。人工智能，特别是像GPT这样的大型模型，似乎处于另一端，处理高级计算、海量数据集和复杂算法。这里肯定有一个学习曲线。我可能应该从了解机器学习的基础知识开始。
                    
                    
python bs4 selenium 查找a href=javascript:()；的实际点击事件和url
                        大霸王龙
pythonseleniumjavascript
                        
在使用BeautifulSoup和Selenium时，处理href="javascript:;"的链接需要一些额外的步骤，因为这些链接不直接指向一个URL，而是通过JavaScript代码来执行某些操作。这可能包括导航到另一个页面、触发模态窗口、显示/隐藏内容等。以下是如何使用Selenium来查找和处理这些链接的步骤：启动WebDriver：首先，你需要启动一个WebDriver（如Chrome
                    
                    
微信小程序开发入门教程
                        天马3798
教程系列整理微信小程序小程序
                        
微信小程序开发入门教程#1、微信小程序的概念、历史、发展微信小程序的概念、历史、发展-CSDN博客#2、微信小程序的开发工具微信官方给出的开发工具：概览|微信开放文档#3、微信小程序的项目结构、创建、发布审核#4、微信小程序开发常见问题整理#5、微信小程序的框架接口#6、微信小程序的wxml基础语法微信小程序数组绑定使用案例（一）_微信小程序绑定一个数组对象list到页面,修改数组中的一个值,在把
                    
                    
chatgpt赋能python：Python降级指南：如何安全地降级Python版本
                        tulingtest
ChatGptchatgpt人工智能计算机
                        
Python降级指南：如何安全地降级Python版本当你正在开发一个项目时，你可能会遇到一个问题：你需要使用的库只支持较旧的Python版本，而你正在使用的Python版本却较新。这个时候，降级Python版本可能是你的最佳选择。在这篇文章中，我们将介绍如何安全地降级Python版本。什么是Python降级？Python降级是指将Python的版本从较新的版本降至较旧的版本。在编写Python代码
                    
                    
JAVA的成员变量和局部变量(详解)
                        万能的柯西
javaSEjavajvm开发语言
                        
目录成员变量与局部变量的分类实例变量与类变量的区别三种局部变量的区别成员变量与局部变量的区别变量同名问题变量的使用规则何时使用成员变量JAVA的变量可以分为两大类：成员变量和局部变量。成员变量与局部变量的分类具体细分，成员变量可以分为两类：实例变量和类变量。局部变量可以分为三类：形参、方法局部变量和代码块局部变量。如下图所示：实例变量与类变量的区别这两种变量很好区别，与某个实例(对象)有关的成员变
                    
                    
微信小程序使用web-view跳转网页解决跳转出现空白或者被拦截问题
                        开朗的网友（管理员）
微信小程序前端小程序
                        
1.为了解决微信小程序跳转网页时出现的空白或被拦截问题，可以使用web-view组件进行跳转及其跳转后操作。首先，在小程序的页面布局文件中添加web-view组件的引用2.在需要跳转的地方，使用小程序提供的API进行跳转，并将参数对象作为参数传递过去wx.navigateTo({url:'/pages/webview/webview?url=https://www.example.com¶
                    
                    
数仓建模（五）选择数仓技术栈：Hive & ClickHouse & 其它
                        昊昊该干饭了
数仓建模大数据hiveclickhousehadoop
                        
在大数据技术的飞速发展下，数据仓库（DataWarehouse，简称数仓）成为企业处理和分析海量数据的核心工具。市场上主流数仓技术栈丰富，如Hive、ClickHouse、Druid、Greenplum等，对于初学者而言，选择合适的技术栈是一项挑战。本文将详细解析Hive、ClickHouse及其他数仓技术，帮助读者根据场景需求选择最佳工具。目录一、数据仓库的基础概念和技术选型原则1.1什么是数据
                    
                    
探索 Vue.js 组件开发的新边界：动态表单生成技术
                        桂月二二
vue.js前端javascript
                        
随着前端技术的飞速发展，Vue.js作为一款灵活、易用且性能优异的框架，一直是开发者心中的不二之选。本文将深入介绍Vue.js组件开发中的最新技术之一：动态表单生成技术，并通过具体实例展示如何实现这一高效技术。为什么选择动态表单生成？动态表单生成技术在以下场景中尤为重要：业务逻辑频繁变化：表单的结构、字段经常根据需求调整。复杂的用户交互：如步骤式、多条件渲染的表单。提高开发效率：将重复性的开发任务
                    
                    
基于 Linux 的 Ngina-server 通信架构 C++ 实现
                        Alkaid3529
C++新经典C++面试核心与项目设计linux架构服务器c++tcp/ip
                        
文章目录本章内容概述一、项目概述1.项目描述2.项目技术二、项目详解1.项目框架2.项目流程三、项目拓展1.简要介绍一下你的项目？2.项目程序结构？3.线程之间如何同步？4.如何处理客户端发送的数据包？5.Socket编程服务端和客户端的基本流程？6.IO多路复用相关？7.如何做压测的？8.保护内存资源？9.为保护服务器不受攻击做出了哪些处理？10.CPU占比过高如何分析？四、网络编程1.IO多路
                    
                    
ubuntu20.04.6安装Intel AX211网卡驱动 2024.8
                        Harvey2001
Linux基础ubuntu20.04wifi驱动Linux
                        
前言环境电脑：thinkbook142024i5-13500HRTX3050网卡：IntelAX211Wi-Fi6系统内核：5.15安装#flex是一个词法分析器；#bison是一个语法分析器；#把两者联合使用可以实现对sql语言的解析。sudoaptinstallflexbison#从github上爬取软件包gitclonehttps://github.com/intel/backport-iw
                    
                    
Java中成员变量与局部变量的区别详解
                        菜鸡上道
javajvmjava开发语言
                        
Java中成员变量与局部变量的区别详解一、定义与作用域1.成员变量（MemberVariables）2.局部变量（LocalVariables）二、内存分配与生命周期1.成员变量2.局部变量三、默认值1.成员变量（类加载过程中实现的初始化）2.局部变量四、示例代码五、不同类型变量在JVM中的存储方式1.基本类型2.引用类型六、总结在Java编程中，理解成员变量和局部变量之间的差异对于编写清晰、高效
                    
                    
Linux发行版数量
                        无限码力
od算法刷题笔记算法数据结构华为ode卷华为od笔试真题
                        
Linux发行版数量真题目录:点击去查看E卷100分题型题目描述Linux操作系统有多个发行版，distrowatch.com提供了各个发行版的资料。这些发行版互相存在关联，例如Ubuntu基于Debian开发，而Mint又基于Ubuntu开发，那么我们认为Mint同Debian也存在关联。发行版集是一个或多个相关存在关联的操作系统发行版，集合内不包含没有关联的发行版。给你一个n*n的矩阵isCo
                    
                    
Java成员变量和局部变量
                        qq_43332825
java
                        
成员变量是指在一个类中定义的变量，比如publicclassDog{Stringbreed;Stringname;Stringcolor;intage；}这些都是成员变量，用于描述类本身所具有的一些属性局部变量是指在方法中定义的变量，例如：publicvoideat(){inta=0;}用于辅助实现方法中的相关操作。在一个方法中，不允许有同名的局部变量，而在不同的方法中，允许有同名局部变量。静态成
                    
                    
Java中的成员变量和局部变量
                        周青灯
java
                        
1、成员变量作用域（1）类的属性，也就是直接在类中定义的变量称为成员变量，它定义在方法的外部；（2）成员变量可以在声明时赋初始值。2、局部变量作用域（1）局部变量就是定义在方法中的变量。（2）局部变量在使用前需要赋值，否则会编译出错。3、成员变量和局部变量的区别（1)作用域不同：局部变量的作用域仅限于定义于它的方法，在该方法外无法访问它。成员变量的作用于在整个类内部都是可见的，所有成员方法都可以使
                    
                    
如何降低做事的阻力？
                        智识世界Intelligence
信息可视化深度学习经验分享笔记学习方法
                        
1.实用优先于完美：足够好才是关键伏尔泰所说的“完美是优秀的敌人”在这里正中问题核心。在现实世界中，追求完美往往带来停滞，因为完美本身是动态、难以定义的。在自然选择中，生物能够存活并繁衍，不是因为它们达到了某种理论上的“最优状态”，而是因为它们的特性在特定环境下足够好。现实应用：•在产品开发中，“最低可行产品”（MVP，MinimumViableProduct）正是基于这种思想。MVP不是完美的，
                    
                    
Zookeeper 配置文件：核心参数优化与实操指南
                        磐基Stack专业服务团队
Zookeeperzookeeper分布式云原生
                        
文章目录一、核心参数优化详解1.1tickTime：Client-Server通信心跳时间1.2initLimit：Leader-Follower初始通信时限1.3syncLimit：Leader-Follower同步通信时限1.4dataDir：数据文件目录1.5clientPort：客户端连接端口二、优化操作说明2.1jvm配置2.2log4j配置2.3ACL验证忽略一、核心参数优化详解1.1
                    
                    
Zookeeper 数据迁移实战：基础环境搭建与高效迁移方案全览
                        磐基Stack专业服务团队
Zookeeperzookeeper分布式
                        
文章目录一、Zookeeper数据迁移简介二、迁移zookeeper数据基础环境三、利用快照迁移zookeeper数据1、Node1最新的zk快照文件和日志文件2、将被迁移方node2的zookeeper的集群全部stop3、将源node1集群数据和日志拷贝到指定目录下4、验证优先启动拷贝的数据、日志的zookeeper节点，四、利用开源工具zkcopy进行在线同步数据1、下载官方开源工具2、同步
                    
                    
Nacos 监控全攻略：从 Prometheus 数据采集到核心指标解读
                        磐基Stack专业服务团队
NacosNacos
                        
文章目录第1章Prometheus采集Nacosmetrics数据第2章Nacosmetrics含义2.1jvmmetrics2.2Nacos监控指标2.3nacos异常指标2.4clientmetricsNacos2.X版本已有完善的监控体系，支持通过暴露metrics数据接入第三方监控系统监控Nacos运行状态，目前支持prometheus、elasticsearch和influxdb。下面重
                    
                    
sql查询中的包含【被包含】、模糊查询
                        大鳥
sql
                        
在mysql中提供了like的关键词可用于模糊查询，也可理解为某些指定字段包含在表中的的查询selectcount(*)frommysqlb_clientwherenamelike'%庆农%';可查询出在name字段下所有包含‘庆农’字样的记录；还有一种情况是我们查询的表中的字段被包含在我们指定的条件中，第一种方式我们可以使用关键词IN，配合where条件查询：selectcount(*)from
                    
                    
Python 数据结构揭秘：栈与队列
                        大鳥
python数据结构
                        
栈（Stack）定义栈是一种后进先出（LastInFirstOut,LIFO）的数据结构。它类似于一个容器，只能在一端进行插入和删除操作。栈有两个主要的操作：push（入栈）和pop（出栈）.基本操作push（入栈）：将一个元素添加到栈顶.defpush(self,item):self.items.append(item)pop（出栈）：移除栈顶的元素，并返回该元素.defpop(self):if
                    
                    
Hive 数据类型全解析：大数据开发者的实用指南
                        大鳥
sqlhive数据仓库
                        
在大数据处理领域，Hive作为一款基于Hadoop的数据仓库工具，被广泛应用于数据的存储、查询和分析。而理解Hive的数据类型是有效使用Hive的基础，本文将深入探讨Hive的数据类型，帮助大家更好地掌握Hive的使用。Hive数据类型概述Hive支持多种数据类型，主要可分为数值类型、日期/时间类型、字符类型、Misc类型以及复杂类型。这些数据类型为存储和处理各种不同格式的数据提供了有力的支持。以
                    
                    
K210视觉识别模块
                        LS_learner
嵌入式嵌入式硬件
                        
K210视觉识别模块是一款功能强大的AI视觉模块，以下是对其的详细介绍：一、核心特性强大的视觉识别功能：K210视觉识别模块支持多种视觉功能，包括但不限于人脸识别、口罩识别、条形码和二维码识别、特征检测、数字识别、颜色识别、路标识别和视觉巡线等。这些功能使得K210视觉识别模块在多个领域都有广泛的应用潜力。高性能的硬件支持：K210视觉识别模块基于RISC-V精简指令集的K210芯片设计，该芯片内
                    
                    
docker 部署带多种配置文件的 springboot 项目
                        淘气小姑娘
dockerlinuxjava
                        
准备工作：1、将要制作镜像的Springboot项目打成jar包。2、将jar包和该程序所有配置文件放在同一文件夹下（xml、yml、txt、jar等），我这里文件夹名字为json3、在该文件夹下写Dockerfile.txt文件：#指含有jdk1.8的镜像FROMjava#将当前目录下面的json-0.0.1-SNAPSHOT.jar复制命名为app.jar（复制后的名字可以自定义）。copya
                    
                    
Linux 内存管理 页回收和swap机制
                        富士康质检员张全蛋
Linux操作系统内存管理内存
                        
页高速缓存和页写回机制页是物理内存或虚拟内存中一组连续的线性地址，Linux内核以页为单位处理内存，页的大小通常是4KB。当一个进程请求一定量的页面时，如果有可用的页面，内核会直接把这些页面分配给这个进程，否则，内核会从其它进程或者页缓存中拿来一部分给这个进程用。内核知道有多少页可用，也知道它们的位置。如果在进程请求指定的内存页时，没有可用的内存页，那么这个时候内核就会去尝试释放特定的内存页给新的
                    
                    
Golang map实现原理及源码分析
                        Aeiu
Golanggolang源码后端
                        
本文涉及到的源码版本为GoSDK1.16.11、map的基本结构map是Golang中的一种常用数据结构，其本质上是一种哈希表，类似于java的HashMap以及Python的字典(dict)，是一种存储键值对(Key-Value)的数据结构。一般的Map会包含两个主要结构：数组：数组里的值指向一个链表链表：目的解决hash冲突的问题，并存放键值而在Golang中，解决hash冲突的不是链表，而是
                    
                    
微信小程序 wx:for的一些事
                        Argons_0925
微信小程序微信
                        
在研究微信小程序过程中遇到了这样一个问题：使用wx:for进行列表渲染时，直接用方括号[]表示非关联数组时，内容为字母则不能识别。可能大家没有看懂上面的话。直接上代码吧。为了好分辨，我使用了_______来隔开{{index}}:{{item}}_______________{{index}}:{{item.id}}_______________{{index}}:{{item}}data:{ar
                    
                    
基于微信小程序的设计—美食推荐系统设计（附论文+源码）
                        picking_bananas
微信小程序美食小程序毕业设计
                        
关键词：微信小程序；美食管理；美食推荐；毕业；我们专注于软件开发工程领域，熟练掌握多种开发技术，包括基于SpringBoot、Vue.js、SSM框架的应用开发，以及针对AndroidAPP和微信小程序的开发。（具体流程参见文章最后段落）微信小程序是一种基于微信平台的轻量级应用程序，具有易于开发、易于传播、易于使用等特点。美食推荐系统则是一种通过推荐美食来提高用户的美食体验的应用程序。基于微信小程
                    
                    
AIGC与劳动力市场：技术进步与就业结构的重塑
                        蒙娜丽宁
AIAIGC
                        
随着人工智能（AI）技术的迅猛发展，尤其是生成式AI（AIGC），劳动力市场正经历前所未有的变革。从内容创作到自动化生产线，几乎每个行业都在经历一场技术的洗礼。然而，这场革命并不是全然的光明，它带来了深刻的社会变动，也引发了广泛的担忧和不安。我们不得不面对一个核心问题：AIGC将如何影响未来的工作？会让人类的大多数工作消失，还是会创造出全新的职业机会？一、AIGC对现有职业的影响——取代与重塑AI
                    
                    
Python 降级
                        Vicky_922
python
                        
Python降级时，不一定需要完全卸载Python3.12版本。你可以选择直接安装低版本的Python（如3.8或3.9），然后通过一些方法进行版本切换或创建虚拟环境来避免冲突。下面是两种常见的方法：方法一：直接安装低版本Python（不卸载3.12）你可以在系统中同时安装多个Python版本，而不需要卸载现有的Python3.12版本。然后可以使用以下方法选择要使用的版本：下载并安装低版本Pyt
                    
                                
ztree设置禁用节点
                                    3213213333332132
JavaScriptztreejsonsetDisabledNodeAjax
                                    
ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 
 
 
$(function(){            	
                showTree();
	            setDisabledNode();

});
                   
        
                                
                                
JVM patch by Taobao
                                    bookjovi
javaHotSpot
                                    
在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 
  
7050685：jsdbproc64.sh has a typo in the package name 
7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 
7060619：C1 should respect inline and
                                
                                
将session存储到数据库中
                                    dcj3sjt126com
sqlPHPsession
                                    
CREATE TABLE sessions (
  id CHAR(32) NOT NULL,
  data TEXT,
  last_accessed TIMESTAMP NOT NULL,
  PRIMARY KEY (id)
); 
  
<?php
/**
 * Created by PhpStorm.
 * User: michaeldu
 * Date
                                
                                
Vector
                                    171815164
vector
                                    
public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) {
		for (int i = 0; i < cart.size(); i++) {
			if (cart.get(i).getId().equals(id)) {
				cart.remove(i);
				
                                
                                
各连接池配置参数比较
                                    g21121
连接池
                                    
        排版真心费劲，大家凑合看下吧，见谅~ 
      
  
Druid 
DBCP 
C3P0 
Proxool   
数据库用户名称 Username Username User     
数据库密码 Password Password Password     
驱动名
                                
                                
[简单]mybatis insert语句添加动态字段
                                    53873039oycg
mybatis
                                    
      mysql数据库,id自增,配置如下： 
      
<insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id"
		parameterType=&
                                
                                
struts2拦截器配置
                                    云端月影
struts2拦截器
                                    
struts2拦截器interceptor的三种配置方法 
方法1. 普通配置法 
 
<struts> 
    <package name="struts2" extends="struts-default"> 
        &
                                
                                
IE中页面不居中，火狐谷歌等正常
                                    aijuans
IE中页面不居中
                                    
问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
                                
                                
String,int,Integer,char 几个类型常见转换
                                    antonyup_2006
htmlsql.net
                                    
如何将字串 String 转换成整数 int? 
int i = Integer.valueOf(my_str).intValue(); 
 
int i=Integer.parseInt(str); 
 
如何将字串 String 转换成Integer ? 
Integer integer=Integer.valueOf(str); 
 
如何将整数 int 转换成字串 String ? 
1.
                                
                                
PL/SQL的游标类型
                                    百合不是茶
显示游标(静态游标)隐式游标游标的更新和删除%rowtyperef游标(动态游标)
                                    
游标是oracle中的一个结果集,用于存放查询的结果; 
  
PL/SQL中游标的声明; 
1,声明游标

2,打开游标(默认是关闭的);

3,提取数据

4,关闭游标
 
  
  
注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标 
  
隐式游标:主要是对DML数据的操作隐
                                
                                
JUnit4中@AfterClass @BeforeClass @after @before的区别对比
                                    bijian1013
JUnit4单元测试
                                    
一.基础知识 
JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法   对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源  对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次
                                
                                
精通Oracle10编程SQL(12)开发包
                                    bijian1013
oracle数据库plsql
                                    
/*
 *开发包
 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数）
 */
--包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成
--建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等
--在包规
                                
                                
【EhCache二】ehcache.xml配置详解
                                    bit1129
ehcache.xml
                                    
在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ 
ehcache.xml ： http://ehcache.org/ehcache.xml 
ehcache.xsd ： http://ehcache.org/ehcache.xsd 
ehcache配置文件的根元素是ehcahe 
  ehcac
                                
                                
java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL
                                    白糖_
javaeclipsespringtomcatWeb
                                    
今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： 
<listener>
	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener> 
 随后启动
                                
                                
angular.element
                                    boyitech
AngularJSAngularJS APIangular.element
                                    
angular.element 
描述:      包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）       如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e
                                
                                
java-给定两个已排序序列，找出共同的元素。
                                    bylijinnan
java
                                    

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;


public class CommonItemInTwoSortedArray {

	/**
	 * 题目：给定两个已排序序列，找出共同的元素。
	 * 1.定义两个指针分别指向序列的开始。
	 * 如果指向的两个元素
                                
                                
sftp 异常，有遇到的吗？求解
                                    Chen.H
javajcraftauthjschjschexception
                                    
com.jcraft.jsch.JSchException: Auth cancel 
 at com.jcraft.jsch.Session.connect(Session.java:460) 
 at com.jcraft.jsch.Session.connect(Session.java:154) 
 at cn.vivame.util.ftp.SftpServerAccess.connec
                                
                                
[生物智能与人工智能]神经元中的电化学结构代表什么?
                                    comsci
人工智能
                                    
     我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 
 
     我们可以尝试一下...在某些神经
                                
                                
通过LAC和CID获取经纬度信息
                                    dai_lm
laccid
                                    
方法1： 
用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度 
 
方法2： 
发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&
                                
                                
JAVA的困难分析
                                    datamachine
java
                                    
前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 
  
-----------------------------------------------------------------------------------------
                                
                                
小学5年级英语单词背诵第二课
                                    dcj3sjt126com
englishword
                                    
money 钱 
paper 纸 
speak 讲，说 
tell 告诉 
  
remember 记得，想起 
knock 敲，击，打 
question 问题 
number 数字，号码 
  
learn 学会，学习 
street 街道 
carry 搬运，携带 
send 发送，邮寄，发射 
  
must 必须 
light 灯，光线，轻的 
front 
                                
                                
linux下面没有tree命令
                                    dcj3sjt126com
linux
                                    
centos p安装 
yum -y install tree 
  
mac os安装 
brew install tree 
  首先来看tree的用法  
tree  中文解释：tree
功能说明：以树状图列出目录的内容。
语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式
                                
                                
Map迭代方式，Map迭代，Map循环
                                    蕃薯耀
Map循环Map迭代Map迭代方式
                                    
Map迭代方式，Map迭代，Map循环 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 2015年
                                
                                
Spring Cache注解+Redis
                                    hanqunfeng
spring
                                    
Spring3.1 Cache注解  
依赖jar包： 
<!-- redis -->
		<dependency>
			<groupId>org.springframework.data</groupId>
			<artifactId>spring-data-redis</artifactId>
			
                                
                                
Guava中针对集合的 filter和过滤功能
                                    jackyrong
filter
                                    
在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： 
 
   

@Test
public void whenFilterWithIterables_thenFiltered() {
    List<String> names = Lists.newArrayList("John"
                                
                                
学习编程那点事
                                    lampcy
编程androidPHPhtml5
                                    
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 
接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
                                
                                
架构师之流处理---------bytebuffer的mark,limit和flip
                                    nannan408
ByteBuffer
                                    
1.前言。 
  如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思 。 
2.例子. 
 

例子代码:
     String str = "helloWorld";  
        ByteBuffer buff  = ByteBuffer.wrap(str.getBytes());  
        Sy
                                
                                
org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1
                                    Everyday都不同
$转义el表达式
                                    
最近在做Highcharts的过程中，在写js时，出现了以下异常： 
  
严重: Servlet.service() for servlet jsp threw exception 
org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, 
                                
                                
用Java实现发送邮件到163
                                    tntxia
java实现
                                    
/*

 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。

 本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。

 此篇仅介绍用
                                
                                
探索实体类存在的真正意义
                                    java小叶檀
POJO
                                    
一. 实体类简述   
 实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 
POJO（Plain Old Java Objects）简单的Java对象 
  
它的一般格式就是 
public class A{
      private String id;
      public Str
                                
                
            
        
    


    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.