Rust Webassembly / webpack + React, CMS表示機能を作成 #Rust #Webassembly #javascript #React #node
■ 概要:
作例的な内容になります。
Rust Webassembly (下記 wasm) 関係で、CMS表示機能の作成となります。
・前のReact CMSを、修正して。一覧表示部分に wasmで DOM操作する構成です
・webpac + Reactの準備は、前回の記事を参考にしています
■ 前の関連ページ,webpac + React
https://note.com/knaka0209/n/nc7f663d5d6f6
■ 環境
Rust
rustc 1.46.0
cargo 1.46.0
wasm-pack
node 12.18.3
webpack
React
■ 参考のコード
■ デモのページ
・ Github pagesに、デモサイトを公開しました。
https://kuc-arc-f.github.io/cms-wasm-sample-type5/
■ 実装など
・Rust, lib.rs
#[wasm_bindgen]
pub fn wasm_post_row(id_name: &str, json: &str) -> Result<(), JsValue>{
let v: Value = serde_json::from_str( json ).unwrap();
let tmp_title = v["title"].to_string();
let title = tmp_title.replace('"', "");
let tmp_id = v["id"].to_string();
let id_val = tmp_id.replace('"', "");
let tmp_show_id = v["show_id"].to_string();
let show_id_val = tmp_show_id.replace('"', "");
let tmp_date = v["created_at"].to_string();
let date_val = tmp_date.replace('"', "");
let tmp_category = v["category"]["name"].to_string();
let category_val = tmp_category.replace('"', "");
// console::log_1(&JsValue::from_str( &tmp_category ));
let document = web_sys::window().unwrap().document().unwrap();
let entry_point = document.get_element_by_id(id_name).unwrap();
let val = document.create_element("div")?;
let s_elm = format!("
<a href='#/show/{}'>
<h3 class='ml-10'>{}</h3>
</a>
<div>
<p class='mb-0'>
<span class='mr-2 time_icon_wrap'><i class='far fa-calendar'></i>
{} ,
<span>ID :{}</span>
</p>
<span class='folder_icon_wrap mr-2'><i class='fas fa-folder'></i> {}</span>
</div>
<hr class='hr_ex1'>", show_id_val , title, date_val, id_val, category_val );
val.set_inner_html(&s_elm );
entry_point.append_child(&val)?;
Ok(())
}
・React , wasm 呼出し、json形式
www/src/component/Home.js
tabRow(){
if(this.state.data.items instanceof Array){
return this.state.data.items.map(function(object, i){
var json = JSON.stringify( object );
wasm.wasm_post_row("div_post_wrap", String(json) );
})
}
}
・www/src/App.js
import React , { Component } from "react";
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './component/Home';
import About from './component/About';
import Head from './component/Layouts/Head';
import Footer from './component/Layouts/Footer';
import Show from './component/Show';
import Page from './component/Page';
import Test from './component/Test';
//
class App extends Component {
render() {
return (
<div className="App">
<Head />
<Router>
<div>
<Route exact path='/' component={Home}/>
<Route path="/show/:id" component={Show} />
<Route path="/pages/:id" component={Page} />
<Route path='/about' component={About}/>
<Route path='/test' component={Test}/>
</div>
</Router>
<Footer />
</div>
);
}
}
export default App;
■ 参考のページ
・cms編集機能 URL
https://cms3edit-kuc.netlify.app/#/edit
・cms編集機能 / Vue の記事
https://note.com/knaka0209/n/nfbe2ab41a344
■ 画面
この記事が気に入ったらサポートをしてみませんか?