通过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

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

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')//引入expressvar 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,命令行会有刚才提交的信息。能够实现说明成功

通过JS搭建后台，并实现前后端交互相关推荐

从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
小程序服务器搭建前后端交互,微信小程序：request前后端交互路由跳转存储数据到本地和获取小程序登入授权...
一 request前后端交互基本样式 wx.request({ url:'test.php', //仅为示例,并非真实的接口地址 data: { x:'', y:''}, header: {'con ...
使用layuimini模块快速开发java后台系统模板(前后端分离）
使用layuimini模块快速开发后台系统模板(前后端分离) 下面已仓库管理系统为例(下面源码可自己下载来看) 1.登录界面login.html 下面的验证码使用的是Hutool 来实现的(Hutoo ...
从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏
https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分选定menu菜单,选择竖型样式的复制一下 <el-menudefau ...
springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
前后端交互，密码加密，RSA 实现前端 js 加密，后端 go 解密
RSA 加密算法简介一种比较常见的非对称加密算法,常用于前后端交互中的密码加密,前端使用公钥加密密码,后端使用私钥进行解密.公钥可对外开放,私钥是存放在服务端,外部正常情况下是拿不到解密私钥的. 以 ...
vue+node.js前后端交互中的token令牌验证
这篇文章分享一下本人学习vue+node.js前后端交互中的登录token令牌的心得最近准备写一个个人博客网站,前端采用的是vue+element,后端用node.js 在做用户登录的时候就想到如 ...
Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
【系】微信小程序云开发实战坚果商城-前后端交互之主题实现
第 4-4 课:前后端交互之主题实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...

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

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

一.下载node

二.建立环境

1.打开WebStrom，进入命令行

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

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

4.编辑JS文件

三.后台试运行

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

2.复制自己的ip地址

3.浏览器中验证

四.设置前端

1.命令行中下载新包

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

五.前后端交互测试

通过JS搭建后台，并实现前后端交互相关推荐

最新文章

热门文章

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

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

一.下载node

二.建立环境

1.打开WebStrom，进入命令行

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

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

4.编辑JS文件

三.后台试运行

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

2.复制自己的ip地址

3.浏览器中验证

四.设置前端

1.命令行中下载新包

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

五.前后端交互测试

通过JS搭建后台，并实现前后端交互相关推荐

最新文章

热门文章

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

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