React学习（六）——搭建简单的个人博客网站 - daxiazouyizou的博客 - CSDN博客

    大家好，我是凯文，通过之前的几篇文章，我们了解了React前端框架的基础架构和使用方法，那么现在我们就通过一个简单的实例来介绍：如何用React框架搭建出一个简单的博客网站。

    关于之前的React相关内容可以参考以下链接：

    React基础项目搭建： https://blog.csdn.net/daxiazouyizou/article/details/79743832

    React组件运用：https://blog.csdn.net/daxiazouyizou/article/details/79748078

    React路由（跟下文有关）：https://blog.csdn.net/daxiazouyizou/article/details/79754021

    下面开始网站搭建，首先我们来对该网站做一个规划

    1、先确定网站的主题为：个人博客网站

    2、网站功能：首页显示文章标签，通过点击来浏览不同的文章

    3、网站性质：由于篇幅有限，这里我们只制作静态网站，也就是不连接后台数据库，直接显示网站内容。

    好了，那我们首先搭建一个的React项目，这里直接采用 React路由 链接中搭建完的页面来进行改造。

    参考 React路由 链接中的教程，我们做了一个主页面，其中包含了三个链接，点击后可以跳转到分页面，如下图所示：

        

    当我们点击下方的三行链接文字时，会跳转到相对应的页面，如下图：

        

    但是，这样只能体现出最简单的跳转功能，十分不美观，我们需要运用到CSS样式来使页面内容更加丰富，各位可以直接采用CSS更改页面样式，这里为了更加方便快捷，我们引入 UI控件 这个概念，所谓的UI控件就是许多开发团队提前制作打包好的样式和组件集合，只要拿来使用就可以展现出各种各样的效果。

    这里我们采用 Semantic-UI ，链接是： https://react.semantic-ui.com/

    下面介绍使用方法，Semantic-UI团队已经做好了许多React组件，我们只需要根据官方网页中的提示引入React组件就可以使用。在使用之前，先要在我们本地的React项目里安装Semantic-UI

    打开CMD命令行，读取项目路径，然后输入：

        cnpm i --save-dev semantic-ui-react   

      （cnpm 获取更快，输入npm效果一样）

      （cnpm安装方法输入： npm install -g cnpm --registry=https://registry.npm.taobao.org   ）

    之后输入：

        cnpm install semantic-ui-css --save

    然后需要引入样式，在index.js文件中 import 一下，如下所示：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(<App/>, document.getElementById('root'));   

    下面我们就可以愉快地使用Semantic-UI了。

    首先，我们使用 Segment 组件来将页面信息包裹起来，在 Home.js 文件中 import Segment组件，然后在render函数中使用<Segment></Segment>标签把页面标签包裹起来，如下所示：

                    <Segment><div>This is Home!</div></Segment>

<Segment>

<div>

<Link to="/Page1/" style={{color:'black'}}>

<div>点击跳转到Page1</div>

</Link>

<Link to="/Page2/" style={{color:'black'}}>

<div>点击跳转到Page2</div>

</Link>

<Link to="/Page3/" style={{color:'black'}}>

<div>点击跳转到Page3</div>

</Link>

</div>

</Segment>

  

     美观起见，我们给页面设置外边距为10px，修改App.js的内容，给div添加style属性，如下所示：

            <Router >

<div style={{margin:'10px'}}>

<Route exact path="/" component={Home} />

<Route path="/Page1" component={Page1} />

<Route path="/Page2" component={Page2} />

<Route path="/Page3" component={Page3} />

</div>

</Router>

   

      然后，我们就可以看到页面变成了下图的状态：（开启项目命令  npm start    网页地址 localhost:3000）

      一般的网站都会有一个导航栏，通过点击导航栏中的按钮来实现页面跳转，这里我们也采用这种方式。

      下面引入 Semantic-UI 的 menu 组件，改造 Home.js 文件，代码如下：

import React from 'react';

import { Link } from 'react-router-dom';

import { Segment, Menu } from 'semantic-ui-react';

class Home extends React.Component{

render(){

return(

<div>

<Segment><div>This is Home!</div></Segment>

<Menu>

<Menu.Item>

<Link to="/Page1/" style={{color:'black'}}>

<div>点击跳转到Page1</div>

</Link>

</Menu.Item>

<Menu.Item>

<Link to="/Page2/" style={{color:'black'}}>

<div>点击跳转到Page2</div>

</Link>

</Menu.Item>

<Menu.Item>

<Link to="/Page3/" style={{color:'black'}}>

<div>点击跳转到Page3</div>

</Link>

</Menu.Item>

</Menu>

</div>

);

}

}

export default Home;

    然后页面就变成了这样：

    点击菜单里的按钮，下方就会出现对应Page组件里的内容，这里注意，在App.js文件中，把第一条Route标签的exact属性去掉，不然切换页面的话上方的导航栏就会消失。

    我们还可以进行进一步的改善，在This is Home 的位置替换上图片，替换方式如下

    找一张长方形的标题图片，先把图片放到 src 目录下，创建一个img文件夹

    然后如下所示改造 Home.js 文件，引入Image组件，并将标题替换为该标签，src属性中 require（'该图片的路径'）

import React from 'react';

import { Link } from 'react-router-dom';

import { Segment, Menu, Image } from 'semantic-ui-react';

class Home extends React.Component{

render(){

return(

<div>

<Image rounded src={require('./img/2331.jpg')}/>

<Menu>

<Menu.Item>

<Link to="/Page1/" style={{color:'black'}}>

<div>Page1</div>

</Link>

</Menu.Item>

    

    好，现在我们来看一下效果，是不是更美观了呢（图片可自行替换）

    现在我们完成了标题图片和导航栏的添加，现在我们来对 Page1.js 这个文件进行改造，代码如下：

import React from 'react';

import { Segment } from 'semantic-ui-react';

class Page1 extends React.Component{

render(){

return(

<div>

<Segment

style={{

textAlign:'center',width:'60%',margin:'10px auto'

}}>

文章一——长恨歌

</Segment>

<Segment

style={{

textAlign:'center',margin:'10px auto'

}}>

汉皇重色思倾国，御宇多年求不得。<br/>

杨家有女初长成，养在深闺人未识。<br/>

天生丽质难自弃，一朝选在君王侧。<br/>

回眸一笑百媚生，六宫粉黛无颜色。<br/>

春寒赐浴华清池，温泉水滑洗凝脂。<br/>

侍儿扶起娇无力，始是新承恩泽时。<br/>

</Segment>

</div>

);

}

}

export default Page1;

    在页面中添加了两对Segment标签，显示第一篇文章，其中使用了行内CSS样式，使用方法可以参考我之前的文章：

    React样式设置：https://blog.csdn.net/daxiazouyizou/article/details/79758558

    显示效果如下所示：

     如图所示，一篇古文（也可以是博客什么的）就呈现在了页面中，其构成十分简单，各位可以自由发挥，搭建出自己想要的页面样式。Semantic-UI 中还有许多实用的组件，也可以自行创建CSS样式。

    下面，我们对另外两个页面进行改造，页面效果如下：

    

    现在，我们成功地搭建出了可切换的文章页面（虽然一开始说是博客，结果变成了古文？问题不大效果一样）

    本文章只是简单介绍网站页面的搭建方法，各位可以自行学习实践，搭建出满意的页面。

    谢谢各位支持，之后还会有React相关文章更新。

    下一篇，简单的用户名密码验证实现：https://blog.csdn.net/daxiazouyizou/article/details/80306084

Original url: Access
Created at: 2019-04-18 20:36:24
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论