通过JS搭建后台，并实现前后端交互

通过JS搭建后台，并实现前后端交互

一.下载node

傻瓜式安装就行了

点击下载node

二.建立环境

1.打开WebStrom，进入命令行

新建一个文件夹BS2，并右击文件夹点击Open in Terminal
在这里插入图片描述
见到这个页面说明你完成了第一步
在这里插入图片描述

2.输入命令后回车 ，换个抓取文件的地址

先输入

 npm config set registry https://registry.npm.taobao.org/

再输入

npm config get registry

如果显示如下图所示，那就说明你第二步成功了
在这里插入图片描述

3.在命令行中下载一些配置文件

继续输入命令

npm init -y

出现该效果说明正确
在这里插入图片描述
此时查看下你的BS2文件夹，会发现有一个json文件生成

继续输入命令

npm i express

再次查看你的BS2文件夹，会发现多了很多东西，不用管
在这里插入图片描述

4.编辑JS文件

接着在BS2中新建一个index.js文件，将下面代码复制进去

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

var app=express()
// app.engine('html',require('express'))

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

    // res.render('index.html')
})
app.listen(3000) //设置端口号

三.后台试运行

1.在命令行中运行代码文件

完成上述步骤后，我们在cmd中继续输入命令,运行下我们之前编辑的index.js文件

node index

2.复制自己的ip地址

我们在网络属性中查看下我们的ip地址
在这里插入图片描述

3.浏览器中验证

将我们的ip地址复制到浏览器网址输入框，加上:3000(这里的3000是我node软件的端口)
在这里插入图片描述
输入成功后出现下图效果即为成功
在这里插入图片描述
出现该页面说明后台搭建成功

四.设置前端

1.命令行中下载新包

npm i express-art-template art-template

2.在文件夹BS2中建立views文件夹,并 在views中新建三个html文件。guest.html, index.html, user.html

在这里插入图片描述

index.html

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

    <lable for="password">
        <input type="password" id="password" name="password">
    </lable>

    <input type="submit">

</form>

</body>
</html>

guest.html

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

    <p>登陆失败</p>

</body>
</html>

user.html

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

五.前后端交互测试

1.运行代码

node index

2.在浏览器中刷新index.html这个网址，填写内容后提交

在这里插入图片描述
提交后会跳转页面，并告诉你登陆成功还是失败。

返回WebStrom,命令行会有刚才提交的信息。能够实现说明成功
在这里插入图片描述

版权声明：本文为weixin_52249641原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。