配置node和express

node

安装node

下载左边的长期维护版本，不要右边的新版本

下载好后，傻瓜式安装即可。

安装完毕不要打开某些文件。

验证是否安装成功

win+R，打开cmd命令行窗口

node -v

能输出版本号，就说明安装成功。

配置node

伴随着node的安装还有个小工具npm被一起安装上了。

npm是一个社区，也是我们本地的一个工具，npm社区里的代码在国外，我们由于某些原因，不能正常的使用npm社区的内容，于是我们使用阿里巴巴的淘宝镜像，需要我们修改npm的默认下载地址，修改方法如下

##先查看一下我们当前的镜像地址
npm config get registry
##如果你以前没有修改过，则此时出现的地址应该是 https://registry.npmjs.org/，这是国外的镜像地址
##我们需要修改成国内的淘宝镜像
npm set registry https://registry.npm.taobao.org
##修改过后，再次查看一下当前镜像地址予以确认
npm config get registry
##确认网址无误即可进行下一步

新建项目

新建一个文件夹，名字随意，但是不得出现包括汉字在内的特殊字符，比如我们的项目名叫BS

cd BS
##初始化项目
npm init -y
##这一步将在BS文件夹下新建一个package.json文件

我们在node中，直接使用原生JavaScript可以实现我们所需要的各种功能，但是直接用js去写，太过于麻烦，有人提前写好了一些方法，我们可以用简单的语法去调用他们的方法就可以实现很复杂的功能，在这里我们使用express框架。

安装express

npm install express
#or
npm i express

打开package.json，里面多了dependencies字段，其中有express以及其版本就是安装成功，还可以查看BS文件夹下，此时多了node_modules文件夹，打开会发现其中有很多个文件夹，其中有一个文件夹的命名是express，这个文件夹就是我们所需的文件，其他的都是express所需要的依赖包。

这里可以理解成：我们要使用express，而express的开发和后期的使用又要基于包A、B、C、D、E、F，而包A的开发又基于包G，他们之间形成了错综复杂的网状关系，但是这些我们都不需要去了解，我们只需要知道我们安装了express，并且后续可以使用express了即可，他们的关系将由他们自己去管理。

新建index.js

在BS文件夹下新建index.js作为后端的入口文件，其中的内容是

var express=require('express')//引入express

var app=express()


app.get('/',function (req,res) {
 res.send('hello,node!')
})

app.listen(3000)//设置端口号

然后，打开命令行工具

node index.js
#or
node index

项目即可启动

打开浏览器，输入网址

http://127.0.0.1:3000/或者http://localhost:3000/即可打开界面，如果你知道你的ip地址的话，也可以使用自己的ip地址进行打开，还可以把你的ip地址分享给跟你同处一个局域网的同学打开你的网址，假如你的ip地址为：192.168.3.78，则你应该输入的网址是http://192.168.3.78:3000/，你的局域网同学也可以根据你的此网址进入你的服务。

附：windows查看ip地址方法

打开命令行工具，输入

ipconfig

在出来的海量内容中，找到

以太网适配器以太网:

连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . . . . : fe80::e0c7:e29e:4223:d8a4%10 IPv4 地址 . . . . . . . . . . . . : 192.168.40.26 子网掩码 . . . . . . . . . . . . : 255.255.255.0 默认网关. . . . . . . . . . . . . : 192.168.40.1

其中IPv4就是你的ip地址

建立HTML项目

建立views文件夹

在BS文件夹里建立views文件夹存放HTML因为app.engine('html',require('express-art-template'))默认从views获取HTML文件,HTML代码案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单事件</title>
    <style></style>
</head>
<body>
<form action="/login" method="post">
    <label for="account">
        <input id="account"  name="account" type="text" placeholder="请输入账号"><br>
    </label>
    <label for="password">
        <input id="password"  name="password" type="password" placeholder="请输入密码"><br>
    </label>
    <input type="submit" value="登录">
</form>
</body>
</html>
<script>
</script>

配置body-parser

在当前文件的cmd中下载"art-template"和"express-art-template"，在package.json中显示（npm i express-art-template art-template）

//引入express、加载express文件
var express=require('express')
var app=express()

app.engine('html',require('express-art-template'))
//在 Express 中配置使用 art-template 模板引擎

app.use(express.urlencoded({extended:false}))
app.use(express.json())
//配置body-parser解析器
//body-parser在老版本中express中不存在，需要额外安装
//body-parser在新版本中express内嵌 不需要安装


app.get('/',function (req,res) {
    //req是前端传给后端的内容
    //res是后端传给前端的内容
    //express默认去views中寻找项目
    console.log(req.query)
    //该属性主要用于get()方法时传递参数使用，用法很简单，直接获取地址栏传递的参数；
    res.render('index.html')
})//事件驱动，异步


app.post('/login',function (req,res) {
       //<form action="/login" method="post">事件驱动，异步
    console.log(req.body)
    //该属性主要用于post()方法时传递参数使用，用法最广泛，注意，在使用这个属性时，得先确认有没有导入‘body-parser’；
    if (req.body.account==123&&req.body.password=='abc'){
        res.send('登录成功')
    }else{
        res.send('登录失败')
    }
})
//本身是获取数据库的代码 因为没有数据库 所以直接判断账号密码


app.listen(3000)//监听3000端口（找到对应软件）

运行

运行代码前需要 node XXX(文件名)（每一次修改JS文件都需要）

运行网址：127.0.0.1:3000（：后面是端口号）

var express = requier

PS:

如果你希望修改默认views路径可以：

app.set('views',目录路径)

posted @ 2022-05-06 10:35 赴人间惊鸿艳阅读(502) 评论(0) 收藏举报

刷新页面返回顶部