• 用Express搭建 blog (一)


     

    Info

    公司马上要举行 hack day 了,这次决定和小伙伴用 Express 作为框架来搭建我们的应用,所以昨天搭出来UI后,今天开始系统的学习下 Express。

    Start

    首先是express的全局设置。

    1
    
    sudo npm install -g express
    

    接着我们试着用express搭建一个简单的blog程序
    在work path 运行命令

    1
    
    express -e ejs blog
    

    可以看到express已经帮你创建了一系列的模板程序。接着进入blog目录安装ejs等相关依赖。

    1
    
    cd blog && npm install
    

    运行

    1
    
    node app
    

    并访问http://localhost:3000/ ,简单的hello world 程序已经生成。

    下面来看下程序的整个结构,运行command

    1
    
    tree -I  node*
    

    express的模板程序结构看起来和rails的结构很相像。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    ├── app.js
    ├── package.json
    ├── public
    │   ├── images
    │   ├── javascripts
    │   └── stylesheets
    │       └── style.css
    ├── routes
    │   ├── index.js
    │   └── user.js
    └── views
        └── index.ejs
    

    Blog Design

    对express的模板程序有了基本概念后,我们开始来实现一个稍微复杂的blog。
    blog 需要实现下面的功能。

    1
    2
    3
    4
    5
    
    /:首页
    /login:登录
    /reg:注册
    /post:发表文章
    /logout:登出
    

    blog 的数据存储采用mongodb。

    Improve

    首先我门先简单的改进下我们当前的blog程序。

    首先是重写默认的路由

    在 app.js 里面我们可以看到以下两行语句。

    1
    2
    
    app.get('/', routes.index);
    app.get('/users', user.list);
    

    我们把这部分代码移到 routes/index.js 使代码结构看起来更为清晰。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
    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){
        }); 
    };
    

    同时在 app.js里将上面两行代码替换成。

    1
    
    routes(app);
    

    Ok,接下来我们添加相应的ejs,实现后的前端界面结构应该如图所示。

    1
    2
    3
    4
    5
    6
    
    └── views
        ├── footer.ejs
        ├── header.ejs
        ├── index.ejs
        ├── login.ejs
        └── reg.ejs
    

    footer.ejs

    1
    2
    3
    
    </article>
    </body>
    </html>
    

    header.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    <!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="/">home</a></span>
    <span><a title="登录" href="/login">login</a></span>
    <span><a title="注册" href="/reg">register</a></span>
    </nav>
    <article>
    

    index.ejs

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

    login.ejs

    1
    2
    3
    4
    5
    6
    7
    
    <%- include header %>
    <form method="post">
    用户名:<input type="text" name="username" /><br />
    密码:   <input type="password" name="password" /><br />
            <input type="submit" value="登录" />
    </form>
    <%- include footer %>
    

    reg.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    
    <%- include header %>
    <form method="post">
    用户名:<input type="text" name="username" /><br />
    密码:    <input type="password" name="password" /><br />
    确认密码:<input type="password" name="password-repeat" /><br />
            <input type="submit" value="注册" />
    </form>
    <%- include footer %>
    

    上面所做的工作简单的概括来说就是把整个 blog 的 header 和 footer 分离开,并按此建立相应的登陆,注册页面。

    可以通过访问http://localhost:3000/ 来查看当前主页。

    mongo db

    首先是安装。mac下安装mongodb很简单。

    1
    2
    
    brew update
    brew install mongodb
    

    测试

    1
    2
    3
    
    mongo
    > db.test.save({a:1})
    > db.test.find()
    

    mongo db装上后 开始安装node js的依赖。

    在 package.json 中加入。

    1
    2
    
    "mongodb":"*",
    "connect-mongo":"*"
    

    运行

    1
    
    npm install
    

    安装完成后,我们就能够在程序中对mongo db进行操作了。

    我们在blog下面新建 settings.js 用来存储我们blog程序的相关配置。

    1
    2
    3
    4
    5
    
    module.exports = { 
      cookieSecret: 'myblog', 
      db: 'blog', 
      host: 'localhost'
    };
    

    创建 models 目录并新建 js 文件 db.js 用来操作 db

    1
    2
    3
    4
    5
    
    var settings = require('../settings'),
        Db = require('mongodb').Db,
        Connection = require('mongodb').Connection,
        Server = require('mongodb').Server;
    module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT, {}));
    

    而Package connect-mongo 是用来存储会话信息到数据库。

    在 app.js 中添加。

    1
    2
    
    var MongoStore = require('connect-mongo')(express);
    var settings = require('./settings');
    

    同时在 app.use(express.methodOverride()) 后面添加

    1
    2
    3
    4
    5
    6
    7
    
    app.use(express.cookieParser());
    app.use(express.session({ 
          secret: settings.cookieSecret, 
          store: new MongoStore({ 
          db: settings.db 
       }) 
    }));
    

    其中 express.cookieParser() 是 Cookie 解析的中间件。express.session() 则提供会话支持,设置它的 store 参数为 MongoStore 实例,把会话信息存储到数据库中,以避免丢失。
    在后面的小节中,我们可以通过 req.session 获取当前用户的会话对象,以维护用户相关的信息。”
    至此,数据库的配置工作完成了,后面我们就可以用数据库了。

    结论

    Express的代码结构看起来还是蛮清晰的,npm上的第三方的资源也很丰富。

    由于本人是Express的初学者,所以整个 blog 的过程也是完全参考 【一起学node.js (一)】用node+express搭建多人博客 这篇blog的内容,在此也感谢下原作者。

    参考

    【一起学node.js (一)】用node+express搭建多人博客

  • 相关阅读:
    Url Rewrite IIS 配置
    GridView”的控件 必须放在具有 runat=server 的窗体标记内 “错误提示”
    C#运算符优先级
    Web.config 文件中的 system.webServer
    类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义。
    商城产品分类设计思路
    Jquery几秒自动跳转
    MVC 的 视图中 @section 是什么作用?
    C#异常性能影响
    VSS错误:The Sourcesafe Web service cannot be accessed at the specified address
  • 原文地址:https://www.cnblogs.com/nateriver520/p/3404507.html
Copyright © 2020-2023  润新知