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 の分散操作に関する詳細なチュートリアル
HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...
問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...
クイックスタートガイドForeman インストーラーは、完全に機能する Foreman セットアップ...
docker run後、ステータスは常にExitedになります解決:パラメータを追加: -it do...
目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...
目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...
CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...
フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...
Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...
目次1. 構造文字列2. タプルを返す3. Dict辞書にアクセスする4. 図書館を利用する5. リ...
目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...
MySQL公式サイトのダウンロードアドレス: https://dev.mysql.com/downl...
2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...
最近、仕事でモバイルページを作成しました。もともと特別なことではありませんでしたが、非常に奇妙に感じ...