您好,登錄后才能下訂單哦!
這篇文章主要介紹如何使用React實現(xiàn)菜譜系統(tǒng),文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
當下回家吃飯健康飲食的理念正在興起。據(jù)調(diào)查顯示,有超過九成的都市白領及年輕人其實都傾向于在家里吃飯,尤其是有小孩的家庭意愿會更加強烈, 因為他們普遍都認為在家里吃飯的幸福感會更高; 隨著經(jīng)濟的快速發(fā)展,人們的生活水平的逐漸提高,對飲食質(zhì)量要求也越來越高,但都市快節(jié)奏的生活讓上班族們吃飯的目標性更小,通常只是到了時間隨機選擇食物塞飽肚子。該美食網(wǎng)站倡導一種全新的健康的生活方式,用戶可以根據(jù)網(wǎng)站上提供的食譜了解不同菜系的風格、做法及搭配,除了可以查看各種食譜學習做飯, 還可以在線與其他用戶一起交流和分享做菜的心得,通過美食來感受生活之美。
使用 React 框架來完成本次項目的實現(xiàn),使用技術有如下一些:
nodejs
進行 模擬接口數(shù)據(jù) ( 代理 )
react react-dom
react-router-dom
redux react-redux redux-thunk immutable redux-immutable
styled-components ( css作用域 ) / sass / less / stylus
antd-mobile ui
組件庫 ( 移動端 )
react-transition-group
axios
http-proxy-middleware
配置裝飾器 ( costomize-cra react-app-rewired
) 等等
開發(fā)環(huán)境為:Windows-
開發(fā)工具:VSCode / webstorm + jsx
插件
開發(fā)調(diào)試工具:Chrome
瀏覽器 react-devtools,redux-devtools
開發(fā)運行環(huán)境:node
環(huán)境
代碼管理:git
上線環(huán)境:linux + nginx
在本機磁盤中指定位置創(chuàng)建一下 react 項目,命令如下
npx create-react-app cookbook
創(chuàng)建好項目后,進入項目目錄先安裝常規(guī)要使用的三方包,命令如下
npm i -D customize-cra react-app-rewired http-proxy-middleware
npm i -S redux react-redux redux-thunk styled-components immutable redux-immutable react-router-dom react-transition-group axios
清理創(chuàng)建好的項目中不需要的文件及文件夾
1.刪除 public 目錄下的部份內(nèi)容
2.刪除 src 目錄下的部份內(nèi)容
修改 public / index.html
在 src 目錄下創(chuàng)建 根組件 App.jsx 與項目 入口文件 index.js
配置 裝飾器 支持
// 此文件就是對于 webpack 進行增量配置 它是運行在 nodejs 中的 commonjs const { resolve } = require('path') // 增量對于本項目中的 webpack 配置進行修改 和 添加操作類 const { addDecoratorsLegacy, override } = require('customize-cra') // 自定義 webpack 配置 const customize = () => config => { // 給當前項目添加一個 @ 字符串,來方便寫代碼時的導入路徑 config.resolve.alias['@'] = resolve('src') return config } // 導出 module.exports = override( // 添加裝飾器支持 addDecoratorsLegacy(), // 添加自定義 webpack 配置 customize() )
修改package.json
中的腳本命令為如下
"scripts": { "start": "set BROWSER=NONE && react-app-rewired start", "build": "react-app-rewired build", "test": "react-scripts test", "eject": "react-scripts eject" }
配置 反向代理
// create-react-app 腳本架工具提供一個專門用來進行代理配置的文件,它是給 nodejs 運行 // 模塊化使用 commonjs 規(guī)范 // create-react-app 腳本架工具只提供了這個入口,但是代理操作沒有幫你完成 // 需要手動去安裝第 3 方包來實現(xiàn) 代理 // npm i -D http-proxy-middleware // 修改此文件后,一定要 => 重啟服務 const { createProxyMiddleware: proxy } = require('http-proxy-middleware'); // app 對象就是 express 對象 module.exports = app => { app.use( '/api', proxy({ target:'https://api.iynn.cn/film', changeOrigin:true, })) }
項目已在本機中 初始化 完成,需要在 遠程 倉庫中創(chuàng)建 git 倉庫本機把項目初始化一個 git 倉庫
提交到遠程后,在本機開始用 分支 來進行,不要在 master 中進行開發(fā),切記
在線文檔:Ant Design Mobile | A Mobile Design Specification
antd-mobile 是 Ant Design 的移動規(guī)范的 React 實現(xiàn),服務于 螞蟻金服 及 口碑無線 業(yè)務。它支持多平臺,組件豐富、能全面覆蓋各類場景,UI 樣式高度可配置,拓展性更強,輕松適應各類產(chǎn)品風格。
在使用前需要先對包進行安裝
npm i -S antd-mobile
按需加載 組件代碼 和 樣式的 babel 插件
// 按需加載 tree-shaking
npm i -D babel-plugin-import
// config-overrides.js 用于 修改默認配置 const { override, fixBabelImports } = require('customize-cra') module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }) )
使用
import React, { Component } from "react"; // 引入 `antd-mobile` 的 按鈕組件 import { Button } from "antd-mobile"; class App extends Component { render() { return ( <> <Button type="primary">我是一個常規(guī)按鈕</Button> </> ); } } export default App;
樣式重置
移動站點中的樣式,單位有兩種 rem / vw
、vh
參考地址:https://mobile.ant.design/components/tab-bar-cn/
底部導航 可以使用 antd-mobile 中的 tab-bar 組件完成此功能展示。
路由規(guī)劃
height: .4rem; line-height: .4rem; background: #FF6C0C; font-size: .18rem; text-align: center; color:#fff;
參考地址:Ant Design Mobile | A Mobile Design Specification
該功能可以使用 antd-mobile 中的 Carousel 組件
mock數(shù)據(jù)( faker數(shù)據(jù) ),即使用假數(shù)據(jù)來模擬后臺的數(shù)據(jù)。
為什么要做假數(shù)據(jù)?因為后端開發(fā)接口并產(chǎn)出接口文檔沒有那么快,此時就需要我們自己來模擬請求數(shù)據(jù)。模擬的數(shù)據(jù)字段、格式等,需要和后端工程師溝通。這樣,我們可以先通過模擬的數(shù)據(jù)繼續(xù)完成前端的工作任務,待后端工程師寫好數(shù)據(jù)接口并提供了接口信息后,我們只需要修改請求地址,前后端就實現(xiàn)了無縫銜接。
安裝 json-server 幫助我們快速啟動一個 web 服務
npm i -g json-server === yarn add global json-server // json-server 默認的路由模式 // 支持 get / post / put / delete 而且還支持文件寫入 它是跨域的 // data.json // http 請求地址 http://xxx/data { "data": { "id": 1, "name": "aaa", "age": 20 } } json-server data.json
mock數(shù)據(jù)
export const SearchBox = styled.div` width: 90vw; height: .46rem; display: flex; border: 1px solid #ff6c0c; margin: .15rem auto; border-radius: 5px; box-shadow: 1px 1px 5px #ccc; justify-content: center; align-items: center; img{ width: .2rem; height: .2rem; } span{ color:#555; margin-left: .1rem; } `
export const HotCateBox = styled.div` background: #fff; .title{ padding: .15rem; color:#949494; } ` <Grid data={hotcate} columnNum={3} itemStyle={{ height: '.5rem' }} onClick={(row, index) => { console.log(index, this.props.history.push) }} renderItem={dataItem => ( <div>{dataItem.title}</div> )} />
靜態(tài)布局展示
HTML
<div> <h2>精品好菜</h2> <div> <dl> <dt> <img src="http://www.mobiletrain.org/images/index/new_logo.png" /> </dt> <dd> <h4>青椒香干</h4> <p>1000瀏覽 2000收藏</p> </dd> </dl> </div> </div>
css
div { padding-left: .1rem; >h2 { height: .5rem; line-height: .6rem; padding-left: .15rem; color: #666; padding-left: 0; } >div { display: flex; flex-wrap: wrap; >dl { width: calc(50% - 0.1rem); background: #fff; margin-right: .1rem; margin-bottom: .1rem; dt { img { width: 100%; } } dd { display: flex; flex-direction: column; align-items: center; padding: .1rem; h4 { font-size: .16rem; } p { font-size: .12rem; color: #666; } } } }
創(chuàng)建需要的組件 和 樣式
HTML
<ul> <li>分類</li> <li className="active">食材</li> <li className="slider right"></li> </ul>
CSS
height:.44rem; background:#ee742f; display:flex; align-items:center; justify-content:center; ul { width: 1.4rem; height: .3rem; display: flex; position: relative; border: 1px solid #fff; z-index: 0; border-radius: .15rem; li { flex: 1; line-height: .3rem; text-align: center; color: #fff; &:last-child { position: absolute; width: 50%; height: .3rem; background: #fff; z-index: -1; border-radius: .15rem; transform: translate(0, 0); transition: all 0.4s ease-in; &.right { transform: translate(100%, 0); } } &.active { color: #ee742f; } }
HTML
<div> <div> <ul> <li class="active"><span>分類</span></li> </ul> </div> <div> <ul> <li>內(nèi)容</li> </ul> </div> </div>
CSS
.div { height: 100%; display: flex; >div:first-child { width: .9rem; >ul { height: 100%; overflow-y: scroll; li { height: .5rem; text-align: center; line-height: .5rem; background: #f3f3f3; &.active { background: #fff; span { display: inline-block; height: 100%; border-bottom: 1px solid #ee742f; } } } } } >div:last-child { flex: 1; background: #fff; padding: .2rem .1rem; >ul { display: flex; flex-wrap: wrap; overflow-y: scroll; height: 100%; align-content: flex-start; li { width: 33.3333%; text-align: center; height: .5rem; line-height: .5rem; color: #666; } } }
以上是“如何使用React實現(xiàn)菜譜系統(tǒng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。