前端工程化:express服务端开发

这篇具有很好参考价值的文章主要介绍了前端工程化:express服务端开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、express基本使用

1. 安装依赖

npm i -S express

2. 创建服务

// 创建express服务分三步

// 1. 创建实例化服务
const express = require('express');
const app = express();

// 2. 拦截路由
app.get('/',function(req,res){
  res.send('<html><body><div style="color:red">111</div></body></html>')
})

// 3. 启动实例化服务
const port = 8080;
app.listen(port, function(){
  console.log('------服务启动成功');
})

3. 启动服务

node app.js文章来源地址https://www.toymoban.com/news/detail-422904.html

2、express中间件和异常

1. 中间件分3种

  1. 全局中间件:第一个参数是回调函数时,则针对所有请求生效
  2. 路由中间件:第一个参数是匹配路由,第二个参数为回调函数
  3. 异常中间件:回调函数包含四个参数

2. 异常捕获有3种

  1. 异常中间件:回调函数包含四个参数
  2. 全局异常捕获
  3. 全局Promise异常捕获
// express服务分三步

// 1. 创建实例化服务
const express = require('express');
const app = express();


// 中间件分3种
// 1. 全局中间件:第一个参数是回调函数时,则针对所有请求生效
// 2. 路由中间件:第一个参数是匹配路由,第二个参数为回调函数
// 3. 异常中间件:回调函数包含四个参数

// 中间件:处理请求的业务逻辑
// 前置中间件--全局中间件
app.use(function (req, res, next) {
  console.log('前置中间件:middleware');
  next()
})
// 路由中间件
app.use('/test',function (req, res, next) {
  console.log('路由中间件:middleware');
  res.send('test')
  next()
})

// 2. 拦截路由
app.get('/',function(req, res, next){
  console.log('拦截路由');
  res.send('<html><body><div style="color:red">111</div></body></html>')
  next();
})

// 后置中间件--全局中间件
app.use(function (req, res, next) {
  console.log('后置中间件:middleware');
  throw new Error('错误信息')
})

// 异常中间件
// 注意:
// 1. 异常中间件全局只包含一个
// 2. 异常中间件可以传递给普通中间件
// 3. 异常中间件需要放在所有中间件的最后
// 4. 异常中间件只能捕获回调函数中的异常,比如Promise.then(throw new Error())这种就捕获不到了
app.use(function (err, req, res, next) {
  console.log('异常中间件:', err.message)
  next()
})

// 全局异常捕获
process.on('uncaughtException', function (err) {
  console.log('全局异常捕获', err.message);
})
// 全局Promise异常捕获
process.on('unhandledRejection', function (err) {
  console.log('全局Promise异常捕获', err.message);
})

// 3. 启动实例化服务
const port = 8080;
app.listen(port, function(){
  console.log('------服务启动成功');
})

3、https服务和静态服务

1. https服务

  1. 需要购买或者找免费的证书,证书分公钥和私钥。

2. 静态服务

  1. 通过路由中间件,将static文件夹下的所有文件转为静态资源
  2. 访问方式:ip:port/static/index.html
// express服务分三步

// 1. 创建实例化服务
const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();


// 中间件分3种
// 1. 全局中间件:第一个参数是回调函数时,则针对所有请求生效
// 2. 路由中间件:第一个参数是匹配路由,第二个参数为回调函数
// 3. 异常中间件:回调函数包含四个参数

// 中间件:处理请求的业务逻辑
// 前置中间件--全局中间件
app.use(function (req, res, next) {
  console.log('前置中间件:middleware');
  next()
})
// 路由中间件
app.use('/test',function (req, res, next) {
  console.log('路由中间件:middleware');
  res.send('test')
  next()
})
// 将static下的所有文件都转换为静态文件
// 访问方式:ip:port/static/index.html
app.use('/static', express.static('./static'))


// 2. 拦截路由
app.get('/',function(req, res, next){
  console.log('拦截路由');
  res.send('<html><body><div style="color:red">111</div></body></html>')
  next();
})

// 后置中间件--全局中间件
app.use(function (req, res, next) {
  console.log('后置中间件:middleware');
  throw new Error('错误信息')
})

// 异常中间件
// 注意:
// 1. 异常中间件全局只包含一个
// 2. 异常中间件可以传递给普通中间件
// 3. 异常中间件需要放在所有中间件的最后
// 4. 异常中间件只能捕获回调函数中的异常,比如Promise.then(throw new Error())这种就捕获不到了
app.use(function (err, req, res, next) {
  console.log('异常中间件:', err.message)
  next()
})

// 全局异常捕获
process.on('uncaughtException', function (err) {
  console.log('全局异常捕获', err.message);
})
// 全局Promise异常捕获
process.on('unhandledRejection', function (err) {
  console.log('全局Promise异常捕获', err.message);
})

// 3. 启动实例化服务
const port = 8080;
app.listen(port, function(){
  console.log('------服务启动成功');
})


// 启动一个https服务
const httpsPort = 443;
const options = {
  // key:fs.readFileSync('私钥文件路径'), // 私钥
  // cert:fs.readFileSync('公钥文件路径') // 公钥
}
const httpsServer = https.createServer(options, app);
httpsServer.listen(httpsPort, function(){
  console.log('------https服务启动成功');
})

到了这里,关于前端工程化:express服务端开发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化实战:React 模块化开发、性能优化和组件化实践

    前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。 模块化开发 在 React 中实现模块化开

    2023年04月10日
    浏览(72)
  • 前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程

    前言 基于Vue3.0 + TS的组件从开发组件库到发布私有npm仓库的全过程 环境 这里列出本文所使用的环境版本 vue 3.0 vue/cli 4.5.9 nodeJs 14.15.1 npm 6.14.8 vue --version @vue/cli 4.5.9 npm -v 6.14.8 node -v v14.15.1 步骤 创建项目 使用 vue-cli 创建一个 vue3 项目,假设项目名为 avatar-ui-vue vue create avatar-u

    2024年02月02日
    浏览(162)
  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(82)
  • 为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

    因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和约束。 eslint 是一个代码校验工具,用来规范项目代码风格。 初始化 通

    2024年02月14日
    浏览(104)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(101)
  • 前端工程化-NPM

    NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代

    2024年02月09日
    浏览(102)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(79)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(85)
  • 前端工程化相关

    知道软件包名,拿到源码或者路径的方法 在浏览器输入以下内容,就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单: 自动采取严格模式,忽略“use strict” 每个ESM模块都是单独的私有作用域; ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本,就要有

    2024年01月17日
    浏览(109)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包