写完了入门笔记，开始进入开发阶段吧。基于上一节的内容，现在着手开发个人博客系统。先划分一下功能吧

/:首页

/login:登陆

/reg:注册

/post:发表文章

/logout:退出

首先规划一下路由控制，在现在的app.js中控制路由的语句是

app.get('/', routes.index);

app.get('/users', user.list);//路由控制

每加一个路由控制就要接一句app.get()或者是app.post()，当路由很多时，app.js里面的代码就会很多，不便于维护和修改。所以换一种写法，在index.js里面写路由控制：

exports.index = function(req, res){

  res.render('index', { title: 'Express' });

};

同时把app.js里面的路由控制语句换成：

routes(app);

这是你现在看到的写法，咱们为了简化和便于修改，换成下面这种写法：

module.exports = function(app){

    app.get('/',function(req,res){}）；

}

博客系统中的index.js的雏形：

module.exports = function(app){

    app.get('/',function(req,res){

        res.render('index', { title: '主页' });

    });

    app.get('/reg',function(req,res){

        res.render('reg', { title: '注册' });

    });

    app.post('/reg',function(req,res){

    });

    app.get('/login',function(req,res){

        res.render('login', { title: '登录' });

    });

    app.post('/login',function(req,res){

    });

    app.get('/logout',function(req,res){

    });

    app.get('/post',function(req,res){

        res.render('post', { title: '发表' });

    });

    app.post('/post',function(req,res){

    });

};
你会发现reg、login和post都有get和post方法，我们可以这么理解：get方法是实现当用户试图访问这个网页时要显示些什么，post方 法是当从这个网页上发出数据（这里时提交表单）时要干些什么，所以访问/和/logout就不需要post方法了。render函数的意思是，当你要访问 比如主页时，服务器找到index.ejs文件并替换变量title的值为字符串’主页’

路由控制的雏形出来了，下面写视图部分，在views下面新建几个文件，index.ejs、login.ejs、reg.ejs、post.ejs，然后再给每个页面添加统一的头部导航（header.ejs）和底部说明(footer.ejs)，使用的时候把<% -include header%>和<% -include footer%>分别放在头尾就行了。

header.ejs

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Blog</title><link rel="stylesheet" href="stylesheets/style.css"></head><body>

<header><h1><%= title %></h1></header>

<nav><span><a title="主页" href="/">主页</a></span><span><a title="登录" href="/login">登录</a></span><span><a title="注册" href="/reg">注册</a></span></nav><article>

footer.ejs

</article></body></html>

index.ejs

<%- include header %>

这是主页

<%- include footer %>

login.ejs

<%- include header %>

<form method="post" name="form" id="form">

     <table>

          <tbody>

          <tr>

               <td><label for="username">用户名:</label></td>

               <td><input type="text" id="username" name="username" placeholder="请输入用户名"/></td>

          </tr>

          <tr>

               <td><label for="password">密码:</label></td>

               <td><input type="password" id="password" name="password" placeholder="请输入密码"/></td>

          </tr>

          <tr><td colspan="2" class="btn" ><input type="submit" value="登录"/></td></tr>

          </tbody>

     </table>

</form>

<%- include footer %>

reg.ejs

<%- include header %>

<form method="post" name="form" id="form">

     <table>

          <tbody>

          <tr>

               <td><label for="username">用户名:</label></td>

               <td><input type="text" id="username" name="username" placeholder="请输入用户名"/></td>

          </tr>

          <tr>

               <td><label for="password">密码:</label></td>

               <td><input type="password" id="password" name="password" placeholder="请输入密码"/></td>

          </tr>

          <tr>

               <td><label for="comfirm_pwd">再次输入密码:</label></td>

               <td><input type="password" id="comfirm_pwd" name="comfirm_pwd" placeholder="请再次输入密码"/></td>

          </tr>

          <tr><td colspan="2" class="btn"><input type="submit" value="注册"/></td></tr>

          </tbody>

     </table>

</form>

<%- include footer %>

然后再修改下style.css：

nav a:hover{

	background: #2ECC71;

}

tr:last-child{

	text-align: center;

}

td{

	height: 24px;

	padding: 5px;

}

td:first-child{

	text-align: right;

}

td:last-child{

	text-align: left;

}

td input[type="password"],td input[type="text"]{

	display: block;

	padding: 5px;

	border: 1px solid gray;

	border-radius: 3px;

}

td.btn{

	text-align: center;

}

td.btn input{

	padding:0 10px;

	font-size: 16px;

	font-weight: bold;

	margin-top: 5px;

}

预览下页面：

现在只是实现了视图，逻辑操作还没写，那涉及到数据库了，下一节吧。

nodejs--express开发个人博客（-）的更多相关文章

  1. nodejs+express+mongodb搭建博客

    https://github.com/lanleilin/sayHelloBlog 是可以运行的 https://github.com/lanleilin/sayHelloBlog 文件结构如下: c ...

  2. 初试Nodejs——使用keystonejs创建博客网站2（修改模板）

    上一篇(初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs))讲了keystonejs的安装.安装完成后,已经具备了基本的功能,我们需要对页面进行初步修改,比如,增加 ...

  3. iOS开发优秀博客和软件推荐

    iOSBlogAndTools iOS开发优秀博客和软件推荐 本博客和工具列表由广大iOS开发者收集和推荐,如果大家有好的博客或者工具想要分享请点击:我要提交. 收到大家的提交后会及时收录与更新.Gi ...

  4. 用flask开发个人博客（4）—— flask中4种全局变量

    https://blog.csdn.net/hyman_c/article/details/53512109 一  current_app current_app代表当前的flask程序实例,使用时需 ...

  5. nodejs express开发

    用NodeJS+Express开发WEB应用---第一篇 大漠穷秋2014-03-28 预热 为了对后面的内容理解更加透彻,推荐首先阅读下面这篇很好的文章: http://www.nodebeginn ...

  6. Django开发个人博客入门学习经验贴

    [写在前面] 入门学习搭建个人博客系统首先还是参考大佬们的经验,记得刚入手Django的时候,一篇博客大佬说过一句话,做技术的不要一开始就扎头于细节中,先把握整体框架,了解这个对象之后再去了解细节,进 ...

  7. 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  8. [nodejs] nodejs开发个人博客（一）准备工作

    前言 nodejs是运行在服务端的js,基于google的v8引擎.个人博客系统包含对数据库的增删查改,功能齐备,并且业务逻辑比较简单,是很多后台程序员为了检测学习成果,最先拿来练手的小网站程序.我也 ...

  9. NodeJS+Mongodb+Express做CMS博客系统

    楼主正在用业余时间开发中-- ,目前的版本仅支持会员系统,尝鲜一下吧~ hi-blog 一个 nodejs+express+mongodb 的 cms 系统 怎么启动 默认你已经安装了 mongodb ...

随机推荐

  1. (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示

    原文 (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windows She ...

  2. SSH 配置日记

    1   注意struts2-spring-plugin.jar的导入.    Unable to load configuration. - action  异常.需要导入这个包 2  很久都跑不通的 ...

  3. [译]Stairway to Integration Services Level 14 - 项目转换(SSIS 2008 ~ SSIS 2012)

    介绍 本文中我们会用SSDT把第一个SSIS项目转换为 SSIS 2012, 为什么要升级到2012? 你可能想使用SSIS 2012新的特性. 又或者想使用 SSIS 2012 Catalog. 想 ...

  4. UVA 674 Coin Change（dp）

    UVA 674  Coin Change  解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87730#problem/ ...

  5. 设计模式值六大原则——依赖倒置原则 （DIP）

    依赖倒置原则(Dependence Inversion Principle,DIP)的原始定义: 高层模块不应该依赖底层模块,两者都应该依赖其抽象: 抽象不应该依赖细节: 细节应该依赖抽象. 依赖倒置 ...

  6. ELK 之四：搭建集群处理日PV 四亿次超大访问量优化方法

    最近公司的网站访问量越来越大,采用4台高配置服务器做后端Server,前端使用一个负载,日志从后端4台服务器收集到ELK统计,但是最近Logstash经常出问题,每次启动运行三四个小时就挂了,分析是由 ...

  7. Python学习之路——函数

    一.Python2.X内置函数表: 注:以上为pyton2.X内置函数,官方网址:https://docs.python.org/2/library/functions.html 二.Python3. ...

  8. gdb调试相关

    GDB调试及其调试脚本的使用返回脚本百事通一.GDB调试 1.1. GDB 概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式的,像VC.BCB等 ...

  9. ubuntu ~/.bash_history

    sudo apt-get update sudo apt-get install python-pip sudo pip install Django==1.7.1 sudo apt-get inst ...

  10. JS常用方法函数（1）

    1.字符串长度截取 function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = "&q ...