Node.js安装和简单前后端的交互。

一、Node.js简单介绍

 Node.js 是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

二、安装

因为我用的是windows系统,所以本文只介绍基于windows方面的知识。

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

勾选之后,进入下一个界面。安装路径可以自己选择,然后进入下面的界面:

点击Next.

接着,等待安装完成即可。

安装完成之后进入终端,cmd,然后输入node -v    或者   node --version 查看是否安装成功

显示如下界面,便说明安装成功了。

然后将电脑注销,否则跟随node一起安装的npm不会生效。

三、基本操作。

打开编译器,我使用的编译器是:Visual Studio Code。

1.创建文件夹,注意(不要中文与大写)。

2.选中穿件的文件夹,右键在终端里面打开。

输入npm init

接下里的一系列命令都可以敲回车。直到出现如下界面:

在这里可以输入yes 也可以直接敲回车。然后我们会发现刚才创建的文件夹里面又出现了有一个json文件。

此处对文件不再做一一赘述。

3.创建一个静态的文件夹。

4.在项目文件下创建一个index.js,里面为服务端代码。

5.下载所有依赖项,(比如,npm install express)

右键点击项目文件夹,在终端打开,输入:npm install express

如果输入命令之后,由于网速的不好,可能会下载出错,不妨试试这种下载依赖项的方法。

仍然是打开终端,输入以下三条命令:

(1)npm info underscore

(2)npm config set registry http://registry.cnpmjs.org

(3)npm install express

然后下载成功之后,可以看到项目文件夹中又多出来一个文件夹。如下图所示:

此时,说明依赖项已经下载成功了。

四、简易网站的前后端交互

1.进入静态文件的index.html文件。

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>node.js之登陆注册</title>

</head>

 

<body>

<form action="/regist">

<h1>Regist</h1>

<label for="">账号:</label>

<input name="user" type="text" placeholder="请输入账号">

<br>

<label for="">密码:</label>

<input name="psw" type="password" placeholder="请输入密码">

<br>

<label for="">重复密码:</label>

<input name="pswa" type="password" placeholder="请重复密码">

<br>

<input type="submit" value="注册">

</form>

 

<br>

<hr>

<br>

<form action="/login" method="POST">

<h1>Login</h1>

<label for="">账号:</label>

<input name="user" type="text" placeholder="请输入账号">

<br>

<label for="">密码:</label>

<input name="password" type="password" placeholder="请输入密码">

<br>

<input type="submit" value="登陆">

 

</form>

</body>

 

</html>

2.进入项目文件夹中的index.js文件。

// 引入express模块,express模块为数据请求基础模块

// 如果发生数据请求,那么一定需要使用这个模块

var express = require('express')

// post请求方式会将参数放入到请求体当中

// 所以需要引入解析请求体的模块 body-parser

var bodyParser = require('body-parser')

// 创建模块的一个实例化对象

var web = express()

 

web.use(express.static('public'))

// 设置对url进行编码,并且不允许url进行扩展

// 如果设置为false,那么参数只能为数组或者字符串

// 如果设置为True 那么参数为任意类型

web.use(bodyParser.urlencoded({ extended: false }))

 

// 存储注册成功以后的账号密码

var account = ''

password = ''

// get表示使用get方法

// 方法后面追加两个参数

// 参数1:请求的接口

// 参数2:回调函数 回调函数里面有两个参数

// 参数1:前端往后端传的值

// 参数2:后端往前端传的值

web.get('/regist', function (req, res) {

var password = req.query.psw

var password2 = req.query.pswa

var user = req.query.user

if (user != account && password == password2) {

account = user

psw = password

res.send('恭喜注册成功!账号是' + user + ',密码是' + password + ',请妥善保管')

}

else {

res.send('注册失败,账号已经注册,或者密码不一致')

}

})

web.post('/login', function (req, res) {

var name = req.body.user;

var password = req.body.password;

 

if (name == account && password == psw) {

res.send('恭喜你登陆成功')

}

else {

res.send('登陆失败,请检查账号密码')

}

})

// 让程序监听8080端口

web.listen('8080', function () {

console.log('服务器启动..........')

})

3.启动服务器。

右键项目工程文件夹,在终端打开,输入:node index

4.浏览器查看结果。

因为本文没有讲解服务器,所以用‘8080’端口来代替,就可以看到界面的前端部分,然后账号和密码注册之后,点击注册按钮,就可以看到后端的界面。

登陆部分也同上。

值得提醒的是,在操作的时候一定要注意:

1.启动服务器,命令node index,查看页面 localhost:端口号 2.一旦修改服务端代码。需要重启服务器 3.同一个程序,不能再多个终端启动。