zoukankan      html  css  js  c++  java
  • Express 框架的安装

    从零开始用 Node.js 实现一个微博系统,功能包括路由控制、页面模板、数据库访问、用户注册、登录、用户会话等内容。

    • Express 框架、
    • MVC 设计模式、
    • ejs 模板引擎
    • MongoDB 数据库

    MVC(Model-View-Controller,模型视图控制器)是一种软件的设计模式

    • 模型是对象及其数据结构的实现,通常包含数据库操作。
    • 视图表示用户界面,在网站中通常就是 HTML 的组织结构。
    • 控制器用于处理用户请求和数据流、复杂模型,将输出传递给视图

    一.Express 框架 (http://expressjs.com/)

    • 1.路由控制;
    • 2.模板解析支持;
    • 3.动态视图;
    • 4.用户会话;
    • 5.CSRF 保护;
    • 6.静态文件服务;
    • 7.错误控制器;
    • 8.访问日志;
    • 9.缓存;
    • 10.插件支持。

    1.全局安装 Express

    $ npm install -g express
    

    2.最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator),所以我们还需要安装一个命令工具,命令如下:

    $ npm install -g express-generator
    

    3.查看版本

    $ express --version
    

    二.建立工程

    1.在NodeJS指南中利用以下命令建立网站的基本结构:

    $ express -e microblog
    

    (模板引擎是jade) 执行命令后ejs模板引擎就安装好了
    但是express3以上的版本把layout默认给取消了,所以现在在views文件夹下并没有生成layout.ejs。然后改成include引入

    2.运行完这个命令,继续运行,然后进入microblog文件夹,安装npm

    $ cd microblog && npm install
    

    3.include引入方法

    如头部views/layoutTop.ejs

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel='stylesheet' href='/stylesheets/reset.css' />
        <link rel='stylesheet' href='/stylesheets/main.css' />
        <link  rel="stylesheet" href="/stylesheets/bootstrap.css">
        <style type="text/css">
        body {
        padding-top: 60px;
        padding-bottom: 40px;
        }
        </style>
        <link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet">
      </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="/">Microblog</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a href="/">首页</a></li>
                            <% if (!user) { %>
                            <li><a href="/login">登入</a></li>
                            <li><a href="/reg">注册</a></li>
                            <% } else { %>
                            <li><a href="/logout">登出</a></li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    

    底部views/layoutBottom.ejs

    </body>
    <script src="/javascripts/jquery-1.9.1.min.js"></script>
    <script src="/javascripts/bootstrap.js"></script>
    </html>
    

    在views/index.ejs页面中include引用入公共部分

    <% include layoutTop %>
    <p>首页</p>
    <% include layoutBottom %>
    

    4.执行完express -e microblog 命令后, 项目生成,当前目录下出现了子目录 microblog,并且产生了一些文件:

    create : microblog
    create : microblog/package.json
    create : microblog/app.js
    create : microblog/routes
    create : microblog/routes/index.js
    create : microblog/routes/users.js
    create : microblog/public
    create : microblog/views
    create : microblog/views/index.jade
    create : microblog/views/layout.jade
    create : microblog/views/error.jade
    create : microblog/bin
    create : microblog/bin/www
    create : microblog/public/javascripts
    create : microblog/public/images
    create : microblog/public/stylesheets
    create : microblog/public/stylesheets/style.css
    

    5.用 Express 实现的网站实际上就是一个 Node.js 程序,因此可以直接运行。我们运行 node app.js, 看到 Express server listening on port 3000 in development mode。

    输入地址 http://localhost:3000, 你就可以看到一个简单的 Welcome to Express 页面了。

    6.开发时使用supervisor监听刷新修改

    $ supervisor bin/www
    

    7.退出监听:

    ctrl + c
    

      

  • 相关阅读:
    记一次centos7.2下用crontab执行定时任务的过程(初级)
    海外手机号码正则匹配
    装了wamp之后,80端口被占用解决办法
    newtonsoft动态修改JObject
    .net正则提取手机号码,并替换带有手机号码的a标签
    .vs目录有什么用?
    centos7安装nginx-1.13.6 新手入门,图文解析
    centos7安装kafka_2.11-1.0.0 新手入门
    centos7安装apache 新手入门 图文教程
    面向对象——案例练习(4)判断点是否在圆的内部
  • 原文地址:https://www.cnblogs.com/alantao/p/7997959.html
Copyright © 2011-2022 走看看