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 在前端页面控制后台数据相关推荐

  1. (crm笔记2-2)在前端页面输出后台查询出的表单数据

    在前端页面输出后台查询出的表单数据/ 1.需求 在后台查询到的数据,需要传到前端的jsp页面中进行显示. 实现效果如下: 2.思路 1)前端点击事件, 触发事件, 调用Action 中的方法, 方法调 ...

  2. Struts项目中前端页面向后台页面传参中文出现乱码(Get请求)

    问题描述:Struts项目中前端页面向后台页面传递中文参数值,中文值传递到后台后出现乱码并且以???形式出现 解决方法: 1.前端页面js文件中使用encodeURI()方法将所传递的中文值加密起来( ...

  3. 利用POI生成EXCEL报表(通过web页面导出后台数据)

    很多时候需要将数据利用浏览器进行导出,这个时候我们就可以采用Apache的POI进行实现通过web页面实现Excel导出后台数据,并且以.xlsx的形式下载到本地,也就是excel表格形式. 首先先下 ...

  4. flask从服务器获取html页面,flask的ajax、获取服务器数据、放到前端页面、如果数据存在显示标签、如果不存在不显示标签...

    -------------------------------------第一部分----------------------------------------------------------- ...

  5. jsp获取java后台数据_springMVC笔记:jsp页面获取后台数据记录列表

    1.读取数据库中的记录List> attributes; 2.Controller构造Model如下: @RequestMapping("display.do") publi ...

  6. 如何找出 SAP电商云产品明细页面读取后台数据的代码具体位置

    以如下这个产品明细页面为例: http://localhost:4200/electronics-spa/en/USD/product/553637/nv10 观察浏览器 url 的格式:/produ ...

  7. 显示年月,注册页面和后台数据交互,不涉及数据库

    第一步urls """mysite01 URL ConfigurationThe `urlpatterns` list routes URLs to views. For ...

  8. antd table排序 vue_商品品牌业务之Vue编写前端页面

    今天是刘小爱自学Java的第145天. 感谢你的观看,谢谢你. 学习计划安排如下: 打算从前端页面到后台服务器代码完整地写一遍,但显然我高估了自己的实力,几个小时的时间根本不够用. 并且因为教程和vu ...

  9. 根据后台的数据设置前端页面展示效果

    2019独角兽企业重金招聘Python工程师标准>>> eg1:后台数据:0:女,1:男: 前端展示效果为:男或女,而不是显示0或1 eg2:后台数据:1:模组1,    2:模组2 ...

最新文章

  1. weui 弹出 $.toast(“我是文本“,“text“); 总是带有图标
  2. jtable如何从表格中定位_Java Swing组件编程之JTable表格用法实例详解
  3. java 定时_结合真实案例,清晰梳理几种定时任务的退出「JAVA并发」
  4. 【Ansible】3个让Ansible性能飞起的简单优化方案!
  5. 判断数组中某个元素除自身外是否和其他数据不同_布隆过滤器,我也是个处理过 10 亿数据的人...
  6. c++判断文件是否被修改(获取文件的MD5值)
  7. QT的QJSEngine类的使用
  8. SuperMap注册流程记录
  9. 《.NET框架程序设计》第2章 第3章 读后感
  10. 基于Docker的Consul服务发现集群搭建
  11. 隐藏的图片在浏览器中的请求
  12. xp彻底删除mysql_xp彻底清除mysql数据库
  13. tomcat7 IP限制配置
  14. Debian - 搭建Debian本地APT源
  15. TangerineWallpaper for Mac(高清橘子壁纸) 中文版
  16. python 中的list 转 array 以及 array 转 list 以及array.array numpy.array
  17. Sequence I
  18. VMware Pro16 安装MacOS 11/12教程
  19. 关于lora和lorawan所涉及的名词解释
  20. 使用cephadm搭建ceph(octopus)过程

热门文章

  1. Win 2008 R2安装SQL Server 2008“性能计数器注册表配置单元一致性”失败的解决办法...
  2. Android小项目源码汇总
  3. RT3070_STA_驱动移植文档
  4. yum go linux,使用yum安装Go(Golang)
  5. linux sit0 wifi,I.MX6 AW-NB177NF wifi HAL 调试修改(示例代码)
  6. k8s的网络优化(metallb)
  7. linux系统默认的环境变量path,Linux编程 12 (默认shell环境变量, PATH变量重要讲解)...
  8. php yanzhengm,ThinkPHP 在使用M方法(不创建模型类)时实现自动验证与自动填充
  9. 裕民银行 x mPaaS | 移动应用“适老化”改造,可不止是字体变大
  10. 物联网Wi-Fi配网方式,你知道几种?