1. レシピ集1.1 プロジェクトの背景自宅で健康的な食事をとるというコンセプトが人気を集めています。調査によると、都市部のホワイトカラーや若者の90%以上が、特に子供のいる家庭では、家で食事をすることを好むという。一般的に、家で食事をすると幸せを感じると信じているからだ。経済の急速な発展に伴い、人々の生活水準は徐々に向上し、食品の品質に対する要求はますます高くなっているが、都市部の慌ただしい生活により、サラリーマンは食事に目的意識を持たなくなり、たいていは時間になったら適当に食べ物を選んでお腹を満たしているだけである。このグルメウェブサイトは、新しい健康的なライフスタイルを提唱しています。ユーザーは、ウェブサイトで提供されるレシピに基づいて、さまざまな料理のスタイル、方法、組み合わせについて学ぶことができます。さまざまなレシピを閲覧して調理方法を学ぶだけでなく、オンラインで他のユーザーとコミュニケーションを取り、料理の経験を共有し、食べ物を通じて人生の美しさを感じることもできます。 1.2 テクノロジースタックこのプロジェクトの実装にはReact フレームワークが使用されます。使用されるテクノロジーは次のとおりです。 構成デコレータ( 1.3 開発環境開発環境: 開発ツール: 開発およびデバッグツール: 開発・運用環境: コード管理: オンライン環境: 1.4. プロジェクト効果の表示1.5. プロジェクトの初期化
1. パブリックディレクトリの下にあるコンテンツの一部を削除します。 2. srcディレクトリの下にあるコンテンツの一部を削除します。
// このファイルは webpack の増分構成用です。これは nodejs で実行される commonjs です const { 解決 } = require('path') // このプロジェクトの webpack 構成の操作クラスを段階的に変更して追加します const { addDecoratorsLegacy, override } = require('customize-cra') // webpack 設定をカスタマイズする const customize = () => config => { // コードを書くときにインポートパスを容易にするために、現在のプロジェクトに @ 文字列を追加します config.resolve.alias['@'] = resolve('src') 設定を返す } // エクスポート module.exports = override( // デコレータのサポートを追加する addDecoratorsLegacy(), // カスタム Webpack 構成を追加する customize() )
「スクリプト」: { "start": "BROWSER=NONE に設定 && react-app-rewired を開始", "ビルド": "react-app-rewired ビルド", "テスト": "react-scripts テスト", "eject": "react-scripts eject" }
// create-react-app スクリプト ツールは、nodejs を実行するためのプロキシ設定専用のファイルを提供します // モジュール化では commonjs 仕様を使用します // create-react-app スクリプト ツールはこのエントリのみを提供しますが、プロキシ操作は完了しません // プロキシを実装するには、サードパーティ パッケージを手動でインストールする必要があります // npm i -D http-proxy-middleware // このファイルを変更した後は、必ず => サービスを再起動してください const { createProxyMiddleware: proxy } = require('http-proxy-middleware'); // アプリオブジェクトはエクスプレスオブジェクトです module.exports = app => { アプリを使用する( '/api', プロキシ({ ターゲット: 'https://api.iynn.cn/film', 変更元:true、 })) } プロジェクトはこのマシンで初期化されており、リモートリポジトリにgitリポジトリを作成する必要があります。このマシンでプロジェクトのgitリポジトリを初期化します。 リモートに送信した後、ローカルマシンでブランチを使い始めます。マスターで開発しないでください。覚えておいてください 2. ホームページ開発2.1、antd-mobile コンポーネント ライブラリオンライン ドキュメント: Ant Design Mobile | モバイル デザイン仕様 antd-mobile は、Ant Financial と Koubei のワイヤレス ビジネスに役立つ、Ant Design のモバイル仕様の React 実装です。複数のプラットフォームをサポートし、豊富なコンポーネントを備え、さまざまなシナリオを完全にカバーでき、高度に構成可能な UI スタイルを備え、拡張性が高く、さまざまな製品スタイルに簡単に適応できます。
// 必要に応じてツリーシェイキングをロードする
// config-overrides.js はデフォルトの構成を変更するために使用されます const { override, fixBabelImports } = require('customize-cra') モジュール.エクスポート = オーバーライド( BabelImportsを修正('import', { ライブラリ名: 'antd-mobile', スタイル: 'css', }) )
React をインポートします。{ コンポーネント } から "react" をインポートします。 // `antd-mobile` のボタン コンポーネントをインポートします。import { Button } from "antd-mobile"; クラスAppはComponentを拡張します{ 与える() { 戻る ( <> <Button type="primary">私は普通のボタンです</Button> </> ); } } デフォルトのアプリをエクスポートします。
モバイルサイトには、 2.2. ボトムナビゲーションの実装参照アドレス: https://mobile.ant.design/components/tab-bar-cn/ 下部のナビゲーションでは、antd-mobile のタブ バー コンポーネントを使用して、この機能表示を完了できます。 ルート計画 2.3. レシピのトップナビゲーション高さ: .4rem; 行の高さ: .4rem; 背景: #FF6C0C; フォントサイズ: .18rem; テキスト配置: 中央; 色:#fff; 2.4. カルーセル表示参考: Ant Design Mobile | モバイル デザイン仕様 この機能はantd-mobileのカルーセルコンポーネントを使用できます 2.5. 模擬データモックデータ(偽造データ)とは、偽のデータを使用して背景データをシミュレートすることを意味します。 なぜ偽のデータを作成するのですか?バックエンドはインターフェースを開発し、インターフェースドキュメントをゆっくりと生成するため、リクエストデータを自分でシミュレートする必要があります。シミュレートされたデータ フィールド、形式などについては、バックエンド エンジニアとの通信が必要です。このように、シミュレートされたデータを通じてフロントエンドの作業タスクを継続的に完了することができます。バックエンドエンジニアがデータインターフェースを記述し、インターフェース情報を提供した後は、リクエストアドレスを変更するだけで、フロントエンドとバックエンドがシームレスに接続されます。
npm i -g json-server === yarn グローバル json-server を追加します //json-server のデフォルト ルーティング モード // get / post / put / delete をサポートし、ファイルの書き込みもサポートします。クロスドメインです // data.json // http リクエストアドレス http://xxx/data { "データ": { "id": 1, "名前": "aaa", 「年齢」: 20 } } json-server データ.json
2.6. 検索コンポーネントエクスポート const SearchBox = styled.div` 幅:90vw; 高さ: .46rem; ディスプレイ: フレックス; 境界線: 1px 実線 #ff6c0c; マージン: .15rem 自動; 境界線の半径: 5px; ボックスの影: 1px 1px 5px #ccc; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 画像{ 幅: .2rem; 高さ: .2rem; } スパン{ 色:#555; 左マージン: .1rem; } ` 2.7. 人気のカテゴリーエクスポート const HotCateBox = styled.div` 背景: #fff; 。タイトル{ パディング: .15rem; 色:#949494; } ` <グリッドデータ={hotcate} 列番号={3} アイテムスタイル={{ 高さ: '.5rem' }} onClick={(行, インデックス) => { console.log(インデックス、this.props.history.push) }} レンダリングアイテム={データアイテム => ( <div>{データ項目.タイトル}</div> )} /> 2.8. おいしい食べ物静的レイアウト表示
<div> <h1>素晴らしい食事</h1> <div> <ダウンロード> <dt> <img src="http://www.mobiletrain.org/images/index/new_logo.png" /> </dt> <dd> <h3>ピーマンの干し豆腐</h3> <p>1000 回閲覧、2000 件のお気に入り</p> </dd> </dl> </div> </div>
div { 左パディング: .1rem; >h1 { 高さ: .5rem; 行の高さ: .6rem; 左パディング: .15rem; 色: #666; 左パディング: 0; } >div { ディスプレイ: フレックス; flex-wrap: ラップ; >ダウンロード{ 幅: calc(50% - 0.1rem); 背景: #fff; 右マージン: .1rem; マージン下部: .1rem; dt { 画像 { 幅: 100%; } } dd { ディスプレイ: フレックス; flex-direction: 列; アイテムの位置を中央揃えにします。 パディング: .1rem; h3 { フォントサイズ: .16rem; } p { フォントサイズ: .12rem; 色: #666; } } } } 3. 分類の開発3.1. カテゴリトップスイッチ必要なコンポーネントとスタイルを作成する
<ul> <li>カテゴリー</li> <li className="active">材料</li> <li className="スライダー右"></li> </ul>
高さ:.44rem; 背景:#ee742f; ディスプレイ:フレックス; アイテムを中央揃えにします。 コンテンツを中央揃えにする。 ul { 幅:1.4rem; 高さ: .3rem; ディスプレイ: フレックス; 位置: 相対的; 境界線: 1px 実線 #fff; zインデックス: 0; 境界線の半径: .15rem; li { フレックス: 1; 行の高さ: .3rem; テキスト配置: 中央; 色: #fff; &:最後の子 { 位置: 絶対; 幅: 50%; 高さ: .3rem; 背景: #fff; Zインデックス: -1; 境界線の半径: .15rem; 変換: translate(0, 0); 遷移: すべて 0.4 秒のイーズイン。 &。右 { 変換: translate(100%, 0); } } &。アクティブ { 色: #ee742f; } } 3.2 リスト表示
<div> <div> <ul> <li class="active"><span>カテゴリ</span></li> </ul> </div> <div> <ul> <li>目次</li> </ul> </div> </div>
.div { 高さ: 100%; ディスプレイ: フレックス; >div:最初の子{ 幅: .9rem; >ul { 高さ: 100%; overflow-y: スクロール; li { 高さ: .5rem; テキスト配置: 中央; 行の高さ: .5rem; 背景: #f3f3f3; &。アクティブ { 背景: #fff; スパン { 表示: インラインブロック; 高さ: 100%; 下境界線: 1px 実線 #ee742f; } } } } } >div:最後の子{ フレックス: 1; 背景: #fff; パディング: .2rem .1rem; >ul { ディスプレイ: フレックス; flex-wrap: ラップ; overflow-y: スクロール; 高さ: 100%; align-content: flex-start; li { 幅: 33.3333%; テキスト配置: 中央; 高さ: .5rem; 行の高さ: .5rem; 色: #666; } } } 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: NavicatでMySqlスケジュールタスクを作成する方法の詳細な説明
>>: Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル
序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...
目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...
目次1. ESXiをインストールする2. ESXiをセットアップする3. ESXiを起動するESXi...
目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...
この記事では、参考までに、計算機のWebバージョンを実装するためのJavaScriptの具体的なコー...
以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...
以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...
この記事では、WeChatアプレットでジグソーパズルゲームを実装するための具体的なコードを参考までに...
プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...
目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...
目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...
1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...
Linux: Linux バージョン 3.10.0-123.9.3.el7.x86_64 ngin...
オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...
目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...