nodejs+Express开发第一个web应用

2023-05-16

express是nodejs开发中最常用的一个http服务框架,通过他可以很方便的构建http服务。另外他本身还提供了路由功能,就是对请求的路径做区分,分别对应后台不同的请求。这里介绍如何通过express构建第一个web应用。

express的安装,需要通过npm install express --save。

安装了express,我们会看到项目路径下面多了一个文件夹node_modules里面全是express所有的依赖包。默认会包含express,ejs,body-parser,cookie等。

项目结构如下:

在项目根路径下新建app.js,这里简单引入相关依赖:

var express = require("express");
var app = express();
var path = require("path");
var router = require("./router/router");

其中,./router/router这个依赖是本地文件,包含的内容就是前面说过的express自带的Router路由 ,负责处理前端页面的各种请求。

第一步:设置静态文件路径

app.use(express.static(path.join(__dirname,'public')));

第二步:设置模板引擎(默认express支持的模板引擎现在是ejs,我们可以通过如下代码将其修改为我们熟悉的html模板)

app.engine('html',require('ejs').__express);
app.set("view engine","html");
app.set("views",path.join(__dirname,"public/views"));

 通过这三句,我们就把express默认的ejs引擎改为了我们熟悉的html模板引擎,ejs虽然不是很难,但是我们还是喜欢默认的html作为模板。最后一句是设置静态页面所在的位置。这么指定了之后,我们在处理页面渲染的时候,就不用每次都带上public/views这么一串路径文字了。express会直接在项目路径下的public/views文件夹下寻找静态页面。

第三步:设置中间件

这里略过,一般我们会设置boby-parser,cookie-parser等等中间件。

第四步:设置路由

这里新建一个文件router/router.js,编写我们前端的相关请求处理逻辑(get,post,delete,put)。

var express = require("express");
var router = express.Router();
//首页public/index.html
router.get("/",function(req,res){
	res.sendFile(__dirname+"/"+"index.html");
});
//其他页面在public/views目录下
router.get("/welcome",function(req,res){
	return res.render("admin/welcome");
});
router.get("/user",function(req,res){
	var data = {code:200,message:"success"};
	return res.send(JSON.stringify(data));
});
router.get("/user/:id",function(req,res){
	var data = [
		{id:1,name:'xxx',age:18},
		{id:2,name:'aaa',age:20},
		{id:3,name:"bbb",age:30}
	];
	var id = req.params.id;
	return res.end(JSON.stringify(data[id]));
});
module.exports = router;

在app.js文件中,我们需要做如下的编码:

app.use("/",router);

第五步:启动http监听服务

var server = app.listen(3000,function(request,response){
	var host = server.address().address;
	var port = server.address().port;
	console.log("server running at http://%s:%s",host,port);
});

我们还需要准备两个静态文件一个是index.html,一个是views/admin/welcome.html,他们均在public文件夹下。

index.html

<!doctype html>
<html>
	<head>
	   <meta charset="UTF-8"/>
	   <title>nodejs</title>
	   <link rel="stylesheet" type="text/css" href="/css/reset.css"/>
	   <link rel="stylesheet" type="text/css" href="/css/public.css"/>
	</head>
	<body>
		<div id="container">
			<h2>This is the first page by nodejs</h2>
			<a href="/welcome">welcome</a>
		</div>	
	</body>
</html>

views/admin/welcome.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>welcome</title>
	<link rel="stylesheet" type="text/css" href="/css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="/css/public.css"/>
</head>
<body>
	<div id="container">	
		<h2>welcome to nodejs router.</h2>
	</div>
</body>
</html>

css文件这里就略过,他们也在public目录下。

最后可以通过node app.js启动服务,我们可以访问http://127.0.0.1:3000。以下是启动成功的打印输出信息。

Administrator@hadoop MINGW64 /d/workspaces/javascript/nodejs
$ node app.js
server running at http://:::3000

 访问项目首页,我们可以点击welcome链接,然后就跳到了admin/welcome.html页面。

请求中,我们还做了两个json请求,他们的访问结果如下:

完整的app.js

var express = require("express");
var app = express();
var path = require("path");
var router = require("./router/router");
//配置视图模板引擎为html
app.use(express.static(path.join(__dirname,'public')));
app.engine('html',require('ejs').__express);
app.set("view engine","html");
app.set("views",path.join(__dirname,"public/views"));

app.use("/",router);
var server = app.listen(3000,function(request,response){
	var host = server.address().address;
	var port = server.address().port;
	console.log("server running at http://%s:%s",host,port);
});

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nodejs+Express开发第一个web应用 的相关文章

  • windows下安装awscli

    awscli是运行aws所需的客户端命令行工具 xff0c 在windows下安装可以通过msi的方式安装 xff0c 但是一般很难下载这种文件 xff0c 另一种方式是通过python提供的pip命令安装 xff0c 这里介绍通过pip命
  • SSL: error:0B080074:x509 certificate routines:X509_check_private_key:key values mismatch问题解决

    今天把服务器上的nginx关闭再启动 xff0c 发现了如下问题 root 64 PUS 021 ssl key nginx c opt nginx conf poll conf nginx emerg SSL CTX use Privat
  • mysql密码中有特殊字符&在命令行下登录

    在服务器上 xff0c 通常为了快速登录数据库 xff0c 我们会使用mysql hhost uusername ppassword db的方式登录数据库 xff0c 如果密码中没有特殊字符 amp xff0c 会直接进入数据库sql命令行
  • ERROR 1093 (HY000): You can't specify target table 'student2' for update in FROM clause问题解决

    在做mysql嵌套子查询删除时 xff0c 出现如题错误 mysql语句如下 xff1a delete from student2 where id not in select id from student2 group by no na
  • Configured broker.id 2 doesn't match stored broker.id 1 in meta.properties

    kafka伪分布式集群安装报错 xff1a Configured broker id 2 doesn 39 t match stored broker id 1 in meta properties 这种情况只有在一台机器上部署两个brok
  • hbase1.0.0完全分布式安装

    hbase是Hadoop生态系统中重要的一员 xff0c 他是基于google bigtable的思想开发出来的开源列簇数据库 hbase的运行环境依赖于hdfs zookeeper 这里介绍完全分布式安装 前提 jdk安装 xff0c s
  • java操作hbase的增删改查

    首先需要将hbase安装目录下lib文件夹中的jar文件全部加入到项目类路径下 xff0c 另外还需要将hadoop相关jar包也加入 这里需要用到的主要API介绍一下 Configuration xff1a HBase参数配置对象 Con
  • windows安装解压版postgresql9.6

    1 下载并解压postgresql到系统一个目录 2 初始化数据库 初始化之前 xff0c 需要设置一个存储数据库的文件夹data目录 这里设置在postgresql安装目录下 进入安装目录 xff0c 运行如下命令 bin initdb
  • CentOS 7连接mysql 8提示2059 - authentication plugin ‘caching_sha2_password

    环境 xff1a CentOS 7 4 1708 mysql 8 0 11 Navicat 12 解决办法 1 由于myslq8不支持动态修改密码验证方式 xff0c 所以要先停止mysql systemctl stop mysqld se
  • mongodb副本集集群中节点出现recovering状态解决办法

    记录一次mongodb在生产环境中从节点出现recovering状态的问题解决过程 进入mongo shell命令行 xff0c 通过rs conf 命令查看节点状态 xff0c 出现RECOVERING 查看日志 xff0c 错误日志截图
  • mongodb3.4+sharding分片集群环境搭建

    背景 xff1a mongodb集群搭建方式有三种 xff0c 1 主从 官方已经不推荐 xff0c 2 副本集 xff0c 3 分片 这里介绍如何通过分片sharding方式搭建mongodb集群 sharding集群方式也基于副本集 x
  • eclipse+android开发logcat无法输出日志解决办法

    eclipse打开logcat视图 xff0c 应用程序启动 xff0c 连接设备 xff0c 即使logcat日志级别调试到verbose xff0c 仍然无法打印日志 问题在于adt版本和android版本不兼容 xff0c 如果你的a
  • 30分钟搞定个推sdk安卓客户端接入

    所需的工具 eclipse 43 adt 43 logcat 43 安卓手机 43 联网 1 注册成为个推开发者 个推官方网站 xff1a https dev getui com dev 2 登记应用 接下来 xff0c 填写应用详细信息
  • 30分钟搞定极光sdk安卓客户端接入

    1 注册成为极光开发者 xff0c 极光开发者平台官方网站 xff1a https www jiguang cn 2 登录极光开发者平台 xff0c 进入开发者服务 xff0c 创建应用 填写相关信息 xff0c 应用icon 应用名称 创
  • mina框架实现长连接与android客户端通信

    这篇文章也是通过学习mina框架视频来的 xff0c 网上也有很多类似的代码 xff0c 这里通过自己敲一遍代码 xff0c 熟悉mina框架的使用以及安卓编程 mina框架作为一个网络异步编程框架 xff0c 它和netty一样 xff0
  • rabbitmq开启webui界面管理

    默认情况下 xff0c 安装完成rabbitmq xff0c 启动成功 xff0c 并不会开启webui的http访问服务 通过rabbitmq plugins list查看rabbitmq插件 xff0c 发现rabbitmq manag
  • centos7下设置vi的colorscheme

    每次在centos机器上使用vi编辑文件 xff0c 发现总是默认的黑底白字 xff0c 效果非常不好 xff0c 于是 xff0c 开始着手让vi编辑界面有色彩 开始直接设置 etc virc 修改完成之后 xff0c 由于系统没有mur
  • windows上psycopg2安装过程

    psycopg2是python操作postgresql的扩展库 xff0c 在windows下 xff0c 可以通过pip install psycopg2来安装 刚开始安装时我的pip是anaconda自带的pip 在anaconda3
  • windows上安装Scrapy

    Scrapy是一个python系统网络爬虫框架 xff0c 应用广泛 通过pip install Scrapy安装 xff0c 始终提示Unable to find vsvarsdll bat 通过pip install Twisted x
  • BZOJ 4730: Alice和Bob又在玩游戏

    Description Alice和Bob在玩游戏 有n个节点 xff0c m条边 0 lt 61 m lt 61 n 1 xff0c 构成若干棵有根树 xff0c 每棵树的根节点是该连通块内编号最 小的点 Alice和Bob轮流操作 xf

随机推荐

  • 五分钟配置好vs2017+opencv3.4.1开发环境

    opencv提供了丰富的图像处理功能 xff0c 这里介绍vs2017 43 opencv开发环境配置 1 下载安装opencv 3 4 1 opencv官网地址 xff0c https opencv org xff0c 这里就下载wind
  • windows部署hadoop-2.7.0

    这里使用自己编译的hadoop 2 7 0版本部署在windows上 xff0c 记得几年前 xff0c 部署hadoop需要借助于cygwin xff0c 还需要开启ssh服务 xff0c 最近发现 xff0c 原来不需要借助cygwin
  • win7通过源码编译hadoop-2.7.0

    编译hadoop源代码 xff0c 意义在于当我们使用eclipse进行hadoop开发时 xff0c 可以直接在本地运行 xff0c 而无需打包成jar xff0c 然后再提交到hadoop服务器进行运行 当然 xff0c 这还需要一个可
  • win7源码编译hadoop-eclipse-plugin-2.7.0.jar

    当你厌烦了本地编码 xff0c 打包 xff0c 部署到远程服务器 xff0c 然后通过hadoop jar xxx jar wordcount input output的方式运行mapreduce程序 xff0c 那么可以考虑本地编译一个
  • windows下通过批处理脚本启动redis

    windows下redis启动 xff0c 需要进入redis安装目录 xff0c 然后shift 43 右键 xff0c 选择 在此处打开命令窗口 xff0c 然后输入redis server exe redis conf xff0c 就
  • KafkaOffsetMonitor-assembly-0.2.1.jar使用遇到的问题

    最近使用了一下最新版的kafka监控工具 xff0c 按照以前的方式运行 xff0c 能够打开首页 xff0c 但是首页什么内容也没有 xff0c 感觉像是出了什么幺蛾子 xff0c 浏览器右键打开开发者模式 xff0c 发现三个angul
  • springboot+jpa+mongodb开发实战

    mongodb作为nosql数据库的一种 xff0c 在javaee开发中也越来越受到重视 xff0c 这里介绍springboot 43 jpa 43 mongodb开发过程 1 新建maven工程 xff0c 引入springboot和
  • hive查询结果保存到本地

    使用hive查询 xff0c 结果我们通常会保存到hdfs xff0c 然后通过sqoop导出工具 xff0c 将其导出到外部mysql或者其他地方 xff0c 但是有时候查询结果就是一个数据 xff0c 比如count 的结果 xff0c
  • spring-data-mongodb两种实现方式对比

    之前介绍过springboot和mongodb整合 xff0c 使用了spring data mongodb xff0c 因为springboot注解和自动化配置 xff0c 我们少了很多配置 xff0c 这里介绍spring整合mongo
  • shell脚本获取昨天今天本周周一本周周日本月第一天本月最后一天

    偶尔在linux上需要做脚本 xff0c 并设置脚本按照日期来计算相关数据 xff0c 这时候就涉及到日期的获取 xff0c 这里介绍简单的几个重要日期的获取 xff0c 分别是昨天 xff0c 今天是本周的第几天 xff0c 本周周一 x
  • 4399游戏存档的那些事儿

    4399游戏存档的那些事儿 本文旨在简单分析4399游戏存取档的加解密 工具在吾爱都有提供下载 工具名称用途ffdec反编译swf文件charles抓包开发IDE 随意 存档加解密复现 一 抓包 随意找一个支持存档的游戏进行抓包 这里不分析
  • mongodb数据库从入门到精通

    mongodb数据库作为nosql的一种 xff0c 目前在nosql数据库中的应用排名几乎是数一数二 开发中也会越来越受到重视 xff0c 这里介绍命令行下操作mongo数据库的相关内容 基础部分 连接数据库 xff1a 一般连接数据库
  • linux上安装svn

    1 安装 yum install subversion 2 测试是否成功及查看版本 svnserve version 3 创建目录 makedir p home hadoop workspace svn pro 4 创建svn目录 svna
  • java通过jedis操作redis(从JedisPool到JedisCluster)

    redis作为一个缓存数据库 xff0c 在绝大多数java项目开发中是必须使用的 xff0c 在web项目中 xff0c 直接配合spring redis xff0c 各种配置都直接在spring配置文件中做了 xff0c 一般都是使用r
  • Lua redis() command arguments must be strings or integers

    如题 xff0c 在linux命令行下运行lua脚本操作redis xff0c 提示错误 root 64 server script cat set lua return redis call 39 set 39 KEYS 1 ARGV 1
  • git命令行下回退一个文件到上一个版本

    git版本控制在ide中 xff0c 很方便的回退一个文件 xff0c 只需要git gt revert就可以了 但是有时候 xff0c 我们会在命令行下操作git 比如部署到生产环境的时候 xff0c 我们不想打包 xff0c 而是想通过
  • 让web页面页脚footer固定在页面底部

    有时候 xff0c 我们发现很多页面内容不多的时候 xff0c 页面底部内容飘到了中间 xff1a 这个页面底部没有固定 xff0c 结果 xff0c 一个前端工程师是无法接受这样的结果的 这里介绍一种通用的解决办法 xff0c 让页面底部
  • 图文演示第一个nodejs实例

    学习nodejs xff0c 第一个项目就是如何构建一个简单的http服务 xff0c 然后通过浏览器输入访问地址访问 xff0c 打印一个简单的helloworld 这里直接入手 xff0c 首先确保机器上已经安装了node npm 以及
  • 构建http服务的几种方式

    做前端开发 xff0c 页面可以通过浏览器打开访问 xff0c 但是异步请求这里 xff0c 直接通过浏览器就不行了 xff0c 即便是访问的本地json资源 xff0c ajax也无能为力 另外 xff0c 如angularjs vue涉
  • nodejs+Express开发第一个web应用

    express是nodejs开发中最常用的一个http服务框架 xff0c 通过他可以很方便的构建http服务 另外他本身还提供了路由功能 xff0c 就是对请求的路径做区分 xff0c 分别对应后台不同的请求 这里介绍如何通过expres