12月14, 2016

Clean Blog by Node && React 2

前言

开始实战

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的代码转化。

本文链接:https://beacelee.com/post/clean-blog-react-node-2.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。