【无标题】

最新推荐文章于 2025-12-30 12:48:39 发布
原创 最新推荐文章于 2025-12-30 12:48:39 发布 · 321 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #数据库 #开发语言

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

nodejs

前言

提示：这里可以添加本文要记录的大概内容：

例如：node可以用js写后端代码。

提示：以下是本篇文章正文内容，下面案例可供参考

一、mysql模块执行sql语句

代码如下（示例）：

//1.引入mysql模块
const mysql = require("mysql")
//2.创建mysql链接
var con = mysql.createConnection({
​	//2.1 链接数据库
​	//2.2数据库的地址
    host:"localhost",
    //2.3数据库名
    database:"test_user",
    //2.4数据库用户名
    user:"admin123",
    //2.4数据库密码
    password:"admin123"
})
//链接数据库
con.connect((err)=>{
    if(err){
        console.log("数据库链接失败");
    }else{
        console.log("数据库链接成功");
    }
})
//4、使用sql语句查询数据库
//con.query(sql语句字符串，回调函数)
con.query('select * from user',(error,res)=>{
//error为null的时候  证明sql语句执行成功了 否则就失败了
//如果error不为空  那么error的回调信息就是sql语句的错误信息
    console.log(error);
    if(error == "null"){
        console.log(error);
    }else{
        console.log(res);
    }
    //执行sql语句要断开sql链接
    con.end()
})

二、http请求到mysql

// 1.引入http模块
const http = require('http');
// 2.创建server服务
const server = http.createServer();
// 3.监听请求
            //req第一个参数用来处理一些回应消息的
            //res服务端向客户端响应一些api

server.on('request',(req,res) => {
    // 相应格式  设置请求头
    res.setHeader('content-type','text/html;charset=utf-8');
    // 每次请求都访问数据库
    // 3.1引入mysql数据库模块
    const mysql = require('mysql');
    // 3.2创建mysql连接
    const con = mysql.createConnection({
        // 数据库地址
        host: 'localhost',
        // 数据库名称
        database:'test_user',
        // 数据库用户名
        user:'admin123',
        // 数据库密码
        password:'admin123'
    })
    // 3.3 启动连接
    con.connect();
    // 3.4 查询sql语句
    con.query('select * from user',(error,result)=>{
        if(error){
            res.end('数据库查询失败原因:' + error);
        }else{
            // 返回参数
            res.end(JSON.stringify(result));
        }
        // 关闭数据库连接
        con.end();
    })
})

// 4.启动服务
server.listen(8080,'127.0.0.1',()=>{
    console.log('服务启动成功,地址是http://127.0.0.1:8080/');
})

三、jsonp解决跨域问题

网址后面jsonpCallBack的指向哪里
1.先指向后端 jsonpCallBack 返回的结果
2.再在前端使用这个方法
在这里插入图片描述
在这里插入图片描述

3.1 这个是前端访问 后端代码 需要自己写js请求数据库的后端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
/*
    同元策略：ip相同 端口号相同  同一浏览器

    解决跨域的两种方案
        1.jsonp形式
            原理：
                是前端使用script的src属性进行创建标签
                这个是不存在跨域的，但是并不能通过前端技术拿到数据
*/

//1、首先先创建一个script标签
let script = document.createElement('script');
//2、给script标签添加一个属性
script.src="http://127.0.0.1:8080/?call=jsonpCallBack";
//3、将创建好的标签加入到body里面
document.body.appendChild(script);
//4、当script数据请求完成 onload 只能在body中使用，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
script.onload = function (){
   var data = window.jsonpCallBack()
   //打印数据
   console.log(data);
}
</script>
</html>

四、后端允许所有跨域请求

1、这个是前端文件

// 1.引入http模块
const http = require('http');
// 2.创建server服务
const server = http.createServer();
// 3.监听请求
            //req第一个参数用来处理一些回应消息的
            //res服务端向客户端响应一些api

server.on('request',(req,res) => {
    
    // 相应格式  设置请求头
    res.setHeader('content-type','text/html;charset=utf-8');
    //允许所有的跨域请求
    // res.writeHead(响应的状态码200代表成功，"响应的头部" )
    res.writeHead(200,{

        
        //cors头，允许跨域，放行所有请求
        /*
            代表 允许所有的ip跨域请求
        */
        "access-control-allow-origin":"*"
    })

    // 每次请求都访问数据库
    // 3.1引入mysql数据库模块
    const mysql = require('mysql');
    // 3.2创建mysql连接
    const con = mysql.createConnection({
        // 数据库地址
        host: 'localhost',
        // 数据库名称
        database:'test_user',
        // 数据库用户名
        user:'admin123',
        // 数据库密码
        password:'admin123'
    })
    // 3.3 启动连接
    con.connect();
    // 3.4 查询sql语句
    con.query('select * from user',(error,result)=>{
        if(error){
            res.end('数据库查询失败原因:' + error);
        }else{
            // 返回参数
            res.end(
        
                JSON.stringify(result)
          
            );
        }
        // 关闭数据库连接
        con.end();
    })
})

// 4.启动服务
server.listen(8080,'127.0.0.1',()=>{
    console.log('服务启动成功,地址是http://127.0.0.1:8080/');
})

2、这个是后端文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let ajax = new XMLHttpRequest();
    ajax.open('get',"http://127.0.0.1:8080/")
    ajax.send();
    ajax.onreadystatechange=function(res){
        //判断最后一次握手
        if(res.currentTarget.readyState == 4 && res.currentTarget.status == 200){
            //参数处理
            try{
                let data = JSON.parse(res.currentTarget.response);
                    console.log(data);
            }catch(error){
                console.log(error);
            }
    
        }


    }
</script>
</html>

五、try…catch

try catch 错误处理；
执行规则：首先执行try中的代码 如果抛出异常会由catch去捕获并执行 如果没有发生异常 catch去捕获会被忽略掉 但是不管有没有异常最后都会执行。try 语句使你能够测试代码块中的错误。

catch 语句允许你处理错误。

	try{
		代码块；
		代码  throw"字符"   //抛出错误
	}catch(参数){				//抓住throw抛出的错误
			//处理错误并执行
	}

六、通过不同接口访问不同方法

1、get应用场景

2、获取到前端发送给后端的参数

//引入http模块
let http = require('http');
//床架server
let server = http.createServer();
//监听请求
server.on('request',(req,res)=>{
    //req第一个参数用来处理一些回应消息的
    //res服务端向客户端响应一些api
    res.setHeader('content-type','text/html;charset=utf-8');
     // res.writeHead(响应的状态码200代表成功，"响应的头部" )
     res.writeHead(200,{

        
        //cors头，允许跨域，放行所有请求
        /*
            代表 允许所有的ip跨域请求
        */
        "access-control-allow-origin":"*"
    })
    
    if(req.url.indexOf('register') != -1){
        let url = req.url;
        url = url.split('?')[1];
        url = url.split('&')
        let obj = {}
        url.forEach(item=>{
            obj[item.split('=')[0]] = item.split('=')[1]
        })
        /*
        结果会变成字符串  需要把前面的字符串删除
        res.end('前端发送的参数是' + JSON.stringify(obj))
        */
        res.end(JSON.stringify(obj))

        console.log(req.url);

    }else{
        res.end('访问了查询接口')
    }



})


//启动服务
server.listen('8080','127.0.0.1',()=>{
    console.log("服务器启动成功,地址是http://127.0.0.1:8080/register");
})

3、ajax将前端的参数发送给后端

3.1介绍 Event.currentTarget 与 Event.target ？

Event.currentTarget：Event 接口的只读属性 currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 Event.target 则是事件触发的元素。

Event.target：触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与 event.currentTarget 不同。

3.2后端代码

//引入http模块
let http = require('http');
//床架server
let server = http.createServer();
//监听请求
server.on('request',(req,res)=>{
    //req第一个参数用来处理一些回应消息的
    //res服务端向客户端响应一些api
    res.setHeader('content-type','text/html;charset=utf-8');
     // res.writeHead(响应的状态码200代表成功，"响应的头部" )
     res.writeHead(200,{

        
        //cors头，允许跨域，放行所有请求
        /*
            代表 允许所有的ip跨域请求
        */
        "access-control-allow-origin":"*"
    })
    
    if(req.url.indexOf('register') != -1){
        let url = req.url;
        url = url.split('?')[1];
        url = url.split('&')
        let obj = {}
        url.forEach(item=>{
            obj[item.split('=')[0]] = item.split('=')[1]
        })
        /*
        结果会变成字符串  需要把前面的字符串删除
        res.end('前端发送的参数是' + JSON.stringify(obj))
        */
        res.end(JSON.stringify(obj))

        console.log(req.url);

    }else{
        res.end('访问了查询接口')
    }



})


//启动服务
server.listen('8080','127.0.0.1',()=>{
    console.log("服务器启动成功,地址是http://127.0.0.1:8080/register");
})

3.3、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*get请求需要把前端要发送给后端的参数，写在请求的地址里面
    地址/接口路径?参数1=参数值1&参数2=参数值2&参数3=参数值3
*/
let ajax = new XMLHttpRequest();
ajax.open('get','http://127.0.0.1:8080/register?userName=admin123&userPassword=admin123&nickName=%E4%BD%BF%E7%94%A8get%E8%AF%B7%E6%B1%82&sex=%E7%94%B7')
ajax.send();
ajax.onreadystatechange = function({currentTarget}){
//可以使用对象的解构function(res) res是一个对象
if(currentTarget.readyState ==  4 && currentTarget.status === 200){
    try {
        let data = JSON.parse(currentTarget.response)
        console.log(data);
    } catch (error) {
        console.log(currentTarget.response);
    }
}
}
</script>
</html>

3.4 前端通过ajax传递参数插入到后端数据库

后端代码

// 引入http模块
let http = require('http');
// 创建srever
let server = http.createServer();
// 监听请求
server.on('request', (req,res)=>{
    // 相应格式
    res.setHeader('content-type','text/html;charset=utf-8');
    // 允许跨域
    res.writeHead(200, {
        // cors头,允许跨域，放行所有请求
        "access-control-allow-origin":"*"
    })
    if(req.url.indexOf('register') != -1){
        let url = req.url;
        url = url.split('?')[1];
        url = url.split('&');
        let obj = {};
        url.forEach(item => {
            // decodeURIComponent  中文被编码转换为中文
            obj[item.split('=')[0]] = decodeURIComponent(item.split('=')[1])
        });

        //引入mysql模块    
        const mysql = require("mysql");
        //创建mysql链接
        const  con = mysql.createConnection({
            host:"localhost",
            database:"test_user",
            user:"admin123",
            password:"admin123"
        })
        con.connect();
        //查询slq语句
        let sql = `insert into user (username,userPassword,nickName,sex,headimg,createTime) values ("${obj.username}","${obj.userPassword}","${obj.nickName}","${obj.sex}","null","${Date.now()}")`
        con.query(sql,(error,result)=>{
            if(error){
                res.end('语句执行失败'+ error)
            }else{
                res.end(
                    JSON.stringify(result)
                )
            }
        })

        res.end(
            JSON.stringify(obj)
        )
    }else{
        res.end('访问了查询接口')
    }
})
// 启动服务
server.listen('8080','127.0.0.1',()=>{
    console.log('服务启动成功,地址是:http://127.0.0.1:8080/');
})

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*get请求需要把前端要发送给后端的参数，写在请求的地址里面
    地址/接口路径?参数1=参数值1&参数2=参数值2&参数3=参数值3
*/
let ajax = new XMLHttpRequest();
ajax.open('get','http://127.0.0.1:8080/register?userName=admin123&userPassword=admin123&nickName=使用get请求&sex=男')
ajax.send();
ajax.onreadystatechange = function({currentTarget}){
//可以使用对象的解构function(res) res是一个对象
if(currentTarget.readyState ==  4 && currentTarget.status === 200){
    try {
        let data = JSON.parse(currentTarget.response)
        console.log(data);
    } catch (error) {
        console.log(currentTarget.response);
    }
}
}
</script>
</html>

运行结果
在这里插入图片描述

胡亚涛
关注
Qt-无标题窗口
学而思
05-21 8818
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2521
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
微信小程序云开发之云数据操作
weixin_52312427的博客
12-26 6931
微信小程序开发工具，最大的优点就是提供丰富的API接口操作，可以独立独立自主的实现的简单的前后端操作，并且云开发提供实质性的存储空间。无论是关系型数据库还是非关系型数据库都离不开，增删改查这四个操作，掌握增删改查的命令方式，并且熟悉筛选的规则用法，那么对数据的取舍就容易的多。
谷歌浏览器打开无标题
mp2020xuexi的博客
01-16 2229
谷歌浏览器
【无标题】好用的网站
qq_67243927的博客
05-18 3041
STL reference：https://tool.oschina.net/uploads/apidocs/cpp/en/cpp.html
C#中实现无标题栏窗体拖动的代码
热门推荐
百锦再的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
【无标题】一不错的网站
shen_haidabiaoge的博客
05-18 3036
大家要谅解我呀，我这是没有办法
Qt实现改变无标题栏窗体大小及移动窗体
danshiming的博客
11-10 4882
Qt实现鼠标左键拖动无标题栏窗体右下角改变窗体大小及移动窗体
WIN32无标题栏窗口移动方法种种
ZDT_zdh的博客
11-02 3358
WIN32无标题栏窗口移动方法种种 转载来源：http://blog.csdn.net/fuyun_cloud/article/details/8008197     首先，看看在正常情况下系统是怎样来移动程序窗口的。当使用者在程序窗口标题栏区域（非工作区）内，按下鼠标左键时将会发生下列事情：  ◆ 系统向该窗口过程函数发送WM_NCLBUTTONDOWN消息。  ◆ WM_NC...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
精选资源
C#创建无标题栏窗体
03-16
摘要:C#源码,菜单窗体,无标题栏窗体　C#创建无标题栏窗体源码，实际上是动态显示或隐藏窗体的标题栏，当隐藏的时候就类似窗体没有了标题栏，当显示标题栏的时候，鼠标按住标题栏即可拖动窗体，以前记得网友需要此...
精选资源
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
JavaScript 静态模块声明（静态分析、动态导入）
Irene1991的博客
12-29 419
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
基于java + vue校园跑腿便利平台系统(源码+数据库+文档)
JIngJaneIL的博客
12-30 158
本文介绍了一个基于SpringBoot+Vue的校园跑腿便利平台系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细说明了系统设计原则、技术选型理由，并提供了功能演示、代码示例和测试案例。该系统旨在优化校园服务体验，通过规范化设计确保信息清晰性和操作便捷性。文末还提供了源码获取方式和最新计算机毕业设计选题推荐。
Vue3中v-if与v-show的本质区别及动态组件状态保持的关键策略是什么？
最新发布
https://blog.cmdragon.cn/
12-30 580
特性v-ifv-showDOM存在与否销毁/重建始终存在切换成本高（销毁重建）低（改CSS）初始渲染成本低（不满足则不渲染）高（必渲染）适用场景切换频率低（如权限控制）切换频率高（如tab切换）
vue v-for 列表渲染指令注意
KLW75
12-27 214
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。
Qt自定义无标题窗口实现与界面美化技巧
以上就是从给定文件信息中提取的相关知识点，对于想要创建和使用Qt无标题窗口的开发者来说，这些知识点不仅能够帮助他们理解无标题窗口的实现原理和方法，还能够指导他们如何管理Qt项目文件以及如何使用版本控制系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值