Clean Blog by Node && React 2

December 14, 2016

前言

开始实战

Expressapp.js中的路由整理

了解expressjs的开发者都知道,在routes文件中,每一个文件都表示一个路由,于是有这样的写法。

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;

每一次新建一个文件,都要引入express,利用其中的router方法,去实现路由的渲染,不仅如此,并且在app.js文件中,还需要进行引入,例如这样的写法。

var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);

这样极大的降低了开发的效率,因此,我将路由放在一个文件夹内/routes/index.js。如下代码:

// /routes/index.js
module.exports = function(app) {
app.get('/', function(req, res) {
res.render('index', {
title: 'Article'
});
});
app.get('/about', function(req, res) {
res.render('index', {
title: 'About'
});
});
app.get('/contact', function(req, res) {
res.render('index', {
title: 'Contact'
});
});
app.get('/article/:id', function(req, res) {
res.render('index', {
title: 'Article Detail'
});
});
};

/routes/index.js中,我将所有路由和渲染方法放在了一起,来管理服务器路由以及API的请求(下次解释)。并且,在/app.js中还需要将此方法引入。

var routes = require('./routes/index');
var app = express();
routes(app);

至此,服务器端的路由以及API请求的路由已配置好,下面将利用react-router来配置前端路由

组件与前端路由

页面构思

在配置前端路由之前,先来想象一下我们的项目是什么样子。 大概结构如下:

  • 文章列表页(首页)
  • 文章详情页(文章列表点击后显示的详情)
  • 关于我
  • 联系我
  • 404

大概需要五个页面。

文件的创建

我们的目录结构应该是这样的,在/src目录下面,分为如下组件

  • Nav
  • Header
  • Content
  • Footer
  • About
  • contact

ok, 新建如下文件

/src
- /components
- Nav.js //导航组件
- Header.js //头组件
- Footer.js //底部组件
- Post.js //文章详情组件
- About.js //关于组件
- Contacts.js //联系我组件

也许你觉得还缺一个列表组件,由于列表组件涉及到循环输出,暂且作为html元素存放。没关系,先从简单入手。

组件代码编写

有了上述组件之后,需要对一一为组件编写代码。先让我们浏览下组件所呈现的内容的模样如何。

首页(文章列表页)

文章列表页

首页(footer)

底部

文章详情页

底部

About页

about

Contact页

contact

404页

404

同志,醒醒,该写代码了(组件编写)

ok, 浏览完高大上的页面之后,到了写组件的时间了。

对于组件不过多解释,你可以定制化你的组件,添加各类的htmlcss组件。在这里,只写出大体的框架(只有html标签,省略className),并且只列出三段代码(导航、头、尾)。等该记录完全完成,我会将源码开放。以下是部分组件的html代码。

// /src/components/Nav.js
import React, {Component} from "react";
import {Route, IndexRoute, Link} from "react-router"
export default class Nav extends Component {
render() {
return (
<nav>
<div>
<button type="button">
<span>Toggle navigation</span>
Menu <i></i>
</button>
<Link className="navbar-brand" to = "/">HOME</Link>
</div>
<div>
<ul>
<li><Link to = "/">HOME</Link></li>
<li><Link to = "/about">about</Link></li>
<li><Link to = "/work">work</Link></li>
<li><Link to = "/contact">contact</Link></li>
</ul>
</div>
</nav>
)
}
}
// /src/components/Header.js
import React, {Component} from 'react';
import {render} from "react-dom";
export default class Header extends Component {
render() {
return (
<header>
<div>
<h1>React Clean Blog</h1>
<hr/>
<span>A Clean Blog Theme by React Bootstrap</span>
</div>
</header>
)
}
}
// /src/components/Footer.js
import React, {Component} from "react";
export default class Footer extends Component {
render () {
return (
<footer>
<div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<p>Copyright &copy; Your Website 2016</p>
</div>
</footer>
)
}
}
// /src/components/Post.js
import React, {Component} from "react";
export default class Footer extends Component {
render () {
return (
<div>
<header>
<div>
<h1>{model.title}</h1>
<h2></h2>
<span className="meta">Posted by <a href="#"></a></span>
</div>
</header>
<article>
<div>
<div></div>
</div>
</article>
</div>
)
}
}

react-router(前端路由)

新建文件/routes/routes.js,用来管理各个组件的路由配置。我们搭建一个总的框架App.js,配置好头部与底部内容。首先需要引入组件,如下代码:

// /src/routes.js
import React , {Component} from "react"
import {Route, IndexRoute, Link, browserHistory} from "react-router"
import Nav from "./components/Nav.js"
import Header from "./components/Header.js"
import Footer from "./components/Footer.js"
import Contacts from "./components/Contacts.js"
import Post from "./components/Post.js"
import Abouts from "./components/About.js"
class App extends Component {
render() {
return (
<div>
<Nav/>
{this.props.children}
<hr/>
<Footer/>
</div>
)
}
}

并在routes.js中定义路由并暴露出去。

export default (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="article">
<Route path=":id" component={Post}/>
</Route>
<Route path="about" component={About}/>
<Route path="contact" component={Contact}/>
<Route path="*" component={NoMatch}/>
</Route>
)

这样,我们所有的前端路由已经定义完成。可以看到,所有的页面都是基于App Component完成。 最终,在主文件/src/index.js中,获取DOM,写入render方法中。

// /src/index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
const Routes = (
<Router history={browserHistory}>
{ routes }
</Router>
)
const app = document.getElementById('app')
render(Routes, app)

这样,所有的静态部分就大工告成。回想一下以上两篇的内容。首先,由expressnode作为服务器端的编程工具,搭建了后端的路由和静态资源配置。其次,利用react\react-router,进行了前端路由的配置,并且使用webpack进行了ES6->ES5的代码转化。