阿里妈妈图标库引入, 打开https://www.iconfont.cn/ ，找到喜欢的图表下载下来， 然后引入，在对应的地方加上iconfont和它对应的样式类的值
import { View, Text } from '@tarojs/components'; import { AtIcon } from 'taro-ui' import "taro-ui/dist/style/components/icon.scss"; import 'assets/iconfont/iconfont.css' import './index.scss' import { goToPage } from 'utils/router.js' export default function Header(props) { return ( <View className='header'> <Text className='header-text'>{ props.title }</Text> <Text onClick={() => goToPage('index')}> <AtIcon prefixClass='icon' className='iconfont header-reback' value='home' color='#6190e8'></AtIcon> </Text> </View> ) }redux的使用，这里主要是多页面共享数据的时候用了下，核心代码就这点
import { UPDATE } from 'constants/form'; const INITIAL_STATE = { city: '', createTime: '', gender: '', id: '', idcard: '', leaveTime: '', matter: '', mobile: '', orgin: '', place: '', province: '', religiousCountry: '', religiousType: '', updateTime: '', username: '', visiteDate: '', visiteTime: '' }; export default function form(state = INITIAL_STATE, action) { switch (action.type) { case UPDATE: return { ...state, ...action.data }; default: return state; } }使用方法如下
@connect(({ form }) => ({ form }), (dispatch) => ({ updateForm (data) { dispatch(update(data)) } })) componentWillUnmount () { const { updateForm } = this.props; updateForm({ city: '', createTime: '', gender: '', id: '', idcard: '', leaveTime: '', matter: '', mobile: '', orgin: '', place: '', province: '', religiousCountry: '', religiousType: '', updateTime: '', username: '', visiteDate: '', visiteTime: '' }) }开发环境和生成环境的打包配置, 因为最后要合到egg服务里面，所以这里生产环境的publicPath和baseName都应该是 /public
module.exports = { env: { NODE_ENV: '"production"' }, defineConstants: {}, mini: {}, h5: { /** * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。 * 参考代码如下： * webpackChain (chain) { * chain.plugin('analyzer') * .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []) * } */ publicPath: '/public', router: { basename: '/public' } } };开发环境名字可自定义如：
module.exports = { env: { NODE_ENV: '"development"' }, defineConstants: {}, mini: {}, h5: { publicPath: 'http://www.likecs.com/', esnextModules: ['taro-ui'], router: { basename: '/religion' } } }; 5.2 后端实现后端这块，其他的都没啥好讲的，具体可以参看我之前写的两篇文章，或者阅读源码，这里着重讲下防止短信验证码恶意注册吧。
5.2.1 如何防止短信验证码对恶意使用这个主要是在于用的是内部实现的短信验证码接口（自家用的），不是市面上一些成熟的短信验证码接口，所以在预发布阶段安全方面曾经收到过一次攻击（包工头家的服务器每天都有人去攻击，好巧不巧刚被我撞上了），被恶意使用了1W条左右短信，痛失8张毛爷爷啊。总结了下这次教训，主要是从IP、发送的频率、以及加上csrf Token去预防被恶意使用。
大致是这样搞得。
安装相对于的类库
"egg-ratelimiter": "^0.1.0", "egg-redis": "^2.4.0",在config/plugin.js下配置
ratelimiter: { enable: true, package: 'egg-ratelimiter', }, redis: { enable: true, package: 'egg-redis', },在config/config.default.js下配置
config.ratelimiter = { // db: {}, router: [ { path: '/sms/send', max: 5, time: '60s', message: '卧槽，你不讲武德，老是请求干嘛干嘛干嘛！', }, ], }; config.redis = { client: { port: 6379, // Redis port host: '127.0.0.1', // Redis host password: null, db: 0, }, };效果是这样的
TaroJS官网： https://taro-docs.jd.com/taro/docs/README
ReactJS官网： https://reactjs.org/
eggJS官网： https://eggjs.org/
七、写在最后到这里就要和大家说再见了， 通过阅读本文，对于表单的制作你学会了吗？欢迎在下方发表你的看法，也欢迎和笔者交流！
github项目地址：https://github.com/cnroadbridge/jingzhou-religion
gitee项目地址： https://gitee.com/taoge2021/jingzhou-religion