mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件（适配移动端）——新增仓库地址

news2024/12/26 22:21:19

一、前言

1、mpVue微信小程序不支持动态组件（<component> ）

2、mpVue微信小程序不支持动态属性及事件穿透（$attrs和$listeners）

3、mpVue微信小程序不支持render函数

二、最终效果

在这里插入图片描述

三、配置参数（Attributes）

1. 简介：基于 vant-weapp 组件的二次封装，着重于数据层面，HTML 一行代码

TForm 表单组件
代码示例：

<t-form
  ref="t-form"
  :formOpts="formOpts"
  :listDefaultInfo="formOpts.listDefaultInfo"
  :listTypeInfo="formOpts.listTypeInfo"
  />

2. 配置参数

参数说明类型默认值
className自定义类名String-
listTypeInfo下拉选择数据源（type:'date/datetime/radio/checkbox’有效）Object{}
listDefaultInfo下拉选择默认值及弹窗字段（type:'date/datetime/radio/checkbox’有效）Object{}
formOpts表单配置项Object{}
—fieldListform 表单每项 list (输入框继承van-field)Array[]
------slotName自定义表单某一项输入框String/slot-
------eventtype非date/datetime/radio/checkbox有效String-
------typedate/datetime/radio/checkbox/text/password/textareaString-
------labelform 表单每一项 titleString-
------slotLabelName自定义某一项 titleString/slot-
------slotRightIconvan-field右侧iconObject-
----------nameicon 名称String-
----------fun点击icon事件funciton-
----------coloricon颜色String-
------slotButtonvan-field右侧按钮Object-
----------name插槽名String-
----------fun点击按钮事件funciton-
----------type继承van-button typeString-
----------size继承van-button sizeString-
------valueform 表单每一项传给后台的参数（对应formData每一项）String-
------required是否显示红点Booleanfalse
------list下拉选择数据源（仅仅对 type:'date/datetime/radio/checkbox’有效）String-
------defaultValue表单下拉选择回显界面值（type:'date/datetime/radio/checkbox’有效）String-
------defaultPopup表单下拉选择弹窗字段值（type:'date/datetime/radio/checkbox’有效）String-
—formData表单提交数据(对应 fieldList 每一项的 value 值)Object-
—rules三种规则校验（required(是否必填)/min：max(最小最大)/pattern(正则校验)Object-

3. events

事件名说明返回值
handleEvent输入框触发事件fieldList event 值及/输入框–输入的值

4. Methods

事件名说明参数
validateField单个字段校验传入rules值
validate整个表单校验成功返回true-

四、源码

<template>
  <div :class="['t_form',className]">
    <div v-for="(item, index) in formOpts.fieldList" :key="index">
      <!-- 日期年月日 -->
      <van-cell-group v-if="item.type === 'date'">
        <van-cell
          :title="item.label"
          :required="item.required"
          input-align="right"
          is-link
          :value-class="listDefaultInfo[item.defaultValue]?'van-cell_date_select':'van-cell_date'"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value="listDefaultInfo[item.defaultValue] || item.placeholder"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup :show="listDefaultInfo[item.defaultPopup]" position="bottom" round>
          <div class="popup_wrap">
            <van-datetime-picker
              :type="item.type||'date'"
              :value="formOpts.formData[item.value]"
              @cancel="listDefaultInfo[item.defaultPopup] = false"
              @confirm="(e) => {listDefaultInfo[item.defaultValue] = dayjs(e.mp.detail).format('YYYY-MM-DD'),formOpts.formData[item.value] = dayjs(e.mp.detail).format('YYYY-MM-DD'),listDefaultInfo[item.defaultPopup] = false}"
            />
          </div>
        </van-popup>
      </van-cell-group>
      <!-- 日期年月日时分秒 -->
      <van-cell-group v-else-if="item.type === 'datetime'">
        <van-cell
          :title="item.label"
          input-align="right"
          :required="item.required"
          is-link
          :value="listDefaultInfo[item.defaultValue] || item.placeholder"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value-class="listDefaultInfo[item.defaultValue]?'van-cell_date_select':'van-cell_date'"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup :show="listDefaultInfo[item.defaultPopup]" position="bottom" round>
          <div class="popup_wrap">
            <van-datetime-picker
              :type="item.type||'datetime'"
              :value="formOpts.formData[item.value]"
              @cancel="listDefaultInfo[item.defaultPopup] = false"
              @confirm="(e) => {listDefaultInfo[item.defaultValue] = dayjs(e.mp.detail).format('YYYY-MM-DD HH:mm:ss'),formOpts.formData[item.value] = dayjs(e.mp.detail).format('YYYY-MM-DD HH:mm:ss'),listDefaultInfo[item.defaultPopup] = false}"
            />
          </div>
        </van-popup>
      </van-cell-group>
      <!-- 下拉单选框 -->
      <van-cell-group v-else-if="item.type === 'radio'">
        <van-cell
          :title="item.label"
          input-align="right"
          :required="item.required"
          is-link
          :value="listDefaultInfo[item.defaultValue] || item.placeholder"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value-class="listDefaultInfo[item.defaultValue]?'van-cell_date_select':'van-cell_date'"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup :show="listDefaultInfo[item.defaultPopup]" position="bottom" round>
          <van-picker
            show-toolbar
            :title="item.label"
            :columns="listTypeInfo[item.list]"
            @cancel="listDefaultInfo[item.defaultPopup] = false"
            @confirm="(e) => {listDefaultInfo[item.defaultValue] = e.mp.detail.value,formOpts.formData[item.value] = e.mp.detail.value,listDefaultInfo[item.defaultPopup] = false}"
          />
        </van-popup>
      </van-cell-group>
      <!-- 下拉复选框 -->
      <van-cell-group v-else-if="item.type === 'checkbox'">
        <van-cell
          :title="item.label"
          input-align="right"
          :required="item.required"
          is-link
          :value="listDefaultInfo[item.defaultValue].length>0?listDefaultInfo[item.defaultValue]:listDefaultInfo[item.defaultValue].length || item.placeholder"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value-class="listDefaultInfo[item.defaultValue].length?'van-cell_date_select':'van-cell_date'"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup
          :show="listDefaultInfo[item.defaultPopup]"
          custom-class="t_checkbox_picker"
          position="bottom"
          round
        >
          <div class="t_checkbox_picker__toolbar">
            <div
              class="t_checkbox_picker__cancel"
              @click="listDefaultInfo[item.defaultPopup] = false"
            >取消</div>
            <div class="t_checkbox_picker__title t-oneline-overflow-hidden">{{item.label}}</div>
            <div
              class="t_checkbox_picker__confirm"
              @click="() => {formOpts.formData[item.value] = listDefaultInfo[item.defaultValue],listDefaultInfo[item.defaultPopup] = false}"
            >确认</div>
          </div>
          <van-checkbox-group
            :value="listDefaultInfo[item.defaultValue]"
            @change="(event)=>listDefaultInfo[item.defaultValue] = event.mp.detail"
          >
            <div
              v-for="(value,key) in listTypeInfo[item.list]"
              :key="key"
              class="t_checkbox_content"
            >
              <van-checkbox
                custom-class="t_checkbox"
                :name="value[arrLabel || 'label']"
                :disabled="value.disabled||false"
                shape="square"
              >{{value[arrLabel || 'label']}}</van-checkbox>
            </div>
          </van-checkbox-group>
        </van-popup>
      </van-cell-group>
      <!-- 自定义插槽 -->
      <template v-else-if="item.slotName">
        <slot :name="item.slotName"></slot>
      </template>
      <!-- 输入框 -->
      <van-cell-group v-else>
        <van-field
          :name="item.value"
          v-model="formOpts.formData[item.value]"
          :placeholder="item.placeholder||''"
          :label="item.label"
          :type="item.type"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :required="item.required"
          :title-width="item.titleWidth||'6.2em'"
          :maxlength="item.maxlength||-1"
          :cursor="item.cursor||0"
          :show-word-limit="item.showWordLimit"
          :is-link="item.isLink"
          :input-align="item.inputAlign||'right'"
          :autosize="item.autosize||item.type==='textarea'"
          :left-icon="item.leftIcon||''"
          :right-icon="item.rightIcon||''"
          clearable
          @change="e => formOpts.formData[item.value] = e.mp.detail"
          @click="() =>$emit('handleEvent',item.event,formOpts.formData[item.value])"
        >
          <!-- @change="e => formOpts.formData[item.value] = e.mp.detail" -->
          <div
            v-if="!item.label"
            :class="item.labelNameClass"
            :style="item.labelNameStyle"
            slot="label"
          >
            <slot :name="item.slotLabelName" />
          </div>
          <van-icon
            v-if="item.slotLeftIcon"
            :class="item.slotLeftIcon.class"
            :color="item.slotLeftIcon.color||'inherit'"
            @click="item.slotLeftIcon.fun"
            :name="item.slotLeftIcon.name"
            slot="left-icon"
          />
          <van-icon
            v-if="item.slotRightIcon"
            :class="item.slotRightIcon.class"
            :color="item.slotRightIcon.color||'inherit'"
            :name="item.slotRightIcon.name"
            @click="item.slotRightIcon.fun"
            slot="right-icon"
          />
          <van-button
            v-if="item.slotButton&&item.slotButton.name"
            :class="item.slotButton.class"
            :style="item.slotButton.style"
            :size="item.slotButton.size"
            :type="item.slotButton.type"
            @click="item.slotButton.fun"
            slot="button"
          >
            <slot :name="item.slotButton.name" />
          </van-button>
        </van-field>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: 'TForm',
  components: {},
  props: {
    /** 表单配置项说明
     * formData object 表单提交数据
     * rules object 验证规则
     * fieldList Array 表单渲染数据
     */
    formOpts: {
      type: Object,
      default: () => ({})
    },
    // 下拉选项数据
    listTypeInfo: {
      type: Object,
      default: () => ({})
    },
    // 下拉选择默认值
    listDefaultInfo: {
      type: Object,
      default: () => ({})
    },
    className: String
  },
  computed: {
    dayjs() {
      return dayjs
    }
  },
  watch: {
    'formOpts.fieldList': {
      handler(val) {
        // console.log('fieldList---watch', val)
        val.map(item => {
          // 插槽提示
          if (item.slotLabelName) {
            !Object.keys(this.$slots).includes(item.slotLabelName) && this.$toast(`请在表单组件添加${item.slotLabelName}插槽！`)
          }
          setTimeout(() => {
            if (item.slotButton && item.slotButton.name) {
              !Object.keys(this.$slots).includes(item.slotButton.name) && this.$toast(`请在表单组件添加${item.slotButton.name}插槽！`)
            }
          }, 2000)
          setTimeout(() => {
            if (item.slotName) {
              !Object.keys(this.$slots).includes(item.slotName) && this.$toast(`请在表单组件添加${item.slotName}插槽！`)
            }
          }, 3000)
        })
      },
      immediate: true,
      deep: true // 深度监听
    }
  },
  data() {
    return {
      ...this.listDefaultInfo
    }
  },
  methods: {
    // 单个字段校验
    validateField(key) {
      let value = this.formOpts.formData[key]
      if (this.formOpts.rules[key] && this.formOpts.rules[key].length) {
        for (let i = 0; i < this.formOpts.rules[key].length; i++) {
          let rule = this.formOpts.rules[key][i]
          if (rule.required) {
            // 必填校验
            if (!value) {
              return {
                valid: false,
                msg: rule.message
              }
            }
          } else if (rule.max || rule.min) {
            // 最大最小长度校验
            if (value && (value.length > rule.max || value.length < rule.min)) {
              return {
                valid: false,
                msg: rule.message
              }
            }
          } else if (rule.pattern && value) {
            // 正则校验
            let reg = new RegExp(rule.pattern)
            if (!reg.test(value)) {
              return {
                valid: false,
                msg: rule.message
              }
            }
          }
        }
      }
      return {
        valid: true
      }
    },
    // 全部校验
    validate() {
      let res = []
      Object.keys(this.formOpts.rules).forEach(key => {
        res.push(this.validateField(key))
      })
      for (let i = 0; i < res.length; i++) {
        if (!res[i].valid) {
          wx.showToast({
            title: res[i].msg,
            icon: 'none'
          })
          return false
        }
      }
      return true
    }
  }
}
</script>
<style lang="scss">
.t_form {
  .van-cell_date {
    color: var(--cell-value-color, #c8c9cc);
  }
  .van-cell_date_select {
    color: var(--cell-value-color, #000);
  }
  .t_checkbox_picker {
    min-height: 260px;
    padding: 10px 15px;
    .t_checkbox_picker__toolbar {
      display: flex;
      height: var(--picker-toolbar-height, 44px);
      justify-content: space-between;
      line-height: var(--picker-toolbar-height, 44px);
      .t_checkbox_picker__cancel,
      .t_checkbox_picker__confirm {
        font-size: var(--picker-action-font-size, 14px);
        padding: var(--picker-action-padding, 0 16px);
      }
      .t_checkbox_picker__cancel {
        color: var(--picker-cancel-action-color, #969799);
      }
      .t_checkbox_picker__title {
        font-size: var(--picker-option-font-size, 16px);
        font-weight: var(--font-weight-bold, 500);
        max-width: 50%;
        text-align: center;
      }
      .t_checkbox_picker__confirm {
        color: var(--picker-confirm-action-color, #576b95);
      }
    }
    ._van-checkbox-group {
      .t_checkbox_content {
        margin: 10px;
      }
    }
  }
}
</style>

五、页面使用

<template>
  <div class="demo_form">
    <t-header title="表单组件示例" />
    <t-form
      ref="t-form"
      :formOpts="formOpts"
      :listDefaultInfo="formOpts.listDefaultInfo"
      :listTypeInfo="formOpts.listTypeInfo"
    >
      <div slot="custom">自定义label</div>
      <div slot="button">发送验证码</div>
    </t-form>
    <van-button block type="primary" @click="formCom">表单组件</van-button>
  </div>
</template>
<script>
import TForm from '@/components/TForm/index.vue'
export default {
  name: 'DemoForm',
  components: {
    TForm
  },
  data() {
    return {
      formOpts: {
        formData: {
          account: '', // *用户账号
          password: '', // *用户密码
          name: '', // *用户昵称
          email: '', // 邮箱
          desc: '', // 描述
          sex: '', // *性别: 0:男 1:女
          status: '', // *状态: 停用，启用',
          hobby: '', // *爱好:多选
          creatDate: '', // 出生日期
          date: '', // 出生日期---时分秒
          phone: '' // 手机号码
        },
        // 下拉选择默认值
        listDefaultInfo: {
          statusDefault: '',
          statusPopup: false,
          sexDefault: '',
          sexPopup: false,
          showDatePopup: false, // 日期弹窗
          showDatetimePopup: false, // 日期弹窗(含时分秒)
          dateDefault: '', // 默认日期-- 年月日
          datetimeDefault: '', // 默认日期--含时分秒
          hobbyPopup: false, // 爱好弹窗
          hobbyDefault: [] // 爱好
        },
        fieldList: [
          { label: '账号', value: 'account', type: 'text', placeholder: '请输入账号', required: true },
          { label: '', value: 'password', type: 'password', placeholder: '请输入密码', required: true, slotLabelName: 'custom', labelNameStyle: 'color:red', slotRightIcon: { name: 'location-o', fun: this.clickIcon } },
          { label: '昵称', value: 'name', type: 'text', placeholder: '请输入昵称', required: true, slotButton: { name: 'button', size: 'small', type: 'primary', fun: this.test } },
          { label: '邮箱', value: 'email', type: 'text', placeholder: '请输入邮箱', required: true },
          { label: '出生日期', value: 'creatDate', type: 'date', placeholder: '请选择出生日期', defaultValue: 'dateDefault', defaultPopup: 'showDatePopup' },
          { label: '日期时分秒', value: 'date', type: 'datetime', placeholder: '请选择日期时分秒', defaultValue: 'datetimeDefault', defaultPopup: 'showDatetimePopup' },
          { label: '性别', value: 'sex', type: 'radio', list: 'sexList', placeholder: '请选择性别', defaultValue: 'sexDefault', defaultPopup: 'sexPopup' },
          { label: '爱好', value: 'hobby', type: 'checkbox', list: 'hobbyList', placeholder: '请选择爱好(多选)', required: true, defaultValue: 'hobbyDefault', defaultPopup: 'hobbyPopup' },
          { label: '状态', value: 'status', type: 'radio', list: 'statusList', placeholder: '请选择状态', defaultValue: 'statusDefault', defaultPopup: 'statusPopup' },
          { label: '手机号码', value: 'phone', type: 'text', maxlength: 11, placeholder: '请输入手机号码', required: true },
          { label: '描述', value: 'desc', type: 'textarea', placeholder: '请输入描述', autosize: { maxHeight: 80, minHeight: 50 } }
        ],
        rules: {
          account: [
            { required: true, message: '请输入账号' },
            { min: 2, max: 4, message: '账号只能大于2个字符小于4个字符' }
          ],
          password: [{ required: true, message: '请输入密码' }],
          name: [{ required: true, message: '请输入昵称' }],
          email: [
            { required: true, message: '请输入邮箱' },
            { pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/, message: '请输入正确的邮箱' }
          ],
          hobby: [{ required: true, message: '请至少选择一个爱好' }],
          phone: [
            { required: true, message: '请输入手机号码' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' }
          ]
        },
        // 相关列表
        listTypeInfo: {
          hobbyList: [
            { label: '吉他', value: '0' },
            { label: '看书', value: '1' },
            { label: '美剧', value: '2' },
            { label: '旅游', value: '3' },
            { label: '音乐', value: '4' }
          ],
          sexList: ['女', '男'],
          statusList: ['启用', '停用']
        }
      }
    }
  },
  methods: {
    // TForm表单提交
    formCom() {
      console.log('form组件点击提交--数据', this.formOpts.formData)
      let res = this.$refs['t-form'].validate()
      console.log('提交数据规则', res)
      if (!res) return
      console.log('全部校验通过--最终数据', this.formOpts.formData)
    },
    test(val) {
      console.log('测试点击右侧按钮---', val)
    },
    clickIcon(val) {
      console.log('点击图标', val)
    }
  }
}
</script>
<style lang="scss">
.demo_form {
  width: 100%;
}
</style>

六、仓库地址

gitHub地址

码云地址

七、相关文章

Vue3 + Vite + Ts开源后台管理系统模板

基于ElementUi或AntdUI再次封装基础组件文档

基于Element-plus再次封装基础组件文档(vue3+ts)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/757512.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OpenCV for Python 入坑第一天：图像的基础操作

OpenCV for Python 入坑第一天：图像的基础操作

我们都知道&#xff0c;OpenCV能够帮助我们处理视频和图像&#xff0c;咱们在图像处理中&#xff0c;除了Pillow库之外&#xff0c;最经常用到的也是它了。那么现在咱们就正式入坑OpenCV for Python&#xff0c;一起来感受一下OpenCV的魅力吧&#xff01; 文章目录 读取图像 im…
阅读更多...
深入了解Redis-基础篇

深入了解Redis-基础篇

文章目录 一、故事背景二、知识点主要构成2.1、redis简介2.2、基于CentOS Linux docker容器化安装redis2.3、redis的数据类型2.3.1、String类型2.3.2、Hash类型2.3.3、List类型2.3.4、Set类型2.3.5、SortedSet类型 2.4、Redis的Java客户端2.4.1、Jedis2.4.1.1、Jedis的使用步骤…
阅读更多...
leetcode 572. 另一棵树的子树(java)

leetcode 572. 另一棵树的子树(java)

另一棵树的子树 另一棵树的子树题目描述解法一 DFS解法二 KMP 算法 KMP 算法 另一棵树的子树 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/subtree-of-another-tree 题目描述 给你两棵二叉树 root 和 subRoot 。检验 …
阅读更多...
脑电微状态方法可靠吗？

脑电微状态方法可靠吗？

摘要 EEG微状态是在静息态EEG记录中观察到的代表功能性脑网络的状态&#xff0c;在快速切换到另一个网络之前保持稳定40-120ms。人们认为微状态特征(如持续时间、发生率、覆盖率和转换概率)可以作为精神和神经系统疾病以及心理社会特征的神经标志物。然而&#xff0c;需要可靠…
阅读更多...
设计模式-01策略模式

设计模式-01策略模式

1 什么是设计模式 先看一段设计模式总结之父们GOF在《设计模式 可复用面向对象软件的基础》一书中描述的一段话&#xff1a; 设计模式就是程序编码设计时的一些套路&#xff0c;这些套路都是经过前人千锤百炼总结出来的经验&#xff0c;由GoF总结出23种经典套路&#xff0c;即…
阅读更多...
4028: 按位与

4028: 按位与

题目内容 输入格式 输入第一行一个整数 n n n。 第二行 n n n 个整数 a 1 , a 2 , ⋯ , a n a_1, a_2, \cdots, a_n a1​,a2​,⋯,an​。 输出格式 输出一行一个整数表示答案。 样例 1 输入 5 6 2 3 4 7 样例 1 输出 7 #include<bits/stdc.h> using namespace std…
阅读更多...
怎样优雅地增删查改（三）：业务用户的增删查改

怎样优雅地增删查改（三）：业务用户的增删查改

文章目录 创建业务用户创建业务用户同步器创建业务用户应用服务增删改查 创建控制器测试按组织架构查询按职称查询 创建业务用户 区别于身份管理模块&#xff08;Identity模块&#xff09;的鉴权用户IdentityUser&#xff0c;业务用户&#xff08;BusinessUser&#xff09;是围…
阅读更多...
【Python】正则表达式语法入门

【Python】正则表达式语法入门

目录 正则表达式 1、点&#xff1a;匹配所有字符 2、星号&#xff1a;重复匹配任意次 3、加号&#xff1a;重复匹配多次 4、花括号&#xff1a;匹配指定次数 5、贪婪模式和非贪婪模式 6、反斜杠&#xff1a;对元字符的转义 7、方括号&#xff1a;匹配几个字符之一 8、…
阅读更多...
计算机科学与技术基础课程复习

计算机科学与技术基础课程复习

文章目录 大学计算机基础 大学计算机基础 国防科技大学慕课 从算牌开始&#xff0c;记录数据 数据的计算规则 帕斯卡的加法器 计算自动化 图灵的梦想 乘10运算的图灵机 图灵记 根据状态和记录&#xff1b;根据控制器规则&#xff0c;从起始状态到结束状态&#xff0c;从…
阅读更多...
less 笔记

less 笔记

1 margin-left 之后有 margin: 0 导致margin-left 无效 --> 不能重复定义 .btn-group {margin-left: calc(100% - 350px);display: inline-block;margin: 0; // 重复定义 导致上面 没有效果padding: 0; } 2 一定要F12检查元素 看各个div的宽度是否太长 导致靠左靠右 计算不…
阅读更多...
5.1 Python高阶特性之递归函数

5.1 Python高阶特性之递归函数

基本概念&#xff1a; 如果一个函数在内部调用自身本身&#xff0c;这个函数就是递归函数使用递归函数的优点是逻辑简单清晰&#xff0c;缺点是递归过深会导致栈溢出。【注意】 递归函数定义时&#xff0c; 一定存在某个条件能结束执行&#xff0c; 递归最重要的就是需要避免死…
阅读更多...
免费使用Elasticsearch官网15天

免费使用Elasticsearch官网15天

注册登录 点击创建索引时候会给你展示一个密钥。这个密钥就是你的用户密码 如下图 你的服务地址大致样式如下 https://huihai.es.us-central1.gcp.cloud.es.io 这里需要你输入用户密码,上面图4&#xff08;图中&#xff09;&#xff0c;下载时候的用户密码 登录完成 这样就能…
阅读更多...
【Python爬虫】CSDN热榜文章热门词汇分析

【Python爬虫】CSDN热榜文章热门词汇分析

&#x1f4da; 前言 在信息时代&#xff0c;我们经常需要从大量的文章中获取有用的信息。本文将介绍如何使用Python进行数据处理&#xff0c;获取热榜文章的标题和标签&#xff0c;并使用jieba库进行数据分析。通过本文的学习&#xff0c;你将掌握获取和分析热榜文章数据的技巧…
阅读更多...
[英语单词] components；

[英语单词] components；

*[kәm’pәunәnt] n. 元件, 组件, 成分 a. 组成的, 构成的 【计】 组件 【化】 组分 【医】 成分; 组元(神经元组) 有很多地方使用这个单词&#xff0c;在组成整体时&#xff0c;作为单位一内的占有比率。那为什么不用portion&#xff1f; 这样每一个组成部分都是一个compon…
阅读更多...
使用 YOLOv8 和 Streamlit 构建实时对象检测和跟踪应用程序：第 1 部分-介绍和设置

使用 YOLOv8 和 Streamlit 构建实时对象检测和跟踪应用程序：第 1 部分-介绍和设置

示例：图像上的对象检测 介绍 实时视频中的目标检测和跟踪是计算机视觉的一个重要领域，在监控、汽车和机器人等各个领域都有广泛的应用。 由于需要能够识别和跟踪对象、确定其位置并对它们进行实时分类的自动化系统，对视频帧中的实时对象检测和跟踪的需求日益增加。 在这…
阅读更多...
疫情防控【并查集，离线查询，依次删除节点逆向转化为逐渐添上节点】

疫情防控【并查集，离线查询，依次删除节点逆向转化为逐渐添上节点】

5 5 3 1 2 1 3 1 5 2 5 3 4 4 3 1 3 1 4 2 3 5 3 3 4 2 3 3 5 1 3 2 3 2 5 3 4输出样例: 1 2 3#include <bits/stdc.h> using namespace std; const int M1e35; const int N2e55; vector<int> e[N]; #define pii pair<int,int> vector<pii> query[M];…
阅读更多...
day26 求一段连续子数组之和的最大值

day26 求一段连续子数组之和的最大值

题目描述 方法一&#xff1a;超出时间限制 思路&#xff1a;选一个起点&#xff0c;选一个终点&#xff0c;计算起点到终点的和&#xff1b;求max&#xff1b; 起点几种可能&#xff1a;0 到 size -1; 终点&#xff1a; 起点 到 size -1&#xff1b; int maxSubArray(int* nu…
阅读更多...
【网站 全选和单选】js 实现-点击全选按钮时，所有的按钮都会被选中或取消选中。

【网站 全选和单选】js 实现-点击全选按钮时，所有的按钮都会被选中或取消选中。

要实现的效果如图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport…
阅读更多...
【基本绘图注释函数】——MatLab画图

【基本绘图注释函数】——MatLab画图

目录索引 title&#xff1a;ylable&#xff1a;legend&#xff1a; title&#xff1a; 在绘图中添加标签。此类函数的输入是一个字符串。MATLAB 中的字符串是用双引号 (") 引起来的。 上面一部分画图代码这里省略 title("Sample Mass")ylable&#xff1a; 为y轴…
阅读更多...
BUUCTF-EasyLogin

BUUCTF-EasyLogin

这是一道 Node.js 语言的题目&#xff0c;在此记录我在做这道题的思考过程。 这道题考的是 CVE-2022-23540. 简单测试 进入题目环境&#xff1a; 一个登录页面&#xff0c;由题目的名称 EasyLogin&#xff0c;我猜测这道题是身份认证缺陷的问题。不过&#xff0c;还是下意识测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023