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

  • 一.下载node
  • 二.建立环境
  • 1.打开WebStrom，进入命令行
  • 2.输入命令后回车 ，换个抓取文件的地址
  • 3.在命令行中下载一些配置文件
  • 4.编辑JS文件
  • 三.后台试运行
  • 1.在命令行中运行代码文件
  • 2.复制自己的ip地址
  • 3.浏览器中验证
  • 四.设置前端
  • 1.命令行中下载新包
  • 2.在文件夹BS2中建立views文件夹,并 在views中新建三个html文件。guest.html, index.html, user.html
  • 五.前后端交互测试


一.下载node

傻瓜式安装就行了

点击下载node

二.建立环境

1.打开WebStrom，进入命令行

新建一个文件夹BS2，并右击文件夹点击Open in Terminal

javascript能写后端吗 js可以做后端开发么_javascript能写后端吗


见到这个页面说明你完成了第一步

javascript能写后端吗 js可以做后端开发么_cmd_02

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

先输入

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

再输入

npm config get registry

如果显示如下图所示，那就说明你第二步成功了

javascript能写后端吗 js可以做后端开发么_js_03

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

继续输入命令

npm init -y

出现该效果说明正确

javascript能写后端吗 js可以做后端开发么_html_04


此时查看下你的BS2文件夹，会发现有一个json文件生成

继续输入命令

npm i express

再次查看你的BS2文件夹，会发现多了很多东西，不用管

javascript能写后端吗 js可以做后端开发么_cmd_05

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

javascript能写后端吗 js可以做后端开发么_js_06

3.浏览器中验证

将我们的ip地址复制到浏览器网址输入框，加上:3000(这里的3000是我node软件的端口)

javascript能写后端吗 js可以做后端开发么_后端_07


输入成功后出现下图效果即为成功

javascript能写后端吗 js可以做后端开发么_js_08


出现该页面说明后台搭建成功

四.设置前端

1.命令行中下载新包

npm i express-art-template art-template

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

javascript能写后端吗 js可以做后端开发么_js_09

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这个网址，填写内容后提交

javascript能写后端吗 js可以做后端开发么_javascript能写后端吗_10


提交后会跳转页面，并告诉你登陆成功还是失败。返回WebStrom,命令行会有刚才提交的信息。能够实现说明成功

javascript能写后端吗 js可以做后端开发么_html_11