学习express，从这里开始！
原创学习express，从这里开始！
原创
Learn-anything.cn
修改于 2021-11-25 10:47:37
修改于 2021-11-25 10:47:37
文章被收录于专栏：learn-anything.cn
一、express 是什么？
Express 是一个简洁而灵活的 node.js Web应用框架，可以快速地搭建一个功能完整的网站。
二、安装express并创建项目
通过 express-generator 创建带有基本配置的 express 项目，包括 路由(routes)、package.json、view(hbs模板)等，可以直接编写业务代码了。
# 1、安装工具
npm install -g express-generator
# 2、创建项目：learn-express
express --view=hbs ~/learn-express && cd ~/learn-express
# 3、初始化项目
npm install
# 4、启动
npm start
# 5、访问：
http://localhost:3000/三、新增页面
使用上面新建项目 learn-express，因为 routes、views 已经配置完毕，直接新建一个页面并用 http 的 get 方法获取，步骤如下：
- 采用 vs code 打开上面项目。vs code 下载
- 新建 routes/test.js 文件
var express = require('express');
var router = express.Router();
/* GET test page. */
router.get('/', function(req, res, next) {
res.render('test', { title:'测试页面' });
});
module.exports = router;- 新建 views/test.hbs 文件
<h1>{{title}}</h1>- 修改 app.js ，增加路由，找到对应地方增加下面内容
var testRouter = require('./routes/test');
app.use('/test', testRouter);- 重启服务，即可通过 http://localhost:3000/test 访问新增的页面。
四、POST 提交页面
使用 form 表单 提交数据，后端处理表单提交的数据。
1、新建 form 表单的页面
- 新建 routes/form.js 文件
// routes/form.js
var express = require('express');
var router = express.Router();
/* GET form page. */
router.get('/', function(req, res, next) {
res.render('form', { title:'from post 提交页面' });
});
module.exports = router;- 新建 form.hbs 文件
<h1>{{title}}</h1>
<form action="http://127.0.0.1:3000/process_post" method="POST">
First Name: <input type="text" name="first_name"> <br>
Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>- 修改 app.js ，增加路由
var formRouter = require('./routes/form');
app.use('/form', formRouter);2、新建 post 处理页面
- 新建 routes/process_post.js 文件
var express = require('express');
var router = express.Router();
/* Post process page. */
router.post('/', function (req, res, next) {
// 输出 JSON 格式
var response = {
"first_name": req.body.first_name,
"last_name": req.body.last_name
};
console.log(response);
res.end(JSON.stringify(response));
});
module.exports = router;- 修改 app.js 增加路由
var postProcRouter = require('./routes/process_post');
app.use('/process_post', postProcRouter);3、访问
- 重启服务器
- 先打开 http://127.0.0.1:3000/form 填写数据，点击提交；
- 页面会跳转到 http://127.0.0.1:3000/process_post
五、静态文件
访问静态文件的方法：
- 修改 app.js，增加下面 路由
app.use('/public', express.static('public'));- 把 test.jpg 拷贝到 public/images 目录下
- 重启项目，即可访问图片： http://localhost:3000/public/images/test.jpg
六、下载官方 Examples
git clone git://github.com/expressjs/express.git --depth 1
cd express
npm install
# 启动你想看的 Examples
node examples/content-negotiation七、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
