手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS

news2024/9/21 22:27:25
技术栈springboot3+hutool-all+oshi-core+Vue3+vite+TinyVue+Echarts+TailwindCSS
软件版本
IDEAIntelliJ IDEA 2022.2.1
JDK17
Spring Boot3.1
hutool-all5.8.18
oshi-core6.4.1
Vue35.0.10
vite5.0.10
axios1.6.7
echarts5.4.3

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

TinyVue 是一个基于 Vue 的 UI 组件库，可以同时支持 Vue 2.0 和 Vue 3.0。

浏览器兼容性 TinyVue 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器

搭建 Vite 项目

创建 Vite 工程

yarn create vite
# 或
npm init vite@latest

Vite 工程之后进入到工程目录，下载依赖和启动工程

yarn
# 或
npm install

启动项目

yarn dev
# 或
npm run dev

Vue安装使用 TinyVue 组件

yarn add @opentiny/vue@3
#或
npm install @opentiny/vue@3

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': { ...process.env }
  }
})

添加components

<template>
  <div>
    <tiny-grid
      ref="basicGridRef"
      seq-serial
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
      :data="tableData"
    >
      <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column type="selection" width="50"></tiny-grid-column>
      <tiny-grid-column
        field="name"
        show-overflow
        title="名称"
        :editor="{ component: 'input', autoselect: true }"
      ></tiny-grid-column>
      <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
      <tiny-grid-column
        field="introduction"
        title="公司简介"
        :editor="{ component: 'input', autoselect: true }"
        show-overflow
      ></tiny-grid-column>
    </tiny-grid>
    <tiny-pager
      :current-page="custPager.currentPage"
      :page-size="custPager.pageSize"
      :total="custPager.total"
      :page-sizes="[5, 10, 20, 50]"
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="total, prev, pager, next, jumper, sizes"
    ></tiny-pager>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager as TinyPager } from '@opentiny/vue'

const custPager = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
})
const tableData = ref([])
const mockData = ref([
  {
    id: '1',
    name: 'GFD科技YX公司',
    userId: 421000103624183,
    area: '华东区',
    province: '福建省',
    city: '福州',
    contact: '许生',
    telephone: '1234567890',
    address: '福州',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 800,
    createdDate: '2014-04-30 00:56:00',
    boole: false,
    assets: '1000000',
    rate: 0.9
  },
  {
    id: '2',
    name: 'WWW科技YX公司',
    userId: 421000103624183,
    area: '华南区',
    province: '广东省',
    city: '深圳',
    contact: '朱生',
    telephone: '1234567890',
    address: '深圳福田区',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 300,
    createdDate: '2016-07-08 12:36:22',
    boole: true,
    assets: '1500000',
    rate: 0.7
  },
  {
    id: '3',
    name: 'RFV有限责任公司',
    userId: 441047913162396,
    area: '华南区',
    province: '广东省',
    city: '中山',
    contact: '秦生',
    telephone: '1234567890',
    address: '中山市',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 1300,
    createdDate: '2014-02-14 14:14:14',
    boole: false,
    assets: '1500000',
    rate: 0.6
  },
  {
    id: '4',
    name: 'TGB科技YX公司',
    userId: 702973890055088,
    area: '华东区',
    province: '福建省',
    city: '龙岩',
    contact: '周生',
    telephone: '1234567890',
    address: '龙岩',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 360,
    createdDate: '2013-01-13 13:13:13',
    boole: true,
    assets: '1200000',
    rate: 0.5
  },
  {
    id: '5',
    name: 'YHN科技YX公司',
    userId: 702973890055088,
    area: '华南区',
    province: '广东省',
    city: '韶关',
    contact: '郑生',
    telephone: '1234567890',
    address: '韶关',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 810,
    createdDate: '2012-12-12 12:12:12',
    boole: true,
    assets: '1500000',
    rate: 0.6
  },
  {
    id: '6',
    name: 'WSX科技YX公司',
    userId: 441047913162396,
    area: '华中区',
    province: '湖北省',
    city: '黄冈',
    contact: '陈生',
    telephone: '1234567890',
    address: '黄冈',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 800,
    createdDate: '2011-11-11 11:11:11',
    boole: true,
    assets: '1500000',
    rate: 0.6
  },
  {
    id: '7',
    name: 'KBG物业YX公司',
    userId: 421000103624183,
    area: '华中区',
    province: '湖北省',
    city: '赤壁',
    contact: '王二',
    telephone: '1234567890',
    address: '赤壁',
    introduction:
      '公司治理结构严格按现代企业制度设计，管理机构设置合理，制度完善，各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的80%以上，具有雄厚的资金实力和高度专业化的项目开发管理能力，是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',
    employees: 400,
    createdDate: '2016-04-30 23:56:00',
    boole: false,
    assets: '2000000',
    rate: 0.7
  },
  {
    id: '8',
    name: '深圳市福德宝网络技术YX公司',
    userId: 421000103624183,
    address: '厦门岛内',
    area: '华东区',
    assets: '2000000',
    boole: true,
    city: '厦门',
    contact: '李四',
    createdDate: '2016-06-03 13:53:25',
    employees: 540,
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    province: '福建省',
    rate: 0.6,
    telephone: '1234567890'
  },
  {
    id: '9',
    name: 'UJM有限责任公司',
    userId: 421000103624183,
    area: '华南区',
    province: '广西省',
    city: '南宁',
    contact: '段生',
    telephone: '1234567890',
    address: '南宁',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 750,
    createdDate: '2014-04-21 11:56:00',
    boole: true,
    assets: '1500000',
    rate: 0.6
  },
  {
    id: '10',
    name: 'IKA有限责任公司',
    userId: 421000103624183,
    area: '华南区',
    province: '广西省',
    city: '北海',
    contact: '谭生',
    telephone: '1234567890',
    address: '北海',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 400,
    createdDate: '2014-09-30 00:56:00',
    boole: false,
    assets: '110000',
    rate: 0.11
  },
  {
    id: '11',
    name: 'TIG管理YX公司',
    userId: 421000103624183,
    area: '华南区',
    province: '广西省',
    city: '桂林',
    contact: '陈生',
    telephone: '1234567890',
    address: '桂林',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 900,
    createdDate: '2014-11-30 00:56:00',
    boole: true,
    assets: '120000',
    rate: 0.13
  },
  {
    id: '12',
    name: 'GGT科技YX公司',
    userId: 441047913162396,
    area: '西南区',
    province: '云南省',
    city: '昆明',
    contact: '周生',
    telephone: '1234567890',
    address: '昆明',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 500,
    createdDate: '2014-03-20 02:50:00',
    boole: false,
    assets: '100000',
    rate: 0.1
  },
  {
    id: '13',
    name: 'YYSYX公司',
    userId: 441047913162396,
    area: '西南区',
    province: '云南省',
    city: '西双版纳',
    contact: '廖生',
    telephone: '1234567890',
    address: '西双版纳',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 985,
    createdDate: '2015-07-28 11:37:00',
    boole: true,
    assets: '120000',
    rate: 0.12
  },
  {
    id: '14',
    name: 'VBN有限责任公司',
    userId: 421000103624183,
    area: '西南区',
    province: '云南省',
    city: '大理',
    contact: '欧生',
    telephone: '1234567890',
    address: '大理',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 598,
    createdDate: '2014-04-30 00:56:00',
    boole: false,
    assets: '220000',
    rate: 0.22
  },
  {
    id: '15',
    name: '深圳万众科技YX公司',
    userId: 441047913162396,
    area: '华中区',
    province: '湖北省',
    city: '武汉',
    contact: '阮生',
    telephone: '1234567890',
    address: '武汉',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 725,
    createdDate: '2014-04-30 00:56:00',
    boole: true,
    assets: '2500000',
    rate: 0.8
  },
  {
    id: '16',
    name: '深圳云创信息技术YX公司',
    userId: 421000103624183,
    area: '华中区',
    province: '湖北省',
    city: '十堰',
    contact: '邓生',
    telephone: '1234567890',
    address: '十堰',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 632,
    createdDate: '2014-07-30 02:44:00',
    boole: true,
    assets: '3000000',
    rate: 0.85
  },
  {
    id: '17',
    name: '深圳明乐餐饮管理YX公司',
    userId: 441047913162396,
    area: '华中区',
    province: '湖北省',
    city: '潜江',
    contact: '罗生',
    telephone: '1234567890',
    address: '潜江',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 246,
    createdDate: '2013-04-30 00:56:00',
    boole: false,
    assets: '2000000',
    rate: 0.7
  },
  {
    id: '18',
    name: '珠海忆兰居科技YX公司',
    userId: 441047913162396,
    area: '华南区',
    province: '广东省',
    city: '珠海',
    contact: '黄生',
    telephone: '1234567890',
    address: '珠海香洲区',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 592,
    createdDate: '2014-05-30 01:00:00',
    boole: false,
    assets: '1800000',
    rate: 0.66
  },
  {
    id: '19',
    name: '珠海万家医疗科技YX公司',
    userId: 441047913162396,
    area: '华南区',
    province: '广东省',
    city: '广州',
    contact: '刘生',
    telephone: '1234567890',
    address: '广州天河区',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 851,
    createdDate: '2014-04-29 08:56:00',
    boole: false,
    assets: '100000',
    rate: 0.1
  },
  {
    id: '20',
    name: '东莞亿聚礼品YX公司',
    userId: 421000103624183,
    area: '华中区',
    province: '湖北省',
    city: '襄阳',
    contact: '范生',
    telephone: '1234567890',
    address: '襄阳',
    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 394,
    createdDate: '2014-04-28 10:56:00',
    boole: true,
    assets: '400000',
    rate: 0.4
  }
])

fetchData()

function currentChange(current) {
  custPager.value.currentPage = current
  fetchData()
}

function sizeChange(size) {
  custPager.value.pageSize = size
  fetchData()
}

function fetchData() {
  getData({ page: custPager.value }).then(({ result, page }) => {
    tableData.value = result
    custPager.value.total = page.totalRows
  })
}

function getData({ page }) {
  return new Promise((resolve) => {
    // 此处为用户自定义的服务端分页，排序，过滤服务

    setTimeout(() => {
      const startIndex = (page.currentPage - 1) * page.pageSize
      const allData = mockData.value
      const data = {
        result: allData.slice(startIndex, startIndex + page.pageSize),
        page: Object.assign({}, page, { totalRows: allData.length })
      }

      resolve({ result: data.result, page: data.page })
    }, 500)
  })
}
</script>

App.vue 文件
引入pagedemo.vue

import pagedemo from './components/pagedemo.vue'

使用
<pagedemo/>

效果

案例内存使用率水滴球

TinyVue+echarts

实现内存使用率水滴球，并设置通知阈值弹窗

效果

代码

<template>
  <div style="text-align:center">
    内存使用率
  </div>
  <div ref="target" class="w-full h-full hover:border-lime-200 hover:border-2"></div>
</template>

<script setup>
import { Button as TinyButton, Notify } from '@opentiny/vue'

import { ref ,onMounted ,watch } from 'vue'
import * as echarts from 'echarts'
import "echarts-liquidfill";

//需安装 cnpm i echarts-liquidfill
const props = defineProps({
  MemoryData: {
    type: Object,
    required: true
  }
})

var value = 0.54;
// console.log(props.MemoryData)
console.log(props.MemoryData.data.usageRate)
let hChart = null;
//1、初始化echarts实例
const target = ref(null)
onMounted(() => {
  hChart=echarts.init(target.value)
   
  renderChart()
})
//监听器
watch(()=> props.MemoryData,() => {
  renderChart()
  if (props.MemoryData.data.usageRate >= 80) {
        baseClick80()
    } 
    if (props.MemoryData.data.usageRate >= 95) {
      baseClick95()
    }

})



//2、构建option配置对象
const renderChart = () => {
  const options ={
        name: "CPU使用率",
        // backgroundColor: "#000", //背景色
        title: {
          text: props.MemoryData.data.usageRate + "%",
          textStyle: {
            fontSize: 20,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "48%",
        },
        series: [
          {
            type: "liquidFill", //配置echarts图类型
            radius: "60%",
            center: ["50%", "50%"],
            //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
            data: [0.5, 0.5],  //设置波浪的值 
            //waveAnimation:false, //静止的波浪
            backgroundStyle: {
              borderWidth: 1,
              color: "transparent",//水球图内部背景色
            },
            outline: { 
              borderDistance: 10, 
              itemStyle: {
                borderWidth: 4,
                borderColor: "#5acef2",
              },
            },
            color: [ //波浪颜色
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(6, 187, 112, 0.3)", //下
                  },
                  {                                    
                    offset: 0,
                    color: "rgba(11, 201, 199, 0.3)",
                  },
                ],
                globalCoord: false,
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(6, 187, 112, 1)", //下
                  },
                  {
                    offset: 0,
                    color: "rgba(11, 201, 199, 1)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                formatter: "",
              },
            },
          },
          
        ],
      };
//3、通过 实例.setOptions(option)
  hChart.setOption(options)
}


function baseClick80() {
  Notify({
    type: 'info',
    title: '信息',
    message: '内存使用率大于80',
    position: 'bottom-right',
    duration: 5000,
    
  })
}

function baseClick95() {
  Notify({
    type: 'warning',
    title: '警告',
    message: '内存使用率大于95',
    position: 'bottom-right',
    duration: 5000,
    
  })
}

</script>
<style>
</style>

notify基本用法

<template>
  <div class="content">
    <tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
  </div>
</template>

<script lang="jsx">
import { Notify, Button } from '@opentiny/vue'

export default {
  components: {
    TinyButton: Button
  },
  methods: {
    handleClick() {
      Notify({
        type: 'info',
        title: (h, params) => <h4>通知消息的标题</h4>,
        message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
        position: 'top-right',
        duration: 5000,
        customClass: 'my-custom-cls'
      })
    }
  }
}
</script>

API

名称类型默认值说明
closeIconComponentIconClose关闭图标组件对象
customClassstring--自定义样式类
debounceDelaynumber0启用防抖
durationnumber4500自动关闭延时毫秒数
messageINotifyMessage--通知消息文本，可用 jsx 定制
position'top-right' | 'bottom-right''bottom-right'通知显示位置
showClosebooleanTRUE是否显示关闭按钮
showIconbooleanTRUE是否显示类型图标
statusIconComponentIconInfoSolid类型图标组件对象
titleINotifyTitle--通知消息标题，可用 jsx 定制
type'info' | 'success' | 'warning' | 'error''info'通知消息类型
verticalOffsetnumber | string16设置垂直方向偏离距离,单位 px

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

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

相关文章

【网络编程】okhttp深入理解

【网络编程】okhttp深入理解

newCall 实际上是创建了一个 RealCall 有三个参数&#xff1a;OkHttpClient&#xff08;通用配置&#xff0c;超时时间等&#xff09; Request(Http请求所用到的条件&#xff0c;url等) 布尔变量forWebSocket&#xff08;webSocket是一种应用层的交互方式&#xff0c;可双向交互…
阅读更多...
PolarDN MISC做题笔记

PolarDN MISC做题笔记

cat flag 使用01打开flag.png,发现图片尾部有padding的数据。D0 CF 11 E0 A1 B1 1A E1为office2007以前版本的文件头。将其另存为flag.doc,打开发现提示需要密码。&#xff08;可以注意到&#xff1a;D0CF11E0非常类似DOCFILE&#xff09; 使用john的office2john.py 提取hash …
阅读更多...
React基础-webpack+creact-react-app创建项目

React基础-webpack+creact-react-app创建项目

学习视频&#xff1a;学习视频 2节&#xff1a;webpack工程化创建项目 2.1.webpack工程化工具&#xff1a;vite/rollup/turbopak; 实现组件的合并、压缩、打包等&#xff1b; 代码编译、兼容、校验等&#xff1b; 2.2.React工程化/组件开发 我们可以基于webpack自己去搭建…
阅读更多...
android studio模拟器不能打开

android studio模拟器不能打开

Andriod:The selected AVD is currently running in the Emulator. Please exit the emulator instance… 1.点击 2.删除下面文件 3.重新打开即可 参考
阅读更多...
蓝桥杯倒计时49天！前缀和的拓展

蓝桥杯倒计时49天！前缀和的拓展

倒计时49天&#xff01; 前缀和的拓展——压缩矩阵 最大子段和 题目描述 给出一个长度为 n n n 的序列 a a a&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 n n n。 第二行有 n n n 个整数&#xff0…
阅读更多...
精美的WordPress外贸独立站模板

精美的WordPress外贸独立站模板

WordPress外贸独立站主题 简洁实用的WordPress外贸独立站主题&#xff0c;适合时尚服装行业搭建wordpress企业官网使用。 https://www.jianzhanpress.com/?p4999 简洁wordpress独立站模板 绿色精美、简洁大气的wordpress外贸独立网站模板 https://www.jianzhanpress.com/?…
阅读更多...
【力扣hot100】刷题笔记Day10

【力扣hot100】刷题笔记Day10

前言 一鼓作气把链表给刷完&#xff01;&#xff01;中等题困难题冲冲冲啊啊啊&#xff01; 25. K 个一组翻转链表 - 力扣&#xff08;LeetCode&#xff09; 模拟 class Solution:def reverseKGroup(self, head: Optional[ListNode], k: int) -> Optional[ListNode]:# 翻转…
阅读更多...
跨越千年医学对话：用AI技术解锁中医古籍知识，构建能够精准问答的智能语言模型，成就专业级古籍解读助手（LLAMA）

跨越千年医学对话：用AI技术解锁中医古籍知识，构建能够精准问答的智能语言模型，成就专业级古籍解读助手（LLAMA）

跨越千年医学对话&#xff1a;用AI技术解锁中医古籍知识&#xff0c;构建能够精准问答的智能语言模型&#xff0c;成就专业级古籍解读助手&#xff08;LLAMA&#xff09; 介绍&#xff1a;首先在 Ziya-LLaMA-13B-V1基线模型的基础上加入中医教材、中医各类网站数据等语料库&am…
阅读更多...
day16_ListSet课后练习题 - 参考答案

day16_ListSet课后练习题 - 参考答案

文章目录 day16_课后练习题第1题第2题第3题第4题第5题第6题第7题第8题 day16_课后练习题 第1题 案例&#xff1a; ​ 1、用一个String[]数组存点数 ​ 2、用一个String[]数组存花色 ​ 3、用一个String[]数组存大王、小王 ​ 4、用上面的数组&#xff0c;生成一副扑克牌 …
阅读更多...
【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(一)

【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(一)

【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(一) 大家好 我是寸铁&#x1f44a; 总结了一篇刷题关于树、dfs、bfs、回溯、递归的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 105. 从前序与中序遍历序列构造二叉树 模拟分析图 代码实现 /*** Definition for a binary tre…
阅读更多...
Android中Transition过渡动画的简单使用

Android中Transition过渡动画的简单使用

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 一、布局xml文件代码如下&#xff1a; <?xml version"1.0" encoding&quo…
阅读更多...
websocket与Socket的区别

websocket与Socket的区别

概念讲解 网络&#xff1a;通俗意义上&#xff0c;也就是连接两台计算器 五层网络模型&#xff1a;应用层、传输层、网络层、数据链路层、物理层 应用层 (application layer)&#xff1a;直接为应用进程提供服务。应用层协议定义的是应用进程间通讯和交互的规则&#xff0c;不…
阅读更多...
【结合OpenAI官方文档】解决Chatgpt的API接口请求速率限制

【结合OpenAI官方文档】解决Chatgpt的API接口请求速率限制

OpenAI API接口请求速率限制 速率限制以五种方式衡量&#xff1a;RPM&#xff08;每分钟请求数&#xff09;、RPD&#xff08;每天请求数&#xff09;、TPM&#xff08;每分钟令牌数&#xff09;、TPD&#xff08;每天令牌数&#xff09;和IPM&#xff08;每分钟图像数&#x…
阅读更多...
网页403错误（Spring Security报异常 Encoded password does not look like BCrypt）

网页403错误（Spring Security报异常 Encoded password does not look like BCrypt）

这个错误通常表现为"403 Forbidden"或"HTTP Status 403"&#xff0c;它指的是访问资源被服务器理解但拒绝授权。换句话说&#xff0c;服务器可以理解你请求看到的页面&#xff0c;但它拒绝给你权限。 也就是说很可能测试给定的参数有问题&#xff0c;后端…
阅读更多...
【rust】vscode下rust-analyzer和Rust Test Lens的Lens

【rust】vscode下rust-analyzer和Rust Test Lens的Lens

背景 一个粉丝问&#xff1a; 我编辑的launch.json为什么只在按F5的时候工作 按这个debug按钮就不工作&#xff1f; 那在哪改这个插件的配置文档&#xff1f;我一直用的F5 今天上午才注意到这个问题&#xff0c;比如怎么改程序的命令行参数&#xff0c;我意思是如果我非要用…
阅读更多...
如何使用逻辑回归处理多标签问题？

如何使用逻辑回归处理多标签问题？

逻辑回归处理多分类 1、背景描述2、One vs One 1、背景描述 逻辑回归本身只能用于二分类问题&#xff0c;如果实际情况是多分类的&#xff0c;那么就需要对模型进行一些改动。下面介绍三种常用的将逻辑回归用于多分类的方法 2、One vs One OvO&#xff08;One vs One&#xff…
阅读更多...
【嵌入式学习】QT-Day3-Qt基础

【嵌入式学习】QT-Day3-Qt基础

1> 思维导图 https://lingjun.life/wiki/EmbeddedNote/20QT 2> 完善登录界面 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后…
阅读更多...
igolang学习3，golang 项目中配置gin的web框架

igolang学习3，golang 项目中配置gin的web框架

1.go 初始化 mod文件 go mod init gin-ranking 2.gin的crm框架 go get -u github.com/gin-gonic/gin 3.go.mod爆红解决
阅读更多...
C2-1.4（L1,L2）正则化

C2-1.4（L1,L2）正则化

C2-1.4&#xff08;L1,L2&#xff09;正则化 参考书籍 1 正则化的概念 正则化(Regularization) 是机器学习中对原始损失函数引入额外信息&#xff0c;以便防止过拟合和提高模型泛化性能的一类方法的统称。也就是目标函数变成了原始损失函数额外项&#xff0c;常用的额外项一般…
阅读更多...
Oladance、南卡、韶音开放式耳机怎么样？3个月真实对比测评

Oladance、南卡、韶音开放式耳机怎么样？3个月真实对比测评

​哪款开放式耳机好用&#xff1f;我亲自体验并评测了市场上流行的三个品牌的开放式耳机&#xff1a;Oladance、南卡、韶音。通过深入测试多维度性能表现&#xff0c;确保你能够远离劣质产品可能带来的问题。我想提醒大家&#xff0c;如果选错耳机可能会影响到音乐的真实还原和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023