【腾讯云 Cloud Studio】构建基于 React 的实时聊天应用

news2024/12/23 9:21:45

在这里插入图片描述

  • 关于腾讯云 Cloud Studio
  • 构建基于 Cloud Studio 的聊天应用（项目实战）
    • 1. 注册并登录 Cloud Studio
    • 2. 配置 Git 环境
      • 2.1 复制 SSH 公钥
      • 2.2 添加 SSH 公钥至 GIt 平台
    • 3. 创建项目
    • 4. 项目开发
      • 4.1 安装依赖
      • 4.2 集成 tailwind css
      • 4.3 编写代码
      • 4.4 项目运行示例
  • 项目完整代码及 Cloud Studio 模板地址
  • 个人开发体验

关于腾讯云 Cloud Studio

腾讯云 Cloud Studio 是基于浏览器的集成式开发环境 (IDE)，通过“基于浏览器开发”我们可以将它通俗理解为“在线编程平台”，在使用 Cloud Studio 开发时不需安装什么工具，直接在浏览器打开 Cloud Studio 就可以进行开发。

在这里插入图片描述
作为腾讯的一款全新云原生开发平台，Cloud Studio 的宗旨是帮助开发者高效构建、部署和管理应用程序，它的强大之处在于提供了一套全方位的工具和服务，包括代码编辑、代码构建、测试、部署等全流程开发，使得开发者在云端就可以进行全栈开发，并轻松实现应用的快速迭代和交付。腾讯云 Cloud Studio 主要功能列举如下：

  • 云端开发环境：Cloud Studio 提供了一个完整的云端开发环境，无需本地配置开发环境，开发者可以直接在浏览器中进行代码编辑、调试和运行。
  • 全栈支持：支持多种编程语言和框架，包括 JavaScript、Node.js、Python、Java、PHP、C、Rust 等几乎全平台的主流开发语言，同时支持前端开发和移动应用开发，满足各类应用的开发需求。
  • 协作与分享：Cloud Studio 支持团队协作开发，开发者可以轻松分享代码和项目，实现多人协同开发，提高开发效率。
  • 部署与扩展：Cloud Studio 集成了腾讯云的强大云计算资源，可以直接在 Cloud Studio 中进行应用部署和扩展，简化应用上线流程。
  • 丰富的工具集：Cloud Studio 提供了丰富的开发工具和插件，包括代码编辑器、调试器、代码库、性能监控等，助力开发者提高开发效率和应用质量。

接下来我们就使用 Cloud Studio 来进行项目的开发，通过项目实战来体验它的强大之处。本文将演示如何在 Cloud Studio 中构建基于 React 框架的在线聊天应用。

构建基于 Cloud Studio 的聊天应用（项目实战）

1. 注册并登录 Cloud Studio

注册与登录步骤很简单，Cloud Studio 在线编程平台支持 Coding 账号、GitHub 账号及微信授权三种方式登录。这里我使用的是微信扫码授权登录，登录成功即注册成功；

在这里插入图片描述
登录成功进入 Cloud Studio 主页面如下。

在这里插入图片描述

2. 配置 Git 环境

配置 GIt 环境是为了将我们开发的作品以及代码上传至相关 GIt 代码托管平台，如 GitHub、Coding、Gitee、GitCode 等，可根据个人需要选择配置。在这里我使用的是 Gitee 码云进行相关操作。

2.1 复制 SSH 公钥

点击头像→设置；

在这里插入图片描述
复制个人专属的 SSH 公钥；

在这里插入图片描述

2.2 添加 SSH 公钥至 GIt 平台

这里的操作是将 Cloud Studio 工作空间的 SSH Key 添加至 Gitee 代码托管平台的个人公钥列表。点击头像→账号设置；

在这里插入图片描述
点击 SSH公钥，将我们上一步 Cloud Studio 平台中复制的 SSH 公钥复制到此处，这里的标题可以自行设置；

在这里插入图片描述
最后点击确认添加。

3. 创建项目

点击框架模板→React；

在这里插入图片描述
等待工作空间加载完成；

在这里插入图片描述
安装依赖（自动安装）；

在这里插入图片描述
接下来运行 React 项目的示例代码，需要注意首次运行可能会报错（踩坑），这个时候建议删除工作空间，重新创建一个空间来运行；

在这里插入图片描述
输入命令 npm run start 运行 React 实例代码，当出现如下图中的 React 图标时，项目就创建完成了。

在这里插入图片描述

4. 项目开发

4.1 安装依赖

yarn add react-jwchat

在这里插入图片描述

注：该组件是来源于 gitee.com/wx_504ae56474/react-jwchat 的免费模板。

4.2 集成 tailwind css

yarn add tailwindcss
npx tailwindcss init

配置模板路径，在文件 tailwind.config.js 中；

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 index.css 文件中添加以下内容；

@tailwind base;
@tailwind components;
@tailwind utilities;

接下来安装 Tailwind CSS 插件，插件安装完成之后，就可以进行代码的编写了。

在这里插入图片描述

4.3 编写代码

将 App.js 中的 App 方法进行修改，代码如下；

function App() {
  const handleNewUserMessage = (newMessage) => {
    console.log(`New message incoming! ${newMessage}`);
    // Now send the message throught the backend API
  };
  const contact = {
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '这是一条信息',
    date: '02-11',
    desc: '一行简短的简介',
  };
  const my = contact;
  const msgList = [
    {
      _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
      date: 1610016580,
      user: {
        id: 1234,
        avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
        nickname: 'sirosong',
        desc: '这是我的第一条信息',
      },
      message: { type: 'text', content: '敌我打野差距👎 ' },
    },
    {
      _id: '75b5bde8f3b9ef7aa904492cb28baf',
      date: 1610016880,
      user: {
        id: 9527,
        avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
        nickname: '卡兹克',
        desc: '这是我的第一条信息',
      },
      message: {
        type: 'image',
        content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      },
    },
  ];
  return (
    <div className="App">
      <Chat
        contact={contact}
        me={my}
        chatList={msgList}
        onSend={(msg) => { }}
        onEarlier={() => { }}
        onImage={(files) => { }}
        style={{
          width: 600,
          height: 500,
        }}
      />
    </div>
  );
}

注：以下内容是对上述代码中对象及函数的解读，以帮助大家理解代码逻辑：

▶ Contact 聊天客体对象

  • Id：用户 id
  • Avatar：用户头像地址
  • Nickname：用户昵称
  • Message：消息，这里目测是对话列表会用到的
  • Date：时间，这里目测是对话列表会用到的
  • Desc：简介，会在聊天框内显示
{
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '这是一条信息',
    date: '02-11',
    desc: '一行简短的简介',
};

▶ MsgList 消息列表

消息列表分为两种类型(文本 text，图片 image)；某一则消息是文本消息还是图片消息是通过 message.type 的值来判断的，text 代表文本消息，在 content 中放的是要显示的文本内容；image 代表图片消息，content 中只要放图片地址即可。如果是正式部署服务器，那么这部分内容应当自动将图片上传到图片服务器，然后返回图片地址。

  • _id：消息 id，这里是文本类型的，可以用uuid
  • Date：收到消息的日期
  • User：同 Contact 用的
  • Message：消息体，使用 type 来区分类型，content 是消息主体
{
    _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
    date: 1610016580,
    user: {
        id: 1234,
        avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
        nickname: 'sirosong',
        desc: '这是我的第一条信息',
    },
    message: {
        type: 'text',
        content: '敌我打野差距👎 '
    },
},

▶ onSend 发送消息回调函数

传入的参数为 Msg 对象，如下图；

在这里插入图片描述
为了演示方便可以直接将其加入到 msgList，此时将回调函数做了以下更改；

//...
function handleSendMessage(msg){
    console.log(msg);
    msgList.push(msg);
  }
//...
<Chat
        contact={contact}
        me={my}
        chatList={msgList}
        onSend={(msg) => handleSendMessage(msg)}
        onEarlier={() => { }}
        onImage={(files) => { }}
        style={{
          width: 600,
          height: 500,
        }}
      />

▶ onEarlier 加载更多回调函数

该函数格式如下：

functi用的on handleOnEarlier(){
    // 处理加载更多
  }

▶ onImage 上传图片回调函数

一般是将图片上传到服务器，返回图片 url，然后再将消息加到聊天框里面。函数格式如下：

function handleOnImage(files){
    // 处理上传图片
  }

4.4 项目运行示例

代码编写完毕，运行项目可看到以下结果；

在这里插入图片描述
接下来我们发送一则消息测试是否能发送成功。

在这里插入图片描述

项目完整代码及 Cloud Studio 模板地址

这里附上以上项目的完整代码。本模板已发布到 Cloud Studio 作为公共模板使用，可直接创建应用，对接你自己的 API，代码中有注释。

项目模板： 「chat_react」

项目完整代码：

import React from 'react';
import { Chat, ContactList } from 'react-jwchat'
import 'react-chat-widget/lib/styles.css';

function App() {
  /**
   * 当前联系人
   *  为当前所选择的联系人对象
   */
  let contact = {
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '这是一条信息',
    date: '02-11',
    desc: '一行简短的简介',
  };

  /**
   * 自己信息
   *  该对象为当前所登陆的账户信息
   */
  const my = {
    id: 1234,
    avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
    nickname: 'sirosong',
    desc: 'carry大神'
  };

  /**
   * 联系人列表
   *  左侧联系人列表数据，获取到联系人列表以后，替换或修改该数组
   */
  let contactList = [{
    id: 1,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Fizz.png',
    nickname: '菲兹',
    message: '你抓不到我！',
    date: '02-07'
  }, {
    id: 8,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
    nickname: '卡兹克',
    message: '❓',
    date: '02-07'
  }, {
    id: 7,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jayce.png',
    nickname: '杰斯',
    message: '吃我一炮',
    date: '02-07'
  }, {
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '起飞🤣 ！！！',
    date: '02-07'
  }, {
    id: 2,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Vladimir.png',
    nickname: '弗拉基米尔',
    message: '让我嘬一口...',
    date: '02-07'
  }, {
    id: 3,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/XinZhao.png',
    nickname: '阿信',
    message: '寒芒，我是寒芒！',
    date: '02-07'
  }, {
    id: 4,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Caitlyn.png',
    nickname: '凯特琳',
    message: '超级瞄准已部署。',
    date: '02-07'
  }, {
    id: 5,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Teemo.png',
    nickname: '提莫',
    message: '这波团我想活下来',
    date: '02-07'
  }, {
    id: 6,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Volibear.png',
    nickname: '沃利贝尔',
    message: '熊大呢？',
    date: '02-07'
  }, {
    id: 9,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Rengar.png',
    nickname: '雷恩加尔',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 11,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Chogath.png',
    nickname: '科加斯',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 12,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Amumu.png',
    nickname: '阿木木',
    message: '您已被该玩家禁言这是我的第一条信这是我的第一条信',
    date: '02-07'
  }, {
    id: 13,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Draven.png',
    nickname: '德莱文',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 14,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Lucian.png',
    nickname: '卢锡安',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 15,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Diana.png',
    nickname: '黛安娜',
    message: '您已被该玩家禁言',
    date: '02-07'
  }];

  /**
   * 消息列表
   *  如果有消息到达，则加入到这个数组中，如果觉得反映比较慢，自己主动调用渲染
   */
  let msgList = [{
    _id: 'ecbb310507ce9c7d3bd57eca046a80f3',
    date: 1610016423,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '打野你会玩吗？'
    }
  }, {
    _id: 'f3386f6dcf4e69a8bd51a0d688d05580',
    date: 1610016470,
    user: {
      id: 9527,
      avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
      nickname: '卡兹克',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '❓ '
    }
  }, {
    _id: 'f3386f6dcf4e69a8bd51a0d688d0e980',
    date: 1610016470,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '对面下路压线那么深你不来？'
    }
  }, {
    _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
    date: 1610016580,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '敌我打野差距👎 '
    }
  }, {
    _id: '75b5bde8f3b9ef7aa9b70449244444cb28baf',
    date: 1610016880,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'image',
      content: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623381551&t=1ec0b6fdbfc4ba9f149281c1d5f8e370'
    }
  }, {
    _id: '75b5bde8f3b9ef7aa9b4492cb28baf',
    date: 1610016580,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '敌我打野差距👎 '
    }
  }, {
    _id: '75b5bde8f3b9ef7aa904492cb28baf',
    date: 1610016880,
    user: {
      id: 9527,
      avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
      nickname: '卡兹克',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'image',
      content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png'
    }
  }];
  /**
   * 处理发送消息
   * @param msg 
   */
  function handleSendMessage(msg) {
    console.log(msg);
    msgList.push(msg);
  }

  /**
   * 联系人列表选择触发事件
   * @param cat 
   */
  function handleContactListSelected(cat){
    console.log(cat);
    contact = cat;
  }

  /**
   * 处理上传图片
   * @param files 
   */
  function handleOnImage(files){
    // 处理上传图片
  }

  /**
   * 处理加载更多
   */
  function handleOnEarlier(){
    // 处理加载更多
  }

  return (
    <div className="App">
      <div class="flex items-center justify-center max-h-full">
        <ContactList
          data={contactList}
          onSelect={(contact) => handleContactListSelected(contact)}
          style={{
            height: 600,
          }}
        />
        <Chat
          contact={contact}
          me={my}
          chatList={msgList}
          onSend={(msg) => handleSendMessage(msg)}
          onEarlier={() => handleOnEarlier()}
          onImage={(files) => handleOnImage(files)}
          style={{
            width: 600,
            height: 600,
          }}
        />
      </div>
    </div>
  );
}

export default App;

个人开发体验

通过这次使用腾讯云 Cloud Studio 进行聊天应用的搭建，作为一名开发者我深刻感受到了云端开发环境为我们带来的高效便捷。

开发者应该都深有体会，写代码本身并没多大难度，但开发环境的搭建很多时候可能都不会那么顺利，不是这里环境有问题，就是那里版本不对，整个过程很让人抓狂。Cloud Studio 首先就为我们规避了这一点，开发时无需在本地配置繁琐的开发工具和环境，只需通过浏览器进入云端 IDE，就可以随时随地进行开发和调试。更有几乎全平台项目模板的提供。

其次 Cloud Studio 支持多种编程语言和框架，这让我有更多的自由选择，可根据项目需求灵活切换，只需要在一个平台就完成整个应用的开发，无需再花费时间去集成不同的工具。更令我印象深刻的是 Cloud Studio 的协作和分享功能，可以链接形式轻松分享代码和项目，随时随地不同成员协作开发。无论是对于团队还是个人，这样的协作方式都大大提高了开发效率。总体来说这次的 Cloud Studio 开发体验极佳。

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

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

相关文章

windows中文界面乱码问题

windows中文界面乱码问题

我的便携是内部返修机&#xff0c;买来时就是英文版&#xff0c;在设置中改成简体中文就可以了&#xff0c;与中文版没有什么区别&#xff0c;已经升级成win11。windows自身的应用、360之类的界面都能正常显示&#xff0c;但是个别应用总是乱码&#xff0c;根据客服的提示设置一…
阅读更多...
【lesson5】linux vim介绍及使用

【lesson5】linux vim介绍及使用

文章目录 vim的基本介绍vim的基本操作vim常见的命令命令模式下的命令yypnyynpuctrlrGggnG$^wbh,j,k,lddnddnddp~shiftrrnrxnx 底行模式下的命令set nuset nonuvs 源文件wq!command&#xff08;命令&#xff09; vim配置解决无法使用sudo问题 vim的基本介绍 首先vim是linux下的…
阅读更多...
企业服务器数据库被360后缀勒索病毒攻击后采取的措施

企业服务器数据库被360后缀勒索病毒攻击后采取的措施

近期&#xff0c;360后缀勒索病毒的攻击事件频发&#xff0c;造成很多企业的服务器数据库遭受严重损失。360后缀勒索病毒是Beijingcrypt勒索家族中的一种病毒&#xff0c;该病毒的加密形式较为复杂&#xff0c;目前网络上没有解密工具&#xff0c;只有通过专业的技术人员对其进…
阅读更多...
vlan 绑定端口号

vlan 绑定端口号

<s2>system-view Enter system view, return user view with CtrlZ. # 创建 vlan 10 和 20 [s2]vlan 10 [s2-vlan10]vlan 20# display vlan# 删除 vlan 10 # [s2-vlan20]quit # [s2]undo vlan 10# 设置 interface 为 access port [s2]interface Eth0/0/1 [s2-Ethernet0/…
阅读更多...
【雕爷学编程】MicroPython动手做（02）——尝试搭建K210开发板的IDE环境3

【雕爷学编程】MicroPython动手做（02）——尝试搭建K210开发板的IDE环境3

4、下载MaixPy IDE&#xff0c;MaixPy 使用Micropython 脚本语法&#xff0c;所以不像 C语言 一样需要编译&#xff0c;要使用MaixPy IDE , 开发板固件必须是V0.3.1 版本以上&#xff08;这里使用V0.5.0&#xff09;, 否则MaixPy IDE上会连接不上&#xff0c; 使用前尽量检查固…
阅读更多...
diffusion model（五）stable diffusion底层原理（latent diffusion model， LDM）

diffusion model（五）stable diffusion底层原理（latent diffusion model， LDM）

LDM: 在隐空间用diffusion model合成高质量的图片&#xff01; [论文地址] High-Resolution Image Synthesis with Latent Diffusion Models [github] https://github.com/compvis/latent-diffusion 文章目录 LDM: 在隐空间用diffusion model合成高质量的图片&#xff01;系列…
阅读更多...
3D工厂模拟仿真 FACTORY I/O 2.55 Crack

3D工厂模拟仿真 FACTORY I/O 2.55 Crack

FACTORY I/O 提供超过20个典型的工业应用场景让您如身临其境般地练习控制任务。选择一种场景直接使用或以其作为一个新项目的开端。学生可以利用内嵌的可编辑的典型工业系统模板&#xff0c;也可以自由搭建并编辑工业系统。同时该系统具有全方位3D视觉漫游&#xff0c;可随意放…
阅读更多...
存储重启后，ceph挂载信息没了，手动定位osd序号并挂载到对应磁盘操作流程、ceph查看不到osd信息处理方法

存储重启后，ceph挂载信息没了，手动定位osd序号并挂载到对应磁盘操作流程、ceph查看不到osd信息处理方法

文章目录 故障说明处理流程定位硬盘中的osd序号挂载osd到ceph上验证并拉起osd重复上面操作故障说明 我们的一个存储节点莫名其妙的重启了，不知道咋回事 但这样的问题就是，所有osd都down了 因为挂载信息没有写到fstab里面，所以不会自动up，并且没有挂载信息，并且也看不到o…
阅读更多...
如何用Java代码写出二维码！！！

如何用Java代码写出二维码！！！

什么你说你不会&#xff1a; 1.首先加入二维码需要的架包。&#xff08;认真看了&#xff0c;我只教一遍&#xff09;安装包已经放上来了&#xff0c;需要的直接下载。 2.将架包接入项目。 3.编写代码。 //支持中文格式Map<EncodeHintType,String> hintsnew HashMap<&…
阅读更多...
适配器模式——不兼容结构的协调

适配器模式——不兼容结构的协调

1、简介 有的笔记本电脑的工作电压是20V&#xff0c;而我国的家庭用电是220V&#xff0c;如何让20V的笔记本电脑能够在220V的电压下工作&#xff1f;答案是引入一个电源适配器&#xff08;AC Adapter&#xff09;&#xff0c;俗称充电器&#xff0f;变压器。有了这个电源适配器…
阅读更多...
【JAVA】你可知JAVA中的运算符|重温运算符

【JAVA】你可知JAVA中的运算符|重温运算符

作者主页&#xff1a;paper jie的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…
阅读更多...
MySQL之深入InnoDB存储引擎——Checkpoint机制

MySQL之深入InnoDB存储引擎——Checkpoint机制

文章目录 一、引入二、LSN三、触发时机 一、引入 由于页的操作首先都是在缓冲池中完成的&#xff0c;那么如果一条DML语句改变了页中的记录&#xff0c;那么此时页就是脏的&#xff0c;即缓冲池中页的版本要比磁盘的新。那么数据库需要将新版本的页刷新到磁盘。倘若每次一个页…
阅读更多...
地图应用构建平台：助力小程序开发者快速构建地图应用

地图应用构建平台：助力小程序开发者快速构建地图应用

地图应用构建平台&#xff08;也称Wemap Builder&#xff09;是地图低代码开发平台&#xff0c;在微信开发者工具中提供了丰富的小程序模板&#xff0c;开发者能够选择模板快速创建地图应用&#xff0c;同时在微信开发者工具中可直接使用低代码编辑器&#xff0c;更高效的开发小…
阅读更多...
力扣算法数学类—剑指 Offer 16. 数值的整数次方

力扣算法数学类—剑指 Offer 16. 数值的整数次方

目录 剑指 Offer 16. 数值的整数次方 题解&#xff1a; 知识点&#xff1a; 代码&#xff1a; 结果&#xff1a; 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。不得使用库函数&#xff0c;同时不需要考虑大数问题。 示例…
阅读更多...
向量数据库这杯“啤酒”与“泡沫”

向量数据库这杯“啤酒”与“泡沫”

就像啤酒注定要有泡沫&#xff0c;每一场淘金热都不缺被捧上了时代风口的人。 大模型这一波热潮中&#xff0c;向量数据库就是那个幸运儿。 一方面&#xff0c;技术层面并没有太大突破。向量数据库并不是一种特别新的数据库技术&#xff0c;在AI领域已经应用了七八年&#xff0…
阅读更多...
英特尔14代酷睿参数曝光：13代酷睿用户看完放心了 升级幅度有限

英特尔14代酷睿参数曝光：13代酷睿用户看完放心了 升级幅度有限

今年6月份英特尔进行了品牌升级&#xff0c;宣布新命名规则&#xff0c;预热了酷睿Ultra品牌和第14代酷睿处理器产品线。 代号为Meteor Lake的酷睿Ultra系列虽然备受关注&#xff0c;但令人遗憾的是&#xff0c;它只面向低功耗移动端&#xff0c;预计将包括45W的H系列&#xff…
阅读更多...
NLP From Scratch: 使用char-RNN对姓氏进行分类

NLP From Scratch: 使用char-RNN对姓氏进行分类

NLP From Scratch: 使用char-RNN对姓氏进行分类 本篇我们将构建并训练基本的字符级 RNN 来对单词进行分类。 本教程&#xff0c;以及后续两个教程&#xff0c;展示了如何“从头开始”针对 NLP 建模过程中所需的数据进行预处理&#xff0c;抛开torchtext的许多便利功能进行编码…
阅读更多...
C语言基础教程（fgets和fputs)

C语言基础教程（fgets和fputs)

文章目录 前言一、fputs函数二、fgets函数三、fputc和fgetc函数总结 前言 本篇文章我们来讲解一下fgets和fputs函数&#xff0c;这两个函数通常用来作为输入和输出功能使用。 一、fputs函数 fputs函数是C语言标准库中的一个输出函数&#xff0c;用于将字符串写入到指定的文件…
阅读更多...
mysql主从同步怎么跳过错误

mysql主从同步怎么跳过错误

今天介绍两种mysql主从同步跳过错误的方法&#xff1a; 一、两种方法介绍 1、跳过指定数量的事务&#xff1a; mysql>slave stop; mysql>SET GLOBAL SQL_SLAVE_SKIP_COUNTER 1 #跳过一个事务 mysql>slave start2、修改mysql的配置文件&#xff0c;通过slav…
阅读更多...
The Sandbox 重新上线，带来全新体验！

The Sandbox 重新上线，带来全新体验！

在经历了一个充满史诗般新回忆的全力开局后&#xff0c;我们短暂休息了片刻&#xff0c;为玩家准备了全新的、惊心动魄的游戏活动。 我们已经完成了功能的微调&#xff0c;准备将您的游戏体验提升到一个全新高度&#xff01; 想知道我们正在做什么吗&#xff1f;现在还无法公开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023