nodejs包入门(1)-生成express项目结构

2017-07-27 本文已影响112人木易宗龙

一楼老规矩，先说下废话(可跳过)：

近几年前端发展很快，各种牛X框架层出不穷，如：vue, react, angular，需要自身投入大量时间学习吸收经验。那怎样才能快速入门一个框架？There is always just onetruth！只要原生JS基础扎实，多看API，利用提供的cli生成demo或clone别人的项目分析基本运行逻辑，多动手，入门框架就变得很简单。至于精通，则要多做项目，在项目中学习成长，有足够能力之后尝试分析源码，学习并吸收，终有一天“荣耀王者” 非你莫属！

教程面向前端新手，不足指出还请指出！学习本篇需了解一下以下知识点：

有一定JS基础 es6基础, http://es6.ruanyifeng.com/
基本的终端使用

步入正题:

安装express命令行工具：

npm install -g express-generator

生成项目结构，这里使用ejs模版引擎，默认是jade：

express demo1 --ejs

下载依赖：

cd demo1
npm install

生成的项目结构如下：

bin - 启动文件
public - 静态资源目录
routes - 路由目录
index.js代码：

// 引入模块，注意nodejs暂不支持es6 import
var express = require('express');
var router = express.Router();
// 定义/路由, 用户访问http://localhost:3000/, 将会匹配此路由
// 所有的url跳转都是get请求，所以这里使用router.get，ajax get 请求同理，如要定义post使用router.post
router.get('/', function(req, res, next) {
  // res.render 渲染一个模版，并将数据传送到模版，多个数据{title:1,title2:2}
  res.render('index', { title: 'Express' });
});
// 最后导出这个模块
module.exports = router;

views - 模版目录
index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  // 注意数据必须传入才能使用，使用未传入的数据会报错
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

app.js - 主文件(部份代码)

// 配置模版的目录路径
app.set('views', path.join(__dirname, 'views'));
// 静态资源目录路径
app.use(express.static(path.join(__dirname, 'public')));
// 路由配置, 比如用户请求http://localhost:3000/,get、post以及其它方式的请求都会匹配此条路由，再由index具体处理get或post
app.use('/', index);

package.json - npm 配置文件

启动项目：

node bin/www

打开浏览器输入 http://localhost:3000 , 会看到Welcome to Express !!!

修改服务端文件需要重启服务才能看到最新，这里推荐个工具自动监听并重启服务-supervisor

npm install -g supervisor
supervisor bin/www