搭建个人博客 ( YIDBlog )
(node+express+ejs+node+mongodb+mongoose)
(在这里认为大家已经知道如何用命令行创建node项目了，推荐用WebStorm快速创建)
- 实现以下简单的功能： (一些详细的表单验证先忽略)
- 用户注册
- 用户登录
- 用户登出
- 发表文章
- 编辑文章
- 删除文章
一. 配置路由
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>
4. 运行项目，在浏览器输入：http://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
<!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">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">YIDBlog</a>
</div>
<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>
</div>
</div>
</nav>
<div class="container">
<div class="col-sm-12">创建 footer.ejs
</div>
</body>
</html>创建 首页- index.ejs
<%- include header %>
<form>
<div 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>
</div>
</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">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="输入用户名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="登录" />
</div>
</div>
</form>
<%- include footer %> 登录页面 效果如下：
创建 注册界面-reg.ejs
<%- include header %>
<form class="form-horizontal" role="form" method="POST">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="输入用户名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="输入密码">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">重复密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password-repeat" placeholder="输入密码">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="再次输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="完成注册" />
</div>
</div>
</form>
<%- include footer %>登录页面 效果如下：
创建 发表文章界面-post.ejs
<%- include header %>
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name">标题:</label>
<input type="text" class="form-control" name="title" placeholder="输入标题">
</div>
<div class="form-group">
<label for="name">文章</label>
<textarea class="form-control" name="article" rows="8"></textarea>
</div>
<hr />
<input type="hidden" name="pv" value=0 >
<input type="submit" value="发表" class="btn btn-default"/>
</form>
<%- include footer %>发表文章界面 效果如下：
界面的简单搭建就这样完成了，是不是很简单了，下一章开始介绍功能的实现，喜欢的话就收藏一下，赞一个哈哈，新手，欢迎各位大神吐槽哈
1079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
