nodejs–express开发个人博客

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

/:首页

/login:登陆

/reg:注册

/post:发表文章

/logout:退出

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

[javascript][/javascript] view plaincopy

  1. app.get(‘/’, routes.index);
  2. app.get(‘/users’, user.list);//路由控制

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

 

 

[javascript][/javascript] view plaincopy

  1. exports.index = function(req, res){
  2.   res.render(‘index’, { title: ‘Express’ });
  3. };

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

 

routes(app);

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

 

[javascript][/javascript] view plaincopy

  1. module.exports = function(app){
  2.     app.get(‘/’,function(req,res){});
  3. }

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

 

[javascript][/javascript] view plaincopy

  1. module.exports = function(app){
  2.     app.get(‘/’,function(req,res){
  3.         res.render(‘index’, { title: ‘主页’ });
  4.     });
  5.     app.get(‘/reg’,function(req,res){
  6.         res.render(‘reg’, { title: ‘注册’ });
  7.     });
  8.     app.post(‘/reg’,function(req,res){
  9.     });
  10.     app.get(‘/login’,function(req,res){
  11.         res.render(‘login’, { title: ‘登录’ });
  12.     });
  13.     app.post(‘/login’,function(req,res){
  14.     });
  15.     app.get(‘/logout’,function(req,res){
  16.     });
  17.     app.get(‘/post’,function(req,res){
  18.         res.render(‘post’, { title: ‘发表’ });
  19.     });
  20.     app.post(‘/post’,function(req,res){
  21.     });
  22. };

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

 

header.ejs

 

[html][/html] view plaincopy

  1. <!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>
  2. <header><h1><%= title %></h1></header>
  3. <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

[html][/html] view plaincopy

  1. <%- include header %>
  2. 这是主页
  3. <%- include footer %>

login.ejs

 

 

[html][/html] view plaincopy

  1. <%- include header %>
  2. <form method=”post” name=”form” id=”form”>
  3.      <table>
  4.           <tbody>
  5.           <tr>
  6.                <td><label for=”username”>用户名:</label></td>
  7.                <td><input type=”text” id=”username” name=”username” placeholder=”请输入用户名”/></td>
  8.           </tr>
  9.           <tr>
  10.                <td><label for=”password”>密码:</label></td>
  11.                <td><input type=”password” id=”password” name=”password” placeholder=”请输入密码”/></td>
  12.           </tr>
  13.           <tr><td colspan=”2″ class=”btn” ><input type=”submit” value=”登录”/></td></tr>
  14.           </tbody>
  15.      </table>
  16. </form>
  17. <%- include footer %>

reg.ejs

 

 

[html][/html] view plaincopy

  1. <%- include header %>
  2. <form method=”post” name=”form” id=”form”>
  3.      <table>
  4.           <tbody>
  5.           <tr>
  6.                <td><label for=”username”>用户名:</label></td>
  7.                <td><input type=”text” id=”username” name=”username” placeholder=”请输入用户名”/></td>
  8.           </tr>
  9.           <tr>
  10.                <td><label for=”password”>密码:</label></td>
  11.                <td><input type=”password” id=”password” name=”password” placeholder=”请输入密码”/></td>
  12.           </tr>
  13.           <tr>
  14.                <td><label for=”comfirm_pwd”>再次输入密码:</label></td>
  15.                <td><input type=”password” id=”comfirm_pwd” name=”comfirm_pwd” placeholder=”请再次输入密码”/></td>
  16.           </tr>
  17.           <tr><td colspan=”2″ class=”btn”><input type=”submit” value=”注册”/></td></tr>
  18.           </tbody>
  19.      </table>
  20. </form>
  21. <%- include footer %>

然后再修改下style.css:

 

 

[css][/css] view plaincopy

  1. nav a:hover{
  2.     background: #2ECC71;
  3. }
  4. tr:last-child{
  5.     text-align: center;
  6. }
  7. td{
  8.     height: 24px;
  9.     padding: 5px;
  10. }
  11. td:first-child{
  12.     text-align: right;
  13. }
  14. td:last-child{
  15.     text-align: left;
  16. }
  17. td input[type=”password”],td input[type=”text”]{
  18.     display: block;
  19.     padding: 5px;
  20.     border: 1px solid gray;
  21.     border-radius: 3px;
  22. }
  23. td.btn{
  24.     text-align: center;
  25. }
  26. td.btn input{
  27.     padding:0 10px;
  28.     font-size: 16px;
  29.     font-weight: bold;
  30.     margin-top: 5px;
  31. }

预览下页面:

 

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

标签