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

/:首页

/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. Qt开发小工具之gif转换器（使用QMovie截取每一帧为QImage，然后用QFile另存为图片文件）

    最近,QQ上好多各种gif表情.每一个都很经典呀..于是我就想把它转换成一张张静态图片...没学过ps.于是写了几行代码.完工.核心代码如下 主要是借助QMovie类.文件读取模式选择QMovie:: ...

  2. js动态加载控件jsp页面

    例子1:(具体参照drp中的flow_card_add.jsp)<script>    var rowIndex = 0;     function addOneLineOnClick() ...

  3. HTTP基本协议(查看网页代码)

    此示例已实现查看网页的代码来理解HTTP基本协议: (返回的是百度首页的网页代码) import java.io.BufferedReader; import java.io.IOException; ...

  4. java实现冒泡排序，选择排序，插入排序，快速排序（简洁版）及性能测试

    1.冒泡排序是排序里面最简单的了,但性能也最差,数量小的时候还可以,数量一多,是非常慢的. 它的时间复杂度是O(n*n),空间复杂度是O(1) 代码如下,很好理解. public void bubbl ...

  5. Html表格&lt;table&gt;还是须要加入一些标签进行优化，能够加入标题&lt;caption&gt;和摘要&lt;table summary&gt;

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. sign a third-party dll which don't have a strong name

    Problem: Assembly generation failed -- Referenced assembly '' does not have a strong name Cause: thi ...

  7. Jquery调用webService的四种方法 转载-记录

    我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2.服务的方法不需要任何更改,保持原状 3.客户端用jquery的.ajax方法来调用 3.1 type必须是 ...

  8. Null指针

    C++ Null 指针 C++ 指针 C++ 指针 在变量声明的时候,如果没有确切的地址可以赋值,为指针变量赋一个 NULL 值是一个良好的编程习惯.赋为 NULL 值的指针被称为空指针. NULL ...

  9. [Git]自译《Git版本控制管理》——1.介绍(二)_Git诞生

    译者前言:      本系列译文为作者利用业余时间翻译,有些疏漏与翻译不到位的地方敬请谅解.      不过也很希望各位读者能给出中肯的建议.      方括号的注释,如[1][2]为译者注.     ...

  10. 【c语言】求最大值

    一.我个人觉得求最大值比较简单的一种方法(当然同时求最大值和最小值时稍微改改也能行) #include <stdio.h> int main(void) { int f, i, max; ...