node+express+mongoDB搭建个人博客 ( 一 )
2016-12-16 22:29
537 查看
搭建个人博客 ( 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 %>
发表文章界面 效果如下:
界面的简单搭建就这样完成了,是不是很简单了,下一章开始介绍功能的实现,喜欢的话就收藏一下,赞一个哈哈,新手,欢迎各位大神吐槽哈
相关文章推荐
- 分享微信开发Html5轻游戏中的几个坑
- 如何在 Fedora 上安装 MongoDB 服务器
- PHP添加yaf xhprof mongodb 同理
- mongodb安装
- 如何在 Ubuntu 上安装 MongoDB
- 信息安全聚合 Sec-News 的重构之路
- 如何安装SQL Server 2008 Management Studio Express
- Ruby on Rails框架程序连接MongoDB的教程
- perl操作MongoDB报错undefined symbol: HeUTF8解决方法
- node+express制作爬虫教程
- sql server 2008 r2 express 精简版与企业版的区别
- Node.js的Express框架使用上手指南
- C#中使用1.7版本驱动操作MongoDB简单例子
- 使用zabbix监控mongodb的方法
- Node.js的MongoDB驱动Mongoose基本使用教程