伍华聪
伍华聪

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

在我们一般开发的系统界面里面，列表页面是一个非常重要的综合展示界面，包括有条件查询、列表展示和分页处理，以及对每项列表内容可能进行的转义处理，本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询，列表展示和字段转义处理。

在前面随笔《循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理》介绍了一个对产品列表的卡片式图片分页展示处理，其中涉及到了对于Element 组件分页控件的操作，本篇随笔继续深化这一组件的使用，结合表格展示来处理效果展示。

1、列表查询界面效果

在介绍任何代码处理逻辑之前，我们先来做一个感官的认识，贴上一个效果图，在逐一介绍其中处理的步骤和注意事项。

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第1张图片

 常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主体的列表展示区域，是相对比较复杂一点的地方，需要对各项数据进行比较友好的展示，可以结合Tag,图标，按钮等界面元素来展示，其中列表一般后面会包括一些对单行记录处理的操作，如查看、编辑、删除的操作，如果是批量删除，可以放到顶部的按钮区域。

 

2、查询区域的处理

查询区域一般的界面效果如下所示，除了包含一些常用的查询条件，并增加一些常规的处理按钮，如查询、重置、新增、批量删除、导入、导出等按钮。

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第2张图片

  对于查询区域来说，它也是一个表单的处理，因此也需要添加一一个对应的对象来承载表单的数据，在data里面增加一个searchForm的模型对象，以及一个用于分页查询的pageinfo对象，如下代码所示。

export default {
  data() {
    return {
      listLoading: true,
      pageinfo: {
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      searchForm: {
        ProductNo: '',
        BarCode: '',
        ProductType: '',
        ProductName: '',
        Status: 0
      },

视图模板代码如下所示

    <el-form ref="searchForm" :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="产品编号" prop="ProductNo">
            <el-input v-model="searchForm.ProductNo" />
          el-form-item>
        el-col>
        <el-col :span="6">
          <el-form-item label="产品名称" prop="ProductName">
            <el-input v-model="searchForm.ProductName" />
          el-form-item>
        el-col>
        <el-col :span="6">
          <el-form-item label="商品类型" prop="ProductType">
            <el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
              <el-option
                v-for="(item, key) in typeList"
                :key="key"
                :label="item.value"
                :value="item.key"
              />
            el-select>
          el-form-item>
        el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="Status">
            <el-select v-model="searchForm.Status" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in Status"
                :key="item.Value"
                :label="item.Text"
                :value="item.Value"
              />
            el-select>
          el-form-item>
        el-col>
      el-row>
    el-form>
    <el-row style="float:right;padding-bottom:10px">
      <el-button icon="el-icon-search" type="primary" round @click="search()">查询el-button>
      <el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">重置el-button>
      <el-button icon="el-icon-document-add" type="success" round @click="showAdd()">新增el-button>
      <el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">批量删除el-button>
      <el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">导入el-button>
    el-row>

其中产品类型的是下拉列表，我们通过在data区域获取一个对象，并在此遍历可以展示字典内容，如果我们花点时间，可以把这些下拉列表统一按照一个常规的处理模式，定义一个字典组件的方式实现，简单赋予一个字典类型的Prop值，就可以绑定下拉列表了，这个稍后在细讲。

在Vue的脚本处理逻辑里面，我们可以在Created声明周期里面，通过API获取数据，绑定在模型上，界面就会自动进行更新了，处理过程代码如下所示。

  created() {
    // 获取产品类型，用于绑定字典等用途
    GetProductType().then(data => {
      if (data) {
        data.forEach(item => {
          this.productTypes.set(item.id, item.name)
          this.typeList.push({ key: item.id, value: item.name })
        })
      }
    });

    // 获取列表信息
    this.getlist()
  },
  methods: {
    getlist() {
      // 构造常规的分页查询条件
      var param = {
        type: this.producttype === 'all' ? '' : this.producttype,
        pageindex: this.pageinfo.pageindex,
        pagesize: this.pageinfo.pagesize
      };

      // 把SearchForm的条件加入到param里面，进行提交查询
      param.type = this.searchForm.ProductType // 转换为对应属性
      Object.assign(param, this.searchForm);

      // 获取产品列表，绑定到模型上，并修改分页数量
      this.listLoading = true
      GetProductList(param).then(data => {
        this.productlist = data.list
        this.pageinfo.total = data.total_count
        this.listLoading = false
      })
    },

其中 Object.assign(param, this.searchForm); 语句处理，是把获得的查询条件，覆盖原来对象里面的属性，从而实现查询条件的变量赋值。

获得列表数据，就是介绍如何展示表格列表数据的过程了，表格界面效果如下所示。

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第3张图片

  先定义一个表格头部，类似HTML里面的

的标签，指定样式和一些常规的操作函数，如下代码所示。

    <el-table
      v-loading="listLoading"
      :data="productlist"
      border
      fit
      stripe
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @selection-change="selectionChange"
      @row-dblclick="rowDbclick"
    >

具体的属性可以参考下Element组件关于表格控件的属性了，在表格列里面，我们主要关注它的data绑定即可。

接着定义一列复选框选择的列，用于批量处理的勾选，如批量删除操作。

  <el-table-column type="selection" width="55"/>

接着就是根据返回JSON属性，逐一进行内容转换为表格列的展示过程了，如下所示。

  <el-table-column label="商品编号" width="80">
    <template slot-scope="scope">
      {{ scope.row.ProductNo }}
    template>
  el-table-column>

我们如果需要在显示里面增加处理效果，一般在template里面修改展示效果即可，如下是单位的处理，增加一个tag标志强调下。

  <el-table-column align="center" label="单位" width="80">
    <template slot-scope="scope">
      <el-tag type="" effect="plain"> {{ scope.row.Unit }}el-tag>
    template>
  el-table-column>

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第4张图片

 而对于一些需要判断处理的效果，我们可以对内容进行判断输出，如下状态所示。

  <el-table-column label="状态" width="80">
    <template slot-scope="scope">
      <el-tag v-if="scope.row.Status==0" type="" effect="dark">正常el-tag>
      <el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">推荐el-tag>
      <el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">停用el-tag>
    template>
  el-table-column>

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第5张图片

 另外，对于一些常见的日期处理，我们可以使用Formatter，Filter等手段进行内容的转义处理，可以去掉后面的时间部分。

<el-table-column align="center" label="创建日期" width="120" prop="CreateTime" :formatter="dateFormat" />

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第6张图片

  dataFormat就是一个转义函数，函数代码如下所示。

    dateFormat(row, column, cellValue) {
      return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd') : ''
    },

使用的时候，需要在顶部引入一个类库即可

import * as fecha from 'element-ui/lib/utils/date'

对于类似需要进行字典转义的操作，我们可以使用Formatter的方式转义，如增加一个函数来解析对应的值为中文信息

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第7张图片

  效果可以使用Formatter来转义

    productTypeFormat(row, column, cellValue) {
      var display = this.productTypes.get(cellValue)
      return display || ''
    },

也可以使用Filter模式来进行处理。

这里介绍使用Filter的操作处理，首先在界面HTML代码里面增加对应的操作，如下代码所示。

  <el-table-column align="center" label="商品类型" width="120" prop="ProductType">
    <template slot-scope="scope">
      <el-tag type="danger">  {{ scope.row.ProductType | productTypeFilter }}el-tag>
    template>
  el-table-column>

Filter其实就是一个 | 过滤符号，以及接着一个过滤函数处理即可。

export default {
  filters: {
    productTypeFilter: function(value) {
      if (!value) return ''

      var display = that.productTypes.get(value)
      return display || ''
    }
  },

值得注意的是，Filter本身不能引用data里面的属性列表进行转义的需要，如果需要，那么需要在beforeCreate的钩子函数里面记录this的引用，如下代码所示。

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第8张图片

  对于操作按钮，我们需要增加一行来显示几个按钮即可，如果需要权限控制，可以再根据权限集合判断一下可操作权限即可。

      <el-table-column label="操作" width="140">
        <template scope="scope">
          <el-row>
            <el-tooltip effect="light" content="查看" placement="top-start">
              <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.ID)" />
            el-tooltip>
            <el-tooltip effect="light" content="编辑" placement="top-start">
              <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.ID)" />
            el-tooltip>
            <el-tooltip effect="light" content="删除" placement="top-start">
              <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.ID)" />
            el-tooltip>
          el-row>
        template>
      el-table-column>

这里showView/showEdit/ShowDelete主要就是做一些弹出层前的处理操作，我们在data项里面定义了几个变量，用来确定是那个操作显示的需要。

      isAdd: false,
      isEdit: false,
      isView: false,
      isImport: false,

例如对应编辑操作，我们是需要通过API处理类，获取后端数据，并赋值给编辑框的表单对象上，进行展示即可。

    showEdit(id) {
      // 通过ID参数，使用API类获取数据后，赋值给对象展示
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.editForm, data);
      })
      this.isEdit = true
    },

对于查看处理，我们除了在每行按钮上可以单击进行查看指定行记录外，我们双击指定的行，也应该弹出对应的查看记录界面

    rowDbclick(row, column) {
      var id = row.ID
      this.showView(id);
    },

这个就是表格定义里面的一些处理事件

    <el-table
      v-loading="listLoading"
      :data="productlist"
      border
      fit
      stripe
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @selection-change="selectionChange"
     @row-dblclick="rowDbclick"
    >

每个对话框的:visible的属性值，则是确定哪个模态对话框的显示和隐藏。

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理_第9张图片

 而对于删除操作，我们只需要确认一下，然后提交远端处理，返回正常结果，就提示用户删除成功即可。如下逻辑代码所示。

    showDelete(id) {
      this.$confirm('您确认删除选定的记录吗?', '操作提示',
        {
          type: 'warning' // success，error，info，warning
          // confirmButtonText: '确定',
          // cancelButtonText: '取消'
        }
      ).then(() => {
        // 删除操作处理代码

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

以上就是常规表格列表页面查询、列表展示、字段转义的一些常规操作，以及对新增、编辑、查看、删除操作的一些常规处理，通过对这些模型的操作，减少了我们以往重新获取对应DOM的繁琐操作，是的数据的操作处理，变得方便了很多。

列出以下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

 

你可能感兴趣的:(循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理)

  • python 读excel每行替换_Python脚本操作Excel实现批量替换功能 weixin_39646695 python读excel每行替换
    Python脚本操作Excel实现批量替换功能大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理excel，其实针对的就是WorkBook，Sheet，Cell这三个最根本的元素~明确需求原始excel如下我们的目标是把下面excel工作表的sheet1表页A列的内容“替换我吧”批量替换为B列的“我用来替换的
  • x86-64汇编语言训练程序与实战 十除以十等于一
    本文还有配套的精品资源，点击获取简介：汇编语言是一种低级语言，与机器代码紧密相关，特别适用于编写系统级代码及性能要求高的应用。nasm编译器是针对x86和x86-64架构的汇编语言编译器，支持多种语法风格和指令集。项目Euler提供数学和计算机科学问题，鼓励编程技巧应用，前100个问题的答案可共享。x86-64架构扩展了寄存器数量并引入新指令，提升了数据处理效率。学习汇编语言能够深入理解计算机底层
  • 三菱PLC全套学习资料及应用手册 good2know
    本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化
  • 程翔授《评价一篇记叙文》 行吟斯基
    桂林十一中高一2中学生自读程老师学生文章板书课题师巡看。看完举手。问：它是记叙文。不商量。独立打分。学生评价打分。师：高低都正常，不受干扰。师巡，略评。打完举手。调查：分层次举手——高分先举手。最低分。最高95分。最低45分。女：差距太大！师：同一篇，相差55分。若是你的文章，愿落谁手？男：身临其境感觉。师：你有此经历？没也没关系。女：不优美……，结尾无升华……无感悟……师：辞藻不美？(师追问)男
  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • 15个小技巧，让我的Windows电脑更好用了！ 曹元_
    01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们
  • （二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析
    数据如何从子公司流转到合并报表的全过程，即数据采集→合并引擎→报表输出，特别是HANA内存计算如何优化传统ETL瓶颈。SAPGroupReporting(GR)核心模块功能及数据流向的架构解析，涵盖核心组件、数据处理流程和关键集成点，适用于S/4HANA1809+版本：一、核心功能模块概览模块功能关键事务码/FioriApp数据采集(DataCollection)整合子公司财务数据（SAP/非SA
  • 9、汇编语言编程入门：从环境搭建到简单程序实现 神经网络酱 汇编语言MEPISGNU工具链
    汇编语言编程入门：从环境搭建到简单程序实现1.数据存储介质问题解决在处理数据存储时，若要使用MEPIS系统，需确保有其可访问的存储介质。目前，MEPIS无法向采用NTFS格式（常用于Windows2000和XP工作站）的硬盘写入数据。不过，若硬盘采用FAT32格式，MEPIS就能进行写入操作。此外，MEPIS还能将文件写入软盘和大多数USB闪存驱动器。若工作站连接到局域网，还可通过FTP协议或挂载
  • 月光下的罪恶（5） 允歌玖沐
    5.被孤立顾纨是转校过来的，进入学校后，回头率很高“诶诶诶，你看那女生，哪个系的？”“不知道没见过。”“看那样，一看就是个胆小的货。”顾纨当做没听到，更狠的话她都听过，更何况女生们耍心眼？“他爸爸是做黑生意的，估计女儿也不是什么好的，你以后离他一家子远点。”她走向自己要上课的教室，一进门，所有人的目光看向她，顾纨若无其事的走进教室，开始上课。下课，一群人站起来，但是很显然，她周围的一圈人都不愿意和
  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • 贝多芬诞辰250周年纪念 万千星河赴远方
    就算不是古典音乐爱好者，你也一定听说过贝多芬。作为古典音乐史上最伟大的音乐家之一，他不仅是古典主义风格的集大成者，同时也是浪漫主义风格的开创者。贝多芬肖像画（1813年）贝多芬的一生共创作了9部交响曲、36首钢琴奏鸣曲、10部小提琴奏鸣曲、16首弦乐四重奏、1部歌剧及2部弥撒曲等等。数量虽然不及前辈海顿、莫扎特多，但他几乎改造了当时所有的音乐表达形式，赋予了它们全新的价值，对后世音乐的发展产生了极
  • 三件事—小白猫·雨天·八段锦 咸鱼月亮
    1.最近楼下出现一只非常漂亮的粘人小白猫，看着不像是流浪猫，非常亲人。眼睛比蓝球的还大，而且是绿色的，很漂亮。第一次遇到它，它就跟我到电梯口，如果我稍微招招手，肯定就跟我进电梯了。后来我喂过它几次，好可惜不能养它，一只蓝球就是我的极限了。2.下雨天就心烦，好奇怪。明明以前我超爱看窗外的雨和听雨声，看来近来的心情不够宁静了。3.最近在练八段锦，从第一次就爱上了这个运动，很轻松缓慢，但是却出汗。感觉可
  • 25-1-2019 树藤与海岛呢
    hello八月来报道了今天看到了一篇文章就只想记下那两句话：良田千顷不过一日三餐广夏万间只睡卧榻三尺大概的意思就是要珍惜当下不要等来不及的时候才珍惜分享今天的两餐最近没有时间运动呢下个月补回好了说完了哈哈goodnight图片发自App图片发自App
  • 力扣热题100-------54. 螺旋矩阵 海航Java之路 力扣leetcode矩阵java
    给你一个m行n列的矩阵matrix，请按照顺时针螺旋顺序，返回矩阵中的所有元素。示例1：输入：matrix=[[1,2,3],[4,5,6],[7,8,9]]输出：[1,2,3,6,9,8,7,4,5]示例2：输入：matrix=[[1,2,3,4],[5,6,7,8],[9,10,11,12]]输出：[1,2,3,4,8,12,11,10,9,5,6,7]提示：m==matrix.lengthn
  • 我不懂什么是爱，但我给你全部我拥有的 香尧
    因为怕黑，所以愿意陪伴在夜中行走的人，给他一点点的安全感。因为渴望温柔与爱，所以愿意为别的孩子付出爱与温柔。因为曾遭受侮辱和伤害，所以不以同样的方式施于其他人。如果你向别人出之以利刃，对方还了你爱与包容，真的不要感激他，真的不要赞美他。每一个被人伤害过的人心里都留下了一颗仇恨的种子，他也会想要有一天以眼还眼，以牙还牙。但他未让那颗种子生根发芽，他用一把心剑又一次刺向他自己，用他血荐仇恨，开出一朵温
  • 你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。 霖霖z
    打卡人:周云日期:2018年11月09日【日精进打卡第180天】【知～学习】《六项精进》0遍共214遍《通篇》1遍共106遍《大学》2遍共347遍《坚强工作，温柔生活》ok《不抱怨的世界》104-108页《经典名句》你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。【行～实践】一、修身：（对自己个人）1、坚持打卡二、齐家：（对家庭和家人）打扫卫生，接送孩子，洗衣做饭，陪
  • SpringMVC执行流程（原理），通俗易懂 国服冰 SpringMVCspringmvc
    SpringMVC执行流程（原理），通俗易懂一、图解SpringMVC流程二、进一步理解Springmvc的执行流程1、导入依赖2、建立展示的视图3、web.xml4、spring配置文件springmvc-servlet5、Controller6、tomcat配置7、访问的url8、视图页面一、图解SpringMVC流程图为SpringMVC的一个较完整的流程图，实线表示SpringMVC框架提
  • C++ 计数排序、归并排序、快速排序 每天搬一点点砖 c++数据结构算法
    计数排序：是一种基于哈希的排序算法。他的基本思想是通过统计每个元素的出现次数，然后根据统计结果将元素依次放入排序后的序列中。这种排序算法适用于范围较小的情况，例如整数范围在0到k之间计数排序步骤：1初始化一个长度为最大元素值加1的计数数组，所有元素初始化为02遍历原始数组，将每个元素值作为索引，在计数数组中对应位置加13将数组清空4遍历计数器数组，按照数组中的元素个数放回到元数组中计数排序的优点和
  • 2023-11-02 一帆f
    发现浸润心田的感觉：今天一个机缘之下突然想分享我的婆媳关系，我一边分享一边回忆我之前和儿媳妇关系的微妙变化，特别是分享到我能感受到儿媳妇的各种美好，现在也能心平气和的和老公平等对话，看到自己看到老公，以己推人以人推己自然而然的换位思考，心中有一种美好的能量在涌动，一种浸润心田的感觉从心胸向全身扩散，美好极了……我很想记住这种感觉，赶紧把它写下来以留纪念，也就是当我看见他人的美好，美好的美妙的浸润心
  • 贫穷家庭的孩子考上985以后会怎样？ Mellisa蜜思言
    我出生在一个贫穷的农村家庭，据我妈说，我出生的时候才4斤多，而她生完我以后月子里就瘦到70斤。家里一直很穷，父母都是在菜市场卖菜的，家里还有几亩地种庄稼的。我很小开始就要去帮忙，暑假的生活就是帮忙去卖菜和割稻谷，那时候自己对于割稻谷这种事情有着莫名的恐惧，生怕自己长大以后还是每年都要过着割稻谷这种日子。父母因为忙于生计无暇顾及我的学习，幸好我因为看到他们这样子的生活，内心里有深深的恐惧感，驱使着我
  • 实时数据流计算引擎Flink和Spark剖析 程小舰 flinkspark数据库kafkahadoop
    在过去几年，业界的主流流计算引擎大多采用SparkStreaming，随着近两年Flink的快速发展，Flink的使用也越来越广泛。与此同时，Spark针对SparkStreaming的不足，也继而推出了新的流计算组件。本文旨在深入分析不同的流计算引擎的内在机制和功能特点，为流处理场景的选型提供参考。（DLab数据实验室w.x.公众号出品）一.SparkStreamingSparkStreamin
  • 48. 旋转图像 - 力扣（LeetCode） Fiee-77 #数组leetcode算法python数据结构数组
    题目：给定一个n×n的二维矩阵matrix表示一个图像。请你将图像顺时针旋转90度。你必须在原地旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。示例1：输入：matrix=[[1,2,3],[4,5,6],[7,8,9]]输出：[[7,4,1],[8,5,2],[9,6,3]]示例2：输入：matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,
  • 日更50天有什么收益？ 星湾二宝
    坚持在平台上日更50天了，平台也为我生成了日更50天徽章，小开心一下这份坚持。日更50天徽章那坚持50天都有哪些收益呢？收益一，就是最直观的那些钻和贝，我这边确实不太高，但是这些贝足够支撑我保持会员的资格，能够在发文的时候帮助友友们去除广告，方便阅读。钻和贝收益二，文章的收获，日更50天，坚持写作3.7万文字，书写的文字也从开始的流水账/碎碎念逐渐加入自己的思考和观点。以前，一个念头会一晃而过，如
  • Git 与 GitHub 的对比与使用指南 一念& 其它gitgithub
    Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地
  • 英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？
    英伟达市值突破4万亿美元，既是AI算力需求爆发的直接体现，也暗含市场对未来的狂热预期。其支撑逻辑与潜在风险并存，而AI泡沫的可持续性则取决于技术、商业与地缘政治的复杂博弈。⚙️一、英伟达4万亿市值的核心支撑因素技术垄断与生态壁垒硬件优势：英伟达GPU在AI训练市场占有率超87%，H100芯片的FP16算力达1979TFLOPS，领先竞品3-5倍。CUDA生态：400万开发者构建的软件护城河，成为A
  • 深入解析JVM工作原理：从字节码到机器指令的全过程
    一、JVM概述Java虚拟机(JVM)是Java平台的核心组件，它实现了Java"一次编写，到处运行"的理念。JVM是一个抽象的计算机器，它有自己的指令集和运行时内存管理机制。JVM的主要职责：加载：读取.class文件并验证其正确性存储：管理内存分配和垃圾回收执行：解释或编译字节码为机器指令安全：提供沙箱环境限制恶意代码二、JVM架构详解JVM由三个主要子系统组成：1.类加载子系统类加载过程分为
  • Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程 倾听铃的声 后端springjavamvc开发语言分布式
    前文我们有了IOC的源码基础以及SpringMVC的基础，我们便可以进一步深入理解SpringMVC主要实现原理，包含DispatcherServlet的初始化过程和DispatcherServlet处理请求的过程的源码解析。本文是第二篇：DispatcherServlet处理请求的过程的源码解析。@pdaiSpring进阶-SpringMVC实现原理之DispatcherServlet处理请求的
  • ARM 和 AMD 架构的区别 m0_69576880 arm开发windows架构
    ARM架构和AMD架构是两种不同的计算机处理器架构，它们有以下几个主要区别：设计出发点、兼容性、性能特点、市场定价。设计出发点：①ARM构架：ARM架构最初是为嵌入式系统设计的，旨在提供低功耗和高效能的解决方案。它主要应用于移动设备、嵌入式系统和物联网设备②AMD架构：AMD架构是基于x86架构的扩展，旨在提供与Intel架构兼容的处理器。它主要用于台式机、服务器和工作站等计算机系统。兼容性：AR
  • 2019-06-05 第十七把巴鲁克
    今天去实验田里实习，见到了福寿螺真的可怕且牛皮，六级也快来了，说实话还是害怕。我昨天考了环工原理，真的太难了，太烦了，理工科真的难，烦。实验报告还是没写，要抓紧速度抓紧时间，还是应该学会努力学习，远离一些不上进的事物。
  • Linux系统配置（应用程序） 1风天云月 Linuxlinux应用程序编译安装rpmhttp
    目录前言一、应用程序概述1、命令与程序的关系2、程序的组成3、软件包封装类型二、RPM1、RPM概述2、RPM用法三、编译安装1、解包2、配置3、编译4、安装5、启用httpd服务结语前言在Linux中的应用程序被视为将软件包安装到系统中后产生的各种文档，其中包括可执行文件、配置文件、用户手册等内容，这些文档被组织为一个有机的整体，为用户提供特定的功能，因此对于“安装软件包”与“安装应用程序”这两
  • 多线程编程之卫生间 周凡杨 java并发卫生间线程厕所
    如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
  • How to Install GUI to Centos Minimal sunjing linuxInstallDesktopGUI
    http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html   I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
  • Shell 函数 daizj shell函数
    Shell 函数 linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 shell中函数的定义格式如下： [function] funname [()]{ action; [return int;] } 说明： 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 2、参数返回
  • Linux服务器新手操作之一 周凡杨 Linux 简单 操作
    1.whoami      当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。      此时可以使用whoami命令。      [ecuser@HA5-DZ05 ~]$ whoami       e
  • 浅谈Socket通信（一） 朱辉辉33 socket
    在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。    首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包    ServerSock
  • 关于框架的简单认识 西蜀石兰 框架
    入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。 前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。 后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。 都说学前端的要知道三大框架，目前node.
  • You have an error in your SQL syntax; check the manual that corresponds to your 林鹤霄
    You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids  ) values('0ac91f167f754c8cbac00e9e3dc372
  • MySQL5.6的my.ini配置 aigo mysql
    注意：以下配置的服务器硬件是：8核16G内存    [client]   port=3306   [mysql]   default-character-set=utf8     [mysqld]   port=3306   basedir=D:/mysql-5.6.21-win
  • mysql 全文模糊查找 便捷解决方案 alxw4616 mysql
    mysql 全文模糊查找 便捷解决方案 2013/6/14 by 半仙 [email protected] 目的: 项目需求实现模糊查找. 原则: 查询不能超过 1秒. 问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 解决方案: 使用mysql全文索引. 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
  • 自定义数据结构 链表(单项 ,双向,环形) 百合不是茶 单项链表双向链表
         链表与动态数组的实现方式差不多,    数组适合快速删除某个元素    链表则可以快速的保存数组并且可以是不连续的       单项链表;数据从第一个指向最后一个   实现代码:        //定义动态链表 clas
  • threadLocal实例 bijian1013 javathreadjava多线程threadLocal
    实例1： package com.bijian.thread; public class MyThread extends Thread { private static ThreadLocal tl = new ThreadLocal() { protected synchronized Object initialValue() { return new Inte
  • activemq安全设置—设置admin的用户名和密码 bijian1013 javaactivemq
            ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 <bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint"> <p
  • 【Java范型一】Java范型详解之范型集合和自定义范型类 bit1129 java
    本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。   范型内容 范型集合类 范型类
  • 【HBase十二】HFile存储的是一个列族的数据 bit1129 hbase
    在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证   1. 建立一个有两个列族的表   create 'members','colfam1','colfam2'   2. 在members表中的colfam1中插入50*5
  • Nginx 官方一个配置实例 ronin47 nginx 配置实例
    user www www; worker_processes 5; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096;} http { include conf/mim
  • java-15.输入一颗二元查找树，将该树转换为它的镜像， 即在转换后的二元查找树中，左子树的结点都大于右子树的结点。 用递归和循环 bylijinnan java
    //use recursion public static void mirrorHelp1(Node node){ if(node==null)return; swapChild(node); mirrorHelp1(node.getLeft()); mirrorHelp1(node.getRight()); } //use no recursion bu
  • 返回null还是empty bylijinnan javaapachespring编程
    第一个问题，函数是应当返回null还是长度为0的数组（或集合）？ 第二个问题，函数输入参数不当时，是异常还是返回null？ 先看第一个问题 有两个约定我觉得应当遵守： 1.返回零长度的数组或集合而不是null（详见《Effective Java》） 理由就是，如果返回empty，就可以少了很多not-null判断： List<Person> list
  • [科技与项目]工作流厂商的战略机遇期 comsci 工作流
          在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。         在微软，甲骨文，谷歌，IBM,SONY
  • 过度设计-举例 cuityang 过度设计
    过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。 未来的事情，比如 访问量，比如数据库的容量，比如是否需要改成分布式  都是无法预料的 再举一个例子，对闰年的判断逻辑： 　　1、 if($Year%4==0) return True; else return Fasle; 　　2、if (   ($Year%4==0  &am
  • java进阶，《Java性能优化权威指南》试读 darkblue086 java性能优化
    记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
  • 网络学习笔记初识OSI七层模型与TCP协议 dcj3sjt126com 学习笔记
      协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定 　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。 　　两类服务： 　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。 　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
  • mac中用命令行运行mysql dcj3sjt126com mysqllinuxmac
    参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html  感觉workbench不好用（有点先入为主了）。 1，安装mysql 在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
  • MongDB查询（1）——基本查询[五] eksliang mongodbmongodb 查询mongodb find
    MongDB查询 转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 MongoDB中使用find来进行查询。 API:如下 function ( query , fields , limit , skip, batchSize, options ){.....}  参数含义： query:查询参数 fie
  • base64，加密解密 经融加密，对接 y806839048 经融加密对接
    String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); // 注意编码格式，注意用于加密，解密的要是同
  • JavaWeb之JSP概述 ihuning javaweb
      什么是JSP？为什么使用JSP？ JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。   JSP起源    在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。  如果使用Servl
  • apple watch 指南 啸笑天 apple
    1. 文档 WatchKit Programming Guide（中译在线版 By @CocoaChina） 译文 译者 原文 概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch 概览 - 配置 Xcode 项目 - Overview - Configuring Yo
  • java经典的基础题目 macroli java编程
    1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
  • 你所不知道神奇的js replace正则表达式 qiaolevip 每天进步一点点学习永无止境纵观千象regex
    var v = 'C9CFBAA3CAD0'; console.log(v); var arr = v.split(''); for (var i = 0; i < arr.length; i ++) { if (i % 2 == 0) arr[i] = '%' + arr[i]; } console.log(arr.join('')); console.log(v.r
  • [一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics) superlxw1234 hivehive分析表hive统计信息hive Statistics
    关键字：Hive统计信息、分析Hive表、Hive Statistics   类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。   表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等；   14.1 新表的统计信息 对于一个新创建
  • Spring Boot 1.2.5 发布 wiselyman spring boot
        Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。   这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。   官方建议所有的Spring Boot用户升级这个版本。   项目首页 | 源