核心提示：搭建个人博客 ( YIDBlog )一. 配置路由1.将目录下的 app.js 更改如下var express = require(express);var path = require(path);...
搭建个人博客 ( YIDBlog )
一. 配置路由
1.将目录下的 app.js 更改如下
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var app = express();
// 设置模板目录
app.set('views', path.join(__dirname, 'views'));
// 设置模板引擎为 ejs
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 设置路由
routes(app);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
app.listen(app.get('post'),function(){
console.log("Express server listening on port: " + 3000);
});
module.exports = app;
2. 将routes下的index.js更改如下
module.exports = function(app){
app.get('/',function(req,res,next){
res.render('index',{
title:'首页',
});
}
3. 在views中的index.ejs，代码如下：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
浏览器输入httplocalhost3000">4. 运行项目，在浏览器输入：https://localhost:3000/
这样我们就很愉快就路由给配置好了。
接下来我们来一起搭建简单的界面，这里我用到bootstrap框架：
我们先在index.js中将要展示的界面进行路由的配置：
module.exports = function(app){
//首页
app.get('/',function(req,res,next){
res.render('index',{
title:'首页',
});
//注册界面
app.get('/reg',function(req,res,next){
res.render('reg',{
title:'注册',
});
//登录
app.get('/login',function(req,res,next){
res.render('login',{
title:'登录',
});
//发表文章
app.get('/post',function(req,res,next){
res.render('post',{
title:'发表文章',
});
}
*开始我们的界面设计了，用Ejs模板引擎的<%- include %> 来将相同的部分分离开
创建 header.ejs
创建 footer.ejs
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title><%= title %> - Blog</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<p class="container">
<p class="container-fluid">
<p class="navbar-header">
<a class="navbar-brand" href="/">YIDBlog</a>
</p>
<a class="navbar-brand" href="/">首页</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="/reg"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
</p>
</p>
</nav>
<p class="container">
<p class="col-sm-12">
</p>
</body>
</html>
创建 首页- index.ejs
<%- include header %>
<form>
<p class="input-group">
<input type="text" class="form-control" placeholder="SEARCH" name="keyword">
<span class="input-group-btn">
<input type="submit" value="搜索" class="btn btn-default" />
</span>
</p>
</form>
<ul class="list-group">
<li class="list-group-item">
<h3><a href="#">学习node.js</a></h3>
<p class="info">
<span>作者：小蚁</span>
<span>|</span>
<span>日期：2016-12-14</span>
</p>
</li>
<hr>
</ul>
<%- include footer %>
首页完成，显示效果如下：
创建 登录界面-login.ejs
<%- include header %>
<form class="form-horizontal" role="form" method="POST">
<p class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<p class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="输入用户名">
</p>
</p>
<p class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<p class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="输入密码">
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="登录" />
</p>
</p>
</form>
<%- include footer %>
登录页面 效果如下：
创建 注册界面-reg.ejs
<%- include header %>
<form class="form-horizontal" role="form" method="POST">
<p class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<p class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="输入用户名">
</p>
</p>
<p class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<p class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="输入密码">
</p>
</p>
<p class="form-group">
<label for="lastname" class="col-sm-2 control-label">重复密码</label>
<p class="col-sm-10">
<input type="password" class="form-control" name="password-repeat" placeholder="输入密码">
</p>
</p>
<p class="form-group">
<label for="lastname" class="col-sm-2 control-label">邮箱</label>
<p class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="再次输入密码">
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="完成注册" />
</p>
</p>
</form>
<%- include footer %>
登录页面 效果如下：
创建 发表文章界面-post.ejs
<%- include header %>
<form method="post" enctype="multipart/form-data">
<p class="form-group">
<label for="name">标题:</label>
<input type="text" class="form-control" name="title" placeholder="输入标题">
</p>
<p class="form-group">
<label for="name">文章</label>
<textarea class="form-control" name="article" rows="8"></textarea>
</p>
<hr />
<input type="hidden" name="pv" value=0 >
<input type="submit" value="发表" class="btn btn-default"/>
</form>
<%- include footer %>
发表文章界面 效果如下：
