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

P07：博客列表页面制作

AI 概述

本文我们先把博客底部制作一下，然后在快速制作博客的列表页面，通过这个你就能感觉到 React 组件化开发的魅力，有了这些通用组件，能很快完成列表页的开发。博客底部的制作每个博客在底部都会放置一些类似版权，联系方式，友情连接的东西。并且每个页面也都是一样的，所以我们要作一个通用的博客底部组件（Footer.js...

本文我们先把博客底部制作一下，然后在快速制作博客的列表页面，通过这个你就能感觉到 React 组件化开发的魅力，有了这些通用组件，能很快完成列表页的开发。

博客底部的制作

每个博客在底部都会放置一些类似版权，联系方式，友情连接的东西。并且每个页面也都是一样的，所以我们要作一个通用的博客底部组件（Footer.js）。

在/components目录下，新建立一个Footer.js的文件，然后写入下面代码：

export default function Footer() {
    return (
        <div className="footer-div">
            <div>系统由 React+Node+Ant Desgin 驱动 </div>
            <div>mybj123.com</div>
        </div>
    )
}

然后在/styles文件夹下建立一个footer.css文件

.footer-div{
    text-align: center;
    width: 100%;
    padding: 1rem;
    color:#888;
}

编写完成后将footer.css引入到pages/_app.js里，就可以完成底部菜单的开发了。最后把Footer.js组件引入到index.js中，看一下效果，当然，在预览后可以根据自己的喜好进行微调。

博客列表页的制作

因为博客列表页和首页非常类似，只是列表页多了“面包屑导航”，我们先把首页的代码index.js，拷贝到list.js页面中，因为现在我们要共用列表样式，所以把index.css的列表样式放到globals.css样式里边。

然后就可以写面包屑导航了，直接用Ant Design自带的Breadcrumb就可以，用法也是非常简单，先进行引入:

import React, {useState} from 'react'
import Head from 'next/head'
import {Row, Col , List , Breadcrumb, Space } from 'antd'
import {ClockCircleOutlined,VideoCameraOutlined,FireOutlined} from '@ant-design/icons'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'

export default function MyList() {
  const [mylist,setMylist] = useState(
    [
      {title:'Vue3.x 的生命周期和钩子函数',context:'Vue3 版本的生命周期和 Vue2 比有了些变化，所以我先站在一个初学者的角度（没有学过 Vue2 版本的新手），从新讲一下 Vue3.x 的生命周期，等你完全理解之后，我们再来和 Vue2.x 的生命周期作一个对比。'},
      {title:'前端 js 代码规范总结',context:'如果你关心代码的本身以及编写方式，而只是担心代码是否有效的，你可以说你实践并且关心代码的规范性。专业的开发人员总是会考虑到自己便于将来还能可读和其他的团队人员，并不是仅仅考虑到运行的结果。你写的任何代码并不是只写一次，总会有其他的开发人员来做你写的代码，如果你写的不规范，而他则会痛苦不堪。希望这个人不是你。'},
      {title:'Redis + NodeJS 实现一个能处理海量数据的异步任务队列系统',context:'在最近的业务中，接到了一个需要处理约十万条数据的需求。这些数据都以字符串的形式给到，并且处理它们的步骤是异步且耗时的（平均处理一条数据需要 25s 的时间）。如果以串行的方式实现，其耗时是相当长的：'},
    ]
  )
  const IconText = ({ icon, text }) => (
    <Space>
      {React.createElement(icon)}
      {text}
    </Space>
  );
  return (
    <div>
      <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>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item>前端</Breadcrumb.Item>
              </Breadcrumb>
            </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="2020-12-01" key="list-vertical-star-o" />
                      <IconText icon={VideoCameraOutlined} text="前端教程" key="list-vertical-like-o" />
                      <IconText icon={FireOutlined} text="5498 人" key="list-vertical-message" />
                    </div>
                    <div className="list-context">{item.context}</div>  
                  </List.Item>
                )}
              />
          </div>
        </Col>

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

globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    background-color: #f6f6f6;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
.comm-left{
  background-color: #FFF;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;
}
.comm-right{
  background-color: #FFF;
  margin-left: .5rem;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;

}
.comm-main{
  margin-top: .5rem;
}
.list-title{
  font-size:1.3rem;
  color: #1e90ff;
  padding: 0 0.5rem;
}
.list-context{
  color:#777;
  padding:.5rem;
}
.list-icon{
  padding:.5rem 0;
  color:#AAA;
}
.list-icon span{
  display: inline-block;
  padding: 0 10px;
}

以上就是本文关于列表页面制作全部内容，下节我们再制作文章详细页，文章详细页完成我们的前台 UI 部分就算基本完成了。

以上关于P07：博客列表页面制作的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

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

微信

支付宝

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

antd React react实战个人博客博客

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

码云 SVIP

分享到：

博客底部的制作

博客列表页的制作

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复