web前端笔记(12)-node

 

安装node

 

网址https://nodejs.org/zh-cn/

 

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

 

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

 

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

 

验证是否安装成功

 

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

 

 

 

安装jquery:npm install jquery

 

打开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地址

 

安装express-art-template

 

npm i art-template express-art-template

 

创建表单前后端连接环境

 

创建3个html

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form action="/login" method="post">
   <label for="account">
       <input type="account" id="account" name="account">
   </label>
   <label for="password">
       <input type="password" id="password" name="password">
   </label>
   <input type="submit">
</form>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
错误
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
登录成功
</body>
</html>

 

创建js环境

 

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

var app=express()

app.engine('html',require('express-art-template'))

//配置body-parser
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.get('/',function (req,res) {
   //req是前端给后端的
   //res是后端给前端的
   res.render('index.html')
   //渲染
   //res.send('hello,node')

})
//事件驱动,异步
app.post('/login',function (req,res) {
   console.log(req.body)
   if(req.body.account==123456&&req.body.password=='abc'){
       res.render('user.html')
  }else{
       res.render('guest.html')
  }

})
app.listen(3000,function () {
   console.log('app is running at port 3000...')
})//设置端口号

 

 

 

上一篇:express获取参数 以及登录和注册的简单实现


下一篇:Winform Echarts 显示百度地图的用法(3)