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

news2024/11/25 20:43:28

一、前言

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>

六、仓库地址（待开放）

七、相关文章

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

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

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

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

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

相关文章

云原生日志Agent/Aggregator

云原生日志Agent/Aggregator

Loggie是一个基于Golang的轻量级、高性能、云原生日志采集Agent和中转处理Aggregator&#xff0c;支持多Pipeline和组件热插拔&#xff0c;提供了&#xff1a; ● 一栈式日志解决方案&#xff1a; 同时支持日志中转、过滤、解析、切分、日志报警等 ● 云原生的日志形态&#xf…
阅读更多...
全网独家：修改CoreDNS禁用ipv6解析后的查询反馈信息

全网独家：修改CoreDNS禁用ipv6解析后的查询反馈信息

CoreDNS是用Go开发的&#xff0c;可以配置多种插件来扩展其功能&#xff0c;非常灵活高效&#xff0c;它是Kubernetes的默认DNS服务器。笔者的平台采用CoreDNS来作单独的高并发域名解析服务器&#xff0c;在禁用ipv6解析后应用侧遇到反馈信息识别问题&#xff0c;本例全网独家提…
阅读更多...
MSP430F5529单片机，万年历，闹钟，数字时钟，温湿度dht11，蜂鸣器音乐

MSP430F5529单片机，万年历，闹钟，数字时钟，温湿度dht11，蜂鸣器音乐

文章目录 功能硬件连接实物程序 功能 功能1 万年历显示2 按键修改时间3 按键修改闹钟4 闹钟到达 蜂鸣器鸣叫10秒自动关闭 闹钟是音乐5 温湿度显示6 温度到达28度以上蜂鸣器鸣叫 采用单片机内部的RTC模块走时。 按键1 切换选择年月日时分秒&#xff0c;靠按键1退出时间不会保存…
阅读更多...
Openlayers实战：加载google地图

Openlayers实战：加载google地图

google地图在业界一直是标杆的存在， 其zoomlevel超级大，可看到非常精细的程度。 Openlayers中如何加载谷歌地图呢？同样是XYZ的挂载方式，根据参数的不同，可以显示不同状态的谷歌地图，如果矢量地图，瓦片遥感图片等。 效果图 源代码 /* * @Author: 大剑师兰特（xiaozhuan…
阅读更多...
36. 合并两个排序的链表

36. 合并两个排序的链表

目录 链接&#xff1a; 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 链接&#xff1a; 链接 题目&#xff1a; 输入两个递增排序的链表&#xff0c;合并这两个链表并使新链表中的结点仍然是按照递增排序的。 数据范围 链表长度 [0,500][0,500]。 样例 输入&#x…
阅读更多...
第五章 爬虫小程序-实例43-获取网页内容

第五章 爬虫小程序-实例43-获取网页内容

1、准备工作 用Python编写的访问网页的程序中&#xff0c;有很多是调用 requests 库模块中的函数来进行操作&#xff0c;这个库模块把网页请求和操作等多项功能进行了高度封装&#xff0c;使其可以轻而易举完成浏览器的许多操作。 requests库是第三方模块&#xff0c;需要进行…
阅读更多...
【算法与数据结构】239、LeetCode滑动窗口最大值

【算法与数据结构】239、LeetCode滑动窗口最大值

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;这道题我们如果用暴力破解法需要 O ( n ∗ k ) O(n*k) O(n∗k)的复杂度。思索再三&#xff0c;我们需要…
阅读更多...
electron-vue 台称串口对接 SerialPort

electron-vue 台称串口对接 SerialPort

大致流程 1.首先找一个串口工具&#xff08;sscom5.12.1&#xff09;试试读取串口是否成功连上&#xff1b; 2.创建electron-vue的项目&#xff1b; 3.安装依赖&#xff0c;调整版本&#xff0c;启动项目&#xff1b;&#xff08;在electron中使用串口_electron 串口_Jack_K…
阅读更多...
Eclipse控制台输出log4j日志乱码解决

Eclipse控制台输出log4j日志乱码解决

1. 出现乱码可能是编码格式对应不起来&#xff0c;主要是Eclipse控制台编码和log4j编码的匹配 log4j.properties 主要是查看这两个地方编码一致不一致&#xff0c;如果不一致则手动更改成一致编码&#xff0c;GBK或UTF-8
阅读更多...
Ribbon 负载均衡服务调用

Ribbon 负载均衡服务调用

文章目录 1 SpringCloud Load Balance2 总结:3 Ribbon工作流程&#xff1a;4 自定义Ribbon 负载均衡算法&#xff1a;4.1 iRule接口&#xff1a;4.2 Ribbon自带的负载均衡算法&#xff1a;4.3 负载均衡算法替代&#xff1a;4.3.1、在非启动类包及子包下创建配置类4.3.2、定义4.…
阅读更多...
LayUI动态选项卡的使用

LayUI动态选项卡的使用

目录 一、Tab选项卡 1.什么是Tab选项卡 2.Tab选项卡的作用 二、Tab选项卡的详细使用步骤 1.参考官网&#xff0c;选择自己喜欢的选项卡 ​ 2.将静态选项卡转换成动态选项卡 3.将选项卡的标签名变成实际菜单名 4.重名选项卡不能二次打开 5.切换到指定选项卡 6.iframe的…
阅读更多...
Python示例解释观察者模式

Python示例解释观察者模式

观察者模式是一种常用的设计模式&#xff0c;用于在对象之间建立一种一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。下面通过一个简单的例子来解释观察者模式的概念。 假设我们有一个名为"主题"&a…
阅读更多...
神经网络万能近似定理探索与实验

神经网络万能近似定理探索与实验

神经网络万能近似定理探索与实验 今天&#xff0c;我们来做神经网络万能近似定理的探索与实验。关于万能近似定理呢&#xff0c;就是说&#xff0c;对这个神经元的输出进行非线性激活函数处理&#xff0c;单层的神经网络就可以拟合任何一个函数。 下面先看我们搭建的第一个网…
阅读更多...
docker部署达梦数据库

docker部署达梦数据库

一、下载安装包 安装步骤&#xff1a; 先跟着网页走 注&#xff1a;第二步导入安装包&#xff0c;如果是在自己电脑上&#xff0c;就不一定要拷贝到/opt目录下&#xff0c;在安装包所在目录地址栏输入cmd&#xff0c;进入终端进行操作即可 操作到正常打印日志&#xff08;如…
阅读更多...
java项目之房屋租赁系统(ssm+mysql+jsp)

java项目之房屋租赁系统(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的房屋租赁系统。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&…
阅读更多...
尚硅谷Docker实战教程-笔记14【高级篇，Docker容器监控之CAdvisor+InfluxDB+Granfana、Docker终章总结】

尚硅谷Docker实战教程-笔记14【高级篇，Docker容器监控之CAdvisor+InfluxDB+Granfana、Docker终章总结】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷Docker实战教程&#xff08;docker教程天花板&#xff09;_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01【基础篇&#xff0c;Docker理念简介、官网介绍、平台入门图解、平台架构图解】…
阅读更多...
centos7.9 连续登录失败处理

centos7.9 连续登录失败处理

如果有人恶意破解你的服务器&#xff0c;下面的操作可以起到一定的作用&#xff0c;连续登录失败锁定账户一段时间&#xff0c;让攻击者的成本增加&#xff0c;从而降低服务器被恶意破解的风险。 参考博客 https://blog.csdn.net/hjxloveqsx/article/details/129004832 https…
阅读更多...
MyBatis 中如何使用分页

MyBatis 中如何使用分页

MyBatis 中如何使用分页 在实际的项目开发中&#xff0c;我们经常需要对数据库中的数据进行分页查询&#xff0c;以提高数据查询的效率和用户体验。MyBatis 是一种流行的 Java 持久层框架&#xff0c;它提供了多种分页查询的方式&#xff0c;本文将介绍其中常用的两种方式&…
阅读更多...
MySQL数据库详解

MySQL数据库详解

文章目录 引言1. SQL1.1 SQL通用语法1.2 SQL分类1.3 DDL1.3.1 数据库操作1.3.2 表操作1.3.2.1 表操作-查询创建1.3.2.2 表操作-数据类型1.3.2.3 表操作-修改1.3.2.3 表操作-删除 1.4 DML1.4.1 添加数据1.4.2 修改数据1.4.3 删除数据 1.5 DQL1.5.1 基本语法1.5.2 基础查询1.5.3 …
阅读更多...
车载以太网之SOME/IP-SD专题篇

车载以太网之SOME/IP-SD专题篇

前言 首先，请问大家几个小小问题，你清楚： 你知道什么是SOME/IP SD吗？SOME/IP-SD报文是如何发送与接收的呢？SOME/IP-SD 存在哪几种Entry Type呢？SOME/IP-SD内部状态机转换又是如何？今天，我们就来一起探索并回答这些问题。为了便于大家理解，以下是本文的主题大纲： 目录…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023