Rust Webassembly / webpack + React, CMS表示機能を作成 #Rust #Webassembly #javascript #React #node

knaka Tech-Blog


■ 概要:

作例的な内容になります。

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

■ 画面

画像1


この記事が気に入ったらサポートをしてみませんか？