nodejs + Mysql 在前端页面控制后台数据
var express = require("express"); //映入express 没有的下载 可以在网上找百度var mysql = require('mysql'); //引入mysql var app=express();
app.use(express.static(__dirname + "/public")); //公共 目录 定义
//配置数据库信息var connection = mysql.createConnection({ host : '127.0.0.1', user : 'root', password : '', database : 'study'}); //连接
connection.connect();
//路径get请求app.get("/",function(req,res){ //跨域 res.setHeader("Access-Control-Allow-Origin", "*"); res.writeHead(200, {"Content-Type": "text/html;charset=utf-8"}); //查询 connection.query('SELECT * FROM `作业`', function (err,data) { if(err){ console.log(err); }else{ //console.log(data); //打印数据 res.end(JSON.stringify(data)); 转化成字符串 } });});
//删除app.get("/del",function(req,res){ res.setHeader("Access-Control-Allow-Origin", "*"); var id = req.query.aaa; 前台传入的id //console.log(req.query); //删除 var delSql = 'DELETE FROM 作业 where id='+id; //console.log(delSql); connection.query(delSql,function (err) { if(err){ res.end("0")
未删除的时候返回0
}else{ res.end("1") 成功返回1 } }); });
//添加app.get("/add",function(req,res){ res.setHeader("Access-Control-Allow-Origin", "*"); console.log(req.query); //增 插入 var sql = "INSERT INTO `作业` (`id`, `img`, `til`, `price`, `h6`, `day`, `xing`) VALUES (NULL, '"+req.query.img+"', '"+req.query.til+"', '"+req.query.price+"', '"+req.query.h6+"', '"+req.query.day+"', '"+req.query.xing+"')"; console.log(sql)connection.query(sql,function (err, result) { if(err){ console.log("错误"+err); res.end("1") }else{ res.end("2") }}); }); //修改app.get("/xiu/gai",function(req,res){ res.setHeader("Access-Control-Allow-Origin", "*"); console.log(req.query); //改 var mosql = "UPDATE `作业` SET `img` = '"+req.query.img+"', `til` = '"+req.query.til+"', `price` = '"+req.query.price+"', `h6` = '"+req.query.h6+"', `day` = '"+req.query.day+"', `xing` = '"+req.query.xing+"' WHERE `作业`.`id` ="+req.query.id; connection.query(mosql,function (err) { if(err){ console.log(err); //错误 }else{ res.end("x") //成功 } });}); app.listen(4848);console.log('4848 running');
// 用ajax渲染数据 $.ajax({ url:"http://127.0.0.1:4848", //路径 dataType:"json", success:function(res){ console.log(res); var str =""; for(var temp of res){ str +=`<li> <a href="http://127.0.0.1:4848/user/${temp.id}"><img src="${temp.img}" alt="" val="${temp.img}"/></a> <p class="p1">${temp.til}</p> <p><span class="p2">${temp.price}</span>起/人</p> <input type="button" value="删除" class="sc" text="${temp.id}" /> <input type="button" value="修改" class="xg" jia="${temp.price}" index="${temp.id}" img="${temp.img}" til="${temp.til}" /> </li>` } $(".box ul").append(str); //添加 // 点击折行删除 $('.sc').click(function () {// $(this).parent().remove(); var id = $(this).attr("text");//获取自定义属性text id的值 var $that = $(this); //保存this if(confirm("确定删除吗?")){ // console.log(id);ajax发送数据到后台 $.ajax({ url: 'http://127.0.0.1:4848/del', //路径 data:{aaa:id}, //歘id值到后台 success: function (res) { console.log(res); //后台返回值 1成功 然后判断 if(res == 1){ $that.parent().remove(); }else{ alert("失败") } } }); } });
点击按钮提交数据到后台 $("#tij").click(function(){ $.ajax({ url:"http://127.0.0.1:4848/xiu/gai", data:{ img:$(".mo1 input").eq(0).val(), //input框值传到后台 til:$(".mo1 input").eq(1).val(), price:$(".mo1 input").eq(2).val(), day:$(".mo1 input").eq(3).val(), h6:$(".mo1 input").eq(4).val(), xing:$(".mo1 input").eq(5).val(), id:num }, success:function(res){ console.log(res); if(res){ location.reload() //成功刷新页面 不成功就是else }else{ console.log("shi"); } } }) })
}
})
//------------------------------------------------------------------
转载于:https://www.cnblogs.com/yut99/p/8074621.html
nodejs + Mysql 在前端页面控制后台数据相关推荐
- (crm笔记2-2)在前端页面输出后台查询出的表单数据
在前端页面输出后台查询出的表单数据/ 1.需求 在后台查询到的数据,需要传到前端的jsp页面中进行显示. 实现效果如下: 2.思路 1)前端点击事件, 触发事件, 调用Action 中的方法, 方法调 ...
- Struts项目中前端页面向后台页面传参中文出现乱码(Get请求)
问题描述:Struts项目中前端页面向后台页面传递中文参数值,中文值传递到后台后出现乱码并且以???形式出现 解决方法: 1.前端页面js文件中使用encodeURI()方法将所传递的中文值加密起来( ...
- 利用POI生成EXCEL报表(通过web页面导出后台数据)
很多时候需要将数据利用浏览器进行导出,这个时候我们就可以采用Apache的POI进行实现通过web页面实现Excel导出后台数据,并且以.xlsx的形式下载到本地,也就是excel表格形式. 首先先下 ...
- flask从服务器获取html页面,flask的ajax、获取服务器数据、放到前端页面、如果数据存在显示标签、如果不存在不显示标签...
-------------------------------------第一部分----------------------------------------------------------- ...
- jsp获取java后台数据_springMVC笔记:jsp页面获取后台数据记录列表
1.读取数据库中的记录List> attributes; 2.Controller构造Model如下: @RequestMapping("display.do") publi ...
- 如何找出 SAP电商云产品明细页面读取后台数据的代码具体位置
以如下这个产品明细页面为例: http://localhost:4200/electronics-spa/en/USD/product/553637/nv10 观察浏览器 url 的格式:/produ ...
- 显示年月,注册页面和后台数据交互,不涉及数据库
第一步urls """mysite01 URL ConfigurationThe `urlpatterns` list routes URLs to views. For ...
- antd table排序 vue_商品品牌业务之Vue编写前端页面
今天是刘小爱自学Java的第145天. 感谢你的观看,谢谢你. 学习计划安排如下: 打算从前端页面到后台服务器代码完整地写一遍,但显然我高估了自己的实力,几个小时的时间根本不够用. 并且因为教程和vu ...
- 根据后台的数据设置前端页面展示效果
2019独角兽企业重金招聘Python工程师标准>>> eg1:后台数据:0:女,1:男: 前端展示效果为:男或女,而不是显示0或1 eg2:后台数据:1:模组1, 2:模组2 ...
最新文章
- weui 弹出 $.toast(“我是文本“,“text“); 总是带有图标
- jtable如何从表格中定位_Java Swing组件编程之JTable表格用法实例详解
- java 定时_结合真实案例,清晰梳理几种定时任务的退出「JAVA并发」
- 【Ansible】3个让Ansible性能飞起的简单优化方案!
- 判断数组中某个元素除自身外是否和其他数据不同_布隆过滤器,我也是个处理过 10 亿数据的人...
- c++判断文件是否被修改(获取文件的MD5值)
- QT的QJSEngine类的使用
- SuperMap注册流程记录
- 《.NET框架程序设计》第2章 第3章 读后感
- 基于Docker的Consul服务发现集群搭建
- 隐藏的图片在浏览器中的请求
- xp彻底删除mysql_xp彻底清除mysql数据库
- tomcat7 IP限制配置
- Debian - 搭建Debian本地APT源
- TangerineWallpaper for Mac(高清橘子壁纸) 中文版
- python 中的list 转 array 以及 array 转 list 以及array.array numpy.array
- Sequence I
- VMware Pro16 安装MacOS 11/12教程
- 关于lora和lorawan所涉及的名词解释
- 使用cephadm搭建ceph(octopus)过程
热门文章
- Win 2008 R2安装SQL Server 2008“性能计数器注册表配置单元一致性”失败的解决办法...
- Android小项目源码汇总
- RT3070_STA_驱动移植文档
- yum go linux,使用yum安装Go(Golang)
- linux sit0 wifi,I.MX6 AW-NB177NF wifi HAL 调试修改(示例代码)
- k8s的网络优化(metallb)
- linux系统默认的环境变量path,Linux编程 12 (默认shell环境变量, PATH变量重要讲解)...
- php yanzhengm,ThinkPHP 在使用M方法(不创建模型类)时实现自动验证与自动填充
- 裕民银行 x mPaaS | 移动应用“适老化”改造,可不止是字体变大
- 物联网Wi-Fi配网方式,你知道几种?