（三）利用Express创建页面（包括express的安装和应用）

最新推荐文章于 2022-04-06 11:27:09 发布

Netceor

最新推荐文章于 2022-04-06 11:27:09 发布

阅读量685

点赞数

分类专栏： mongDB 文章标签： mongDB Express

本文链接：https://blog.csdn.net/Netceor/article/details/103135213

版权

mongDB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、介绍

express是一个基于Node.js平台的web开发框架

二、express安装

1.创建项目

打开Webstorm，新建一个Project，创建一个http.js文件【其他名字也可以】

2.安装

进入项目目录下，打开控制台，输入

npm init

一路回车，来到确认的询问句，输入yes

在控制台输入

npm install express --save

安装成功

3.查看是否安装

打开项目，查看File→ settings→ Languages & Frameworks→ Node.js and NPM，如果出现了express就是安装成功了

之后就可以开始写程序了，关于如何应用express可参考官方网页http://www.expressjs.com.cn/

三、Demo

1.Hello World

Hello World example

利用官网提供的“Hello World”代码，实现网页的监听（经过修改），在我们创建的http.js中输入以下内容

const express = require('express');
const app = express();

app.get('/', function(req, res){
    res.writeHead(200,{'Content-Type':'text/html'});  //html方式输出
    res.write("Hello World!<br>");   //br换行
    res.write('The world is beaytiful!');
    res.end();
});
//下面被注释的语句与上面的方法等价
//app.get('/', (req, res) => res.send('Hello World!<br>The world is beaytiful!'));
app.get('/abc',(req,res)=>res.send('The router is abc.'));
app.listen(3000, () => console.log('Example app listening on port 3000!'));

通过路径实现排他性，不能同时出现两个路径下的事件。

因此，运行，打开网页，输入“主机IP:端口号”(端口号默认3000)，页面出现“Hello World”。

若在后加上“/abc”，路径改变，将输出“The router is abc.”

2.连接表单

在项目下创建表单文件InputForm.html，与（一）js+html创建表单，连接类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入表单</title>

</head>
<body>
<form action="http://IP:端口/Input" method="get">
    <label>用户名：<input type="text" name="name"/></label><br>
    <label>密码：<input type="text" name="password"/></label><br>
    <input type="submit" name="submitName" value="Login"/>
    <input type="submit" name="submitName" value="Regist"/>
</form>
</body>
</html>

在http.js中加入对Input页面的响应，先运行http.js开启服务，然后打开表单页面

app.get('/Input',(req,res)=>{
    console.log(res.query);
    res.send('The form is received');
});

表单正常出现，输入内容并提交则会跳转页面，显示res.send的内容

3.托管静态文件

在项目下新建htmlRes文件夹，在其中放入一些内容（比如两张图片1.jpg和2.jpg）

在http.js中加入代码

//加在所有get之前
app.use(express.static('htmlRes'));

打开页面，输入网址，将会显示图片2.jpg

IP:端口/2.jpg

同理，将InputForm（表单文件）重新放置在htmlRes文件夹下，可以在网页直接输入文件名进行访问

//在网页输入
IP:端口/文件名

四、网站搭建

1.项目层级

下面附上代码。部分代码需要手动修改成自己的电脑信息，其中端口可默认为3000

2.index.html

创建该文件，用于链接到不同页面【由于网页默认优先打开index文件】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始文件</title>
</head>
<body>
<p><a href="http://IP:端口号/InputForm.html">登录注册</a></p>
<p><a href="http://IP:端口号/1.jpg">第一张图片</a></p>
<p><a href="http://IP:端口号/2.jpg">第二张图片</a></p>

</body>
</html>

3.InputForm.html

登录注册的表单页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入表单</title>

</head>
<body>
<form action="http://IP:端口号/Input" method="get">
    <label>用户名：<input type="text" name="name"/></label><br>
    <label>密码：<input type="text" name="password"/></label><br>
    <input type="submit" name="submitName" value="Login"/>
    <input type="submit" name="submitName" value="Regist"/>
</form>
</body>
</html>

4.http.js

主运行程序。先进行该文件的运行连接网页

const express = require('express');
const app = express();
app.use(express.static('htmlRes'));

app.get('/', function(req, res){
    res.writeHead(200,{'Content-Type':'text/html'});  //html方式输出
    res.write("Hello World!<br>");   //br换行
    res.write('The world is beaytiful!');
    res.end();
});
//下面被注释的语句与上面的方法等价
//app.get('/', (req, res) => res.send('Hello World!<br>The world is beaytiful!'));
app.get('/Input',(req,res)=>{
    delete req.query.submitName;
    console.log(req.query);
    res.write("name:"+req.query.name+'<br>password:'+req.query.password);
});
app.listen(3000, () => console.log('Example app listening on port 3000!'));