简单的前后端交互的案例

简单的前后端交互的案例--在表单页面输入信息，该信息存入数据库

首先封装自己的数据库

//封装数据库
//导入mysql模块
const mysql = require ('mysql2');//创建数据库连接对象
const connection = mysql.createConnection({host:'localhost'.  //数据库地址post:3306,  //端口号user:'root',  //数据库用户名password:'123456'  //自己设置的数据库密码database:'dbms'   //要连接的数据库
})//使数据库连接的对象对外可见
module.exports = connection;

写后台服务器(API接口)

//导入http模块，用户创建http服务
const http = require('http');//导入querystring模块，该模块是用来解析客户端提交的数据
const queryString = require('querystring');//导入数据库的配置模块，用于数据库的操作
const connection = require('../db/dbconfig')  //刚才自己好封装数据库的地址//创建http服务服务器：对应的请求地址是http://localhost:3000/index
var server = http.createServer((req,res)=>{
//req:全称request，请求，是客户向浏览器发出询问
//res：全称response，响应，是客户请求完成后，服务器接收成功并向客户端响应(即把处理好的结果发送给客户服务器(页面))//获取客户端请求的地址
let clientUrl = req.url
//我们创建一个页面地址，先使用该页面地址
if(clientUrl === '/index'){let body = '' //用来保存客户端提交的请求数据//给请求对象绑定'data'事件，获取客户端的请求数据，并将数据保存到body中req.on('data',chunk =>{   //chunk内 存放的是 用户的数据，将他依次存放到body内body += chunk;})//给请求对象req绑定end事件，解析用户的请求数据req.on('end',()=>{let params = queryString.parse(body); //使用querystring的属性parse 将数据转化为键值对格式，方便解析//设置服务器端的头部信息，响应到页面res.writeHead(200,{'content-Type':'text/plain;charset=utf8'})  //设置数据响应到页面的格式，防止乱码//拼接相应字符串let res_str = "姓名："+params.name+"\n"+"性别："+params.gender+"\n"+"生日："+params.birthday+"\n"+"电话"+params.phone+"\n"+"地址"+params.address;save(params);  //先存入再响应数据插入成功了//将响应字符串发送给客户端res.wirte(res_str);//断开连接res.end();})}
})server.listen(3000);//绑定端口号//创建将数据保存到数据库的方法
function save(params){connection.query('insert into employee set?',{name:params.name,gender:params.gender,birthday:params.birthday,phone:params.phone,address:params.address},(err,resulet)=>{if (err){console.log(err)return;}console.log('插入数据成功！')connection.end();  //断开数据库连接})
}

先使用Postman来检测接口是否可用

去数据库查看，数据是否插入。

创建一个简易表单页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单的前后端的交互</title>
</head>
<body><form action="http://localhost:3000/index" method="post">姓名：<input type="text" name="name"><br><br>性别：<input type="text" name="gender"><br><br>生日：<input type="date" name="birthday"><br><br>电话：<input type="text" name="phone"><br><br>住址：<input type="text" name="address"><br><br><button type="submit">提交</button></form>
</body>
</html>

查看提交后，数据是否可以插入数据库

一个简单的前后端交互案例就写完啦！！！

简单的前后端交互的案例相关推荐

python前后端交互_Django基础之简单的前后端交互
Python Python开发 Python语言 Django基础之简单的前后端交互学习Django有一段时间了,最近刚好写了一个小项目,用到了前后端交互,刚开始写前后端交互确实很让人头晕目眩呢,下 ...
Servlet实现简单的前后端交互
Servlet实现简单的前后端交互首先前后端交互是啥呢? 在我的理解中大概是这样的: 简单的讲就是数据的交换接下来我们来看看应该要怎么实现这个简单的交互: 1.首先我们前端先不写静态页面,直接在u ...
PHP简单的前后端交互
前后端交互前端是以 get方式传输, 后端以 $_GET 接收前端是以 post方式传输, 后端以 $_POST 接收前端不确定是以什么方式传输, 后端以 $_REQUEST 接收 get传输 ...
（一）使用form表单的name属性简单实现前后端交互
实现效果: 点击提交后: 前端页面源码: <!DOCTYPE html> <html lang="en"
（二）使用Ajax简单实现前后端交互
实现效果: 点击提交后: 前端页面源码: <!DOCTYPE html> <html lang="en">
Mysql+Echarts+Python+Flask实现前后端交互及数据可视化
前言社区版Pycharm实现python+flask+echarts+Mysql实现简单的前后端交互. 新手入门,记录经验,欢迎交流. 一.首先检测Flask框架是否成功? 首先,在你的项目下中安装 ...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录一.前后端二.前后端接口三.Ajax 1. ajax接口步骤 2. 返回为json格式四.请求方式五.案例:登录一.前后端前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
java中常用前后端交互框架,整合Spring-SpringMVC-MyBatis实现简单前后端交互
整合Spring-SpringMVC-MyBatis实现简单前后端交互 (1)环境要求 IDEA MySQL Tomcat Maven (2)数据库环境 id name pwd 1 Hunter 12 ...

简单的前后端交互的案例

简单的前后端交互的案例--在表单页面输入信息，该信息存入数据库

简单的前后端交互的案例相关推荐

最新文章

热门文章