题记:
这几天一直在学习Node以及关系型数据库的知识,刚刚接触到了express框架,就想利用express框架,实现一个通过ajax操作来向数据库内增添数据的功能。
正文:
话不多说,现在我们就来一起看看吧!我们需要了解哪些知识,做哪些基本工作!
- 首先,我们要了解我们的基本技术点。前端:html+jquery下的AJAX方法
- 其次,我们要了解后端的知识,我是用的基于express框架下的node
- 然后,对于静态的html,是无法发送请求的,我使用的是nginx,非常轻量级的服务器
- 最后,我们使用MySQL这个典型的关系型数据库+可视化工具navicat
那么,我们先从第一步做起,那就是写前端的代码:
注释如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>接收参数</title> </head> <body> <!-- 需要输入的text --> username:<input type="input" id="username"> <br> firstname:<input type="input" id="firstname"> <button type="button" id="btn">点击提交</button> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#btn').click(function() { var username = $('#username').val(); // 获取username的值 var firstname = $('#firstname').val(); // 获取firstname的值 $.ajax({ url: 'http://localhost:1337/login', // url地址要跟node中的地址对应 type: 'POST', // GET或者POST ,这里选用POST dataType: 'json', data: { username: username, firstname: firstname }, success:function(data) { console.log(data); switch (data.code){ case 1: alert('插入数据成功'); break; case 2: alert('插入数据失败'); break; case 0: alert('请求失败,请检查数据格式!'); } } }) }); }); </script> </body> </html>
上面的代码中,包含了html已经如何获取输入框内的值传向后端
接下来,在开始展示node代码之前,我想先向大家展示一下数据库的设计
因为关系型数据库与NOSQL不太一样,NOSQL是由文档(关系型中的row)组成,再有多个文档组合成集合(关系型中的table,具有很高的灵活性,每个文档中的key是可以不一样的。而关系型则必须提前设计好字段,我们才可以向表中插入一行数据下面简单展示一下数据库。(本人是学前端的,所以可能看起来很不成熟,希望大家谅解)
下面,我们来看看基于express的node是如何写的(server端的JavaScript):
/** *@fileName: 114.1.2.js *@author: 吴晓阳 *@time: 2017/12/15 *@description: 利用连接池进行多次提交 */ var express = require('express'); // express模块 可以使用 npm install -g express var qs = require("querystring"); // querystring模块 可以使用 npm install -g express 用于处理传来的参数串 var mysql = require('mysql'); // mysql模块 同样可以使用 npm install -g mysql 来全局下载 var app = express(); var pool = mysql.createPool({ host : 'localhost', // 主机名 port : 3306, // 数据库连接的端口号 默认是3306 database : 'test', // 需要查询的数据库 user : 'root', // 用户名 password : '' // 密码,我的密码是空。所以是空字符串 }); app.post('/login',function (req,res) { // 注意 这里的login与最后的app.listen(1337,'localhost') 组成 localhost:1337/login 与 前端的ajax的url相对应,这里我也是自己搞了好久,才对应上,否则会报404 var body = "",data; req.on('data', function(chunk) { body += chunk; console.log(body); }); req.on('end', function() { // 解析参数 data=qs.parse(body); // 这里值得注意!querystring中的pares方法可以吧data解析成对象,供下文使用 // 设置响应头部信息及编码 res.writeHead(200, { 'Content-Type': 'text/html;charset=utf8', "Access-Control-Allow-Origin":"*" //*表示允许的域名地址,本地则为'http://localhost' 不添加此参数 会被认为是跨域 }); if(data.username) { // 输出提交的数据 // 插入数据 pool.getConnection(function (err,connection) { // 使用连接池 if(err){ console.log('与MySQL数据库建立连接失败!'); console.log('错误信息为:' + err); } else{ console.log('与MsSQL数据库建立连接成功!'); connection.query('INSERT INTO users SET ?',{ username: data.username, // data.username 则是 由qs解析过的 firstname: data.firstname // data.firstname 则是 由qs解析过的 },function (err,result) { if(err){ console.log('插入数据失败'); res.end('{code:2}'); // 同时要注意返回的数据要是json对象,以下同 connection.release(); // 释放连接池的连接,因为连接池默认最大连接数是10,如果点击数超过10 则不会与客户端连接,客户端的请求也会因为长时间无反应报错,下面会粘出报错的图 } else{ console.log('插入数据成功'); res.end('{code:1}'); connection.release(); // 释放连接池的连接 } }) } }); } else { res.end('{code:0}'); // 传入的值为空时,不执行插入操作 } }) }); app.listen(1337,'localhost');
如果不释放连接池的连接,我们点击15次会发现:
第十一个请求,会无反应。
释放连接池的连接后,示例如下:
我们会发现,十多次点击都是有反应的,这就代表,我们每次完成一次插入操作后,连接又重新回到了连接池中,供下一次请求使用!最后,数据库中添入数据如下:
最后呢,希望大家可以自己尝试一下,有什么写的不对的地方也请不吝指教!
相关推荐
node.js + express + mysql 包含前端博客展示、后台管理、node后端。整套博客系统开箱即用,对elemen-ui二次封装组件非常便利,管理端权限模块,用户登录,验证码,token验证,文章编辑,修改,查看,发布,评论,...
前端基于vue.js+element-ui,后端基于node+express,数据库使用sql,网络请求使用axios的校园疫情管理系统 基于vue+node.js+mysql的校园疫情管理系统.zip 前端基于vue.js+element-ui,后端基于node+express,数据库...
所用技术:vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能:首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
node.js+express+mysql实现增删改查+分页,以及图片上传操作
基于微信小程序+node.js+express.js+MySQL的校内订餐系统源码+数据库 介绍 前端小程序基于微信小程序原生,后端基于node.js,express.js,数据库MySql
连接Mysql代码在server/conf/conf.js配置信息改为自己的。表创建在server/malldata.sql文件内直接复制插入。数据库名是malldata,不懂用数据库去百度很容易 cd vueMall npm install express: cd server npm install...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,...学生签到系统采用express框架的node.js后台源码+项目说明.zip
node.js+express+mysql+分页+bootstrap+文件上传+基本新闻模板和后台管理
基于Vue+Node.js+mysql的宠物医院管理系统源码+数据库.zip项目说明 随着信息技术在各行各业之中的广泛应用和人们生活水平的日益提高,使我们的生活日益丰富多彩,宠物也成为了人们的亲密伙伴,越来越多的人们开始...
基于Node+Express+MySQL开发的简易问答社区系统源码+项目说明+数据库.zip 基于Node+Express+MySQL开发的简易问答社区系统源码+项目说明+数据库.zip 基于Node+Express+MySQL开发的简易问答社区系统源码+项目说明+...
这是一个最简单的列表管理,基于vue+node.js+express+mysql全栈技术开发。适合全站入门开发学习。大家对此有任何疑问可以向我提出。
node.js +express +ajax + mysql 对数据库增删改查,数据库有用户表和商品列表
基于node.js、vue、mongodb等技术构建的web系统,界面美观,功能齐全,适合用作毕业设计、课程设计作业等,项目均经过测试,可快速部署运行! 基于node.js、vue、mongodb等技术构建的web系统,界面美观,功能齐全,...
Vue.js+Nuxt.js+Es6+Webpack+Mysql+Node.js+Express.js 运行 #安装依赖 npm install #开发环境 npm run dev #生产环境 npm run build npm start #pm2 npm run build pm2 start npm --name 'justyeh....
本源码项目是基于Node.js和Express的MySQL数据库操作设计,包含23个文件,主要使用JavaScript编程语言。该项目展示了如何使用Express框架连接MySQL数据库,并进行基本的CRUD(创建、读取、更新、删除)操作。系统...
Vue3+express+node.js+elementPlus+vue-router+vuex+mysql+axios实现商城后台管理系统
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统 使用步骤: 本地运行方法  1.新建一个名为books_manage_system的数据库  2.将node目录下books_manage_system.sql文件导入到该数据库...
NodeJS全栈开发之后端接口技术栈基于Node.js+Express+Mysql实现RESTFUL API.zip
操作系统课程设计,基于 vue+socket.io 的即时通讯应用。应用支持响应式,目前实现了注册登录、一对一聊天、在线群聊功能... 技术栈 前端:Vue.js + Ant Design Vue 后端:Node.js + express + socket.io MySQL 数据库