有效沟通问答-【官方】百战程序员_IT在线教育培训机构

import React, { Component } from 'react'
import { Modal, Form, Input, Select, Radio, Dropdown, Space,Pagination } from 'antd'
import { icons } from '../../../components'



export default class ModleForm extends Component {
    constructor(props){
        super(props);
        this.state={
            currentIcons:icons.slice(0,10)
        }
    }
    formRef = React.createRef();
    onCancel = () => {
        this.props.dispatch({
            type: "hideModleForm"
        })
    }

    onSave = (values) => {
        console.log(values);
    }
    layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
    }
    render() {
        return (
            <Modal visible width={600} title={this.props.title}
                onCancel={this.onCancel}
                onOk={() => this.formRef.current.submit()}
            >
                <Form {...this.layout} ref={this.formRef} onFinish={this.onSave}>
                    <Form.Item label="父菜单">
                        {"无"}
                    </Form.Item>
                    <Form.Item label="菜单名称" name="name" rules={[{ required: true }]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label="访问路径" name="linkUrl" rules={[{ required: true }]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label="打开方式" name="openType" rules={[{ required: true }]}>
                        <Select>
                            <Select.Option value="1">当前窗口</Select.Option>
                            <Select.Option value="2">新窗口</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="图标" name="icon" rules={[{ required: true }]}>
                        <Dropdown trigger={['click']}
                            overlayStyle={{background:"#fff",padding:10}}
                            overlay={
                                <>
                                    <Radio.Group>
                                        <Space direction='vertical'>
                                            {this.state.currentIcons.map((ele, index) => {
                                                return (<Radio value={ele.name} >
                                                    {React.createElement(ele.renderFn)}
                                                    <span style={{ margin: 5 }} key={index}>{ele.name}</span>
                                                </Radio>)
                                            })}
                                        </Space>
                                    </Radio.Group>
                                    <div style={{textAlign:"right",padding:10}}>
                                        <Pagination showSizeChanger={false} 
                                        size="small" 
                                        total={icons.length}
                                        onChange={(page,pageSize)=>{
                                            this.setState({
                                                currentIcons:icons.slice(pageSize*(page-1),pageSize*page)
                                            })
                                        }}
                                        ></Pagination>
                                    </div>
                                </>
                            }>
                            <Input></Input>
                        </Dropdown>
                    </Form.Item>
                    <Form.Item label="权限" name="isOfAdmin" rules={[{ required: true }]}>
                        <Radio.Group>
                            <Radio value="1">仅超管可见</Radio>
                            <Radio value="2">不限</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="菜单名称" name="name" rules={[{ required: true }]}>
                        <Input></Input>
                    </Form.Item>
                </Form>
            </Modal>
        )
    }
}

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 32楼

const express = require("express")
const router = express.Router()
const sqlFn = require("../mysql")

router.post('/add',function(req,res,next){
    const sql = "incert into menu values (null,?,?,?,?,?,?)"
    const {pid =-1,name,linkUrl,openType,icon,isAdmin} = req.body;
    const arr = [pid,name,linkUrl,openType,icon,isAdmin]
    sqlFn(sql,arr,function(err,data){
        if(err){
            next(err)
            return
        }
        if(data.affectedRows){
            res.send({code:'00000',success:true})
        }
    })
})

module.exports = router

const express = require("express");
const app = express();
const menu = require("./routes/menu")
const bodyParser = require("body-parser")


app.use(bodyParser.json())
app.use("/api/menu",menu)


app.use(function(err,req,res,next){
    console.info(err.stack);
    res.status("500").send("服务端出错了")
})

app.listen("3030",function(){
    console.log("服务器运行在3030端口上");
})

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 33楼

不知道为什么返回data在控制台会有两行，一行是{ }，另外一行才是真正数据

code.png

console.png

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目（旧） 34楼

解决好了QAQ……………………………………

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目（旧） 35楼

老师，为啥我的菜单列表显示不出来数据

求解答

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 36楼

import React, { Component } from 'react'

import {Button,Card,Table,Space} from 'antd'

import { PlusOutlined } from '@ant-design/icons'

import { Panel } from '../../../components'

import { connect } from 'react-redux'

import ModalFrom from './ModalForm'

class Menu extends Component {

constructor(props){

super(props);

this.state = {

dataSource:[]

}

onGetlist=()=>{

global.service.get('/api/menu/list').then(data=>{

console.log(data);

this.setState({dataSource:data.records})

})

}

componentDidMount(){

this.onGetlist()

}

onAdd=(record) =>{

//打开弹窗

return ()=>{

this.props.dispatch({

type:'showModalForm',

data:{

title:'新增', //弹窗标题

data:record?{name:record.name,pid:record.id}:{},//表单数据

refreshList:this.onGetlist

}

})

}

getTableProps = () =>{

return {

colums:[

{

title:'菜单',

dataIndex:'name',

{

title:'访问地址',

dataIndex:'linkUrl',

{

title:'操作',

render:(record) =>(

<Space>

</Space>

)

}

dataSource:this.state.dataSource||[],

rowKey:'id',

pagination:false

}

render() {

const {modalFrom} = this.props.menuState;

return (

<Button type='primary' icon={<PlusOutlined/>} onClick={this.onAdd()}>新增</Button>

</div>

<Card>

{/* 列表组件 */}

</Card>

{modalFrom&&<ModalFrom {...modalFrom} {...this.props}/>}

</Panel>

)

}

const mapStateToProps = (store) =>({menuState:store.menu})

const mapDispatchToProps = (dispatch) =>({dispatch})

export default connect(mapStateToProps,mapDispatchToProps)(Menu)

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 37楼

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 38楼

没有catch，报这个错

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 39楼

排序怎么从高到低呀，这是反过来的呢= =、

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 40楼

老师为什么create store 不能使用会报错

后来我根据建议安装了 Redux Toolkit

但是还是不会使用 Redux Toolkit

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.

For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today

configureStore from Redux Toolkit is an improved version of createStore that simplifies setup and helps avoid common bugs.

You should not be using the redux core package by itself today, except for learning purposes. The createStore method from the core redux package will not be removed, but we encourage all users to migrate to using Redux Toolkit for all Redux code.

If you want to use createStore without this visual deprecation warning, use the legacy_createStore import instead:

import { legacy_createStore as createStore} from 'redux'

@不推荐使用

我们推荐使用 @reduxjs/toolkit 包的 configureStore 方法，它取代了 createStore。

Redux Toolkit 是我们推荐的当今编写 Redux 逻辑的方法，包括存储设置、reducers、数据获取等。

有关更多详细信息，请阅读此 Redux 文档页面：https://redux.js.org/introduction/why-rtk-is-redux-today

Redux Toolkit 中的 configureStore 是 createStore 的改进版本，它简化了设置并有助于避免常见错误。

你今天不应该单独使用 redux 核心包，除非是为了学习目的。核心 redux 包中的 createStore 方法不会被删除，但我们鼓励所有用户迁移到对所有 Redux 代码使用 Redux Toolkit。

如果您想在没有此视觉弃用警告的情况下使用 createStore，请改用 legacy_createStore 导入：

从“redux”导入 { legacy_createStore as createStore}

“createStore”已弃用。ts(6385)

index.d.ts(375, 4)：该声明曾在此处标注为已弃用。

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 41楼

老师，数据库的数据在哪儿找啊？

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目 42楼

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 43楼

react-goodlive-stage1-home.zip

老师，这个字和图标出不来，都是白的，老师帮忙看看问题在哪里，谢谢啦

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目（旧） 44楼

老师你好，可以发我一下ps的安装包吗谢谢啦

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目（旧） 45楼

同学您好