シンプルなショッピングモール

Clayful

npm install clayful --save

今回は、Strapiのようにデータを簡単に管理できるClayfulを使ってみます.ショッピングモールプロジェクトでは、フロントがreactを使用して設計され、バックグラウンドがClayfulを使用して管理されています.

会員加入とstoreを生成すると,開発ページでAPIアクセストークンを得ることができる.これを利用して反応につなげればいいです.

//index.js
import clayful from "clayful/client-js";

clayful.confog({
   client:"토큰",
});
clayful.install("request", require('clayful/plugins/request-axios')(axios))

これはreactとClayfulを結合した部分です.

//LandingPage.js
const LandingPage = () => {
  const Product = clayful.Product;

  const options = {
    query: {
      page: 1,
    },
  };

  Product.list(options, (err, res) => {
    if (err) {
      console.log(err);
    }

    console.log(res);
  });
  return <div>랜딩페이지</div>;
};

公式文書に示すように、粘土が反応と正常に結合しているかどうかを試験した.何も登録されておらず、そのまま出てきましたが、連動していることを確認.

React-router-dom

//App.js
    <Routes>
      <Route path="/" element={<LandingPage />} />
      <Route path="/login" element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />
    </Routes>

レンダールータコンポーネントのプロパティで設定されたURLが現在のパスと一致する場合、BrowserRouter History APIを使用して、同期URLとUIのルータRoutes Routeに最初の要素を一致させると、対応する構成部品がレンダーされます.Linkaタグと同様に、toプロパティで設定したリンクに移動します.履歴をhistoryオブジェクトに保存
最近のNextjsしか使わないので、react-router-domが少し混ざっていたのでまとめてみました.今から本格的にデザインを始めましょう.

React18 - ReactDOM.render warning

import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

プロジェクトをCRAとして作成すると、最近更新されたreact 18になる可能性があります.また、ReactDOM.renderはreact 18では使用されていないようです.ReactDOM.renderをルートとします.renderに変更します.

Login & Register

Clayful開発者ドキュメントを見ることで、会員加入と登録機能を実現した.ログイン情報は、ログイン成功時に返されたid値とtokenをlocalStorageに格納し、ContextAPIを使用してログインを維持します.

登録部

//LoginPage.js
    Customer.authenticate(payload, (err, res) => {
      if (err) {
        console.error(err);
        return;
      }
      const data = res.data;
      localStorage.setItem("customerUid", data.customer);
      localStorage.setItem("accessToken", data.token);
      navigate("/");
    });

ペイロードは、Eメールとパスワードを含むオブジェクトです.

ContextAPI

//utils/AuthContext.js
export const AuthContext = createContext();

const AuthContextProvider = ({ children }) => {
  const [isAuth, setIsAuth] = useState(false);

  const isAuthenticated = () => {
    const Customer = clayful.Customer;
    const options = {
      customer: localStorage.getItem("accessToken"),
    };
    
    Customer.isAuthenticated(options, (err, res) => {
      if (err) {
        console.error(err.code);
        setIsAuth(false);
        return;
      }
      const data = res.data;

      if (data.isAuthenticated) {
        setIsAuth(true);
      } else {
        setIsAuth(false);
      }
    });
  };

  const AuthContextData = {
    isAuth,
    isAuthenticated,
  };

  return (
    <AuthContext.Provider value={AuthContextData}>
      {children}
    </AuthContext.Provider>
  );
};

ContextAPIを使用する部分がutilsディレクトリに作成されます.まずContextを生成します.その後、ログインが成功した場合、保存されたlocalStorageを使用してトークンを取得し、Customer.isAuthenticatedを使用してClayfulに現在のトークンがログインしているかどうかを確認します.これに対応して、情報を作成した後、value形式でプロバイダに伝達される登録情報isAuthおよびisAuthenticatedがプロバイダに伝達される.
ログアウトの場合は、ここで関数を作成してProviderに渡すこともできます.isauthはfalseになり、localStorageからタグを削除し、タグを所望の位置にリダイレクトすればよい.

//App.js
    <AuthContextProvider>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
      </Routes>
    </AuthContextProvider>

生成されたプロバイダをアプリケーションから包むだけで、アプリケーションとアプリケーションのサブコンポーネントはvalueに格納された値を使用できます.

//LoginPage.js
isAuthenticated();

utilsのAuthContext.ログインに成功したときにjsで生成したAuthContextData関数で完了します.(ログアウト時にsignOut関数を挿入)

Products UI

商品の輸出

Clayfulに商品情報が登録されています.目的はアップルストアのクローンですが...ただ私は勝手に農産物を売るページに変更しました.

//LandingPage.js
const LandingPage = () => {
  const Product = clayful.Product;
  const [items, setItems] = useState([]);

  useEffect(() => {
    const options = {
      query: {
        page: 1,
      },
    };

    Product.list(options, (err, res) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log(res.data);
      setItems(res.data);
    });
  }, []);

  const renderCards = items.map((item) => {
    const { _id, thumbnail, name, price } = item;
    if (item) {
      return (
        <ItemContainer key={_id}>
          <Link to={`/product/${_id}`}>
            <ItemImage src={thumbnail.url} alt={name} />
            <p>{name}</p>
            <p>From {price.original.formatted}</p>
          </Link>
        </ItemContainer>
      );
    }
  });

  return <Conteiner>{renderCards}</Conteiner>;
};

Clayfulから製品情報を取得します.そしてこれらの情報を利用してUIを出力することで終了する.後で詳細ページのためにクリックするときにリンクさせます.
通常はisAuthenticated関数部分です.すなわち,map回転部分を素子戻り部分に直接用いることで,関数を単独で減算することもよい方法のようである.

UI出力時に、コンソールは戻ってきたデータを撮影し、上記の情報を参照して符号化する.

動的ルーティングの設定

//App.js
<Route path="product/:productid" element={<DetailProductPage />}/>>

これにより、ルーティングを設定し、対応するrenderCards の値に合致するページを動的にルーティングすることができる.

cssはあまりにも勝手に置かれていて、面白くありませんが、正常にデータを受信してUIに出力していることがわかります.

dangerouslySetInnerHTML

description部分はツリー上のキー記事から吹き飛ばされ、以下のように出力されます.これはブラウザDOMにおけるサイトスクリプト攻撃(XSS)を防止するために意図的に行われたものである.しかし、これは私たちが今必要としている部分ではありません.

    <Container>
      <div dangerouslySetInnerHTML={{ __html: description }} />
    </Container>

_idプロパティを使用すると簡単に解決できます.

データ管理ステータスによる

  const deleteItemHandler = (itemId, price) => {
    const Cart = clayful.Cart;
    const options = {
      customer: localStorage.getItem("accessToken"),
    };
    Cart.deleteItemForMe(itemId, options, (err, res) => {
      if (err) {
        console.log(err);
        return;
      }
      removeItemFromState(itemId, price);
    });
  };

買い物かごでXボタンをクリックするとアイテムが消える機能を実現しました.Xを押すと、データベース内のデータが消失します.
コードから分かるように、削除成功時にdangerouslySetInnerHTML関数が実行されます.これは,データから削除しても現在の状態では変わらず,反映するにはリフレッシュが必要であるためである.Xキーを更新せずにクリックすると、プレイヤーはアイテムがすぐに消えるのを見る必要があるので、この関数を追加しました.
ここだけでなく、いろいろな場所で利用できます.リアルタイムでデータを変更し、UIも変更する必要がある場合.もう一つ例を挙げる.ある投稿の情報を受け取り、その投稿が消えてしまうとデータベースも削除され、ユーザーも投稿が削除されるのをリアルタイムで見なければならない.

支払要求

支払いはまずcalyfulの連動クライアント->ストアフロントクライアントが支払い方式CRUDを使用することを許可しなければならない.

買い物かごの中の物品の総価格+配送費を注文総価格とする.そして、情報入力ボックスはUIを設計して状態として管理する.「受信者情報も同じ」チェック・ボックスをクリックすると、受信者情報に受注情報が自動的に入力されます.

 const handlePayment = () => {
    const Cart = clayful.Cart;
    const Customer = clayful.Customer;
    const body = {
      name: { full: sendUserInfo.full },
      mobile: sendUserInfo.mobile,
    };
    const options = {
      customer: localStorage.getItem("accessToken"),
    };
    Customer.updateMe(body, options, (err, res) => {
      //에러처리

      let items = [];
      cartItem.item.map((item) => {
        let itemVariable = {};
        itemVariable.bundleItems = item.bundleItems;
        itemVariable.product = item.product._id;
        itemVariable.quantity = item.quantity.raw;
        itemVariable.shippingMethod = item.shippingMethod._id;
        itemVariable.variant = item.variant._id;
        itemVariable._id = item._id;
        return items.push(itemVariable);
      });

      const payload = {
        //주문자 정보, 수취자 정보
      };
      Cart.checkoutForMe("order", payload, options, (err, res) => {
        //에러처리
        Cart.emptyForMe(options, (err, res) => {
          //에러처리
          navigate("/history");
        });
      });
    });
  };

今PaymentPageで注文をお願いします注文ボタンにonClickアクティビティのhandlePayment関数を追加しました.
PaymentPageが入力した内容に基づいて会員情報を更新し、removeItemFromStateまでにcheckoutForMeで買い物かごを空けた後、emptyForMeページ(決済明細ページ)に再び移動します.ペイロード部分が知りたいなら、粘り気のあるドキュメントで確認しましょう.
アドレスはreact-daum-postcodeライブラリを使用しています.
historyをクリックすると、このようにhistoryページに移動し、サツマイモとジャガイモの決済明細が表示されます.

の最後の部分

clayfulを使用すると、ショッピングモールなどのプロジェクトを簡単に実現できます.TOYのような感じがします
この簡単な項目では,無割引預金時に決済要求を送信する機能を実現している.IMPORT関連の決済サービスも実施する.