码云 React.js教程 2020-12-31

P14：前中台结合1-前台读取首页文章列表接口

AI 概述

安装 Axios 模块新建 getInitialProps 方法并获取数据把数据放入到界面中修改时间戳为日期格式现在数据库、表和接口我们都已经完成了，这集可以试着从数据接口获得数据，显示在页面上了。实现这个需求，我们将使用 Axios 模块来实现。安装 Axios 模块先进入前台的文件夹，如果你和我写的文件名是一...

文章目录隐藏

安装 Axios 模块
新建 getInitialProps 方法并获取数据
把数据放入到界面中
修改时间戳为日期格式

现在数据库、表和接口我们都已经完成了，这集可以试着从数据接口获得数据，显示在页面上了。实现这个需求，我们将使用 Axios 模块来实现。

安装 Axios 模块

先进入前台的文件夹，如果你和我写的文件名是一样的，应该是blog，引入后就可以使用npm命令进行安装了:

npm install --save axios

当然你用yarn来进行安装也是完全可以的。

yarn add axios

安装完成后可以到package.json里看一下现在安装的结果，我目前安装的 0.21.0 版本，你们学习的时候可以跟我的不太一样。

新建 getInitialProps 方法并获取数据

当Axios安装完成后，就可以从接口获取数据了。打开/blog/pages/index.js文件，在文件下方编写getInitialProps。

Home.getInitialProps = async () => {
  const promise = new Promise((resolve) => {
    axios('http://127.0.0.1:7001/default/getArticleList').then(
      (res) => {
        resolve(res.data)
      }
    )
  })
  return await promise
}

这里使用了经典的async/await的异步方法。

把数据放入到界面中

当我们在getInitialProps方法里获得数据后，是可以直接传递到正式方法里，然后进行使用:

const Home = (list) =>{
  //---------主要代码-------------start
  const [ mylist , setMylist ] = useState(list.data);
  //---------主要代码-------------end
  const IconText = ({ icon, text }) => (
    <Space>
      {React.createElement(icon)}
      {text}
    </Space>
  );
  return (
    <>
      <Head>
        <title>Home</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
            <div>
              <List
                header={<div>最新日志</div>}
                itemLayout="vertical"
                dataSource={mylist}
                renderItem={item => (
                  <List.Item>
                    <div className="list-title">{item.title}</div>
                    <div className="list-icon">
                      <IconText icon={ClockCircleOutlined} text={item.addTime} key="list-vertical-star-o" />
                      <IconText icon={VideoCameraOutlined} text={item.typeName} key="list-vertical-like-o" />
                      <IconText icon={FireOutlined} text={item.view_count} key="list-vertical-message" />
                    </div>
                    <div className="list-context">{item.introduce}</div>  
                  </List.Item>
                )}
              />  
            </div>
        </Col>

        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer/>
   </>
  )
}

做完这步，我们的内容就应该正确的显示在页面上了，但是还是有点小问题，比如我们的日期格式还是不正确。

修改时间戳为日期格式

其实这个有很多方法，有前端实现的方法，也有后端实现的方法，但是我觉的使用 SQL 语句来实现是最简单的一种方法。

打开/service/app/controller/default/home.js文件，找到拼凑 SQL 语句那部分代码，把代码修改成如下样式即可实现转换。

const sql = 'SELECT article.id as id,' +
  'article.title as title,' +
  'article.introduce as introduce,' +
  "FROM_UNIXTIME(article.addTime,'%Y-%m-%d %H:%i:%s' ) as addTime," +
  'article.view_count as view_count ,' +
  'type.typeName as typeName ' +
  'FROM article LEFT JOIN type ON article.type_id = type.Id';

关键语句

"FROM_UNIXTIME(article.addTime,'%Y-%m-%d %H:%i:%s' ) as addTime," +

现在去浏览器中预览一下，应该就实现了时间戳转换成时间日期格式了。

以上关于P14：前中台结合1-前台读取首页文章列表接口的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » P14：前中台结合1-前台读取首页文章列表接口