P14:前中台结合1-前台读取首页文章列表接口
目录
现在数据库、表和接口我们都已经完成了,这集可以试着从数据接口获得数据,显示在页面上了。实现这个需求,我们将使用 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-前台读取首页文章列表接口
码云笔记 » P14:前中台结合1-前台读取首页文章列表接口