Question

我正在用烧瓶创建一个盖茨比应用程序。我在后端有一条路由，可以向我返回用户信息字典，但是此路由有一个参数，您需要传递用户的uid以获得所需的列表。此时，我可以返回更改uid的不同用户的列表。现在，我想以此路线作为反应的前端，我已经尝试过，但是我不知道自己在做什么。

后端api代码（此函数根据我在路由中插入的uid返回一个列表）：

@app.route('/user/<uid>', methods=['GET'])
@jwt_required
def user_details(uid):

    user = ldap.get_object_details(uid)
    return jsonify(user)

返回的字典：

 {
  "cn": [
    "Turanga Leela"
  ], 
  "description": [
    "Mutant"
  ], 
  "employeeType": [
    "Captain", 
    "Pilot"
  ], 
  "mail": [
    "leela@planetexpress.com"
  ], 
  "ou": [
    "Delivering Crew"
  ], 
  "sn": [
    "Turanga"
  ], 
  "uid": [
    "leela"
  ]
}

所以我已经有一个页面向我显示我所拥有的用户。我想要的是单击此列表中的名称，然后转到一个页面，在该页面上，我仅使用新路线显示该用户信息。

这是前端用户列表中的代码（显示用户列表）：

users.jsx

export default function User ({ data })  {
  const classes = useStyles()

  return (

    <div className={classes.root}>
      <h1>Users</h1>
      <Table className={classes.table} size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">User</TableCell>
             <Link to='/details'></Link>
          </TableRow>
        </TableHead>
        <TableBody>
            {data.map(user => (
            <TableRow>
              <TableCell align="left">{user} </TableCell>

            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

我还创建了一个新页面userdetails.jsx以获取我的用户详细信息数据，但我无法显示它：

userdetails.jsx

export default function UserDetails ({ data })  {
  const classes = useStyles()

  return (

     <div className={classes.root} >
       <h1>User Details</h1>
       <Table className={classes.table} size="small">
         <TableHead>
           <TableRow>
             <TableCell align="left">cn</TableCell>
             <TableCell align="left">description</TableCell>
             <TableCell align="left">employeeType</TableCell>
             <TableCell align="left">mail</TableCell>
             <TableCell align="left">ou</TableCell>
             <TableCell align="left">sn</TableCell>
             <TableCell align="left">uid</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {data.map(row => (
             <TableRow>
               <TableCell component="th" scope="row">
               </TableCell>
               <TableCell align="left">{row.cn}</TableCell>
               <TableCell align="left">{row.description}</TableCell>
               <TableCell align="left">{row.employeeType}</TableCell>
               <TableCell align="left">{row.mail}</TableCell>
               <TableCell align="left">{row.ou}</TableCell>
               <TableCell align="left">{row.sn}</TableCell>
               <TableCell align="left">{row.ui}</TableCell>
             </TableRow>
           ))}
         </TableBody>
       </Table>
     </div>
   )
}

我正在这样获取：


userdetails.js

import React from "react"

import Layout from "../components/layout"
import UserDetails from "../components/userdetails"
import MainComponentWrapper from "../components/mainComponentWrapper"


const IndexPage = () => (
  <Layout>
    <MainComponentWrapper url="http://localhost:5000/user/<uid>">
      <UserDetails />

    </MainComponentWrapper>
  </Layout>
)
export default IndexPage

不知道如何使我的后端api路由起作用

0 个答案: