【腾讯云Cloud Studio实战训练营】用Vue+Vite快速构建完成交互式3D小故事

👀前置了解:(官网 https://cloudstudio.net/)

什么是Cloud Studio?

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

为什么要使用Cloud Studio ?

Cloud Studio 作为在线 IDE,包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。

Cloud Studio的应用场景有哪些?

快速启动项目 (直接创建对应类型的工作空间,快速启动项目进入开发状态,无需进行繁琐的环境配置)。

实时调试页面 (实时显示网页应用。代码发生改变后,预览窗口会自动刷新,可以在 Cloud Studio 内实时开发调试网页)。

远程访问云服务器 (支持连接自己的云服务器,可以在编辑器中查看云服务器上的文件,进行在线编程和部署工作)。

目录

📃初识Cloud Studio

📰快速构建3D交互式画面

🍇日常项目基础搭建

🍎本项目具体搭建

🍈具体项目书实现

🔖项目上线git

📑回顾总结


📃初识Cloud Studio

对于第一次接触Cloud Studio的朋友可能对这个工具有点陌生,博主就在这简单的介绍一下该工具的一些使用事项,首先点击博主上面给出的官网连接,然后进行注册(这里微信注册即可),注册完毕之后就会进入如下页面:

进入 Cloud Studio 云端 IDE,可以通过以下两种方式创建工作空间

第一种方式:点击模板直接创建工作空间(可自动生成工作空间名称,并运行模板的预置环境及样本代码)。

第二种方式:单击【新建工作空间】,进入工作空间创建页面(需要选择预置环境,填写工作空间名、描述,并选择运行环境和代码来源)。

工作空间内代码运行的环境,您可以选择预置环境,包含 Ubuntu、Python、Java和 Node.js 四种;也可以选择将其连接到自己的云服务器上。您还可以创建代码来自于 Git 仓库的工作空间,代码会被自动克隆到工作空间。

详细的操作大家还是阅读一下 官方文档 ,给出的具体的功能介绍,这里博主就不再详细赘述了。

📰快速构建3D交互式画面

本次博主打算用云 IDE Cloud Studio社区版快速搭建实现一个3D交互式故事场景,关于这篇3D的具体文章,可以查看:✨ 阳 光 dua 郎 大 男 孩 ✨——阿伟的自述 这篇文章,这里我们打算使用Vue3来实现,体验云 IDE 给我们带来的优势。闲话少说直接开始操作:

🍇日常项目基础搭建

本项目选择使用Vue模板来实现功能。点击 Vue.js 模板卡片,进入集成环境加载页面,加载成功后即可进入开发环境进行编程,如下:

当我们点击完框架之后,等待不到 30s 左右(与带宽网速差异有区别),开发环境就初始化配好了。如下:

Cloud Studio 帮助我们初始化好开发 Vue 环境,并且默认有一个小 Demo,系统相关配置信息:

在平常的开发中可以直接引入一些相关的第三方库,方法如下,当然在本项目是用不到下面的一些库的,这里仅仅做一个普及,如下:

当然为了快速开发,一般我们会采用一些UI库,比如移动端我们经常会选择Vant

# 安装 Vant:
yarn add vant@^3.6.12

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式,如下:

// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components@^0.22.7

本项目是基于 vite 的项目,所以,在根目录下,vite.config.js 文件中配置插件。完成以上安装和如下修改配置文件两步,就可以直接在模板中使用 Vant 组件了,unplugin-vue-components 会解析模板并自动注册对应的组件。

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入以下2个库
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 增加以下配置Components({// 不生成类型声明文件自己写dts: false,// 样式需要单独引入resolvers: [VantResolver({ importStyle: false })]}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

在css这块,我们也一般会使用SCSS和LESS这些CSS预处理语言,本项目中我们选择less。Vite 和 Webpack 不同,不需要 less-loader 等,只需安装 less,如下:

yarn add -D less@^3.12.2

在根目录下,vite.config.js 文件中配置less配置:

Normalize.css 是CSS重置的现代替代方案,可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。所以终端我们还是需要安装一下如下命令:

yarn add -D normalize.css@^8.0.1

配置完成之后,接下来需要在入口文件 src/main.js 中进行引入,如下:

import { createApp } from 'vue'
import App from './App.vue'
// 按需引入 Vant
import { Tabbar, TabbarItem } from 'vant';
import 'vant/lib/index.css'
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'// 实例化 Vue 实例
const app = createApp(App)// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);// 挂载到 #app 节点
app.mount('#app')

🍎本项目具体搭建

在本项目中因为是实现的3D可视化技术,所以我们需要安装如下的第三方库:

npm i three

安装完成之后就可以调用一些基础的three库了,如下three.js开启必须用到的基础代码:

导入three库

import * as THREE from 'three'

初始化场景

const scene = new THREE.Scene()

初始化相机

// 创建相机
const camera = new THREE.PerspectiveCamera(45, // 视角window.innerWidth / window.innerHeight, // 宽高比0.1, // 近平面1000 // 远平面
);
// 设置相机位置
camera.position.z = 1;
// camera.position.y = 2;
// camera.position.x = 2;
camera.lookAt(0, 0, 0);

初始化渲染器

// 创建渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, // 开启抗锯齿
});
renderer.shadowMap.enabled = true; // 启用阴影映射
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

监听屏幕大小的改变,修改渲染器的宽高和相机的比例: 

// 监听窗口变化
window.addEventListener("resize", () => {// 重置渲染器宽高比renderer.setSize(window.innerWidth, window.innerHeight);// 重置相机宽高比camera.aspect = window.innerWidth / window.innerHeight;// 更新相机投影矩阵camera.updateProjectionMatrix();
});

导入轨道控制器: 

// 添加轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
controls.maxDistance = 50;
// 设置旋转速度
// controls.autoRotate = true;

设置渲染函数: 

// 渲染函数
const animate = () => {controls.update();requestAnimationFrame(animate);// 渲染renderer.render(scene, camera);
}
animate();

🍈具体项目书实现

项目具体实现是通过 TextureLoader 加载纹理,处理各种常见的图像格式,如JPEG、PNG和GIF,并将它们转换为WebGL可用的纹理对象。这里我们处理我们刚生成好的全景图。

然后再通过补间动画库 tween 进行实现一个简单的动画效果,所以这里需要我们按照tween:

npm i tween

安装完成之后,项目的大概也就能基本完成了,如果不清楚 three 的朋友可以推荐看一下我的  three专栏 ,关于本项目的具体实现可参考我上面分析的文章,ok接下来我们只需要把源代码直接粘贴到 Cloud Studio 当值运行即可:

<template><div class="modal" v-show="data.modalVisible"><div class="playGame"><div class="btn" @click="toggleContent(0)">开始操作</div><audio ref="audioPlayer" loop autoplay src="../../public/sounds/LOVE.mp3"></audio></div></div><div class="textDiv" v-show="data.contentVisible"><div class="text">{{ data.contentList[data.index].content }}</div><div class="footer"><divv-for="(item, i) in data.contentList[data.index].btns"class="btn"@click="toggleContent(item.index)">{{ item.name }}</div></div></div>
</template><script setup>
import { ref ,reactive, onMounted } from 'vue'
// 导入threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 导入TWEEN
import * as TWEEN from "tween";// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(45, // 视角window.innerWidth / window.innerHeight, // 宽高比0.1, // 近平面1000 // 远平面
);
// 设置相机位置
camera.position.z = 1;
// camera.position.y = 2;
// camera.position.x = 2;
camera.lookAt(0, 0, 0);// 创建渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, // 开启抗锯齿
});
renderer.shadowMap.enabled = true; // 启用阴影映射
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
controls.maxDistance = 50;
// 设置旋转速度
// controls.autoRotate = true;// 渲染函数
const animate = () => {controls.update();TWEEN.update();requestAnimationFrame(animate);// 渲染renderer.render(scene, camera);
}
animate();let data = reactive({contentList: [{content:"阿伟坐在电脑前,一边打游戏,一边听着妈妈的唠叨。他的脸上满是不耐烦,心中充满了对妈妈的反感。此时,他的朋友小刚走进来,邀请他一起去网吧游玩。阿伟欣然答应,两人一起出门。",img: "./textures/story/1.jpg",sound: "./sounds/1.mp3",startAngle: { x: 0, y: 0 },endAngle: { x: -Math.PI / 8, y: Math.PI / 2 },duration: 15000,btns: [{name: "不能听妈妈的唠叨,我决定必须和朋友出去玩~",index: 1,},{name: "阿伟回头想了想,现在是学习的关键时刻,不能老是沉迷于游戏。悬崖勒马回头是岸!",index: 2,},],},{content:"阿伟和小刚在网吧里玩得不亦乐乎,他们在游戏中大显身手,引来了众人的羡慕目光。下机后,他们准备离开,却被一位名叫杰哥的人叫住。",img: "./textures/story/2.jpg",sound: "./sounds/2.mp3",startAngle: { x: Math.PI / 16, y: Math.PI - Math.PI / 16 },endAngle: { x: Math.PI / 16, y: Math.PI + Math.PI / 16 },duration: 20000,btns: [{name: "是要发生什么事吗...",index: 3,},],},{content:"阿伟和妈妈重新回到了宁静的生活,他们学会了如何面对生活中的困境和挑战,也更加珍惜彼此之间的感情。",img: "./textures/story/3.jpg",sound: "./sounds/3.mp3",startAngle: { x: 0, y: -Math.PI / 4 },endAngle: { x: 0, y: -Math.PI / 2 },duration: 25000,btns: [],},{content:"杰哥热情地邀请阿伟和小刚到他家玩,他们在欢笑声中喝得烂醉如泥。杰哥看着阿伟,眼神中闪烁着诡异的光芒。",img: "./textures/story/4.jpg",sound: "./sounds/4.mp3",startAngle: { x: Math.PI / 16, y: -Math.PI / 2 - Math.PI / 8 },endAngle: { x: Math.PI / 16, y: -Math.PI / 2 },duration: 20000,btns: [{name: "阿伟被半推半就的被杰哥拉扯着...",index: 4,},],},{content:"杰哥把阿伟带到他的房间,让他坐在桌前。阿伟的视线落在桌上,他看到了一些他从未见过的物品,他的心跳开始加速。",img: "./textures/story/5.jpg",sound: "./sounds/5.mp3",startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [{name: "这些到底是什么...",index: 5,},],},{content:"杰哥趁阿伟脸红的时候,想看他法语正不正常。阿伟感到有些不安,但他无法反抗。杰哥一拳把他打到床上,他无力反抗,只能任由杰哥为所欲为。",img: "./textures/story/6.jpg",sound: "./sounds/6.mp3",startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [{name: "事后...",index: 6,},],},{content:"杰哥笑着对阿伟说:“我是阳光dua郎大男孩,这是我们的秘密你别给我说出去。”阿伟无奈地点头,心中充满了恐惧和无助。第二天阿伟收到了杰哥发来的消息,说依然想他再来他家开party。阿伟心中充满了恐惧,他知道,他已经陷入了一个无法逃脱的深渊。",img: "./textures/story/7.jpg",sound: "./sounds/7.mp3",startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [{name: "阿伟:我不能就这么完了~",index: 7,},],},{content:"阿伟决定向警察求助,他要揭露杰哥的罪行,让他得到应有的惩罚。他知道,这将是一场艰难的战斗,但他没有退路,他必须站出来,为自己和其他可能成为杰哥目标的人争取公正。",img: "./textures/story/8.jpg",sound: "./sounds/8.mp3",startAngle: { x: 0, y: -Math.PI / 2 - Math.PI / 4 },endAngle: { x: -Math.PI / 8, y: -Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [],},],contentVisible: false,modalVisible: true,index: 0,
});let textureLoader = new THREE.TextureLoader();
let textures = data.contentList.map((item, i) => {let texture = textureLoader.load(data.contentList[i].img); // 循环加载每一张图片texture.mapping = THREE.EquirectangularReflectionMapping; // 通过使用全景纹理图像来模拟环境反射texture.colorSpace = THREE.SRGBColorSpace; // 表示和描述颜色的数学模型或系统return texture;
});
let SphereGeometry = new THREE.SphereGeometry(100, 32, 32);
SphereGeometry.scale(1, 1, -1);
let material = new THREE.MeshBasicMaterial({ map: textures[data.index] });
let sphere = new THREE.Mesh(SphereGeometry, material);
sphere.rotation.order = "XYZ";
scene.add(sphere);let audio = new Audio();
let tween;
let audioPlayer = ref(null);function toggleContent(dataIndex) {audioPlayer.value.play();setTimeout(() => {data.contentList[data.index].sound &&(audio.src = data.contentList[data.index].sound);audio.play();}, 500);data.contentVisible = true;data.modalVisible = false;data.index = dataIndex;camera.position.set(0, 0, 1);sphere.rotation.y = data.contentList[dataIndex].startAngle.y;sphere.rotation.x = data.contentList[dataIndex].startAngle.x;material.map = textures[data.index];material.needsUpdate = true;tween && tween.stop();tween = new TWEEN.Tween(sphere.rotation);tween.to({y: data.contentList[data.index].endAngle.y,x: data.contentList[data.index].endAngle.x,},data.contentList[data.index].duration);// 设置缓动函数tween.easing(TWEEN.Easing.Quadratic.InOut);// 启动补间动画tween.start();
}</script><style scoped>
* {margin: 0;padding: 0;
}
body {width: 100vw;height: 100vh;
}
canvas {display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;
}.textDiv {width: 80%;max-width: 500px;height: auto;padding: 20px 50px;border-radius: 10px;border: 1px solid #9999cc;box-shadow: 0 0 5px #ddddff;z-index: 100;position: fixed;left: 50%;bottom: 30px;transform: translate(-50%, 0);color: #ffffff;background-color: rgba(0, 0, 0, 0.5);text-align: left;line-height: 25px;
}
.playGame {width: 800px;height: 450px;background-image: url(../assets/imgs/boys.jpg);background-size: 100% 100%;border-radius: 50px;position: absolute;left: calc(50% - 400px);top: calc(50% - 225px);z-index: 100;
}
.modal {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 100;background-color: rgba(0, 0, 0, 0.9);
}
.playGame .btn {width: 200px;height: 50px;background-color: rgba(0, 0, 0, 0.5);color: white;display: flex;justify-content: center;align-items: center;border-radius: 10px;position: absolute;left: calc(50% - 100px);bottom: 50px;cursor: pointer;
}
.playGame .btn:hover {background: red;
}
.textDiv .footer {display: flex;justify-content: end;padding: 15px 0;flex-direction: column;align-items: start;
}
.textDiv .btn {width: auto;height: auto;background-color: rgba(50, 50, 100, 0.5);color: white;display: flex;justify-content: center;align-items: center;border-radius: 5px;font-size: 12px;padding: 5px 10px;margin-bottom: 10px;line-height: 24px;cursor: pointer;
}
.textDiv .btn:hover {background: red
}
</style>

Cloud Studio 内置预览插件,可以实时显示网页应用,当代码发生改变之后,预览窗口会自动刷新,即可在 Cloud Studio 内实时开发调试网页了,还提供了二唯码在手机端进行调试。最终呈现的效果如下:

复制内置 Chrome 浏览器窗口的地址栏,分享给团队的其它成员,免去了部署 nginx 的繁琐配置。

运行的项目不再需要服务器,将生成的网址复制就可以给任何人观看:

🔖项目上线git

由于工作中使用的 git 命令较多,所以使用命令进行 git 初始化。左边功能菜单区找到“源代码管理”

这里注意一下:Git 首次安装必须设置一下用户签名,否则无法提交代码。签名的作用是区分不同操作者的身份,用户的签名信息在每一个版本的提交信息中能够看到,来以次确认本次提交是谁做的。(签名邮箱信息可以随便填,git并不会识别它是否存在,当然在公司开发过程中可以实名邮箱签名)注意:这里设置用户签名和将来登录 GitHub(或其代码托管中心)的账号没有任何关系。

进行仓库初始化:

// git初始化操作
$ git init
Initialized empty Git repository in /workspace/vuejs-quickstart/webapp/.git/
// 添加文件
$ git add ./
// 提交
$ git commit -m "feat: 初始化项目"

以发布CODING为例:点击“Publish Branch” -> 选择"Publish To CODING"

提示 Cloud Studio CODING Publish  -> 点击"允许",会打开一个新的页面进行 CONING 授权,授权完后再跳回原页面。

点击“Publish Branch” -> 选择"Publish To CODING",这里看自己的需求,这个直接输入仓库名,不需要单独在仓库中再额外创建才能推送,结果如下:

源代码地址:https://ztk63lrd.coding.net/public/xiangmu/vue_three/git/files

📑回顾总结

CloudStudio提供云端开发,基于云端的开发环境,无需安装任何软件。云端开发,不占用自己电脑内存,只需要通过浏览器就能够进行编程工作,非常方便。对于前端开发者来讲更是梦想中的福音,无需用代码初始化项目,只需一个模板点击即可生成:

网页版的vscode与我们一般用的编辑器别无二致,真正做到了随时随地,只需一个浏览器就能进行开发,非常的方便:

创建好的项目,如果不想在线上进行运行,只需关闭即可:

Cloud Studio也适配了很多的服务器版本,也提供了相应的免费版本,同时适合学生党和企业:

我在前端深耕了快两年的时间了,虽然时间不长,但是对前端研究还是比较深入的,就我两年的时光来看,我还是比较后悔的,后面没有早一点遇到这么一个神一样的工具,哈哈!

未来的开发也许是云开发的时代,拥抱变化,是每一位程序员的基本素养,让我们一起走进Cloud Studio开发吧!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA_学习_16_IP核_ROM(延迟一拍输出)

在寻找APD最合适的偏压的过程中&#xff0c;一般会用到厂商提供一条曲线&#xff0c;横坐标是温度的变化&#xff0c;纵坐标表示击穿偏压的变化&#xff0c;但每个产品真正的击穿偏压是有差异的。 为了能够快速的找到当前温度下真实的击穿偏压&#xff0c;我们可以这样做&#…

5.5.webrtc的线程管理

今天呢&#xff0c;我们来介绍一下线程的管理与绑定&#xff0c;首先我们来看一下web rtc中的线程管理类&#xff0c;也就是thread manager。对于这个类来说呢&#xff0c;其实实现非常简单&#xff0c;对吧&#xff1f; 包括了几个重要的成员&#xff0c;第一个成员呢就是ins…

小研究 - Android 字节码动态分析分布式框架(三)

安卓平台是个多进程同时运行的系统&#xff0c;它还缺少合适的动态分析接口。因此&#xff0c;在安卓平台上进行全面的动态分析具有高难度和挑战性。已有的研究大多是针对一些安全问题的分析方法或者框架&#xff0c;无法为实现更加灵活、通用的动态分析工具的开发提供支持。此…

五款拿来就能用的炫酷表白代码

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 五款炫酷表白代码 1、无限弹窗表白2、做我女朋友好吗&#xff0c;不同意就关机3、…

无涯教程-PHP - XML GET

XML Get已用于从xml文件获取节点值。以下示例显示了如何从xml获取数据。 Note.xml 是xml文件&#xff0c;可以通过php文件访问。 <SUBJECT><COURSE>Android</COURSE><COUNTRY>India</COUNTRY><COMPANY>LearnFk</COMPANY><PRICE…

c#设计模式-结构型模式 之 桥接模式

前言 桥接模式是一种设计模式&#xff0c;它将抽象与实现分离&#xff0c;使它们可以独立变化。这种模式涉及到一个接口作为桥梁&#xff0c;使实体类的功能独立于接口实现类。这两种类型的类可以结构化改变而互不影响。 桥接模式的主要目的是通过将实现和抽象分离&#xff0c;…

excel 核心快捷键用法

1、wps怎样只复制公示计算出来的数据 1.1、按下快捷键“CtrlC”&#xff0c;复制该单元格。 1.2、按下快捷键“ShiftCtrlV”&#xff0c;即“粘贴为数值”&#xff0c;即可只复制数字而不复制该单元格的公式 1.3、wps怎样只复制公示计算出来的数据_百度知道https://zhidao.baid…

数据结构之并查集

并查集 1. 并查集原理2. 并查集实现3. 并查集应用3.1 省份数量3.2 等式方程的可满足性 4. 并查集的优缺点及时间复杂度 1. 并查集原理 并查表原理是一种树型的数据结构&#xff0c;用于处理一些不相交集合的合并及查询问题。并查集的思想是用一个数组表示了整片森林&#xff0…

如何将图片应用于所有的PPT页面?

问题&#xff1a;如何快速将图片应用到所有PPT页面&#xff1f; 解答&#xff1a;有两种方法可以解决这个问题。第一种用母板。第二种用PPT背景功能。 解决有时候汇报的时候&#xff0c;ppt中背景图片修改不了以及不知道如何查找&#xff0c;今天按照逆向过程进行操作 方法1…

尚硅谷css3笔记

目录 一、新增长度单位 二、新增盒子属性 1.border-box 怪异盒模型 2.resize 调整盒子大小 3.box-shadow 盒子阴影 案例&#xff1a;鼠标悬浮盒子上时&#xff0c;盒子有一个过度的阴影效果 三、新增背景属性 1.background-origin 设置背景图的原点 2.background-clip 设置背…

【Elasticsearch】spring-boot-starter-data-elasticsearch的使用以及Elasticsearch集群的连接

更多有关博主写的往期Elasticsearch文章 标题地址【ElasticSearch 集群】Linux安装ElasticSearch集群&#xff08;图文解说详细版&#xff09;https://masiyi.blog.csdn.net/article/details/131109454基于SpringBootElasticSearch 的Java底层框架的实现https://masiyi.blog.c…

STM32 定时器复习

12MHz晶振的机器周期是1us&#xff0c;因为单片机的一个机器周期由6个状态周期组成&#xff0c;1个机器周期6个状态周期12个时钟周期&#xff0c;因此机器周期为1us。 51单片机常用 for(){__nop(); //执行一个机器周期&#xff0c;若想循环n us&#xff0c;则循环n次。 }软件…

Streamlit项目:基于讯飞星火认知大模型开发Web智能对话应用

文章目录 1 前言2 API获取3 官方文档的调用代码4 Streamlit 网页的搭建4.1 代码及效果展示4.2 Streamlit相关知识点 5 结语 1 前言 科大讯飞公司于2023年8月15日发布了讯飞认知大模型V2.0&#xff0c;这是一款集跨领域知识和语言理解能力于一体的新一代认知智能大模型。前日&a…

Stable Diffusion原理详解

Stable Diffusion原理详解 最近AI图像生成异常火爆&#xff0c;听说鹅厂都开始用AI图像生成做前期设定了&#xff0c;小厂更是直接用AI替代了原画师的岗位。这一张张丰富细腻、风格各异、以假乱真的AI生成图像&#xff0c;背后离不开Stable Diffusion算法。 Stable Diffusion…

java 微信小程序授权获取用户手机号码 (完整demo)

1. 前端获取动态令牌 code https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 2. 后端接收令牌code, 调用微信获取手机号接口 POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_tokenACCESS_TOKEN 3. con…

[附源码]计算机毕业设计-JAVA火车票订票管理系统-springboot-论-文-ppt

PPT论文 文章目录 前言一、主要技术javaMysql数据库JSP技术 二、系统设计三、功能截图总结 前言 本论文主要论述了如何使用JAVA语言开发一个火车订票管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想…

ORB-SLAM2学习笔记7之System主类和多线程

文章目录 0 引言1 整体框架1.1 整体流程 2 System主类2.1 成员函数2.2 成员变量 3 多线程3.1 ORB-SLAM2中的多线程3.2 加锁 0 引言 ORB-SLAM2是一种基于特征的视觉SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;系统&#xff0c;它能够从单个、双目或RBG…

线性代数的学习和整理7:各种特殊矩阵(草稿-----未完成)

目录 1 单位矩阵 为什么单位矩阵I是 [1,0;0,1]T 而不是[1,1;1,1]T 2 旋转矩阵 3 伸缩矩阵 放大缩小倍数矩阵 4 镜像矩阵 5 剪切矩阵 1 矩阵 1.1 1维的矩阵 行向量列向量 1.2 2维的矩阵 一般2维表都可以看作矩阵。矩阵的每个维度可以是1个数字&#xff0c;也可以是多个…

Appium-移动端自动测试框架,如何入门?

Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门&#xff0c;那么我们就直奔主题。文章结构如下&#xff1a; 1、为什么要使用Appium&#xff1f; 2、如何搭建Appium工具环境?(超详细&#xff09; 3、通过demo演示Appium的使用 4、Appium如何…

通讯录的实现

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大一&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 望小伙伴们点赞&#x1f44d;收藏✨加关注哟&#x1f495;&#x1…