rust前端web开发框架yew使用

news2024/11/18 21:47:27

构建完整基于 rust 的 web 应用,使用yew框架

trunk 构建、打包、发布 wasm web 应用

安装后会作为一个系统命令，默认有两个特性开启

  • rustls - 客户端与服务端通信的 tls 库
  • update_check - 用于应用启动时启动更新检查，应用有更新时提示用户更新。
  • native-tls 需要指定开启，使用系统原生的 tls 用于客户端；使用 openssl 用于服务端
$> cargo install --locked trunk

创建一个 rust web 项目cargo new rust-yew-web,项目根目录下创建index.html

没有任何内容，尝试一下trunk build,可以看到dist目录

$> trunk buil

trunk-build.png

安装yew开始 web 程序

用于创建使用 webAssembly 的多线程 web 应用框架。

$> cargo add yew --features "csr"

yew不会默认指定特性，我们做的是 web 端开发，所以指定开启csr。其他的还包括 ssr - 服务端渲染；hydration - 混合开发，支持客户端、服务端渲染。

在src/main.rs定义方法app渲染 html，html!宏可以定义类似 jsx 语法的视图结构。

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{"hello, trunk/yew!"}</h1>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

#[function_component(App)] 属性宏使一个普通的 rust 函数变成了一个函数组件，这个组件必须返回 html.#[function_component]接受一个组件名称，这里我们定义的是App

函数组件可以接受一个参数props: &Props用于组件之间传递数据。它通常是一个没有状态的静态组件。

启动,通过trunk serve --open启动一个服务，直接打开浏览器

$> trunk serve --open

可以看到浏览器输出，修改内容会重新编译，实时刷新页面。

yew-start.png

可以在Trunk.toml中配置启动服务的地址、端口

# The address to serve on LAN.
address = "127.0.0.1"
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
port = 8000

组件语法，使用注意项

可以注意到组件中<h1>{"hello, trunk/yew!"}</h1> 文本字符展示需要使用{}括起来。

  • 组件只能有一个根节点，节点必须是闭合的。如果不需要渲染根节点，可以使用<></>,使用block也行

        html! {
        <>
            <h1>{"hello, trunk/yew!"}</h1>
            <h2>{"good!"}</h2>
        </>
    }

  • 循环渲染,渲染的每一个节点业务需要返回html!。最后通过collect消费掉。

       // 需要渲染的字段
  let names = ["admin", "test", "hboot"];

  // 渲染片段
  let names = names
      .iter()
      .map(|name| {
          html! {
              <p>{format!("{name}")}</p>
          }
      })
      .collect::<Html>();

    在组件的html返回中使用，通过{},可以看到浏览器中的输出。

      html! {
      <>
          <h1>{"hello, trunk/yew!"}</h1>
          <h2>{"good!"}</h2>
          {names}
      </>
  }

    也可以直接在html! {}中直接使用循环渲染。这里可以使用另一种语法{for ...}来替代消费.collect()

       // 渲染片段
  let names = names.iter().map(|name| {
      html! {
          <p>{format!("{name}")}</p>
      }
  });
  //     .collect::<Html>();

  html! {
      <>
        {for names}
      </>
  }

  • 属性绑定，给节点绑定动态的 class，通过{}。这里只演示了变量绑定，动态的则需要hook声明。

      let active = "active";
  html! {
      <>
          <h2 class={active}>{"good!"}</h2>
      </>
  }

  • 条件判断，通过if判断

       let bool = true;
   html! {
      <>
          {if bool{
              html!{
                  <span>{"yes"}</span>
              }
          }else{
              html!{
                  <span>{"no"}</span>
              }
          }}
      </>
  }

    在未来更新后，内部的html!可能就不需要了，现在仍需要加上。表明类型是 html。

关于组件 - Componenttrait

上面我们实现一个组件App,通过#[function_component]属性宏转变 rust 函数为一个组件。也可以通实现Componenttrait，来实现组件的功能。

重新创建一个模块src/user.rs,创建一写关于个人信息的组件

use yew::prelude::*;

// 定义用户结构体
pub struct User {
    name: String,
}

impl Component for User {
    type Message = ();
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            name: "hboot".to_string(),
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div class="user-center">
                <h3>{self.name.clone()}</h3>
            </div>
        }
    }
}

Component作为一个 trait，只要实现了就可以作为一个函数组件渲染到视图中。必须要实现的方法create和view，两个必须要声明的类型Message\Properties。还有一些其他的方法

  • create 在组件创建后调用，用于初始化。

  • view 定义组件视图，语法类似于 jsx。 create方法跟随 view 方法的调用；view 方法不总是跟随update和changed方法，内部做了一些渲染优化。

  • type Message: 'static 用来声明消息类型，使得组件变成动态组件、可交互。它通过枚举来定义消息类型。

  • type Properties: Properties 定义组件的属性，它接受来自上文context的消息，不一定是父组件。触发组件的重新渲染。

  • update 可选，交互式消息触发时的钩子函数，在这里处理逻辑。返回bool来定义是否触发组件更新。

  • changed 可选，定义属性变更时的钩子函数。返回bool来定义是否触发组件更新。

  • rendered 可选，在组件渲染完成，还未更新到页面时调用。在view之后

  • destroy 可选，在组件销毁卸载之前调用。

  • prepare_state 可选，在服务端渲染后，组件被渲染前调用。

在main.rs中导入使用,可以看到页面上已经出现了展示内容。

mod user;
// 使用组件
use user::User;

fn app() -> Html {
    // ...
    html! {
        <>
            <User />
        </>
    }
}

添加一个事件，通过点击 button 来改变当前的用户名。就需要实现update方法来处理交互消息

// 定义消息类型
pub enum Msg {
    UpdateName,
}
// ...
impl Component for User {
    // ...
    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::UpdateName => {
                self.name = "admin".to_string();
                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div class="user-center">
                <button οnclick={ctx.link().callback(|_| Msg::UpdateName )}>{"更新"}</button>
                <h3>{self.name.clone()}</h3>
            </div>
        }
    }
}

在update方法中，通过接收到的msg消息类型来匹配需要执行的逻辑。当然可以将处理逻辑抽离提供一个方法进行调用。在view中添加了一个 button 作为按钮触发点击事件，通过onclick监听点击事件，ctx.link().callback()来发起一个事件，这有点像 react 的 redux。

数据传递，单项数据流

首先要接收来自父组件的数据，我们定义一个Props类型,props 需要过程宏derive来实现Properties \ PartialEq,然后定义type Properties = Props

#[derive(Properties, PartialEq)]
pub struct Props {
    pub age: i32,
}

impl Component for User {
    // ...
    type Properties = Props;

    //...

    fn view(&self, ctx: &Context<Self>) -> Html {

        html! {
            <div class="user-center">
                <h3>{format!("姓名：{}",self.name.to_string())}</h3>
                <h4>{format!("年龄：{}",ctx.props().age)}</h4>
            </div>
        }
    }
}

定义完Properties,就需要在用到组件的地方增加传参。默认是必传的

 html! {
    <>
        <User age={30} />
    </>
 }

通过属性宏来设置属性的状态，这样就可以不必传：

  • #[prop_or_default] 默认初始化值。
  • #[prop_or(value)] 使用默认值value指定默认值。
  • #[prop_or_else(fn)] 指定初始化值函数，没有传值时会调用。函数签名FnMut()-> T
#[derive(Properties, PartialEq)]
pub struct Props {
    #[prop_or(28)]
    pub age: i32,
}

这样就可以不必传了。我们可以在父组件使用props!宏来定义子组件的 props，然后传给子组件,为了标识 props，我们把 user 中的 props 改名为UserProps

在main.rs:

use yew::props;

// ...
use user::{User, UserProps};

fn app() -> Html {
    // ...
    let user_props = props! {
        UserProps {
            age:30
        }
    };

    html! {
        <>
            <User ..user_props />
        </>
    }
}

可以看到props!宏可以接受多个 props。定义完之后通过..user_props绑定到子组件上。注意是两个点..。

两个定义 props 字段类型的建议：

  1. 不要使用String类型，而是使用&str。因为 String 类型的复制消耗大
  2. 不要使用内部可变性的智能指针，这会导致组件不知掉什么时候需要更新。

子组件更新父组件状态

子组件通过事件回调的方式更新父组件的状态。我们定义父组件更新age的方法，然后在子组件触发调用更新

在main.rs,因为需要更新 age，所以需要声明 age 为父组件的一个状态数据，在函数组件中使用use_state定义。然后声明更新方法update_age提供给子组件调用。

let age = use_state(|| 30);

// 点击更新年龄
let update_age: Callback<()> = {
    let age = age.clone();
    Callback::from(move |_| age.set(26))
};

html! {
    <>
        // ...
        <User age={*age} on_update_age={update_age} />
    </>
}

因为 props 的不可变性，我们使用props!创建的传参改为传统方式。

*age 解引用获取指向的值。通过age.set()方法更新值。子组件 props 增加接受回调函数，我们这个回调不接受参数，所以给一个()

在user.rs中：

pub enum Msg {
    // ...
    UpdateAge,
}

#[derive(Properties, PartialEq)]
pub struct UserProps {
    // ...
    pub on_update_age: Callback<()>,
}

impl Component for User {
    // ...
    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            // ...
            Msg::UpdateAge => {
                ctx.props().on_update_age.emit(());
                false
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div class="user-center">
                // ...
                <button οnclick={ctx.link().callback(|_| Msg::UpdateAge )}>{"更新age"}</button>
                <h4>{format!("年龄：{}",ctx.props().age)}</h4>
            </div>
        }
    }
}

首先增加了一个 msgUpdateAge,有 button 触发点击回调Msg::UpdateAge,在update中匹配消息类型，调用来自父组件的回调方法ctx.props().on_update_age.emit(()),不是直接调用哦，而是通过.emit()可以传值，因为我们不需要，所以给一个元组。

组件内部嵌套html

上面子组件更新父组件的状态感觉很费劲，既然状态在父组件的我们可以通过在子组件调用时嵌套 html 的方式增加子组件视图。

在main.rs中

let update_age = {
    let age = age.clone();
    Callback::from(move |_| age.set(26))
};

html! {
    <>
        <User>
            <button οnclick={update_age}>{"更新age"}</button>
            <h4>{format!("年龄：{}",*age)}</h4>
        </User>
    </>
}

在父组件渲染就没有那么多的弯弯绕绕。

修改子组件user.rs,移除掉之前的回调函数的定义。增加 props 类型children:Html,就可以直接在渲染时访问。

#[derive(Properties, PartialEq)]
pub struct UserProps {
    // ...
    pub children: Html,
}

impl Component for User {
    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div class="user-center">
                // ...
                {ctx.props().children.clone()}
            </div>
        }
    }
}

组件hooks

上面已经使用了一个 hookuse_state用于管理数据状态。这样类比 react，不就是函数组件和类组件的区别吗，感觉就容易上手很多。

可以使用已经定义好的 hook，还可以自定义 hook。

yew hook 文档

  • use_state 管理函数组件的数据状态，只要设置新的值，就会触发组件重新渲染。

  • use_state_eq 设置新值，需要比较旧值是否相等。不相等才出发组件渲染，定义的数据结构需要实现PartialEqtrait

  • use_effect 副作用钩子函数，在组件渲染完成后调用。

      use log::{info, Level};

  #[function_component(App)]
  fn app() -> Html {
      // ...
      use_effect(move || {
          // 渲染完成执行
          info!("render!")
      });

      // 点击更新年龄
      let update_age = {
          let age = age.clone();
          Callback::from(move |_| age.set(30))
      };
      // ...
  }

    我们点击视图中的更新年龄，会一直调用update_age,虽然值没有发生变化，但是组件仍会重新渲染。

    为了防止不必要的重复渲染，可以声明变量使用use_state_eq

      // let age = use_state(|| 30);
  let age = use_state_eq(|| 30);

    我们再次测试点击更新，发现没有执行副作用函数use_effect的逻辑。还有另一种方式就是use_effect_with只有它接收的依赖变量发生变化时才触发调用。

  • use_effect_with 同use_effect，接受依赖，依赖变更时，才触发。

    let age = use_state(|| 30);

//...
let with_age = age.clone();
use_effect_with(with_age, move |_| {
    // 渲染完成执行
    info!("dep render!")
});

    点击更新时，没有触发use_effect_with钩子输出，初始时触发。

  • use_force_update 手动强制重新渲染组件

  • use_memo 优化计算，只有在依赖项发生变更时才会重新执行计算。

  • use_callback 优化渲染，使得子组件不受父组件数据状态变化而重新渲染。

  • use_context 捕获上下文的值，跨组件共享数据。

  • use_mut_ref 获取值的可变引用，但不会引起组件重新渲染。

  • use_node_ref 用来访问 DOM 元素，ref绑定

  • use_reducer 共享计算逻辑，可以在不同的组件内通过触发action来调用处理函数
    和 react 的 redux 的类似,定义数据结构必须实现Reducibletrait

    定一个UserInfo结构，存储用户个人信息，定一个 actionUserInfoAction触发 age 的值更新。实现Reducibletrait,定义 type Action = UserInfoAction.

      pub struct UserInfo {
      pub age: i32,
  }

  // 定义操作的 action
  pub enum UserInfoAction {
      UpdateAge(i32),
  }

  impl Default for UserInfo {
      fn default() -> Self {
          Self { age: 28 }
      }
  }
  // action reducer
  impl Reducible for UserInfo {
      type Action = UserInfoAction;

      fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
          match action {
              UserInfoAction::UpdateAge(age) => {
                  info!("update age --- {age}");
                  Self { age }.into()
              }
          }
      }

  }

    通过reduce方法接收分发过来的 action，并增加处理逻辑。这里使用了Rc引用计数，维护多引用值的可变性。

    然后在main.rs引入使用,使用use_reducer，UserInfo::default初始化状态.dispatch方法分发事件。

    use std::rc::Rc;
mod userInfo;
use userInfo::{UserInfo, UserInfoAction};

#[function_component(App)]
fn app() -> Html {

  // ...
  let age = use_state(|| 30);
  let user_info = use_reducer(UserInfo::default);

  // 点击更新年龄
  let update_age = {
      let age = age.clone();
      let user_info = user_info.clone();
      let cb1 = Rc::new(Callback::from(move |_| age.set(30)));
      let cb2 = Rc::new(Callback::from(move |_| {
          user_info.dispatch(UserInfoAction::UpdateAge(30))
      }));
      //
      Callback::from(move |_| {
          cb1.emit(());
          cb2.emit(());
      })
  };

  // ...
}

    在一个方法中同时处理多个事件时，通过Rc<T>引用计数确保Callback::from闭包调用的所有权。在第三个Callback::from通过emit()方法同时触发多个事件。

  • use_reducer_eq 设置值时，比较新旧值是否相等。

其他

  • rust 本身不支持解析 css 样式，只能通过外部样式来调整。给节点增加类或 id。

       html! {
      <h1 class="info">{"hello, trunk/yew!"}</h1>
   }

    再利用trunk的功能，加载外部样式。

    也可以直接通过style属性,你要是直接写一串字符串 css 样式，绑定到 style 也行，就是不好维护

      html! {
      <h1 class="info" style="color:red;">{"hello, trunk/yew!"}</h1>
   }

    需要动态的 class 设置，只能通过classes!()宏管理，动态添加、移除、切换，参数可以是 list、字符串、实现了Into<Classes>的类型

    新增一个is_active状态，通过 button 点击事件更新值，再通过条件语句判断增加 class。Classess用于声明和管理类属性。

    let mut class = Classes::from("info");
if *is_active {
  class.push("active")
};

 html! {
  <>
      <button οnclick={change_active}>{"active"}</button>
      <h1 class={class} style="color:red;">{"hello, trunk/yew!"}</h1>
  </>
 }

  • html!宏那边定义的节点元素是小写的，如果需要使用大写，则可以这样html! { <@{"myBook"}> </@> },也可以用于动态 tag 标签设置

  • 动态设置属性的，通过Some(None)定义字段，如果设置为None,这个属性则不会被设置。

  • 阻止事件冒泡，通过事件的回调参数event,可以调用event.prevent_default().stopPropagation()阻止默认事件及事件冒泡。

相关的开发crate

开发时，需要有一些工具库帮助我们进行开发，方便我们调试、验证逻辑；

  1. console_error_panic_hook 上一篇文章已经讲过了，可以帮助我们在浏览器控制台输出错误的具体信息

  2. console_log 在浏览器控制台输出信息
    安装依赖：

$> cargo add log console_log

在main.rs

use log::{info, Level};

fn main() {
    let _ = console_log::init_with_level(Level::Debug);

    info!("render web page");
    yew::Renderer::<App>::new().render();
}

  1. wasm-bindgen 用于前端与 js 交互的桥梁。上一篇文章里写过。

  2. js-sys 基于wasm-bindgen提供的 js 全局 Api 对象，及属性绑定。例如 Array、Object、Reflect 等
    依赖安装：

     cargo add js-sys

    新建一个数组，添加一个值，并取值

     use js_sys::Array;
 use wasm_bindgen::prelude::*;

 fn main() {
     // ...
     let arr = Array::new();
     arr.push(&JsValue::from(10));
     info!("{:?}", arr.get(0).as_f64().unwrap());
 }

    js 所有 api 调用传入的数据类型，都需要是JsValue，它定义在wasm_bindgen中；

  3. web-sys 基于wasm-bindgen 提供的原始浏览器提供的接口，例如 DOM、WebGL、CSSOM 等。
    安装依赖:

    $> cargo add web-sys

    为了不影响打包速度，我们将需要用到的 api 特性列在依赖特性中.这里看有哪些可以导入使用的对象

    [dependencies.web-sys]
version = "0.3.69"
features = ["Window"]

    这样我们就可以使用到Window对象下的所有方法、属性。使用Window.alert()

     use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn alert() {
 let window = web_sys::window().unwrap();

 window.alert_with_message("alert!!").unwrap();
}

    然后在事件回调函数中调用alert(),想要弹出自定义消息，需要调用alert_with_message,具体 API 有哪些可以用的方法，查看文档。

  • gloo 是一个工具包，上面的js-sys和web-sys都是底层的 api 封装，理解和使用都很困难，而gloo正是为了解决这个困难，提供简单易用的 api。

简单介绍了trunk打包工具，以及 web 库yew的概念知识，基本使用。下一篇则构建一个可以用于开发的脚手架。

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

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

相关文章

MySQL数据库常见SQL语句宝典

MySQL数据库常见SQL语句宝典

一 、常用操作数据库的命令 1.查看所有的数据库 : show databases;2.创建一个数据库 : create database if not exists 数据库名;3.删除一个数据库 : drop database if exists 数据库名;4.选择一张表 (注意在建表之前必须要选择数据库) : use 表名;* --tab 键的上面&#x…
阅读更多...
【学习笔记三十】EWM和PP集成的后台配置和前台演示

【学习笔记三十】EWM和PP集成的后台配置和前台演示

一、EWM和PP集成概述 在S4HANA版本中&#xff0c;PP模块强化了生产线的概念&#xff0c;并与EWM集成&#xff0c;使用生产供应区&#xff08;PSA&#xff09;的功能。PSA的基本配置包括在ERP系统中创建PSA、定义工作中心、将PSA分配给工作中心、在EWM中创建PSA、匹配ERP和EWM中…
阅读更多...
【JavaSE】_继承

【JavaSE】_继承

目录 1.继承的概念 2. 继承语法 3. 父类成员的访问 3.1 子类中访问父类的成员变量 3.1.1 子类和父类不存在同名成员变量 3.1.2 子类和父类成员变量同名 3.2 子类中访问父类的成员方法 3.2.1 成员方法名不同 3.2.2 成员方法名相同 4. super关键字 5. 子类构造方法 6.…
阅读更多...
Swin Transformer—— 基于Transformer的图像识别模型

Swin Transformer—— 基于Transformer的图像识别模型

概述 Swin Transformer是微软研究院于2021年在ICCV上发表的一篇论文&#xff0c;因其在多个视觉任务中的出色表现而被评为当时的最佳论文。它引入了移动窗口的概念&#xff0c;提出了一种层级式的Vision Transformer&#xff0c;将Shifted Windows&#xff08;移动窗口&#x…
阅读更多...
Node.js -- 包管理工具

Node.js -- 包管理工具

文章目录 1. 概念介绍2. npm2.1 npm 下载2.2 npm 初始化包2.3 npm 包(1) npm 搜索包(2) npm 下载安装包(3) require 导入npm 包的基本流程 2.4 开发依赖和生产依赖2.5 npm 全局安装(1) 修改windows 执行策略(2) 环境变量Path 2.6 安装包依赖2.7 安装指定版本的包2.8 删除依赖2.…
阅读更多...
mysql主库delete一个没主键的表导致从库延迟很久问题处理

mysql主库delete一个没主键的表导致从库延迟很久问题处理

一 问题描述 发现线上环境一个从库出现延迟&#xff0c;延迟了2天了&#xff0c;还没追上主库。 查看当前运行的sql及事务&#xff0c;发现这个sql语句是在delete一个没主键的表。 二 问题模拟 这里在测试环境复现下这个问题。 2.1 在主库造数据 use baidd; CREATE TABL…
阅读更多...
《QT实用小工具·四十三》历史编辑器(支持历史搜索 关键字匹配)

《QT实用小工具·四十三》历史编辑器(支持历史搜索 关键字匹配)

1、概述 源码放在文章末尾 该项目实现了在输入框中输入部分信息能全部展现之前的历史输入信息&#xff0c;支持历史搜索和关键词匹配&#xff0c;项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #include "historymodel.h" #include <QM…
阅读更多...
C语言自定义类型【联合体与枚举】

C语言自定义类型【联合体与枚举】

文章目录 1.联合体1.1联合体的声明1.2联合体的特点1.3联合体的大小计算联合体的使用案例 2.枚举2.1枚举类型的声明2.2枚举类型的优点(为什么使用枚举)2.3枚举类型的使用 结语 1.联合体 1.1联合体的声明 和结构体一样&#xff0c;联合体也是由一个或多个成员构成&#xff0c;同…
阅读更多...
ffmpeg中stream_loop参数不生效原因分析

ffmpeg中stream_loop参数不生效原因分析

问题 使用ffmpeg把一个视频文件发布成一个rtmp流&#xff0c;并设置成循环推流&#xff0c;此时需要使用参数stream_loop&#xff0c;命令如下: ffmpeg.exe -stream_loop -1 -re -i D:\tools\ffmpeg-5.1.2\bin\sei.h264 -c copy -f flv -safe 0 rtmp://localhost:1935/live/te…
阅读更多...
BIO、NIO与AIO

BIO、NIO与AIO

一 BIO 同步并阻塞(传统阻塞型)&#xff0c;服务器实现模式为一个连接一个线程&#xff0c;即客户端有连接请求时服务器端就需要启动一个线程进行处理. BIO&#xff08;Blocking I/O&#xff0c;阻塞I/O&#xff09;模式是一种网络编程中的I/O处理模式。在BIO模式中&#xf…
阅读更多...
杂项基础知识-部分

杂项基础知识-部分

** 杂项基础知识 ** 一.常见的各类文件的文件头和文件结尾 列举常见文件头编码特征&#xff1a; JPEG&#xff1a; PNG&#xff1a; GIF&#xff1a; RAR&#xff1a; ZIP&#xff1a; 十六进制特征&#xff1a; 图片文件&#xff1a; JPEG&#xff1a;文件头格式为…
阅读更多...
K8s 使用 CephFS 作为后端存储（静态供给、动态供给）

K8s 使用 CephFS 作为后端存储（静态供给、动态供给）

一、K8s 使用 CephFS CephFS是 Ceph 中基于RADOS&#xff08;可扩展分布式对象存储&#xff09;构建&#xff0c;通过将文件数据划分为对象并分布到集群中的多个存储节点上来实现高可用性和可扩展性。 首先所有 k8s 节点都需要安装 ceph-common 工具&#xff1a; yum -y ins…
阅读更多...
C++面经(简洁版)

C++面经(简洁版)

1. 谈谈C和C的认识 C在C的基础上添加类&#xff0c;C是一种结构化语言&#xff0c;它的重点在于数据结构和算法。C语言的设计首要考虑的是如何通过一个过程&#xff0c;对输入进行运算处理得到输出&#xff0c;而对C&#xff0c;首先要考虑的是如何构造一个对象&#xff0c;通…
阅读更多...
PotatoPie 4.0 实验教程(41) —— FPGA实现RISC-V 扩展 GPIO UART Timer功能

PotatoPie 4.0 实验教程(41) —— FPGA实现RISC-V 扩展 GPIO UART Timer功能

TD工程介绍 我们提供的TD工程里的RISC-V核默认就开启了GPIO UART扩展&#xff0c;可以看到还有SPI和I2C扩展。因此后面的实验中TD的工程我们基本不怎么修改TD的内容&#xff0c;只需要修改TD工具中Soc_Top.v文件中的TCM0_INITFILE为FD生成的固件名称即可&#xff0c;主要修我以…
阅读更多...
实时通讯技术 WebRTC 介绍

实时通讯技术 WebRTC 介绍

WebRTC WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音对话或视频对话的技术。 历史 2010年5月&#xff0c;Google以6820万美元收购VoIP软件开发商Global IP Solutions的GIPS引擎&#xff0c;并改为名为“WebRTC”。WebRTC使用…
阅读更多...
C++ ─── 匿名对象+变量的创建顺序

C++ ─── 匿名对象+变量的创建顺序

目录 1. 匿名对象&#xff08;临时对象&#xff09; 2. 编译器的优化 3.变量的创建与销毁 1. 匿名对象&#xff08;临时对象&#xff09; 我们先来看有名对象的创建 Date d1; Date d2(2024,4,27);匿名对象的创建 Date(2024,56,1); 生成了一个匿名对象&#xff0c;执行完Da…
阅读更多...
数据仓库是什么

数据仓库是什么

写在前面 刚接触大数据的新手小白可能会对数据仓库这个词比较陌生&#xff0c;本文将介绍数据仓库的主要特征及OLTP&OLAP的区别&#xff0c;帮助读者更好理解数据仓库。 一、什么是数据仓库 数据仓库&#xff0c;简称数仓&#xff0c;是一个对数据进行加工&#xff0c;集…
阅读更多...
信息系统项目管理师0073：网路集成（5信息系统工程—5.3系统集成—5.3.2网路集成）

信息系统项目管理师0073：网路集成（5信息系统工程—5.3系统集成—5.3.2网路集成）

点击查看专栏目录 文章目录 5.3.2网路集成5.3.2网路集成 计算机网络系统集成不仅涉及技术问题，而且涉及组织的管理问题，因而比较复杂，特别是大型网络系统更是如此。从技术角度讲，网络集成不仅涉及不同厂家的网络设备和管理软件，也会涉及异构和异质网络系统的互联问题。从管…
阅读更多...
【算法学习】day1

【算法学习】day1

文章目录 双指针算法移动零复写零 双指针算法 移动零 思路&#xff1a;通过定义两个下标作为双指针&#xff0c;cur从开始对整个数组进行遍历&#xff0c;而我们的dest代表的是非零元素的最后一个位置&#xff0c;cur位置为0的时候就cur&#xff0c;不为0元素的时候就交换dest…
阅读更多...
STM32单片机C语言模块化编程实战：按键控制LED灯详解与示例

STM32单片机C语言模块化编程实战：按键控制LED灯详解与示例

一、开发环境 硬件&#xff1a;正点原子探索者 V3 STM32F407 开发板 单片机&#xff1a;STM32F407ZGT6 Keil版本&#xff1a;5.32 STM32CubeMX版本&#xff1a;6.9.2 STM32Cube MCU Packges版本&#xff1a;STM32F4 V1.27.1 之前介绍了很多关于点灯的方法&#xff0c;比如…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023