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

技术栈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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AndroidStudio 2024-2-21 Win10/11最新安装配置(Kotlin快速构建配置,gradle镜像源)

AndroidStudio 2024-2-21 Win10/11最新安装配置(Kotlin快速构建配置,gradle镜像源)

AndroidStudio 2024 Win10/11最新安装配置 教程目的&#xff1a; (从安装到卸载) &#xff0c;针对Kotlin开发配置&#xff0c;gradle-8.2-src/bin下载慢&#xff0c;以及Kotlin构建慢的解决 好久没玩AS了,下载发现装个AS很麻烦,就觉得有必要出个教程了(就是记录一下:嘻嘻) 因…
阅读更多...
python + selenium/appnium

python + selenium/appnium

Selenium 的自动化原理: selenium 自动化流程: 自动化程序调用Selenium 客户端库函数&#xff08;比如点击按钮元素&#xff09;客户端库会发送Selenium 命令 给浏览器的驱动程序浏览器驱动程序接收到命令后 ,驱动浏览器去执行命令浏览器执行命令浏览器驱动程序获取命令执行的…
阅读更多...
封装(encapsulation)

封装(encapsulation)

封装[encapsulation] 封装介绍封装好处封装的实现步骤&#xff08;三步&#xff09;入门案例封装与构造器 封装介绍 封装就是把抽象的数据[属性]和对数据的操作[方法]封装在一起&#xff0c;数据被保护在内部&#xff0c;程序的其它部分只有通过被授权的操作[方法]&#xff0c;…
阅读更多...
每天一个知识点 - 如何快速熟悉后端项目

每天一个知识点 - 如何快速熟悉后端项目

入职一家新公司的时候&#xff0c;不可避免的就是接触到新公司的项目&#xff0c;有些项目一启动就是好几年&#xff0c;业务功能极其复杂&#xff0c;下面我总结几个方法让大家快速熟悉后端项目&#xff08;图文结合&#xff09; 用例图简析 用例是系统中的一个功能单元&…
阅读更多...
智慧应急：提升灾害防范与应对能力的关键之举

智慧应急：提升灾害防范与应对能力的关键之举

目录 一、引言 二、智慧应急的内涵与特点 三、智慧应急在灾害防范中的应用 1、风险评估与监测预警 2、应急预案制定与演练 3、灾害风险宣传与教育 四、智慧应急在灾害应对中的应用 1、快速响应与决策支持 2、资源优化与调配 3、灾后恢复与重建 五、智慧应急面临的挑…
阅读更多...
运维SRE-19 网站Web中间件服务-http-nginx

运维SRE-19 网站Web中间件服务-http-nginx

Ans自动化流程 1.网站集群核心协议&#xff1a;HTTP 1.1概述 web服务&#xff1a;网站服务&#xff0c;网站协议即可. 协议&#xff1a;http协议,https协议 服务&#xff1a;Nginx服务&#xff0c;Tengine服务....1.2 HTTP协议 http超文本传输协议&#xff0c;负责数据在网站…
阅读更多...
NXP实战笔记（七）：S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

NXP实战笔记（七）：S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

目录 1、概述 2、输入捕获SDK配置 2.1、SAIC中断方式 2.2、IPWM或者IPM 1、概述 输入捕获&#xff0c;可以抓取高电平时间、低电平时间、占空比、周期、边沿检测与回调函数、边沿计数&#xff08;ABZ解码&#xff09;、时间戳、唤醒中断。 记录一下根据Emios模块实现上述部分…
阅读更多...
应对电脑重新分区文件消失：预防措施、常见成因与恢复关键要点

应对电脑重新分区文件消失：预防措施、常见成因与恢复关键要点

电脑重新分区文件不见了是一个常见的问题&#xff0c;通常发生在用户对硬盘进行重新分区、格式化或操作系统重装过程中&#xff0c;可能导致已存在的文件和数据暂时不可见或永久丢失。 **预防文件丢失的方法&#xff1a;** 1. **提前备份**: 在进行任何重大磁盘操作前&#xff…
阅读更多...
3分钟看懂设计模式01：策略模式

3分钟看懂设计模式01：策略模式

一、什么是策略模式 定义一些列算法类&#xff0c;将每一个算法封装起来&#xff0c;并让它们可以互相替换。 策略模式让算法独立于使用它的客户而变化&#xff0c;是一种对象行为型模式。 以上是策略模式的一般定义&#xff0c;属于是课本内容。 在没有真正理解策略模式之…
阅读更多...
数据结构与算法——排序算法

数据结构与算法——排序算法

目录 文章目录 前言 一.排序的基本概念 1.什么是就地排序 2.什么是内部排序和外部排序 3.什么是稳定排序 4.判定一个排序算法的是稳定的 二.插入排序算法 1.直接插入排序 1.1基本思想 1.2复杂度 1.3稳定性 1.4代码演示 2.折半插入排序 2.1基本思想 2.2性能 3.…
阅读更多...
AIGC 实战：如何使用 Docker 在 Ollama 上离线运行大模型（LLM）

AIGC 实战：如何使用 Docker 在 Ollama 上离线运行大模型（LLM）

Ollama简介 Ollama 是一个开源平台&#xff0c;用于管理和运行各种大型语言模型 (LLM)&#xff0c;例如 Llama 2、Mistral 和 Tinyllama。它提供命令行界面 (CLI) 用于安装、模型管理和交互。您可以使用 Ollama 根据您的需求下载、加载和运行不同的 LLM 模型。 Docker简介 D…
阅读更多...
【Unity】Unity与安卓交互

【Unity】Unity与安卓交互

问题描述 Unity和安卓手机进行交互&#xff0c;是我们开发游戏中最常见的场景。本教程将从一个简单的例子来演示一下。 本教程需要用到Android Studio2021.1.1 1.Android Studio新建一个工程 2.选择Empty Activity 然后点击Next 3.点击Finish完成创建 4.选择File-New-New Mo…
阅读更多...
#LLM入门|Prompt#1.3_迭代优化_Iterative

#LLM入门|Prompt#1.3_迭代优化_Iterative

有了任务想法后&#xff0c;可以先编写初版 Prompt&#xff0c;注意清晰明确并给模型充足思考时间。运行后检查结果&#xff0c;如果不理想&#xff0c;则分析 Prompt 不够清楚或思考时间不够等原因&#xff0c;做出改进&#xff0c;再次运行。如此循环多次&#xff0c;终将找到…
阅读更多...
国际联合行动“克罗诺斯”成功打击LockBit勒索软件组织，基础设施遭查封

国际联合行动“克罗诺斯”成功打击LockBit勒索软件组织，基础设施遭查封

在一场旷日持久的执法行动中&#xff0c;美国联邦调查局(FBI)和其国际盟友终于成功打击了臭名昭著的网络犯罪团伙LockBit。通过名为“克罗诺斯”的联合执法行动&#xff0c;执法部门取得了阶段性的胜利&#xff0c;但与网络犯罪的斗争依然任重道远。 第一章 克罗诺斯行动的进展…
阅读更多...
关于el-select值的回显问题 : 框内显示label值还是value值

关于el-select值的回显问题 : 框内显示label值还是value值

<el-form-item label"状态" prop""><el-selectv-model"roleForm.state"class"m-2"size"large"style"width: 240px"placeholder"请选择状态"value-key"value"//value-key 与下面的ke…
阅读更多...
【Python笔记-设计模式】适配器模式

【Python笔记-设计模式】适配器模式

一、说明 适配器模式是一种结构型模式&#xff0c;它使接口不兼容的对象能够相互合作 (一) 解决问题 主要解决接口不兼容问题 (二) 使用场景 当系统需要使用现有的类&#xff0c;但类的接口不符合需求时当需要一个统一的输出接口&#xff0c;但输入类型不可预知时当需要创…
阅读更多...
使用openai-whisper实现语音转文字

使用openai-whisper实现语音转文字

使用openai-whisper实现语音转文字 1 安装依赖 1.1 Windows下安装ffmpeg FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。 # ffmpeg官网 https://ffm…
阅读更多...
React18源码: reconcliler启动过程

React18源码: reconcliler启动过程

Reconcliler启动过程 Reconcliler启动过程实际就是React的启动过程位于react-dom包&#xff0c;衔接reconciler运作流程中的输入步骤.在调用入口函数之前&#xff0c;reactElement(<App/>) 和 DOM对象 div#root 之间没有关联&#xff0c;用图片表示如下&#xff1a; 在启…
阅读更多...
多线程-day4

多线程-day4

1>多线程完成文件拷贝 代码&#xff1a; #include<myhead.h>//参数结构体创建 typedef struct INFO {const char *srcfile;const char *destfile;int length; }Info;//定义获取文件长度的函数 int get_file_len(const char *srcfile,const char *destfile){int srcf…
阅读更多...
C++秋招必知必会（常用排序算法）

C++秋招必知必会（常用排序算法）

参考引用 Hello 算法 常用排序算法 1. 选择排序 1.1 算法原理与流程 开启一个循环&#xff0c;每轮从未排序区间选择最小的元素&#xff0c;将其放到已排序区间的末尾设数组的长度为 n n n&#xff0c;选择排序的算法流程如下图 初始状态下&#xff0c;所有元素未排序&…
阅读更多...
最新文章

Copyright @ 2022~2023