zoukankan      html  css  js  c++  java
  • nodejs express安装

    转载自http://blog.fens.me/nodejs-express4/

    1. 安装express库

    1、npm install -g express-generator@4   #全局安装 -g
    2、express -V   #检查版本

      3、使用express的命令,来创建项目了。

    4、进入项目目录,下载依赖库,构建项目

    5、启动项目  npm start

     6、项目启动成功,打开浏览器 http://localhost:3000,就可以看到显示的页面了。



    2. 目录结构

    接下来,我们详细看一下Express4项目的结构、配置和使用。

    • bin, 存放启动项目的脚本文件
    • node_modules, 存放所有的项目依赖库。
    • public,静态文件(css,js,img)
    • routes,路由文件(MVC中的C,controller)
    • views,页面文件(Ejs模板)
    • package.json,项目依赖配置及开发者信息
    • app.js,应用核心配置文件

    3. Bootstrap界面框架

    编辑views/index.ejs文件

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <title><%= title %></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <div class="well jumbotron">
          <h1><%= title %></h1>
          <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
      </body>
    </html>
    

      效果如下:

    把index.ejs页面切分成3个部分:header.ejs, index.ejs, footer.ejs,用于网站页面的模块化。 

    编辑header.ejs。

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <title><%= title %></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
    

     编辑footer.ejs。

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
      </body>
    </html>
    

    编辑index.ejs

    <% include header.ejs %>
    
    <div class="well jumbotron">
    <h1><%= title %></h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
    
    <% include footer.ejs %>
    

      

  • 相关阅读:
    poj 3176 三角数和最大问题 dp算法
    poj 2236 网络连接问题 并查集
    poj 3614 奶牛美容问题 优先队列
    得时无怠
    Android入门(一)
    javascript之apply和call
    写一份面试答卷
    拿来即用的loading效果
    关于回调的唠叨
    Nodejs Guides(四)
  • 原文地址:https://www.cnblogs.com/xwtbk/p/7125019.html
Copyright © 2011-2022 走看看