react，如何让盒子里的各项数据自动匹配成mysql数据库里的各项数据？接口地址是？

Question

在使用的react版本如下：

已写的代码如下：

import React from 'react';
import { Grid } from 'antd-mobile';
import './style.css';
let arr = [{
  p: '家住琶洲',
  span: '前景可期',
  src: require('./1.jpg')
}, {
  p: '家住琶洲',
  span: '前景可期',
  src: require('./2.jpg')
}, {
  p: '家住琶洲',
  span: '前景可期',
  src: require('./3.jpg')
}, {
  p: '家住琶洲',
  span: '前景可期',
  src: require('./4.jpg')
}]
export default () => { 
    return(
      <div className='grid'>
      <Grid columns={2} gap={4}>
      {arr.map((item,index) => {
      return (
        <Grid.Item key={index}>
        <div className='grid-demo-item-block'
          onTouchStart={e => e.target.style.backgroundColor = 'gray'} 
          onTouchEnd={e => e.target.style.backgroundColor = 'white'}
        >
          <div className='g'>
            <p>{item.p}</p>
            <span>{item.span}</span>
          </div>
          <img src={item.src} alt='' />
          </div>
        </Grid.Item>
      )
    })}
    </Grid>
    </div>
    )
}

目前效果如下：

希望实现的效果：四个盒子里的图片、标题以及内容都自动获取到mysql数据库里的img、title、content数据
目前数据库文件message.sql放在电脑里的D盘根目录（即路径为d:\message.sql），已开启了3306端口并成功连接了数据库

请问如何才能实现四个盒子里的图片、标题以及内容都自动获取到mysql数据库里的img、title、content数据？接口地址是什么？

Answer 1

你得用 axios 请求吧