小孔_H
小孔_H

[文件上传] 大文件切片上传前后端处理代码示例（JS / Node / Koa）

文件切片上传（切片）

Client:

  • html 基本结构搭建

    • <style>
    body>div { margin: 8px; }
style>

<body>
    <h4>deng-clh4>
    <div>
        <input type="file" id="file">
    div>
    <div>
        <button class="upload">上传button>
    div>
    <script type="module" src="./src/index.js">script>
body>

  • JS 常量定义

    • import axios from "axios"; // -- 依赖库

// -- 操作提示
    const UPLOAD_INFO = { 
        "NOT_SELETED_FLIE": "请先选择文件",
        "NOT_SUPPORTED_TYPE": "不支持该文件类型",
        "FETCH_SUCCESS": "上传成功",
        "FETCH_FAILED": "上传失败"
    };

// -- 文件类型限制 / 切片大小定义
    const ALLOWEN_TYPE = ["image"];
    const CHUNK_SIZE = 1024 * 1024;

// -- 请求
    const BASE_URL = "http://localhost:3000";
    const FETCH_API = {
        "UPLOAD": "/upload",
        "MERGE": "/merge",
    };

  • 获取文件上传的 input 与 upload 按钮 DOM 元素

    • const fileInputEl = document.querySelector("#file") // -- input dom
const uploadButtonEl = document.querySelector(".upload") // -- button

  • 监听 upload 按钮点击执行文件上传操作

    • uploadButtonEl.addEventListener("click", handleFileUpload, false)

    • 对应处理函数代码如下 → 里面使用其它的函数统一放在 "辅助函数栏" 中（使用 "▲ util" 进行标记）

    • async function handleFileUpload() { // -- 1. 点击上传按钮，触发该函数
    const files = fileInputEl.files
    const file = files[0] // -- 2. 获取 input 元素中所选择的文件

    if (!file) { // -- 3. 校验是否已经选择了文件（file 是否有值...）
        alert(UPLOAD_INFO["NOT_SELETED_FLIE"])
        return
    }

    if (!ALLOWEN_TYPE.includes(file.type.split("/")[0])) { // -- 4. 校验选择的文件，是否符合对应的类型（ALLOWEN_TYPE 常量）
        alert(UPLOAD_INFO['NOT_SUPPORTED_TYPE'])
        return
    }
	
    // -- ▲ util: 5. 根据 File 内容，生成对应 hashHex 文件名(filename) → 用于上传文件时，对应的文件名尽可能是唯一，方便后台对文件的读写等
    const filename = await createFileName(file) 
    
    const fileExtension = file.name.split(".").pop() // -- 6. 获取文件扩展名 → 用于后台在写入文件时，创建对应后缀的文件进行写入

    // -- ▲ util: 7. 对 file 对象进行切片 → 切片上传
    const chunks = await createChunk(file, file.size, filename) 

    try {
        // -- ▲ util: 8. 将文件切片信息上传至服务器中 → 文件切片数据上传
        const response = await uploadFileChunks(chunks) 
        // -- ▲ util: 9. 所有切片文件上传后，给服务发送文件合并请求 → 切片合并
        const mergeRes = await mergeFileChunks(filename, fileExtension)
        alert(UPLOAD_INFO["FETCH_SUCCESS"])
    } catch (err) {
        console.log(err);
        alert(UPLOAD_INFO["FETCH_FAILED"] + ": " + err.message || "")
    }
}

  • 辅助函数: （handleFileUpload ↑）

    • ▲ util: 5 → createFileName

      • async function createFileName(file) { // -- 此处: 需要理解前面的二进制家族中的一些基本操作，才能更好的理解
    // -- 1. 获取 file 中的 arrayBuffer 对象（数据缓存区）
    const fileBuffer = await file.arrayBuffer()
    
    // -- 2. 根据对应的 arrayBuffer 生成一个包含对应摘要值的 arrayBuffer 对象
    const hashBuffer = await crypto.subtle.digest("SHA-256", fileBuffer) 
    
    // -- 3. 通过 TypedArray 视图对 hashBuffer 进行读写操作  → 获取里面的数据（无符号8位数组）
    const hashArray = Array.from(new Uint8Array(hashBuffer))
    
    // -- 4. 映射 hashArray 中的每一项，将里面的每一项转换为 16 进制，并对每一项进行拼接操作 → 生成对应的 hash 值
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, 0)).join("")

    return hashHex  // -- 5. 返回对应根据 file 中的数据生成的 hashHex 文件名
}

    • ▲ util: 7 → createChunk

      • async function createChunk(file, size, filename) { // -- 创建切片
    // -- 1. 定义切片容器于当前切片大小
    const chunks = [] 
    let chunkSize = 0
	
    // -- 2. 循环对文件进行切片
    while (chunkSize < size) { 
        // -- 3. 对文件进行切片 → 返回对应切片的 blob 对象
        const chunkFile = file.slice(chunkSize, chunkSize + CHUNK_SIZE, file.type)
        
        // -- 4. 通过 chunkFile 创建对应切片的 File 对象（也可以不创建直接上传，不过 File 对象可以定义对应的 filename → 方便后端处理）
        const newFile = new File([chunkFile], filename + "-" + chunkSize, { type: file.type })
		
        // -- 5. 创建 FormData 对象，将 newFile 文件切片数据存放在 formData 对象中 → 进行对应 "multipart/form-data" 数据的上传
        const formData = new FormData()
        formData.append("file", newFile)
        
     	// -- 6. 将对应切片（可直接上传）的对象添加至 chunks 切片容器中
        chunks.push(formData)

        chunkSize += CHUNK_SIZE // -- 7. 递加切片
    }
    return chunks // -- 8. 返回所有切片的存储容器
}

    • ▲ util: 8 → uploadFileChunks

      • async function uploadFileChunks(chunks) { // -- 分片上传
    const fetchPromises = chunks.map(chunk => { // -- 1. 遍历 chunks 切片容器中的所有切片数据 → 上传切片数据
        return axios.post( // -- 2. 发送请求 → 上传切片
            BASE_URL + FETCH_API["UPLOAD"],
            chunk,
            {
                "Content-Type": "multipart/form-data"
            }
        )
    })

    return Promise.all(fetchPromises) // -- 通过 Promise.all 统一监听所有切片上传的结果...
}

    • ▲ util: 9 → mergeFileChunks

      • async function mergeFileChunks(filename, fileExtension) { // -- 合并文件切片
    return axios.post(BASE_URL + FETCH_API["MERGE"], { filename, fileExtension }) // -- 1. 发送对应文件的切片文件合并请求
}

  • 依赖库:

    • axios : 发送请求...

Server:

  • 依赖库的引入

    • const Koa = require('koa') // -- koa 

const Router = require('koa-router') // -- koa-router 

const static = require('koa-static') // -- koa-static 静态资源处理

const { resolve, join } = require('path') // -- path 内置库（用来处理路径拼接等）

const cors = require('koa-cors') // -- koa-cors 处理跨域

const fse = require('fs-extra') // -- fs-extra fs 内置库的扩展库（处理文件的读写等）

const multer = require('koa-multer') // -- koa-multer 处理文件上传

const bodyparser = require('koa-bodyparser') // -- koa-bodyparser 处理 body 的解析（json）

  • 中间件的使用于服务的启动

    • const app = new Koa(); // -- 创建 Koa 实例 app 对象
const router = new Router(); // -- 创建 router 对象

app.use(static(join(__dirname, "static"))); // -- 定义静态目录
app.use(cors()) // -- 跨域处理
app.use(bodyparser()) // -- 处理 body 解析（json）

// --  router 接口处理部分，在下方展示

app.use(router.routes()) // -- 使用对应 router 中的 routes 路由表中间件（挂载至 app 中）

app.listen(3000, () => { // -- 服务启动（监听）
    console.log("server is running on 3000 port");
})

  • router 接口处理部分

    • const storage = multer.diskStorage({ // -- 1. 自定义存储引擎（文件存储路径等）
   destination: function (req, file, cb) {
       cb(null, resolve(__dirname, './static/temp/')) // -- 保存的路径  
   },
   filename: function (req, file, cb) {
       cb(null, file.originalname); // -- 使用 file 中原来的名字 → 方便合并操作等
   }
});

const upload = multer({ storage: storage }); // 初始化 upload 对象  

// -- 2. 分片文件上传接口 → 使用上面 upload 对象中的中间件，自动根据上面存储引擎中的存储路径将对应上传的 FormData 文件数据进行生成对应文件进行存储（临时文件，后续合并后会删除）
router.post("/upload", upload.single('file'), async (ctx) => {
    ctx.body = {
        message: "uploaded success~"
    }
})


// -- 3. merge 合并文件分片数据接口
const TEMP_DIR = resolve(__dirname, "./static/temp") // -- 定义临时文件路径 → 方便后续使用

const UPLOAD_DIR = resolve(__dirname, "./static/uploads") // -- 定义合并后文件路径 → 方便后续使用

router.post("/merge", async (ctx) => { // -- 接口实现
    // -- 获取请求中的文件名于对应后缀名 → 根据该文件名查找对应分片文件 : 根据后缀名创建对应类型的合并文件
    const { filename, fileExtension } = ctx.request.body

    // -- 在 UPLOAD_DIR 中创建对应的合并文件，该路径用于方便后续写入切片数据时，获取写入文件路径
    const NEW_FILE_PATH = UPLOAD_DIR + `/${filename}.${fileExtension}`
    fse.createFileSync(NEW_FILE_PATH) // -- 在 uploads 中创建对应的数据写入文件
	
    // -- 查看 temp 目录下的所有临时文件 → 用于里面查找对应切片文件，并进行数据的写入（↑）
    fse.readdir(TEMP_DIR, (err, files) => {
        // -- 过滤出需要合并的临时文件的文件名
        const mergeFilename = files.filter(item => item.includes(filename)) 
		
        // -- 遍历所有分片文件 → 将每一部分切片文件的数据写入至对应的文件中
        mergeFilename.sort().forEach(filename => {
            // -- 读取对应分片文件中的数据
            const buffer = fse.readFileSync(TEMP_DIR + "/" + filename) 

            try {
                // -- 写入切片文件数据至 uploads 中对应的合并文件中
                fse.appendFileSync(NEW_FILE_PATH, buffer) 
                
                // -- 数据写入后，删除对应历史文件 
                fse.unlinkSync(TEMP_DIR + "/" + filename) 
            } catch (error) {
                ctx.body = { // -- 写入失败响应
                    message: "Error",
                    error
                }
                console.log("err:", error);
            }
        })
    })

    ctx.body = { // -- 写入成功响应
        message: "OK",
        // -- 返回对应文件访问路径 → 注意访问静态资源不需要加上配置的静态目录（即路径上不需要加上 static）
        url: "http://localhost:3000/uploads" + `/${filename}.${fileExtension}` 
    }
})

你可能感兴趣的:(javascript,前端,开发语言)

  • 记一次生产环境大面积404问题！ 冰河团队
    写在前面发布到线上的接口服务一直好端端的，今天突然运营反馈说很多功能无法正常使用。经过排查，发现前端调用后端接口时，部分接口出现404的现象。今天，我到公司比较晚，肯定是哪个小伙伴昨晚下班，走出办公室前没有祈祷服务器不要出问题。要把这个人揪出来，吊在服务器上——祭天！文章已收录到：https://github.com/sunshinelyz/technology-binghehttps://git
  • 2019最值得投资的餐饮品类为什么是“它”！ 輕描淡寫_3722
    相信大家都听过一句话：什么火，什么就流行！最近餐饮品类有一单品，独树一帜，走在潮流前端，被众多网友可尽的玩弄了一把！从最初火遍全球的具象产物小黄鸭，到如今摸不到的流行话语，“鸭”是真的火了！今天也要开心鸭、冲鸭、我的马鸭......一系列的流行语，高强度的曝光量，“鸭”火得一塌糊涂。而随着“鸭”的火爆，很多投资者也在“鸭”身上看到了商机，想借着这股还未褪去的“东风”，从事与“鸭”相关的产业，老鸭汤
  • 使用Spring Boot开发一个准妈妈交流平台 BABA8891 springboot后端java
    开发一个准妈妈交流平台涉及到许多不同的功能和组件。以下是一个使用SpringBoot来构建这样一个平台：1.项目规划需求分析：确定平台的核心功能，如用户注册、登录、论坛发帖、评论、消息通知等。系统设计：设计系统架构，包括前端、后端、数据库和可能的第三方服务集成。2.技术选型前端：可以选择React、Vue或Angular等现代JavaScript框架。后端：使用SpringBoot作为后端框架。数
  • Rust：重塑编程世界的利器，对前端开发的深远影响 大鱼前端 前端
    引言：在编程语言的海洋中，有一颗璀璨的明星正在冉冉升起——那就是Rust。它不仅在后端领域展现出强大的实力，更在前端领域带来了颠覆性的变革。本文将带你深入了解Rust的魅力，探讨其独特的优势，以及Rust如何影响前端开发，并通过案例分析展示Rust在前端应用的实力。一、Rust：编程语言的新星Rust，这门由Mozilla主导开发的系统编程语言，自诞生之初就以其独特的设计理念和出色的性能赢得了众多
  • Rust 编程语言构建出跨平台应用开源框架 Dioxus 百态老人 rust开源开发语言
    是的，Rust编程语言确实构建了一个跨平台应用开源框架Dioxus。Dioxus是一个可移植、高性能的框架，用于在Rust中构建跨平台的用户界面。它支持多种平台的应用开发，包括网页前端、桌面应用、静态网站、移动端应用和TUI程序等。Dioxus的核心特点之一是其声明式编程风格，类似于React框架，但提供了更高效的性能和更好的开发者体验。此外，Dioxus还具有原生桌面支持、强大的状态管理、快速异
  • Vue + Django的人脸识别系统 DXSsssss pythonDRFtensorflow人脸识别
    最近在研究机器学习，刚好最近看了vue+Djangodrf的一些课程，学以致用，做了一个人脸识别系统。项目前端使用Vue框架，用到了elementui组件，写起来真是方便。比之前传统的dtl方便了太多。后端使用了drf，识别知识刚开始打算使用opencv+tensorflow,但是发现吧识别以后的结果返回到浏览器当中时使用opencv比较麻烦（主要是我太菜，想不到比较好的方法），因此最终使用了tf
  • RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO PhoenixAI8 RAGMilvusChroma源码及实践前端flaskpythonsocketioRAG
    目录背景技术理念RAG结合点实时数据更新与推送实时查询与响应安装使用完整案例说明后端python代码代码解释前端html代码JS代码代码解释总结背景构建RAG系统或别的系统时，如果后端采用的全Python，或者说是以python为主的系统，是很常见的一个选择，因为毕竟python对LLM，图片，乃至其他video等resource的model都有较完善的支撑，为了快速开发出原型，甚至之后的商用，往
  • ref 和 reactive 区别 有一个好名字 Vuevue.jsjavascript前端
    前言ref和reactive是Vue3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。refref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的
  • 【前端】vue+html+js 实现table表格展示，以及分页按钮添加 Loong_DQX 前端javascriptvue.js
    一.问题描述数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。二.代码写法思路：按照上述图示思路，需要有两个数据列表，一个存储的是所有的列表数据，一个存储的是展示的数据列表，程序开始后先选择数据头部的几条数据。因此也会需要一个当前第几页的参数。2.1代码展示html部分v-for展示列表，以及两个按钮对当前页面进行选择。{{item.name}}上一页{{currentPage}
  • Vue3+TypeScript频谱跳动算法（附vue2+JavaScript） I like Code? javascripttypescript算法
    以下为Vue3+TypeScript频谱跳动算法只需要调用下列方法即可实现，并且设置定时器。（最好每次先清楚，否则可能耗内存）if(updateInterval.value){clearInterval(updateInterval.value);}constupdateInterval=ref(undefined);generateDataSets();updateInterval.value=
  • 重磅算法：通信设备虚拟仿真-波形根据频率、带宽变化算法（Vue3+typescript）结尾附vue2+JavaScript I like Code? javascript算法typescript
    以下为Vue3+typescriptconstpointSpacing=ref(0);constupdateInterval=ref(undefined);//更新图表数据的函数constUpdateChartTest=(centerFrequnency:number,bandwidth:number,baseFreq=800,baseBW=100)=>{if(updateInterval.val
  • js TypeError: Cannot read property ‘initialize’ of undefined 二川bro 前端javascript前端
    jsTypeError:Cannotreadproperty‘initialize’ofundefined在JavaScript开发旅程中，遇到TypeError:Cannotreadproperty‘initialize’ofundefined这样的错误提示，无疑是令人沮丧的。这个错误通常意味着你试图访问一个未定义对象的initialize属性。本文将带你深入剖析这个错误的本质，提供清晰的解决思
  • 使用D3.js进行数据可视化 环能jvav大师 信息可视化前端框架javascript开发语言
    D3.js介绍D3.js是一个流行的JavaScript数据可视化库，全称为Data-DrivenDocuments，即数据驱动文档。它以数据为核心，通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具，使得开发者能够创建出各种交互式和动态的数据可视化效果。官方介绍网站：WhatisD3?|D3byObservableD3.js导入方式介绍在JavaScript中导入D3.js通常使
  • vue.config.js 配置 你不讲 wood javascriptvue.js前端webpack开发语言前端框架
    vue.config.js文件是VueCLI项目中的全局配置文件，它允许你以JavaScript的形式来配置构建选项，而不是通过命令行参数或者.vue-clirc的JSON格式。官方文档:https://cli.vuejs.org/zh/config/#全局-cli-配置基础配置publicPath设置构建好的文件被部署后的公共路径。module.exports={publicPath:proce
  • cross-plateform 跨平台应用程序-06-uni-app 介绍 知识分享官 uni-app
    详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js
  • 后端Controller获取成功，但是前端报错404 有一个好名字 SpringBoot前端spring
    问题描述今天要做一个查看详情功能，debug时候能够成功进入到对应的Controller方法，Contorller方法里面也能得到对应的数据，但是前端页面一直报错404，显示对应的Controller方法路径找不到。解决Controller方法里面返回的是一个对象，但是我没有在该方法上加@ResponseBody注解。
  • 数仓开发之DWD层完整使用 (第五章) 小坏讲微服务 数据仓库hadoopscalakafka
    数仓开发之DWD层完整使用一、流量域未精加工的事务事实表1、主要任务1）数据清洗（ETL）2）新老访客状态标记修复3）分流2、思路1）数据清洗（ETL）2）新老访客状态标记修复（1）前端埋点新老访客状态标记设置规则（2）新老访客状态标记修复思路3）利用侧输出流实现数据拆分（1）埋点日志结构分析（2）分流日志分类（3）分流思路3、图解4、代码1）在KafkaUtil工具类中补充getKafkaPro
  • Python基础知识进阶之正则表达式_头歌python正则表达式进阶 前端陈萨龙 程序员python学习面试
    最后硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是
  • 【App】React Native 卿卿qing reactnativereact.jsjavascript
    ReactNative的优势：开发体验好用统一的代码规范开发移动端程序，不用关注移动端的差异.开发成本低开发一次，可以生成Android和IOS俩个系统上的App学习成本低只要掌握JavaScript和React就可以进行移动端开发ReactNative的不足：不成熟性能差整体性能仍不如原生兼容性差设计底层的功能，需要针对Android和IOS双端单独开发ReactNative的核心组件核心组件R
  • 如何有效防止重复提交表单 德墨忒尔 java
    如何有效防止重复提交表单在企业级项目中，防止重复提交是一个常见且重要的问题，尤其是在处理订单、支付等敏感操作时。重复提交不仅会影响用户体验，还可能引发严重的业务问题，如订单重复、支付异常等。本文将从多个角度讨论如何防止重复提交，并介绍几种在实际项目中广泛应用的技术方法。1.前端层面的防重策略前端是用户提交表单的入口，常见的防重策略是在这里进行表单的状态控制，通过按钮状态的变化来防止重复提交。以下是
  • HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石 一杯梅子酱 技术栈学习前端htmlcss
    引言：在Web开发中，HTML、CSS和JavaScript是三个不可或缺的技术，它们共同构成了前端开发的核心。本文旨在全面解析这三个技术的关键知识点，探讨它们之间的联系，并通过实际案例加深理解，最后分享一些宝贵的经验总结。一、HTML：内容的骨架1.基本结构标签的使用：,,文本内容：,至链接与图像：,列表：,,表格：,,,表单：,,,,2.语义化标签,,,,,3.案例创建一个简单的网页：Html
  • JavaScript-定时器setTimeout用法 s甜甜的学习之旅 前端javascript前端开发语言
    定时器setTimeout学习链接定时器学习链接定时器（serTimeout()）的用法（进阶）setTimeout用法定时器通常用在页面刷新，延迟执行
  • vue+threeJS示例（001）: 不断翻转的立体箱体 还是大剑师兰特 #ThreeJS综合教程200+threejs入门threejs教程threejs示例大剑师
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示
  • ThreeJS入门（001）：简介、下载安装、历史、应用场景、竞品 还是大剑师兰特 #ThreeJS综合教程200+webgl大剑师ThreeJS简介
    查看本专栏目录-本文是第001篇入门文章文章目录一、Three.js简介二、Three.js的历史与发展三、公司背景四、下载安装五、官方网站六、应用范围场景七、相关竞品一、Three.js简介Three.js是一个基于WebGL的JavaScript3D库，它使得在Web上创建和展示3D内容变得简单。Three.js提供了一系列抽象层，让开发者可以专注于设计和实现3D应用程序，而无需深入了解复杂的
  • 【前端echarts】echarts双饼图与easyui列表联动 时光匆匆岁月荏苒,转眼我们已不是当年 EasyUI前端echartseasyui
    echarts双饼图与easyui列表联动包括饼图与列表页联动，基本上无bugecharts双饼图与easyui列表联动-->-->$(function(){//定义参数varpieOptionDataList=[{titleText:"用户",seriesId:"user",seriesDataValue:"userRatio",seriesDataName:"userName",},{titl
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • ecmascript和javascript的区别？ 2301_79698214 ecmascriptjavascript
    ECMAScript是JavaScript的标准规范，而JavaScript是基于ECMAScript规范开发的一种编程语言。简单来说，ECMAScript是一套定义了JavaScript语法和语义的规范，而JavaScript是实际的编程语言。具体来说，ECMAScript是由ECMA（EuropeanComputerManufacturersAssociation，欧洲计算机制造商协会）定义和
  • javascript网页设计案例1 2301_79698214 javascript
    javascript网页设计案例1以下是一个简单的JavaScript网页设计案例：JavaScript网页设计案例#container{width:300px;height:200px;background-color:#f2f2f2;text-align:center;padding:20px;}点击按钮显示文本显示文本functiondisplayText(){vartext=documen
  • 嵌入式鸿蒙系统开发语言与开发方法分析 嵌入式开发星球 鸿蒙万物互联人工智能之卓越harmonyos开发语言华为
    大家好，今天主要给大家分享一下，HarmonyOS系统的主力开发语言ArkTS语言开发方法，它是基于TypeScript(简称TS)语言扩展而来。第一：ArkTS语言基本特性目的：声明式UI，让开发者以更简洁，更自然的方式开发高性能应用。声明式UI基本特性：基本UI描述:ArkTS定义了各种装饰器、自定义组件、UI描述机制，再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发
  • JavaScript 中 new Function() 和 new function() 的区别 linlinlove2 javascript开发语言ecmascript
    newfunction是另一种创建函数的方式，其语法：constfunc=newfunction([arg1,arg2,…argn],functionbody);一个简单的例子：constsum=newfunction('a','b','returna+b');sum(1+2);//3嗯，这提供了很大的灵活性。这并不常见，但在某些情况下可以使用它。例如，当我们需要将模板动态编译为函数时，我们可以使
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他