Nodejs Web数据库应用演示实例
Nodejs Web应用基础演示实例
Web数据库应用
一、服务器端
var express = require('express');
var app = express();
var mysql = require('mysql');//设置静态资源目录public
app.use(express.static(__dirname + '/public'));//创建mysql数据库访问连接（数据库主机地址，用户名和密码，数据库名称根据情况自行修改）
var connection = mysql.createConnection({host: 'localhost',user: 'root',password: '123456',database: 'test'
});connection.connect();//允许跨域访问，可以从不同主机进行调用
app.all('*',function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Headers', 'Accept,Content-Type,Content-Length, Authorization,X-Requested-With ');res.header('Access-Control-Allow-Methods', 'POST,GET,PUT,DELETE,OPTIONS');if ('OPTIONS' == req.method) {res.send(200); //让options请求快速返回}else {next();}
});//查询全部记录的API
app.get('/all', function(req, res) {connection.query('SELECT * from stu', function(error, results, fields) {//var list = '';if (error) throw error;//console.log('The solution is: ', results);//list = JSON.stringify(results);//res.send(list);res.send(results);});});//按用户名进行查询的API
//前端发来的用户请求应该为“主机名:端口号/list?username=*** ”
app.get('/list', function(req, res) {var username=req.query.username;connection.query('SELECT * from stu where username= "'+username+'"', function(error, results, fields) {//var list = '';if (error) throw error;//console.log('The solution is: ', results);//list = JSON.stringify(results);//res.send(list);res.send(results);});});//用户注册API
//前端发来的请求应该为“主机名:端口号/add?username=***&pwd=***&name=***&age=*** ”
app.get('/add', function(req, res) {var username=req.query.username.trim();var pwd=req.query.pwd;var name=req.query.name;var age=parseInt(req.query.age);if(username==''){res.send({success:0, insertid:0, msg:'用户名不能为空'});return;}//查询是否存在同名用户connection.query('SELECT * from stu where username= "'+username+'"', function(error, results, fields) {//查询出错则返回if (error){console.log('[QUERY ERROR] - ',err.message);res.send({success:0, insertid:0, msg:'操作异常'});return;}//if (results.length==0){var addSql='INSERT INTO stu(username,password,name,age) VALUES(?,?,?,?)';var addSqlParams = [username, pwd, name, age];connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);res.send({success:0, insertid:0, msg:'操作异常'});return;} console.log('--------------------------INSERT----------------------------');console.log('INSERT ID:',result.insertId); console.log('-----------------------------------------------------------------\n\n'); res.send({success:1, insertid:result.insertId, msg:'操作成功'});});}else{res.send({success:0, insertid:0, msg:'用户名已存在，请重新注册！'});}});});var server = app.listen(8080, 'localhost',function() {var host = server.address().address;var port = server.address().port;console.log("应用实例，访问地址为 http://%s:%s", host, port);})
二、前端
1. 用户查询页面
<html><head><meta charset="utf-8"><title>根据用户请求查询后台数据库记录</title><!--解决node提示favicon.ico图标文件不存在的问题--><link rel="shortcut icon" href="#" /><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function() {//在前端页面容器中添加查询到的记录数据function show(record){var p0=$("<p class='data'></p>").html("ID：<span>"+record.id+"</span>");$("#box").append(p0);var p1=$("<p class='data'></p>").text("姓名："+record.name);$("#box").append(p1); var p2=$("<p class='data'></p>").text("年龄："+record.age);$("#box").append(p2);var p3=$("<p class='data'></p>").text("用户名："+record.username);$("#box").append(p3);$("#box").append("<hr>");};//查询数据库全部记录$("#all").click(function(){$("#box").empty();$.get("http://127.0.0.1:8080/all",function(data){//var records=JSON.parse(data);for(var i=0;i<data.length;i++){console.log(data[i]);show(data[i]);}});});//根据用户输入的用户名查询数据库中的特定记录 $("#list").click(function(){$("#box").empty();var username = $("#username").val();$.get("http://127.0.0.1:8080/list",{username:username},function(data){for(var i=0;i<data.length;i++){console.log(data[i]);show(data[i]);}});});$(".data").click(function(){$("#username").val($(this).text());});});</script></head><body><p>用户名: <input type="text" id="username" value=""></p><button id="list">查询</button><button id="all">查询全部</button><div id="box"></div></body>
</html>
2. 用户注册页面
<html>
<head><title>MySQL添加记录实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script><link rel="shortcut icon" href="#" /><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function() {//清空输入框内容$("#clear").click(function(){$("#username").val("");$("#pwd").val("");$("#name").val("");$("#age").val("");});//根据用户输入的用户名查询数据库中的特定记录 $("#add").click(function(){var username = $("#username").val();var pwd = $("#pwd").val();var name = $("#name").val();var age = parseInt($("#age").val());$.get("http://127.0.0.1:8080/add",{username:username,pwd:pwd,name:name,age:age },function(data){$("#box").text(data.msg);});}); });</script>
</head>
<body><div class="container mt-3"><h2>注册用户</h2><div class="mb-3 mt-3"><label for="username" class="form-label">用户名:</label><input type="text" class="form-control" id="username" placeholder="输入用户名字母数字组合" name="username"></div><div class="mb-3"><label for="pwd" class="form-label">口令:</label><input type="password" class="form-control" id="pwd" placeholder="输入口令字母数字组合" name="pwd"></div><div class="mb-3"><label for="name" class="form-label">姓名：</label><input class="form-control" type="text" id="name" name="name"> </div><div class="mb-3"><label for="age" class="form-label">年龄：</label><input class="form-control" type="text" id="age" name="age"> </div><button id="add" class="btn btn-primary">提交</button><button id="clear" class="btn btn-primary">清除</button><div id="box"></div>
</div></body>
</html>
相关文章：
Nodejs Web数据库应用演示实例
Nodejs Web应用基础演示实例 Web数据库应用 一、服务器端 var express require(express); var app express(); var mysql require(mysql);//设置静态资源目录public app.use(express.static(__dirname /public));//创建mysql数据库访问连接（数据库主机地址&a…...
Vue 中setup的特性
特性四：父传子组件传参【defineProps】： 父组件（传递数据）：利用自定义属性传递数据。 <template><h3>我是父组件</h3><hr /><Child :name"info.name" :age"info.age"…...
Peter算法小课堂—正整数拆分
大家可能会想：正整数拆分谁不会啊，2年级就会了，为啥要学啊 例题 正整数拆分有好几种，这里我们列举两种讲。 关系 我们看着第一幅图，头向左转90，记住你看到的图，再来看第二幅图，你…...
EDUSRC--简单打穿某985之旅
免责声明： 文章中涉及的漏洞均已修复，敏感信息均已做打码处理，文章仅做经验分享用途，切勿当真，未授权的攻击属于非法行为！文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…...
vue2升级到vue2.7
vue2升级到vue2.7 小小的改进,大大的提升 只需要简单修改,开发体验得到大大提升. 为什么要升级Vue2.7 不能拒绝的理由: 组合式 API(解决mixins问题:命名冲突,隐式依赖)单文件组件内的 <script setup>语法模板表达式中支持 ESNext 语法(可选链:?.、空值合并:??)单文…...
【django2.0之Rest_Framework框架一】rest_framework序列器介绍
Django RestFramework(简称DRF) 提供了序列化器Serialzier的定义，可以帮助我们简化序列化与反序列化的过程，不仅如此，还提供丰富的类视图、扩展类、视图集来简化视图的编写工作。REST framework还提供了认证、权限、限流、过滤、分页、接口文…...
Mock 测试详解：什么是 Mock 测试
Mock测试 什么是 Mock ？ Mock 的意思就是，当你很难拿到源数据时，你可以使用某些手段，去获取到跟源数据相似的假数据，拿着这些假数据，前端可以先行开发，而不需要等待后端给了数据后再开发。 Mo…...
Android端自定义铃声
随着移动应用竞争进入红海时代，如何在APP推送中别出心裁显得尤为重要。例如对自己的APP推送赋予独特的推送铃声，能够给用户更加理想的使用体验。 1、个性化提醒铃声有助于当收到特定类型的消息时，用户能够立刻识别出来。 2、不同的推送铃声…...
docker mysql 5.7
1.docker 安装mysql 5.7 docker pull mysql:5.72.配置容器MySQL数据、配置、日志挂载宿主机目录 # 宿主机创建数据存放目录映射到容器 mkdir -p /usr/local/docker_data/mysql/data# 宿主机创建配置文件目录映射到容器 mkdir -p /usr/local/docker_data/mysql/conf #(需要在…...
MySQL中如何进行分库分表的设计和实现？
分库分表是一种常用的数据库扩展方式，可以提高数据库的并发处理能力和扩展性，下面是分库分表的设计和实现的一般步骤： 数据库选择：选择合适的数据库管理系统（DBMS），如MySQL，支持分库…...
linux 安装谷歌浏览器和对应的驱动
创建文件install-google-chrome.sh #! /bin/bash# Copyright 2017-present: Intoli, LLC # Source: https://intoli.com/blog/installing-google-chrome-on-centos/ # # Redistribution and use in source and binary forms, with or without # modification, are permitted p…...
FPGA的通用FIFO设计verilog，1024*8bit仿真，源码和视频
名称：FIFO存储器设计1024*8bit 软件：Quartus 语言：Verilog 本代码为FIFO通用代码，其他深度和位宽可简单修改以下参数得到 reg [7:0] ram [1023:0];//RAM。深度1024，宽度8 代码功能： 设计一个基于FPGA…...
攻防世界web篇-backup
这是链接中的网页，只有一句话 试着使用.bak点缀看看是否有效 这里链接中加上index.php.bak让下在东西 是一个bak文件，将.bak文件改为.php文件试试 打开.php文件后就可以得到flag值...
uni-app：js二维数组与对象数组之间的转换
一、二维数组整理成对象数组 效果 [ ["前绿箭","DI10","RO1"], ["前红叉","DI2","RO2"], ["后绿箭","DI12","RO3"], ["后红叉","DI4","RO6"] ] …...
15-bean生命周期，循环依赖
文章目录 1. bean生命周期 1. bean生命周期...
缩短cin时间
std::ios::sync_with_stdio(false);...
【试题030】C语言之关系表达式例题
1.关系表达式是用关系运算符将两个表达式连接起来 错误示例：a<bc （不是关系运算符，是赋值运算符） 2.题目：设int m160,m280,m3100;，表达式m3>m2>m1的值是 ？ 3.代码分析： …...
ArGIS Engine专题（14）之GP模型根据导入范围与地图服务相交实现叠置分析
一、结果预览 二、需求简介 前端系统开发时，可能遇到如下场景，如客户给出一个图斑范围，导入到系统中后，需要判断图斑是否与耕地红线等地图服务存在叠加，叠加的面积有多少。虽然arcgis api中提供了相交inserect接口，但只是针对图形几何之间的相交，如何要使用该接口，则需…...
矩阵置零（C++解法）
题目 给定一个 m x n 的矩阵，如果一个元素为 0 ，则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1： 输入：matrix [[1,1,1],[1,0,1],[1,1,1]] 输出：[[1,0,1],[0,0,0],[1,0,1]]示例 2： 输入…...
Ansible的debug模块介绍，fact变量采集和缓存相关操作演示
目录 一.debug模块的使用方法 1.帮助文档给出的示例 2.主要用到的参数 （1）msg：主要用这个参数来指定要输出的信息 （2）var：打印指定的变量，一般是通过register注册了的变量 （3&…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...