一楼老规矩，先说下废话(可跳过)：
近几年前端发展很快，各种牛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
网友评论