vue.js+mint-ui的Popup组件和Picker组件实现省市县三级联动功能

前言

      在工作中遇到省市县三级联动的需求，传统的pc端大部分是用3个HTML 标签根据选中的一级地址去获取二级地址，然后根据二级地址去获取三级地址。实现省市县三级地址选择，需要2次服务端请求。这里使用mint--ui的Popup弹出框组件和picker选择器组件，无需请求服务端，通过遍历本地的json文件，实现本地输出三级地址，同时给每级地址绑定一个code，从而满足与后台交互时，传递code代码，这个需求非常常见。

vue.js官网：https://cn.vuejs.org/

mint-ui官网：http://mint-ui.github.io/#!/zh-cn

步骤一：使用vue-cli快速构建demo项目

       vue-cli是vue提供的官方命令行工具，用于快速搭建大型单页应用。

• 新建一个空文件夹demo，安装node.js，安装方法请谷歌或者百度，非常简单。
• 用IDEA开发工具打开demo文件夹，打开Terminal终端，输入下面的命令行全局安装vue-cli

npm install vue-cli -g

• 安装成功后输入npm -v可以查看npm的版本
• 输入以下命令行回车，初始化项目配置

vue init webpack demo

• 输入Project name, Project description , Author, Install vue-router?输入Y， Use ESLint to lint your code?输入N， Set up unit tests 输入N， Setup e2e tests with Nightwatch?输入N，回车初始化安装，初始化成功后可看到以下界面

• 终端输入以下命令行，浏览器打开http://localhost:8080，demo项目构建完毕

cd demo
npm run dev

步骤二：新建一个ThreeLevelAddress.vue文件，并引入mint-ui

• 在demo/src/components路径下新建ThreeLevelAddress.vue文件

• 在demo/src/router/index.js进行路由定义

import ThreeLevelAddress from '@/components/ThreeLevelAddress'

export default new Router({
  routes: [
    {
      path:'/ThreeLevelAddress',
      name:'ThreeLevelAddress',
      component:ThreeLevelAddress
    }
  ]
})

• 在浏览器内输入http://localhost:8080/#/ThreeLevelAddress可预览到下图

• 在终端输入以下命令行，引入mint-ui

npm i mint-ui -S

• 在demo/src/main.js路径下写入以下代码即可使用mint-ui

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

• 接下来测试一下是否引入成功，这里已mint-ui的button按钮组件为例。

效果图：

步骤三：引入Popup组件

import { Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);

Popup的API

Popup API

参数	说明	类型	可选值	默认值
position	popup 的位置。省略则居中显示	String	'top' 'right' 'bottom' 'left'
pop-transition	显示/隐藏时的动效，仅在省略 position 时可配置	String	'popup-fade'
modal	是否创建一个 modal 层	Boolean		true
closeOnClickModal	是否可以通过点击 modal 层来关闭 popup	Boolean		true

API中比较常用的是position，可配置弹出框的位置，四种效果都不太一样，可自行体验官网的demo。这里我使用的是位置为bottom的Popup组件，其他均使用默认配置。

步骤四：引入Picker组件

import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);

picker组件比如Popup组件复杂许多。已官方给出的demo为例，:slots绑定的组件的插槽，传入的是一个对象数组，用于配置picker组件的内容。@change绑定的是picker被选中的值发生变化时的change事件，在这里可以做你想做事情，比如给组件的插槽赋值，获取插槽的值，或者处理其他业务逻辑。

我在本例中传入的插槽对象数组如下：

myAddressSlots: [
          {
            flex: 1,
            values: this.getProvinceArr(), //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot2'
          },
          {
            flex: 1,
            values: this.getCityArr("北京市"),
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot4'
          },
          {
            flex: 1,
            values: this.getCountyArr("北京市","北京市"),
            className: 'slot5',
            textAlign: 'center'
          }
        ]

slots对象数组键值对解释：

key	描述
divider	分隔符
content	显示的文本
values	slot 的备选值数组。若为对象数组，则需设置 value-key 属性来指定显示的字段名
defaultIndex	picker初始选中值，需传入其在 values 数组中的序号，默认为 0
textAlign	文本对齐方式
flex	slot CSS 的 flex 值
className	slot 的类名，可以自定义你的样式

比较重要的是values，必须传入数组。因为本例中需要输出地址代码，所以这里必须传入对象数组，形如：

[
  {
    "code": "110000",
    "name": "北京市",
    "children": [
      {
        "code": "110100",
        "name": "北京市",
        "children": [
          {
            "code": "110101",
            "name": "东城区"
          },
          {
            "code": "110102",
            "name": "西城区"
          },
          {
            "code": "110105",
            "name": "朝阳区"
          },
          {
            "code": "110106",
            "name": "丰台区"
          },
          {
            "code": "110107",
            "name": "石景山区"
          },
          {
            "code": "110108",
            "name": "海淀区"
          },
          {
            "code": "110109",
            "name": "门头沟区"
          },
          {
            "code": "110111",
            "name": "房山区"
          },
          {
            "code": "110112",
            "name": "通州区"
          },
          {
            "code": "110113",
            "name": "顺义区"
          },
          {
            "code": "110114",
            "name": "昌平区"
          },
          {
            "code": "110115",
            "name": "大兴区"
          },
          {
            "code": "110116",
            "name": "怀柔区"
          },
          {
            "code": "110117",
            "name": "平谷区"
          },
          {
            "code": "110128",
            "name": "密云县"
          },
          {
            "code": "110129",
            "name": "延庆县"
          }
        ]
      }
    ]
  }
]

并在picker组件里设置value-key属性，这样picker就只会显示json对象中name属性。

value-key="name"

这里再学习一下picker组件的API

Picker API

参数	说明	类型	可选值	默认值
:slots	插槽数组	Array		[]
valueKey	当 slots插槽的values 为对象数组时，作为文本显示 在 Picker 中的对应字段的字段名	String
:showToolbar	是否在组件顶部显示一个 toolbar，内容自定义	Boolean		false
:visibleItemCount	picker组件中可显示的slot个数	Number		5
:itemHeight	每个 slot 的高度	Number		36

change事件中还给我们暴露了许多有用的方法：

1. getSlotValue(index)：获取给定 slot 目前被选中的值
   
2. setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
3. getSlotValues(index)：获取给定 slot 的备选值数组
   
4. setSlotValues(index, values)：设定给定 slot 的备选值数组
5. getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
   
6. setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中
   

在本例中，我们可以打印上述函数的输出结果：

console.log(picker.getSlotValue(0));//获取被选中的省，单个slot
console.table(picker.getSlotValues(0));//获取被选中的省份备选数组
console.table(picker.getValues());//获取被选中的省市县，全部slot，分隔符除外

setSlot相关方法就不再一一举例，你可以在本地控制台自行实验查看效果。

步骤五：实现省市县三级联动并输出地址和关联code

HTML代码：

JavaScript代码：

CSS样式：

threeLevelAddress.json部分结构

[
  {
    "code": "110000",
    "name": "北京市",
    "children": [
      {
        "code": "110100",
        "name": "北京市",
        "children": [
          {
            "code": "110101",
            "name": "东城区"
          },
          {
            "code": "110102",
            "name": "西城区"
          },
          {
            "code": "110105",
            "name": "朝阳区"
          },
          {
            "code": "110106",
            "name": "丰台区"
          },
          {
            "code": "110107",
            "name": "石景山区"
          },
          {
            "code": "110108",
            "name": "海淀区"
          },
          {
            "code": "110109",
            "name": "门头沟区"
          },
          {
            "code": "110111",
            "name": "房山区"
          },
          {
            "code": "110112",
            "name": "通州区"
          },
          {
            "code": "110113",
            "name": "顺义区"
          },
          {
            "code": "110114",
            "name": "昌平区"
          },
          {
            "code": "110115",
            "name": "大兴区"
          },
          {
            "code": "110116",
            "name": "怀柔区"
          },
          {
            "code": "110117",
            "name": "平谷区"
          },
          {
            "code": "110128",
            "name": "密云县"
          },
          {
            "code": "110129",
            "name": "延庆县"
          }
        ]
      }
    ]
  },
  {
    "code": "120000",
    "name": "天津市",
    "children": [
      {
        "code": "120100",
        "name": "天津市",
        "children": [
          {
            "code": "120101",
            "name": "和平区"
          },
          {
            "code": "120102",
            "name": "河东区"
          },
          {
            "code": "120103",
            "name": "河西区"
          },
          {
            "code": "120104",
            "name": "南开区"
          },
          {
            "code": "120105",
            "name": "河北区"
          },
          {
            "code": "120106",
            "name": "红桥区"
          },
          {
            "code": "120110",
            "name": "东丽区"
          },
          {
            "code": "120111",
            "name": "西青区"
          },
          {
            "code": "120112",
            "name": "津南区"
          },
          {
            "code": "120113",
            "name": "北辰区"
          },
          {
            "code": "120114",
            "name": "武清区"
          },
          {
            "code": "120115",
            "name": "宝坻区"
          },
          {
            "code": "120116",
            "name": "滨海新区"
          },
          {
            "code": "120121",
            "name": "宁河县"
          },
          {
            "code": "120123",
            "name": "静海县"
          },
          {
            "code": "120125",
            "name": "蓟县"
          }
        ]
      }
    ]
  }
]

中华人民共和国行政区划：省级（省份直辖市自治区）、 地级（城市）、 县级（区县）、 乡级（乡镇街道）、 村级（村委会居委会） ，中国省市区镇村三级四级五级联动地址数据可见GitHub： https://github.com/modood/Administrative-divisions-of-China

最后，上效果图：

如果你觉得这篇博客不错的话，记得收藏关注一波哦。我会不定时更新，分享自己学习的有趣的前端知识。

我的gitbook地址是https://legacy.gitbook.com/@lzweife，不定时更新学习笔记。

限于本人水平有限，难免出现纰漏错误，欢迎指正，相互学习。首次尝试写博客，语言不当不通顺之处，请先凑合看。

学海无涯，生命不息。

版权声明：本文为博主原创文章，转载请先征求博主同意并附上原文链接。 https://blog.csdn.net/lzw_1994/article/details/79981166

你可能感兴趣的:(vue.js+mint-ui的Popup组件和Picker组件实现省市县三级联动功能)

• 什么是 React Native 程序猿经理 reactnativereact.jsjavascript
  ReactNative（简称RN）是Facebook于2015年4月开源的跨平台移动应用开发框架，它是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。以下是关于ReactNative的详细介绍：一、基本概述定义：ReactNative是一个使用React和应用平台的原生功能来构建Android和iOS应用的开源框架。起源：由Facebook开发并
• 【2025】拥抱未来 砥砺前行 摔跤猫子 其他年终总结拥抱未来砥砺前行深度思考
  2024是怎样的一年2024在历史画卷上是波澜壮阔的一年，人工智能的浪潮来临，涌现出无数国产大模型。22年11月ChatGPT发布，它的出现如同在平静湖面上投下一颗巨石，激起了层层波澜，短短五天用户数就达到了100万，让整个世界为之侧目的同时也掀起了一场AI技术竞赛的浪潮。面对大模型这一蓝海，各方力量都试图搭上这趟时代的列车，争先恐后的相继开启布局。公司大模型名称发布时间澜舟科技孟子GPTV120
• 不用到2038年，MySQL的TIMESTAMP就能把我们系统搞崩 大老二在不在 程序员Java面试java后端程序人生
  不用到2038年，MySQL的TIMESTAMP就能把我们系统搞崩MySql中常见的时间类型有三种DATE,DATETIME和TIMESTAMP，其中DATE类型用于表示日期，但是不会包含时间，格式为YYYY-MM-DD，而DATETIME和TIMESTAMP用于表示日期和时间，常见的格式为YYYY-MM-DDHH:MM:SS，也可以带6位小数来表示微秒。不同于DATETIME，TIMESTAMP
• python实现冒泡排序完整算法_利用python实现冒泡排序算法实例代码 weixin_39610759
  利用python实现冒泡排序算法实例代码冒泡排序冒泡排序（英语：BubbleSort）是一种简单的排序算法。它重复地遍历要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。冒泡排序算法的运作如下：1、比较相邻的元素。如果第一个比第二个大（升序
• mysql的timestamp类型_MySQL数据库中的timestamp类型与时区 weixin_39758696
  MySQL的timestamp类型时间范围between'1970-01-0100:00:01'and'2038-01-1903:14:07'，超出这个范围则值记录为'0000-00-0000:00:00'，该类型的一个重要特点就是保存的时间与时区密切相关，上述所说的时间范围是UTC(UniversalTimeCoordinated)标准，指的是经度0度上的标准时间，我国日常生活中时区以首都北京所
• mysql timestamp 插入null报错_mysql TIMESTAMP 设置为可NULL字段 白咸明 mysqltimestamp插入null报错
  今天遇到问题是mysql新建表的时候TIMESTAMP类型的字段默认是NOTNULL然后上网查了一下发现很多都说就是不能为NULL的这都什么心态其实设置为空很简单只要在字段后面加上NULL就行了eg.CREATETABLE`TestTable`(Column1INTNOTNULLCOMMENT'Column1',Column2TIMESTAMPNULLCOMMENT'Column2',PRIMAR
• 服务器物理机如何实现系统快照,Lvm快照实现物理备份之自动化 陶宇飞 服务器物理机如何实现系统快照
  环境：一台刚刚干净的linux服务器，使用centos系统create_kz.sh创建Lvm快照，实现备份#!/usr/bin/bash#创建一个lvm快照read-p'请输入新加磁盘的名字：'cpnamea=`lsblk|grep'sdb'|wc-l`if[!$a-eq1]thenecho'---'>/sys/class/scsi_host/host0/scanecho'---'>/sys/cl
• http://www.runoob.com/lua/lua-basic-syntax.html weixin_34110749 java
  Lua优点及特性Lua是一个小巧的脚本语言。其设计目的是为了嵌入应用程序中，从而为应用程序提供灵活的扩展和定制功能。Lua由标准C编写而成，几乎在所有操作系统和平台上都可以编译，运行。Lua并没有提供强大的库，这是由它的定位决定的。Lua有一个同时进行的JIT项目，提供在特定平台上的即时编译功能。Lua脚本可以很容易的被C/C++代码调用，也可以反过来调用C/C++的函数，这使得Lua在应用程序中
• mysql5.7gtid主从复制_mysql5.7 GTID主从复制 真力 GENELEC
  GTID主从复制简介mysql5.7开始支持两种主从复制:基于传统的binlog和position复制基于GTID复制这里主要介绍GTID复制的配置.有关GTID复制的原理请参考官方文档:GTID原理介绍GTID概述这里主要介绍几点GTID的概念:GTID(globaltransactionidentifieds)全局事务标识GTID是全局唯一性的,每一个事务对应一个GTID一个GTID在服务器上
• 批量作业调度、数据挖掘，这几款应该是今年 “最值得推荐” 的ETL工具了 加菲盐008 taskctlKettlekettleetl批量作业调度数据挖掘taskctl
  工具传送门：Taskctl商业付费版(付费)TaskctlWeb商业免费版（永久免费）Kettle（开源免费）Datastage(付费)ETL是数据仓库中的非常重要的一环，是承前启后的必要的一步。ETL负责将分布的、异构数据源中的数据如关系数据、平面数据文件等抽取到临时中间层后进行清洗、转换、集成，最后加载到数据仓库或数据集市中，成为联机分析处理、数据挖掘的基础。下面给大家介绍一下什么是ETL以及
• ETL作业调度工具TASKCTL的两个重大突破 加菲盐008
  在传统设计理念下，流程图的可视化、作业流的定义设计功能，随着作业量增加，越来越难用，越来越不适用是一个难以避免的问题。就这两个问题，我给大家分享一下TASKCTL是如何转变思路、如何突破、如何带来一些更理想的效果。同时，我也希望通过此次分享，带来一些抛砖引玉的效果，希望业界更多同仁，就批量调度技术更多的问题，敢于突破，使整个批量调度技术变得更完善、更易用。第一部分：两大问题的再分析在传统理念下，流
• 【开源免费】kettle作业调度—自动化运维—数据挖掘—informatica-批量作业工具taskctl 加菲盐008 KettleETL作业调度工具taskctl运维数据库linux大数据数据挖掘
  关注公众号"taskctl"，关键字回复"领取"即可获权产品简介taskctl是一款由成都塔斯克信息技术公司历经10年研发的etl作业集群调度工具，该产品概念新颖，体系完整、功能全面、使用简单、操作流畅，它不仅有完整的调度核心、灵活的扩展，同时具备完整的应用体系。目前已获得金融，政府，制造，零售，健康，互联网等领域1000多家头部客户认可。图片来自网络2020年疫情席卷全球，更是对整个市场经济造成
• 通过Amazon Bedrock API调用Anthropic Claude模型的实战指南 qwd41564qwd python
  在AI技术的飞速发展中，AmazonBedrockAPI为开发者提供了一种稳定可靠的方式来访问Anthropic的Claude模型。无论是启动新的项目还是集成AI解决方案，通过Bedrock调用Claude模型都提供了更广泛的应用场景和便利性。本文将指导您如何在Python中通过AmazonBedrock向Claude模型发起API调用。技术背景介绍Bedrock是Amazon推出的一个集成平台，
• 新星计划Day11【数据结构与算法】 排序算法2 京与旧铺 java学习排序算法java算法
  新星计划Day11【数据结构与算法】排序算法2‍博客主页：京与旧铺的博客主页✨欢迎关注点赞收藏⭐留言✒本文由京与旧铺原创，csdn首发！系列专栏：java学习参考网课：尚硅谷首发时间：2022年5月13日你做三四月的事，八九月就会有答案，一起加油吧如果觉得博主的文章还不错的话，请三连支持一下博主哦最后的话，作者是一个新人，在很多方面还做的不好，欢迎大佬指正，一起学习哦，冲冲冲推荐一款模拟面试、刷题
• BP神经网络概述及其预测的Python和MATLAB实现 追蜻蜓追累了 神经网络回归算法深度学习机器学习启发式算法lstmgru
  ##一、背景###1.1人工神经网络的起源人工神经网络（ArtificialNeuralNetwork,ANN）受生物神经网络的启发，模拟大脑神经元之间的连接和信息处理方式。尽管早在1943年就有学者如McCulloch和Pitts提出了数学模型，但人工神经网络真正被广泛研究是在20世纪80年代。###1.2BP神经网络的兴起反向传播（BackPropagation，简称BP）算法是20世纪80年
• Android 导出CSV文件乱码问题处理 AD钙奶-lalala android
  最近有一个需求，需要在Android端导出CSV文件，自测是用的WPS，没啥问题。可到了测试那边，用Excel直接打开就是乱码，需要在Excel数据里面用【从文件/CSV】打开。这样就显示非常的不方便。解决办法：publicstaticvoidexportToCsv(Listdata,StringfilePath)throwsIOException{FilecsvFolder=newFile(Fi
• React Hooks 基于 JS 闭包原理实现，但是闭包也会带来很多麻烦 头脑旋风 javascriptreact.js前端reactnative
  文章开始之前希望大家支持一下我独立开发的微信小程序“头脑旋风”，或微信扫描我的头像进入，谢谢支持~文章目录1.JS中的闭包2.ReactHooks中的闭包3.过时的闭包4.修复过时闭包的问题5.Hook中过时的闭包总结1.JS中的闭包下面定义了一个工厂函数createIncrement(i)，它返回一个increment函数。之后，每次调用increment函数时，内部计数器的值都会增加i。fun
• React Native 介绍 王睿丶 资讯看点ReactNative移动开发跨平台React王睿丶
  文章目录一丶ReactNative惊喜二丶ReactNative简介三丶ReactNative特性四丶ReactNative优点五丶ReactNative局限性六丶构建最简单的应用七丶学习资料一丶ReactNative惊喜ReactNative是一个使用JavaScript和React来编写跨终端移动应用（Android或IOS）的一种解决方案这句话是什么意思呢？即使你不懂如何使用Java或Kot
• 基于ADB Shell 实现的 Android TV、电视盒子万能遥控器 — ADB Remote ATV sw-code adbandroid电视盒子tv
  OrangePiZero3AndroidTV、电视盒子万能遥控器ADBRemoteATVAndroidTV的遥控器，基于ADBShell命令ADBRemoteATV是一个AndroidTV的遥控器，基于ADBShell命令，泛用性更高。下面的shell命令，是软件的基本原理，通过shell命令可模拟物理遥控器的基本按键，此外还可以快捷启动指定APP、借助手机软键盘输入中/英字符等。#输入事件adb
• ReactNative 青岑lw JS库react-native
  接触ReactNative也已经一段时间了，把自己遇到的一些问题总结出来希望能帮助到正在踩坑的人。ListViewListView是RN中的使用频率非常高的组件，问题却也层出不穷,FlatList等列表组件类似。首先是row中的视图不能随着state或Mobx而实时更新，如果把样式绑定到state中使用this.setState()方法更改数据后会发现，更改数据后视图无法更改，只有新渲染的row才
• 聊聊如何实现Android 放大镜效果 咖啡老师 android
  一、前言很久没有更新Android原生技术内容了，前些年一直在做跨端方向开发，最近换工作用重新回到原生技术，又回到了熟悉但有些生疏的环境，真是感慨万分。近期也是因为准备做地图交互相关的需求，功能非常复杂，尤其是交互部分，不过再复杂的交互，只要一点点将它拆解，分而治之，问题还是可以解决，就比如接下来要做的放大镜功能。二、功能设计该功能的场景是在操作地图时，对于边缘的精细化操作（像素级别的）需要在放大
• 一文熟知docker安装RabbitMQ及安装延迟插件 java晴天过后 rabbitmqdocker分布式
  我这个安装攻略首先得保证服务器上安装过docker了如果没安装docker请先去安装docker1.首先说一下什么是MQMQ(messagequeue)字面意思上来说消息队列，FIFO先入先出，队列中存入的内容是message，是一种跨进程的通信机制，用于上下游传递消息。MQ是一种非常常见的上下游“逻辑解耦+物理解耦”的消息通信服务。使用了MQ之后，消息发送上游只需要依赖MQ，不用依赖其他服务。1
• MySQL表的创建实验 谁把我睡的觉偷了xhxh mysql数据库
  创建并使用数据库mydb6_product。mysql>createdatabasemydb6_product;QueryOK,1rowaffected(0.01sec)mysql>usemydb6_product;Databasechanged新建employees表。对于gender，有默认值意味着不为空，在建表时可以选择不写notnull；mysql>createtableemployees
• 【DAY.2】PHP数据结构与算法_排序_冒泡排序 我是妖怪_ 天天学习冒泡排序算法php
  思路分析：循环逐个对比，从第一个开始，与下一个数字进行对比，若大于则交换位置，每循环一遍将最大的一个排到最后。（依次比较相邻的元素，两两比较，就可以最终将最大（小）的元素调整到最顶端、次顶端、、、）$arr=array(3,2,5,6,1,8,4,9);functionbubble_sort($arr){$len=count($arr);//判断数组是否为空if($len$arr[$i+1]){$
• three.js Canvas纹理（CanvasTexture）、压缩的纹理（CompressedTexture） 灵魂清零 threejavascript开发语言ecmascript前端
  从Canvas元素中创建纹理贴图。它几乎与其基类Texture相同，但它直接将needsUpdate（需要更新）设置为了true。构造函数CanvasTexture(canvas:HTMLElement,mapping:Constant,wrapS:Constant,wrapT:Constant,magFilter:Constant,minFilter:Constant,format:Consta
• Hadoop 常用命令 ZenPower hadoop大数据分布式
  查看指定目录下的文件及文件夹hadoopfs-ls/user/hive/warehouse/查看指定目录下的文件及文件夹大小#文件大小（单位Byte）hadoopfs-du/user/hive/warehouse#文件大小（单位人性化）hadoopfs-du-h/user/hive/warehouse#文件大小（只显示汇总）hadoopfs-du-s/user/hive/warehouse删除指定
• python转转商超书籍信息爬虫 Python数据分析与机器学习 爬虫python网络爬虫爬虫
  1基本理论1.1概念体系网络爬虫又称网络蜘蛛、网络蚂蚁、网络机器人等，可以按照我们设置的规则自动化爬取网络上的信息，这些规则被称为爬虫算法。是一种自动化程序，用于从互联网上抓取数据。爬虫通过模拟浏览器的行为，访问网页并提取信息。这些信息可以是结构化的数据（如表格数据），也可以是非结构化的文本。爬虫任务的执行流程通常包括发送HTTP请求、解析HTML文档、提取所需数据等步骤。1.2技术体系1请求库:
• 机器视觉在医疗影像分析中的应用：助力放射科医生精准诊断 人工智能专属驿站 大数据人工智能计算机视觉
  在现代医疗领域，影像学检查如X光、CT扫描和MRI等是诊断疾病的重要手段。随着技术的不断发展，机器视觉算法在医疗影像分析中的应用日益广泛，为放射科医生提供了强大的辅助工具，极大地提高了诊断的准确性和效率。本文将探讨机器视觉在医疗影像分析中的具体应用及其对医疗诊断带来的变革。一、机器视觉算法简介机器视觉是一种模拟人类视觉的科学技术，通过图像处理、模式识别和计算机视觉等技术，使计算机能够“看”懂图像中
• hadoop常用命令汇总 m0_67402026 javajava后端
  1、查看目录下的文件列表：hadoopfs–ls[文件目录]hadoopfs-ls-h/lance2、将本机文件夹存储至hadoop上：hadoopfs–put[本机目录][hadoop目录]hadoopfs-putlance/3、在hadoop指定目录内创建新目录：hadoopfs–mkdir[目录]hadoopfs-mkdir/lance4、在hadoop指定目录下新建一个文件，使用touch
• Python中的数字类型 不爱敲代码的小李0812 python二级通关宝典python开发语言后端
  目录一、概述二、整数类型三、浮点数四、复数类型一、概述1）Python语言提供三种数字类型：整数类型，浮点数类型和复数类型，分别对应数学中的整数，实数和复数2）1010是整数类型，10.10是一个浮点数类型，10+10j是一个复数类型二、整数类型1）与数学中的整数概念一致，没有取值范围限制。2）整数类型有4种进制表示：十进制，二进制，八进制和十六进制。默认情况，整数采用十进制，其他进制需要增加引导
• 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
  package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
• JDK timer antlove javajdkschedulecodetimer
  1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
• JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
  堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
• JDBC连接数据库 Array_06 jdbc
  package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
• Unsupported major.minor version 51.0（jdk版本错误） oloz java
  java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
• 用多个线程处理1个List集合 362217990 多线程threadlist集合
    昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
• JSP简单访问数据库 香水浓 sqlmysqljsp
  学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
• Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
  1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
• Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
  在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
• 查询汇总的sql baalwolf sql
  select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
• Linux du命令和df命令区别 BigBird2012 linux
          1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
• AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
          在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
• [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
  ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
• 【Java命令一】jmap bit1129 Java命令
  jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
• Apache 服务器安全防护及实战 ronin47
  此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
• unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
  问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
• 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
  import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
• struts2更改struts.xml配置目录 chiangfai struts.xml
  struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
• redis做缓存时的一点优化 chenchao051 redishadooppipeline
          最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
• mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
  当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
• phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
  先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
• 爱情格言 dcj3sjt126com 格言
   1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
• 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
  activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
• win7安装MongoDB服务 geeksun mongodb
  1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
• Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
  转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
• 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
  昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
• 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
  注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
• Linux各个目录的作用及内容 pda158 linux脚本
  1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
• ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
  获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
• 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
          哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.