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&…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...
Oracle11g安装包
Oracle 11g安装包 适用于windows系统，64位 下载路径 oracle 11g 安装包...