nodejs--express开发个人博客（-）
写完了入门笔记，开始进入开发阶段吧。基于上一节的内容，现在着手开发个人博客系统。先划分一下功能吧
/:首页
/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开发个人博客（-）的更多相关文章
- nodejs+express+mongodb搭建博客
https://github.com/lanleilin/sayHelloBlog 是可以运行的 https://github.com/lanleilin/sayHelloBlog 文件结构如下: c ...
- 初试Nodejs——使用keystonejs创建博客网站2（修改模板）
上一篇(初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs))讲了keystonejs的安装.安装完成后,已经具备了基本的功能,我们需要对页面进行初步修改,比如,增加 ...
- iOS开发优秀博客和软件推荐
iOSBlogAndTools iOS开发优秀博客和软件推荐 本博客和工具列表由广大iOS开发者收集和推荐,如果大家有好的博客或者工具想要分享请点击:我要提交. 收到大家的提交后会及时收录与更新.Gi ...
- 用flask开发个人博客（4）—— flask中4种全局变量
https://blog.csdn.net/hyman_c/article/details/53512109 一 current_app current_app代表当前的flask程序实例,使用时需 ...
- nodejs express开发
用NodeJS+Express开发WEB应用---第一篇 大漠穷秋2014-03-28 预热 为了对后面的内容理解更加透彻,推荐首先阅读下面这篇很好的文章: http://www.nodebeginn ...
- Django开发个人博客入门学习经验贴
[写在前面] 入门学习搭建个人博客系统首先还是参考大佬们的经验,记得刚入手Django的时候,一篇博客大佬说过一句话,做技术的不要一开始就扎头于细节中,先把握整体框架,了解这个对象之后再去了解细节,进 ...
- 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- [nodejs] nodejs开发个人博客（一）准备工作
前言 nodejs是运行在服务端的js,基于google的v8引擎.个人博客系统包含对数据库的增删查改,功能齐备,并且业务逻辑比较简单,是很多后台程序员为了检测学习成果,最先拿来练手的小网站程序.我也 ...
- NodeJS+Mongodb+Express做CMS博客系统
楼主正在用业余时间开发中-- ,目前的版本仅支持会员系统,尝鲜一下吧~ hi-blog 一个 nodejs+express+mongodb 的 cms 系统 怎么启动 默认你已经安装了 mongodb ...
随机推荐
- 实战Windows 7的Windows Media Center
简介 本文讲述如何通过Windows 7的Windows Media Center搭建强劲的综合娱乐电视系统,同时讲述Windows Media Center的实际使用感受,以及如何通过Windows ...
- Qt实战之开发CSDN下载助手 （3）（结束篇）
再次申明下,开发这款助手,主要是用来学习交流,并不是用来开发什么刷积分的软件. 好了,言归正传,这次,主要的分析下CSDN的下载,评论,验证码获取机制等等. 好,回到第二篇,当我们成功登陆时,CSDN ...
- 基于Visual C++2013拆解世界五百强面试题--题9-找出所有的排列方式
给出一个函数来输出一个字符串的所有排列 按照排列组合的知识我们知道 N个字符排列组合个数有n!种, 那么可知f(n) = n*f(n-1), 如果{1,2}的组合有两种,12,21, 那么{123}的 ...
- 使用jetty和mongodb实现简易网盘接口
依赖库: 1,jetty(提供http方式接口) 2,mongodb的java驱动(访问mongodb存取文件) 3,thumbnailator包,进行缩略图生成 4,commons-fileuplo ...
- C#--遍历目录实例
鉴于前面几篇博客都说了,这边就啥都不说了.直接就開始贴代码了. 1.控件解释: FolderBrowserDialog控件一个----用来显示"浏览目录"对话框 TextBox控件 ...
- UI界面
http://www.uimaker.com/uimakerhtml/uidesign/uisoft/2016/0323/122862.html http://www.uimaker.com/uima ...
- Linux输入子系统(Input Subsystem)
Linux输入子系统(Input Subsystem) http://blog.csdn.net/lbmygf/article/details/7360084 input子系统分析 http://b ...
- shell：监控进程运行状态并自动重启进程
#!/bin/sh MAXRSTCOUNT=; PROCTOGO=/mnt/hgfs/code/test/show #count is the counter of test started time ...
- 新建linux组、用户命令
之前在安装oracle的时候,出现了一个问题:安装Oracle,新建组.用户的时候的一个错误.看这篇博客前,先看这个链接,学习要从解决出现的问题出手. 建立用户组和用户 下面总结一下Linux建立组和 ...
- Oracle语句优化规则(二）
21. 用EXISTS替换DISTINCT 当提交一个包含一对多表信息(比如部门表和雇员表)的查询时,避免在SELECT子句中使用DISTINCT. 一般可以考虑用EXIST替换 例如: ...