网站错误页面模板,茶山镇仿做网站,网站友链交换平台,成功的企业网站案例文章目录 前言一、Express 生成器#xff08;express-generator#xff09;二、快速安装1.express框架express-generator生成器安装2.使用pug视图引擎创建项目,projectName 为项目名称自定义 三、安装热更新插件 nodemon四、目录结构1. public文件夹2.routes路由其他请求方式… 文章目录 前言一、Express 生成器express-generator二、快速安装1.express框架express-generator生成器安装2.使用pug视图引擎创建项目,projectName 为项目名称自定义 三、安装热更新插件 nodemon四、目录结构1. public文件夹2.routes路由其他请求方式入参 3. view 模版引擎4.app.js 五、app.js内部代码解读 前言
node.js express框架开发入门教程包括express-generator生成器、nodemon、基础路由、中间件、模版引擎介绍、app.js解读等 一、Express 生成器express-generator
使用express-generator能快速创建应用程序骨架类似vue脚手架帮我们搭建项目结构并在基础上进行开发调试运行。
二、快速安装
1.express框架express-generator生成器安装
npm install express express-generator -g需要注意express必须全局-g安装才能识别后面的express命令
2.使用pug视图引擎创建项目,projectName 为项目名称自定义
express projectName --viewpug也可以使用其他模版引擎例如jade、mustache、dust、ejs等不加--viewpug默认jade引擎官方已弃用现在推荐用pug。 模版引擎主要用来服务端渲染HTML在运行时模板引擎将模板文件中的变量替换为实际值并将模板转换为发送给客户端的 HTML 文件 cd projectName 加载依赖
npm install启动项目
npm start端口号默认3000浏览器输入http://localhost:3000出现如下界面即可表示项目启动成功 三、安装热更新插件 nodemon 生成器默认修改代码保存后不更新需要安装nodemon插件来支持热更新 安装插件
npm install nodemon --save修改启动配置 package.json scripts: {start: nodemon ./bin/www},重新 npm start 启动生效
四、目录结构
├── app.js ---初始化入口
├── bin
│ └── www ---运行文件
├── package.json ---配置
├── public ---静态资源
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes ---路由
│ ├── index.js
│ └── users.js
└── views ---模版引擎生成html页面├── error.pug├── index.pug└── layout.pug1. public文件夹
public 静态资源文件夹,放置图片、js脚本或css资源文件等在app.js通过设置
app.use(express.static(path.join(__dirname, public)));可以直接访问服务器静态资源例如:http://localhost:3000/images/a.jpg 可以自定义路径前缀
app.use(/static,express.static(path.join(__dirname, public)));访问地址变为
http://localhost:3000/static/images/a.jpg需要注意的express.static 内置中间件函数需要在路由设置前面执行才能生效
2.routes路由
routes文件夹放置所有路由文件并在app.js引入。项目默认内置routers/index.js、routers/user.js2个路由文件可按 需添加例如 新建demo.js文件
写入
var express require(express);
var router express.Router();//get请求
router.get(/login, function(req, res, next) {res.send(login)
});//post请求
router.post(/login, function(req, res, next) {res.send({code:200,msg:success})
});module.exports router;通过app.use(url,router)在app.js引入使用
app.use(/demo,demoRouter)访问:http://localhost:3000/demo/login 其他请求方式
router.post(),
router.put(),
router.delete()
router.all()router.all()将匹配所有的请求方式例如定义了router.all(‘/login’,(req,res,next){}), 客户端不管是用get或者post或put请求/login接口都将匹配all执行相应响应逻辑 入参
function(req, res, next){
}req请求对象/请求体
常见属性req.queryget请求参数 /login?namexlage20req.bodypost请求参数 {name:xl,age20}req.params: 匹配动态路由参数 /login/:idreq.method: 请求方式req.url :请求路由req.get 获取指定的请求头字段 req.get(content-type)res响应对象/响应体
常见属性res.set设置响应头字段 res.set(Content-Type, text/plain)res.status 设置响应状态码 res.status(403res.json 向客户端发送json数据类型 res.json({data:true})res.send 向客户端发送任何数据类型res.sendFile 向客户端发送文件 res.sendFile(path [, options] [, fn])res.render view模版文件 HTML 字符串发送到客户端 res.render(view [, locals] [, callback])next进入下个中间件回调,没有执行任何响应res.sendxxxx或res.json且没调用next(),请求将被挂起。调用了next(),代码将进入下一个中间件
3. view 模版引擎
模版引擎作用是通过模版语法把代码转换为html字符串返回给客户端渲染出html页面
在app.js可以看到如下代码
var indexRouter require(./routes/index);
.....
.....
app.set(views, path.join(__dirname, views));//设置模版引擎文件夹
app.set(view engine, pug);//设置pug为模版引擎
.....
......
app.use(/, indexRouter);指定了模版文件夹views和使用pug作为引擎当浏览器访问http://localhost:3000匹配路由/加载 routes/index.js
/* GET home page. */
router.get(/, function(req, res, next) {res.render(index, { title: Express });
});通过res.render返回views/index.pug 模版给客户端渲染传入动态值title‘Express’
views/index.pug代码如下
extends layoutblock contenth1 titlep Welcome to #{title}
extends layout继承了views/layout.pug 模版内容
doctype html
htmlheadtitle titlelink(relstylesheet, href/stylesheets/style.css)bodyblock content
并在body添加了h1标签内容为titlep标签内容为Welcome to #{title} 转换为html就是
h1Express/h1
pWelcome to Express/p浏览器访问http://localhost:3000将显示如下界面 至于模版引擎语法对应查看相应官方文档
4.app.js
app.js为项目入口文件初始化执行。
var app express();通过express生成实例
app实例常用方法
1.app.set(name,value) 将设置 name 分配给 value ,例如
app.set(views, path.join(__dirname, views));// 设置模版文件夹
app.set(view engine, pug);// 设置模版引擎2.app.use([path,] callback [, callback…]) 在指定路径挂载指定的中间件函数或函数当请求路径的基数与 path 匹配时执行中间件函数。
app.use((req, res, next) {console.log(Time: %d, Date.now())next()
})3.app.listen(path, [callback]) 绑定并监听指定主机和端口上的连接。此方法与 Node 的 http.Server.listen() 相同
app.listen(3000,(){console.log(访问地址http://localhost:3000)
})express常见方法
方法描述express.json使用 JSON 有效负载解析传入请求并且基于 body-parserexpress.static提供静态文件express.Router创建一个新的 router 对象express.urlencoded使用 urlencoded 有效负载解析传入的请求并且基于 body-parser。
例如 1、设置解析请求传参编码格式为’content-type’:‘application/json’
var app express();
app.use(express.json());//请求参数为json格式通过res.body能获取到参数如果不设置将获取到undefined2、设置解析请求传参编码格式为’ application/x-www-form-urlencoded’
var app express();
app.use(express.urlencoded({ extended: false }));//请求参数为query参数?a1b2extended设置false和true区别为 false:采用querystring库解析参数value是string类型无法解析嵌套多层 true:采用qs库解析参数value是任意数据类型可以解析嵌套多层
3.设置静态文件
var app express();
app.use(express.static(public))
app.use(express.static(static))4.使用路由
var router express.Router();
router.get(/, function(req, res, next) {res.render(index, { title: Express });
});ps:1-3点都必须在使用路由前调用才会生效也即中间件需要在路由匹配前使用因为一旦路由路径匹配到如果不调用next(),直接给客户端作出响应后面代码就不执行了
五、app.js内部代码解读
//引入第三方模块
var createError require(http-errors);
var express require(express);
var path require(path);
var cookieParser require(cookie-parser);
var logger require(morgan);//引入路由文件模块
var indexRouter require(./routes/index);
var usersRouter require(./routes/users);//生成express实例
var app express();// 设置模版引擎目录指定模版引擎
app.set(views, path.join(__dirname, views));
app.set(view engine, pug);app.use(logger(dev));//使用运行日志中间件
app.use(express.json());//解析json格式参数
app.use(express.urlencoded({ extended: false }));//解析query形式参数
app.use(cookieParser());//使用cookie中间件
app.use(express.static(path.join(__dirname, public)));//设置public为静态文件目录app.use(/, indexRouter);//注册路由
app.use(/users, usersRouter);//注册路由// 404中间件
app.use(function(req, res, next) {next(createError(404));
});// 处理错误中间件
app.use(function(err, req, res, next) {// set locals, only providing error in developmentres.locals.message err.message;res.locals.error req.app.get(env) development ? err : {};// render the error pageres.status(err.status || 500);res.render(error);
});module.exports app;
