在vscode中利用express脚手架简单完成几个路由以及中间件的使用

最新推荐文章于 2023-05-09 10:17:32 发布
最新推荐文章于 2023-05-09 10:17:32 发布
阅读量494 收藏 3
点赞数 1
分类专栏： 知识点简述 题目 / 例子详解 功能实现 文章标签： vscode express 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56715703/article/details/128884752
版权

一、express-generator脚手架安装：（全局安装）

1.在集成终端输入npm i express-generator （express-h可查看相关命令）

2.创建myapp项目：express --no-view myapp

3.进入创建的项目目录下，安装所有的包：

  1. cd myapp

  1. npm i

4.修改package.json：

"scripts": {
    "start": "node ./bin/www",
    "dev":"nodemon ./bin/www"
  }

5.在集成终端启动项目：npm run dev

启动成功图示

二、项目文件目录

三、项目要求

  1. get : /login -> 渲染登录表单页面

  1. get ： /register -> 渲染注册表单页面

  1. post : /dologin -> 接收表单传递过来的用户名和密码 判断是否登录成功

  1. post : /doregister -> 注册前检查persons.json中有无此用户，如果有返回已注册。如果没有则注册成功。且用户信息多了一个注册时间time，要求使用中间件实现。最终写入到persons.json文件的注册信息格式如下：

[{"username":"admin","password":"123","timer":"2021年04月24日 09:52:21"}]

四、 用get渲染登录表单页面

在routes/index.js添加：（箭头函数）

router.get("/login", (req, res) => {
  res.sendFile(path.resolve("./login.html"))
})

在网址中输入http://localhost:3000/login，显示如下：

五、用get渲染注册表单页面

在routes/index.js添加：（function函数）

//注册
router.get("/register", function (req, res) {
  res.sendFile(path.resolve("./register.html"))
})

在网址中输入http://localhost:3000/register，显示如下：

六、用post接收表单传递的用户名和密码 判断是否登录成功

登录验证代码：

//登录验证
router.post("/dologin", (req, res, next) => {
  //接收表单传递的用户名和密码  tel和pass取决于from表单中的name值
  let { tel, pass } = req.body;

  //提示用户名和密码不能为空
  if (!tel || !pass) {
    next("用户名或密码不能为空")
    return
  }

  //读取persons.json文件，与表单传入信息作比对
  let data = fs.readFileSync("./persons.json")
  //将data转为数组
  let arr = JSON.parse(data)

  //用findIndex方法循环数组，并将返回值赋值给flagName和flagPass
  let flagName = arr.findIndex((item) => {
    return tel == item.username
  })
  let flagPass = arr.findIndex((item) => {
    return pass == item.password
  })

  //如果flagName为-1，表明是新用户,提示请注册，并给注册链接
  if (flagName == -1) {
    res.send(`<h2>该用户名是新用户，请<a href="register">注册</a></h2>`)
    return
  }
  //如果flagName不为-1，表明是旧用户。判断其密码是否匹配
  if (flagName != -1 && flagPass == -1) {
    res.send(`<h2>密码错误，请重新输入</h2>`)
  } else {
    res.send(`<h2>登录成功</h2>`)
  }
})

persons.json的内容为：

[{"username":"xm1","password":"1234"}]

七、用post实现注册验证功能，并添加注册时间time

  1. 利用time-stamp写time中间件：

  1. npm i time-stamp下载time-stamp时间戳

  1. 在app.js中写：

let timer = require("time-stamp")

app.use("/",(req,res,next)=>{
    req.timer = timer("YYYY年MM月DD日 HH:mm:ss");
    next();
})

2.注册验证代码：

//注册验证
router.post("/doregister", (req, res, next) => {
  //接收表单传来的用户名和密码
  let { tel, pass, pass2 } = req.body;
  let username = tel
  let password = pass2
  // console.log(`用户名：${username},密码：${pass},重复密码：${password}`);

  //提示用户名和密码不能为空
  if (!tel || !pass || !pass2) {
    next("用户名或密码不能为空")
    return
  }

  //读取persons.json文件，与表单传入信息作比对
  let data = fs.readFileSync("./persons.json")
  //将data转为数组
  let arr = JSON.parse(data);

  //用findIndex方法循环数组，并将返回值赋值给flagName和flagPass
  let flagName = arr.findIndex((item) => {
    return tel == item.username
  })

  //如果flagName为-1，表明是新用户,将用户名、密码、注册时间写入persons.json中，提示注册成功
  if (flagName == -1 || pass != pass2) {
    //时间
    let timer = req.timer;
    // console.log(timer);

    //验证两次密码是否一致
    if (pass != pass2) {
      res.send(`<h2>两次密码不一致，请重新输入</h2>`)
      return
    }

    // 将用户名和密码存入obj中
    let obj = { username, password, timer }
    arr.push(obj)

    //将转换为字符串的arr写入persons.json文件中
    fs.writeFileSync("./persons.json", JSON.stringify(arr))
    // console.log(arr);

    res.send(`注册成功`)
    return
  }

  //如果flagName不为-1，表明是旧用户。提示去登录
  if (flagName != -1) {
    res.send(`<h2>该用户已注册，请<a href="login">登录</a></h2>`)
  }
})

八、完整的app.js和index.js代码

app.js:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
let timer = require("time-stamp")

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use("/", (req, res, next) => {
    req.timer = timer("YYYY年MM月DD日 HH:mm:ss");
    next();
})
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

app.use((err, req, res, next) => {
    res.send(`<h2 style="color:red;">警告：${err}</h2>`)
})

module.exports = app;

index.js:

var express = require('express');
var router = express.Router();
let path = require("path")
let fs = require("fs")


/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

//登录
router.get("/login", (req, res) => {
  res.sendFile(path.resolve("./login.html"))
})

//注册
router.get("/register", function (req, res) {
  res.sendFile(path.resolve("./register.html"))
})

//登录验证
router.post("/dologin", (req, res, next) => {
  //接收表单传递的用户名和密码  tel和pass取决于from表单中的name值
  let { tel, pass } = req.body;

  //提示用户名和密码不能为空
  if (!tel || !pass) {
    next("用户名或密码不能为空")
    return
  }

  //读取persons.json文件，与表单传入信息作比对
  let data = fs.readFileSync("./persons.json")
  //将data转为数组
  let arr = JSON.parse(data)

  //用findIndex方法循环数组，并将返回值赋值给flagName和flagPass
  let flagName = arr.findIndex((item) => {
    return tel == item.username
  })
  let flagPass = arr.findIndex((item) => {
    return pass == item.password
  })

  //如果flagName为-1，表明是新用户,提示请注册，并给注册链接
  if (flagName == -1) {
    res.send(`<h2>该用户名是新用户，请<a href="register">注册</a></h2>`)
    return
  }
  //如果flagName不为-1，表明是旧用户。判断其密码是否匹配
  if (flagName != -1 && flagPass == -1) {
    res.send(`<h2>密码错误，请重新输入</h2>`)
  } else {
    res.send(`<h2>登录成功</h2>`)
  }
})


// //注册验证
router.post("/doregister", (req, res, next) => {
  //接收表单传来的用户名和密码
  let { tel, pass, pass2 } = req.body;
  let username = tel
  let password = pass2
  // console.log(`用户名：${username},密码：${pass},重复密码：${password}`);

  //提示用户名和密码不能为空
  if (!tel || !pass || !pass2) {
    next("用户名或密码不能为空")
    return
  }

  //读取persons.json文件，与表单传入信息作比对
  let data = fs.readFileSync("./persons.json")
  //将data转为数组
  let arr = JSON.parse(data);

  //用findIndex方法循环数组，并将返回值赋值给flagName和flagPass
  let flagName = arr.findIndex((item) => {
    return tel == item.username
  })

  //如果flagName为-1，表明是新用户,将用户名、密码、注册时间写入persons.json中，提示注册成功
  if (flagName == -1 || pass != pass2) {
    //时间
    let timer = req.timer;
    // console.log(timer);

    //验证两次密码是否一致
    if (pass != pass2) {
      res.send(`<h2>两次密码不一致，请重新输入</h2>`)
      return
    }

    // 将用户名和密码存入obj中
    let obj = { username, password, timer }
    arr.push(obj)

    //将转换为字符串的arr写入persons.json文件中
    fs.writeFileSync("./persons.json", JSON.stringify(arr))
    // console.log(arr);

    res.send(`注册成功`)
    return
  }

  //如果flagName不为-1，表明是旧用户。提示去登录
  if (flagName != -1) {
    res.send(`<h2>该用户已注册，请<a href="login">登录</a></h2>`)
  }
})

module.exports = router;
三月.'
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vscode搭建网站-express搭建以及注意点
Haihao_123的博客
09-24 933
为了ajax的学习
vscode如何配置自定义快捷代码段（例：nodejs eser）
qq_60518899的博客
07-08 693
最近在B站学nodejs，但是那个老师频繁创建新的简易express服务器框架，刚开始也跟着敲，当练手，但是敲多了倒觉得无意义了。突然有一集直接快捷生成eser（express骨架），就像HTML的“!”一般，所以就去查了查如何自己定义这类代码。输入快捷代码（输入的字段就是引用自定义代码段的代码），也可以用给出的样例自己编辑其他的类似代码块。这里给出我编辑的样例（express主框架）实例：用vscode定义express骨架）一定要注意在最大的外尖括号内编辑。在生成的文件中编辑即可，但是。
Vscode NodeJS Express创建项目
mumanquan1的博客
12-29 1485
1、新建NodeJS SourceCode目录，例如：D:\nodejs_src 2、打开VsCode，并打开上述目录 3、安装Express插件 4、打开Vscode终端（Terminal），执行以下指令指令 npm install express-generator -g 5、执行以下指令创建Express项目 express iothub_server 此时可能回报以下错误“express : 无法加载文件” 需要通过以下方式设置权限 用系统管理员执行PowerShell 输入以下指令 最
Express框架的路由配置
前端卷王小白的博客
05-09 1962
express框架的路由,express跨域处理.express基础路由,express动态路由,express路由中间件,express路由错误处理,express完整服务使用
深入剖析Express cookie-parser中间件实现示例
08-28
在上面的示例中，我们使用 `cookieParser()` 中间件来解析 cookie，然后在路由处理函数中使用 `res.cookie()` 方法来设置 cookie。 cookie 签名和验证 在实际应用中，我们通常需要对 cookie 进行签名，以确保 ...
后端使用node+express，前端使用react全家桶的精简脚手架。.zip
最新发布
03-03
这是一个基于Node.js和Express后端框架以及React前端库构建的项目脚手架。这个脚手架简化了开发流程，使得开发者能够快速启动一个新的项目，它整合了React的多个相关库，通常被称为“React全家桶”。 1. **Node.js*...
express-crowd-app:一个完全脚手架的快速应用程序，使用 Atlassian 人群进行身份验证
06-30
在使用Express-Crowd-App时，开发者应注意以下几点： - **安全最佳实践**：遵循安全编码原则，防止SQL注入、XSS攻击等。 - **性能优化**：合理配置Crowd服务器，以应对高并发访问。 - **版本控制**：使用Git等工具...
Web前端(vue/cli脚手架)+后端（NodeJS+Express）搭建个人博客
01-05
在本项目中，我们将探讨如何使用现代Web技术栈，包括前端的Vue CLI脚手架、后端的Node.js与Express框架，以及数据库管理系统MongoDB，来构建一个个人博客平台。这个项目非常适合对前端有一定了解并希望扩展后端技能...
express-generator-socket:添加 Socket.io 功能的基本 Express Generator 脚手架
06-12
在实际开发中，了解并掌握如何正确地使用这个脚手架，以及如何根据项目需求调整和扩展其功能，对于提升Node.js和实时应用开发的能力至关重要。同时，掌握Socket.io的原理和实践，可以帮助开发者构建出更具交互性和...
Nodejs + vscode 调试服务端代码
fth1002853070的博客
11-18 372
注意：这里是前台启动，所以不要关闭命令行对话框。还有就是如果你已经用pm2启动该服务了，那么得先停掉，否则会提示端口号被占用。会输出相应的启动信息，此时找到你想断点的文件中的位置，直接断点即可。一定要保证本地代码和服务端的代码的一致性。打开vscode 的调试栏，选择。调试项，然后点击左侧的绿色三角号。注意 9229 端口需要开放。不出意外的话vscode的。，还有就是一定不要调试。
VSCode 插件推荐+图文介绍+简易使用教程
zawami的博客
08-03 1809
实用的VSCode插件，适用于vue开发。图文展示+简易使用教程。
【记录】vscode常用插件
hannah2233的博客
02-09 831
【代码】【记录】vscode常用插件。
【vscode插件集】学前端一年，珍藏的 40个 vscode 插件
热门推荐
缚己
03-08 1万+
猿生不能只有 Ctrl + C 和 Ctrl + V，还要有 Ctrl + D。 工欲善其事，必先利其器。今天给大家带来了博主学习前端一年多以来偷懒 ，呸~ 提升效率必备的 40 个 vscode 插件。 看完觉得有帮助的记得点个赞~ HTML 标签自动闭合 – Auto Close Tag 身为一个前端程序猿，打 HTML 标签那必须是快速的，vscode 本身就提供了标签自动闭合的功能。但是对于一些自定义标签 vscode 就不能识别了。 这时安装这个插件，vscode 就可以自动识别你的自定义标.
Express 支持同一路径绑定多个路由响应函数，（node）
yq_dxp1218的博客
03-02 2580
控制权转移        我们要绑定某个路径的 POST 请求，则可以用 app.post(path, callback) 的        方法。需要注意的是 app.all 函数，它支持把所有的请求方式绑定到同一个响应函数，是        一个非常灵活的函数，在后面我们可以看到许多功能都可以通过它来实现。       app.all('/user/:username', function(r...
VS Code开发 Express项目基础搭建
天马3798
07-13 8013
使用 VS  Code搭建Expres项目，创建 简单 ，使用方便 一、安装Express npm install express --save二 、使用Expres 创建项目  express myapp创建结果： create : myapp/package.json create : myapp/app.js create : myapp/public cr
【软件安装】Mac下VScode的安装和使用+express框架安装
weixin_44895477的博客
06-22 1799
1.下载安装包 https://code.visualstudio.com/ 直接去VScode官网找到对应版本下载即可 我看官网下载太慢了 就复制了下载链接去迅雷下 亲测很快 2.安装CSvode mac版本下载之后是一个压缩包 解压之后直接就是app 可以把app移动到应用程序即可 3.常见插件安装 点击扩展： 3.1 汉化包 搜索：chinese 就会出现 选择中文简体 即可 安装完需要重新启动程序才会生效 3.2 语言包 我用的是JavaScript 直接搜索安装即可 3.3 Auto C
如何用vscode调试nodejs express框架的项目？
技术宅，专注云原生、Go、Linux、Java等技术分享，原创文章、效率工具、实战解决方案！关注我，了解互联网动态，学 IT 不迷路
12-01 2203
如何用vscode调试nodejs express框架的项目？
自定义eser来设置express代码块设置方法vscode中用快捷键eser来创建nodejs中的express服务器的代码块设置方法
angrynouse的博客
06-15 1385
eser express 前端
在Vue中如何使用Express路由
05-12
要在Vue中使用Express路由，你需要在Vue项目中安装axios。使用axios可以在Vue中向Express服务器发送HTTP请求。 首先，在Vue项目的根目录中安装axios： ``` npm install axios --save ``` 接下来，在Vue组件中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值