一篇文章教你用React实现菜谱系统

目录
  • 一、菜谱大全
    • 1.1、项目背景
    • 1.2、技术栈
    • 1.3、开发环境
    • 1.4、项目效果展示
    • 1.5、项目初始化
  • 二、首页开发
    • 2.1、antd-mobile 组件库
    • 2.2、底部导航实现
    • 2.3、菜谱大全顶部导航
    • 2.4、轮播显示
    • 2.5、mock 数据
    • 2.6、搜索组件
    • 2.7、热门分类
    • 2.8、精品好菜
  • 三、分类开发
    • 3.1、分类顶部切换
    • 3.2、列表展示
  • 总结

一、菜谱大全

1.1、项目背景

当下回家吃饭健康饮食的理念正在兴起。据调查显示,有超过九成的都市白领及年轻人其实都倾向于在家里吃饭,尤其是有小孩的家庭意愿会更加强烈, 因为他们普遍都认为在家里吃饭的幸福感会更高; 随着经济的快速发展,人们的生活水平的逐渐提高,对饮食质量要求也越来越高,但都市快节奏的生活让上班族们吃饭的目标性更小,通常只是到了时间随机选择食物塞饱肚子。该美食网站倡导一种全新的健康的生活方式,用户可以根据网站上提供的食谱了解不同菜系的风格、做法及搭配,除了可以查看各种食谱学习做饭, 还可以在线与其他用户一起交流和分享做菜的心得,通过美食来感受生活之美。

1.2、技术栈

使用 React 框架来完成本次项目的实现,使用技术有如下一些:

nodejs 进行 模拟接口数据 ( 代理 )

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 ) 等等

1.3、开发环境

开发环境为:Windows-

开发工具:VSCode / webstorm + jsx 插件

开发调试工具:Chrome 浏览器 react-devtools,redux-devtools

开发运行环境:node 环境

代码管理:git

上线环境:linux + nginx

1.4、项目效果展示

1.5、项目初始化

  • 在本机磁盘中指定位置创建一下 react 项目,命令如下

npx create-react-app cookbook

  • 创建好项目后,进入项目目录先安装常规要使用的三方包,命令如下

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

  • 清理创建好的项目中不需要的文件及文件夹

1.删除 public 目录下的部份内容

2.删除 src 目录下的部份内容

  • 修改 public / index.html
  • 在 src 目录下创建 根组件 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 规范
// create-react-app 脚本架工具只提供了这个入口,但是代理操作没有帮你完成
// 需要手动去安装第 3 方包来实现 代理
// 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,
  }))
}
 

项目已在本机中 初始化 完成,需要在 远程 仓库中创建 git 仓库本机把项目初始化一个 git 仓库

提交到远程后,在本机开始用 分支 来进行,不要在 master 中进行开发,切记

二、首页开发

2.1、antd-mobile 组件库

在线文档:Ant Design Mobile | A Mobile Design Specification

antd-mobile 是 Ant Design 的移动规范的 React 实现,服务于 蚂蚁金服 及 口碑无线 业务。它支持多平台,组件丰富、能全面覆盖各类场景,UI 样式高度可配置,拓展性更强,轻松适应各类产品风格。

  • 在使用前需要先对包进行安装

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">我是一个常规按钮</Button>
            </>
        );
    }
}
export default App;
  • 样式重置

移动站点中的样式,单位有两种 rem / vwvh

2.2、底部导航实现

参考地址:https://mobile.ant.design/components/tab-bar-cn/

底部导航 可以使用 antd-mobile 中的 tab-bar 组件完成此功能展示。

路由规划

2.3、菜谱大全顶部导航

height: .4rem;
line-height: .4rem;
background: #FF6C0C;
font-size: .18rem;
text-align: center;
color:#fff;

2.4、轮播显示

参考地址:Ant Design Mobile | A Mobile Design Specification

该功能可以使用 antd-mobile 中的 Carousel 组件

2.5、mock 数据

mock数据( faker数据 ),即使用假数据来模拟后台的数据。

为什么要做假数据?因为后端开发接口并产出接口文档没有那么快,此时就需要我们自己来模拟请求数据。模拟的数据字段、格式等,需要和后端工程师沟通。这样,我们可以先通过模拟的数据继续完成前端的工作任务,待后端工程师写好数据接口并提供了接口信息后,我们只需要修改请求地址,前后端就实现了无缝衔接。

  • 安装 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数据

2.6、搜索组件

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;
  }
`

2.7、热门分类

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>
              )}
            />

2.8、精品好菜

静态布局展示

  • HTML
<div>
	<h1>精品好菜</h1>
	<div>
		<dl>
			<dt>
				<img src="http://www.mobiletrain.org/images/index/new_logo.png" />
			</dt>
			<dd>
				<h3>青椒香干</h3>
				<p>1000浏览 2000收藏</p>
			</dd>
		</dl>
	</div>
</div>
  • css
div {
	padding-left: .1rem;
	>h1 {
		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;
				h3 {
					font-size: .16rem;
				}
				p {
					font-size: .12rem;
					color: #666;
				}
			}
		}
	}

三、分类开发

3.1、分类顶部切换

创建需要的组件 和 样式

  • 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;
		}
	}

3.2、列表展示

  • HTML
<div>
	<div>
		<ul>
			<li class="active"><span>分类</span></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>内容</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;
			}
		}
	}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • 利用JavaFX工具构建Reactive系统

    JavaFX 是Java中用来构建图形应用程序的新的标准库, 但许多程序员仍然坚持在使用Swing甚至AWT.关于如何利用JavaFX工具集中的新的超棒特性来构建响应式的快速应用程序,这里有一些建议! 1. 属性值 如果你对JavaFX组件做过完整的了解,移动遇到过属性(Property)这个东西.FX库中几乎每个值都可以被观察,分区(divider)的宽度,图片的尺寸,文本标识(label)中的文字,一个列表中的子项以及复选框(checkbox)的状态.属性分成另类:可写属性和可读属性.可写值

  • react配合antd组件实现的管理系统示例代码

    前言:此文需要有一定react,redux基础,具体学习资料请科学上网. 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数,import(参数),参数为模块地址. 注意: import 后会返回一个promise对象. import('/components/chart').then(mud => { dosomething(mod) }); 本dem

  • 简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 详解使用React全家桶搭建一个后台管理系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果'课后'适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术栈,于是就完成了一个reactSPA小项目,计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来.目前该项目只是把雏形搭好,效果如下.在此文的基础上,写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观.(附注:因为项目不时更新,文章不一定会即时更新,所以以实际的

  • 一篇文章教你用React实现菜谱系统

    目录 一.菜谱大全 1.1.项目背景 1.2.技术栈 1.3.开发环境 1.4.项目效果展示 1.5.项目初始化 二.首页开发 2.1.antd-mobile 组件库 2.2.底部导航实现 2.3.菜谱大全顶部导航 2.4.轮播显示 2.5.mock 数据 2.6.搜索组件 2.7.热门分类 2.8.精品好菜 三.分类开发 3.1.分类顶部切换 3.2.列表展示 总结 一.菜谱大全 1.1.项目背景 当下回家吃饭健康饮食的理念正在兴起.据调查显示,有超过九成的都市白领及年轻人其实都倾向于在家里吃

  • 一篇文章教你使用SpringBoot如何实现定时任务

    前言 在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. 一.第一种方式:@Scheduled 使用 @Scheduled

  • 一篇文章教你学会js实现弹幕效果

    目录 新建一个html文件: 建好html文件,搞出初始模版 HTML添加 CSS填充 js逻辑代码 动画效果 下面是弹幕效果 : 相信小伙伴们都看过了,那么它实现的原理是什么呢,那么我们前端怎么用我们web技术去实现呢?? 新建一个html文件: 哈哈哈,大家别像我一样用中文命名. 中文命名是不合规范的,行走江湖,大佬们看见你的中文命名会笑话你的. 上图中,我们引入了jquery插件,没错我们用jq写,回归原始(找不到cdn链接的小伙伴可以百度bootcdn,在里面搜索jquery).并且取了

  • 一篇文章教你学会使用Python绘制甘特图

    目录 优点 局限 一日一书 用来制作甘特图的专业工具也不少,常见的有:Microsoft Office Project.GanttProject.WARCHART XGantt.jQuery.Gantt.Excel等,网络上也有一些优质工具支持在线绘制甘特图. 可是这种现成的工具,往往也存在一些弊端,让编程人员不知所措.比如说,花里胡哨的UI,让人目不暇接,不知点哪个才好: 比如说,有些基于浏览器的图表需要掌握HTML.JS等编程语言,只会点Python的我直接被劝退: 再比如,进来就是注册.登

  • 一篇文章教你3分钟如何发布Qt程序

    导读:Qt程序编写好以后该如何发布.本文教你使用Qt自带工具windeployqt来进行操作. 本文字数:500,阅读时长大约:3分钟 (1)编写一个简单的程序 我们先做一个简单的窗口,添加一个图片资源文件,放置到窗口当中. 选择添加Qt Resource File文件类型 选择资源文件的路径,并为它命名 点击完成 设置资源前缀,如果资源层次不是很复杂的话,可以只设置一层,用"/"表示 点击Add Files添加一个图片文件 在主窗口中添加一个 Tool Button,设置刚才的图片为

  • 一篇文章教你用python画动态爱心表白

    初级画心 学Python,感觉你们的都好复杂,那我来个简单的,我是直接把心形看作是一个正方形+两个半圆: 于是这就很简单了,十行代码解决: import turtle as t t.pensize(2) # 笔大小2像素 t.pencolor("red") # 颜色为红色 t.left(45) # 45度 t.fd(200) # 向前200直线 t.circle(100, 180) # 画一圆半径100 弧度180 t.right(90) # 向右90度 t.circle(100, 1

  • 一篇文章教你如何排查.NET内存泄漏

    目录 前言 检查托管内存使用 生成dump文件 分析 core dump 总结 前言 内存泄漏通常表示:一个应用程序的某些对象在完成它的的生命周期后,由于它被其他对象意外引用,导致后续gc无法对它进行回收,长此以往就会导致程序性能的下降以及潜在的 OutOfMemoryException. 这篇我们通过一个内存泄漏工具对 .NET Core 程序进行内存泄漏分析,如果程序是跑在windows上,那直接可以使用 Visual Studio 进行诊断. 检查托管内存使用 在开始分析内存泄漏之前,你一

  • 一篇文章带你理解React Props的 原理

    目录 props理解 1)props 可以是: 2)props在React充当角色(3个角度): 3)监听props改变: 操作 props 1.抽象 props 1)混入 props 2)抽离 props 2.注入 props 1)显式注入 props 2)隐式注入 props 总结 props理解 props 是 React 组件通信最重要的手段 props:对于在 React 应用中写的子组件,父组件绑定在它们标签里的 属性和方法,最终会变成 props 传递给它们. 1)props 可以

  • 一篇文章教你使用枚举来实现java单例模式

    目录 传统的单例写法解决了什么问题 仍然存在的问题 为什么枚举就没有问题 总结 传统的单例写法解决了什么问题 首先,在大多数情况下(不包含面试),传统的单例写法已经完全够用了.通过 synchronized 关键字解决了多线程并发使用. public synchronized static SingleClassV1 getInstance(){ if(instance == null){ instance = new SingleClassV1(); } return instance; }

  • 一篇文章教你如何用多种迭代写法实现二叉树遍历

    目录 思想 实现 总结 思想 利用栈和队列都可以实现树的迭代遍历.递归的写法将这个遍历的过程交给系统的堆栈去实现了,所以思想都是一样的.无非就是插入值的时机不一样.利用栈的先进先出的特点,对于前序遍历.我们可以先将当前的值放进结果集中,表示的是根节点的值.然后将当前的节点加入到栈中.当前的节点等于自己的left.再次循环的时候.也会将left作为新的节点.直到节点为空.也就是走到了树的最左边.然后回退.也就是弹栈..也可以认为回退的过程是从低向上的.具体就是让当前的节点等于栈弹出的right.继

随机推荐