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&…...
深度神经网络解析：从原理到工程实践
1. 深度神经网络速览：40秒背后的技术全景当我在2014年首次接触VGGNet时，那个包含16-19个权重层的"深"度网络曾让我震撼。如今ResNet的152层结构已成常态，但向非技术背景的朋友解释这些"非常深"的网络时，40秒的…...
一 kettle 一世界，一 spoon 一流程
Kettle 概述 Kettle 是一款开源的 ETL（Extract, Transform, Load）工具，全称为 “Kettle E.T.T.L. Environment”。其核心功能围绕数据处理流程的三个关键阶段： Extract（抽取） 支持从多样化数据源获取数据，包括关系型数据库（MySQL、Oracle）、文件（Excel、CSV）、NoS…...
为什么92%的边缘项目在Docker WASM迁移中失败？6步标准化流程+4类典型崩溃日志诊断图谱
更多请点击： https://intelliparadigm.com 第一章：Docker WASM边缘计算部署的现状与挑战 WebAssembly（WASM）正加速融入边缘计算生态，而 Docker 官方尚未原生支持 WASM 运行时——当前需依赖社区方案如 wasi-sdk、wasm…...
《Windows Internals》10.2.11 学习笔记：虚拟服务账户（The Virtual Service Account）——为什么 Windows 服务不再只依赖普通账号？
🔥个人主页：杨利杰YJlio❄️个人专栏：《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》 《那些年未解决的Windows疑难杂症》🌟 让复杂的事情更…...
GEEKOM Mini IT13迷你主机评测：i9-13900H性能与扩展性解析
1. GEEKOM Mini IT13迷你主机深度解析：i9-13900H性能小钢炮作为一名长期关注迷你主机的硬件爱好者，最近GEEKOM Mini IT13的促销活动确实引起了我的注意。这款搭载Intel Core i9-13900H处理器的迷你主机，现在以679美元（约合人民币4…...
2026年权威发布：AI搜索优化源头服务商深度测评，杭州7大GEO优化解决方案避坑指南
在2026年的今天，AI搜索已成为企业获取精准流量、建立用户心智的首要入口。传统搜索引擎优化（SEO）的逻辑正在被生成式引擎优化（GEO）快速迭代，其核心从“匹配关键词”转向“成为标准答案”。面对这一剧变&…...
掌握LCU API：重构你的英雄联盟游戏体验
掌握LCU API：重构你的英雄联盟游戏体验 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾在英雄联盟对局中因为手动操作繁琐…...
、torch.as_tensor()和torch.from_numpy()的深度选择指南)
从NumPy数组到PyTorch张量：一份关于torch.tensor()、torch.as_tensor()和torch.from_numpy()的深度选择指南
从NumPy数组到PyTorch张量：三种转换方法的工程实践指南 在深度学习项目的实际开发中，数据从预处理到模型输入的流程往往需要跨越多个框架和数据结构。当开发者手头已经准备好了NumPy数组或Python列表，如何高效、安全地将其转换为PyTorch张量&…...
汉字拆字终极指南：如何用Python库hanzi_chaizi轻松掌握汉字结构
汉字拆字终极指南：如何用Python库hanzi_chaizi轻松掌握汉字结构 【免费下载链接】hanzi_chaizi 汉字拆字库，可以将汉字拆解成偏旁部首，在机器学习中作为汉字的字形特征 | Hanzi Decomposition Library allows Chinese characters to be broke…...
8个Illustrator脚本神器：告别重复劳动，效率提升300%
8个Illustrator脚本神器：告别重复劳动，效率提升300% 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 还在为Illustrator中那些重复又枯燥的操作烦恼吗&#x…...