持续更新!
本次实战项目素材来自尚硅谷的React全展现全栈,项目内容是使用react +antd的方式开发后台管理系统,本文在这里记录一下开发时踩到的小坑以及解决方案,希望能对你有帮助!
实战项目视频地址
配置部分:
yarn add less less-loader安装失败
登录页:
报错:TypeError: _form.default.create(…) is not a function
如果不想使用旧版antd,那么antd4的登录表单可以这么写
<div className="login">
<header className="login-header">
<img src={logo} alt="logo" />
<h1>React项目:后台管理系统</h1>
</header>
<section className="login-content">
<h2>用户登录</h2>
<div>
<Form
onFinish={onFinish}
onFinishFailed={onFinishFailed}
className="login-form">
<Item
name="username"
rules={[
{ required: true, whitespace: true, message: '请输入用户名' },
{ min: 4, message: '用户名至少4位' },
{ max: 12, message: '用户名至多12位' },
{ pattern: !/^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }
]}
>
<Input prefix={<UserOutlined style={{ color: "rgba(0,0,0,0.5)" }} />} />
</Item>
<Item
name="password"
rules={[
{ validator: this.validatePwd }
]}
>
<Input.Password prefix={<LockOutlined style={{ color: "rgba(0,0,0,0.5)" }} />} />
</Item>
<Item>
<Button type="primary" htmlType="submit" className="login-form-button">
登录
</Button>
</Item>
</Form>
</div>
</section>
</div>
导航栏部分:
1.报错:
Warning: Each child in a list should have a unique “key” prop.
Warning: React does not recognize the eventKey
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase eventkey
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the warnKey
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase warnkey
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
原因是我在使用map遍历生成菜单时,不小心把Menu组件也放到了递归函数,导致每次递归调用都生成了新的Menu,因此就算数组里有key也出现报错中说没有key的错误。
正确的菜单代码如下
getMenuNodes = (menuList) => {
return menuList.map(item => {
if (!item.children) {
return (
<Menu.Item key={item.key} icon={<PieChartOutlined />}>
<Link to={item.key}>{item.title}</Link>
</Menu.Item>
)
} else {
return (
<SubMenu key={item.key} icon={<MailOutlined />} title={item.title}>
{this.getMenuNodes(item.children)}
</SubMenu>
)
}
})
}
<Menu
mode="inline"
theme="dark"
>
{
this.getMenuNodes(menuList)
}
</Menu>
2.Icon的动态添加,正确用法如下:
解决方案
主页天气部分:
由于视频课内教的百度天气api不能使用了,因此改用高德地图的天气获取。
1.首先到高德地图注册账号。高德地图官网
2.注册成为开发者。
3.打开高德地图的天气qpi页面。高德天气
4.最后根据城市代码查询到当地天气。
5.https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=<用户key> // api样例
数据库中缺失数据问题:
在官方下载的文件中,mongodb的数据是缺失的,因此查不到category、product、role这部分的数据,因此需要我们手动添加。
1.下载mongoDBcompass。这个是MongoDB的官方可视化管理工具,相当于Navicat。
2.下载数据Json文件。百度网盘链接。提取码:07q3
3.启动数据库。
4.打开mongoCompass,点击Fill in connection fields individually
将localhost改为localhost/server_db2,点击连接。有时候会不成功,重启数据库,多试几次。
5.在这个数据库中添加categorys / products/ roles三个表
6.然后选择刚刚下载好的json文件将它导入进去。
7.重启一次数据库就能用上了。
关于Antd4.x Modal搭配Form使用
https://blog.csdn.net/Crayon111/article/details/119650608