node+express+mysql实现简单的数据增删改查
前提
电脑已经安装了node,express,mysql。
实现步骤
1.新建数据库表
附数据表结构:
2.创建exprss项目
express -e myapp 新建一个以ejs为模板的express项目
cd myapp
npm install
3.安装nodejs的mysql插件
npm install mysql --save
4.创建数据库配置文件
项目根目录下创建config目录,config目录内新建db.js,来实现基本的数据库连接
db.js
var mysql = require("mysql");
var pool = mysql.createPool({
host:"localhost",
user:"root",
password:"",
database:"oa"
});
function query(sql,callback){
pool.getConnection(function(err,connection){
connection.query(sql, function (err,rows) {
callback(err,rows);
connection.release();
});
});
}
exports.query = query;
5.数据表增删改查的业务代码,demo中暂时放到routes下的user.js中(demo的项目目录结构可能不大合理,暂且不纠结于此)
user.js
var express = require('express');
var router = express.Router();
var db = require("../config/db");
/**
* 查询列表页
*/
router.get("/",function(req,res,next){
db.query("select * from user",function(err,rows){
if(err){
res.render("users",{title:"用户列表",datas:[]});
}else {
res.render("users",{title:"用户列表",datas:rows});
}
});
});
/**
* 添加用户
*/
router.get("/add",function(req,res,next){
res.render("add");
});
router.post("/add",function(req,res,next){
var name = req.body.name;
var age = req.body.age;
db.query("insert into user(name,age) values('"+name+"','"+ age +"')",function(err,rows){
if(err){
res.send("新增失败"+err);
}else {
res.redirect("/users");
}
});
});
/**
* 删除用户
*/
router.get("/del/:id",function(req,res){
var id = req.params.id;
db.query("delete from user where id = " + id,function(err,rows){
if(err){
res.send("删除失败"+err);
}else {
res.redirect("/users");
}
});
});
/**
* 修改
*/
router.get("/toUpdate/:id",function(req,res,next){
var id = req.params.id;
var sql = "select * from user where id = " + id;
console.log(sql);
db.query(sql,function(err,rows){
if(err){
res.send("修改页面跳转失败");
}else {
res.render("update",{datas:rows});
}
});
});
router.post("/update",function(req,res,next){
var id = req.body.id;
var name = req.body.name;
var age = req.body.age;
var sql = "update user set name = '"+ name +"',age = '"+ age +"' where id = " + id;
console.log(sql);
db.query(sql,function(err,rows){
if(err){
res.send("修改失败 " + err);
}else {
res.redirect("/users");
}
});
});
/**
* 查询
*/
router.post("/search",function(req,res,next){
var name = req.body.s_name;
var age = req.body.s_age;
var sql = "select * from user";
if(name){
sql += " where name = '"+ name +"'";
}
//if(age){
// sql += " and age = '" + age + "'";
//}
sql.replace("and","where");
db.query(sql,function(err,rows){
if(err){
res.send("查询失败: "+err);
}else{
res.render("users",{title:"用户列表",datas:rows,s_name:name,s_age:age});
}
});
})
module.exports = router;
6.创建ejs模版文件
users.ejs(用户列表页模板)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<form action="/users/search" method="post">
姓名:<input type="text" name="s_name" value="<%= datas.name %>"><br>
年龄:<input type="text" name="s_age" value="<%= datas.age %>"><br>
<input type="submit" value="查询">
</form>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<% for(var i = 0; i < datas.length; i++) {%>
<tr>
<td><%= datas[i].id %></td>
<td><%= datas[i].age %></td>
<td><%= datas[i].name %></td>
<td><a href="/users/add">添加用户</a></td>
<td><a href="/users/del/<%= datas[i].id %>">删除</a></td>
<td><a href="/users/toUpdate/<%= datas[i].id %>">修改</a></td>
</tr>
<% } %>
</table>
</body>
</html>
add.ejs(添加用户的模板文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
</head>
<body>
<form action="/users/add" method="post">
姓名:<input type="text" name="name"><br>
年龄:<input type="text" name="age"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
update.ejs(用户信息修改的模板文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
</head>
<body>
<form action="/users/update" method="post">
<input type="hidden" value="<%= datas[0].id %>" name="id">
姓名:<input type="text" name="name" value="<%= datas[0].name %>"><br>
年龄:<input type="text" name="age" value="<%= datas[0].age %>"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
7.启动服务
npm start 启动服务
express默认的是3000的端口,如果服务正常启动,则可以在浏览器地址栏输入http://localhost:3000/users
8.示例贴图:



node+express+mysql实现简单的数据增删改查的更多相关文章
- Nodejs+Express+Mysql实现简单用户管理增删改查
源码地址 https://github.com/king-y/NodeJs/tree/master/user 目录结构 mysql.js var mysql = require('mysql'); v ...
- 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建 VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...
- salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...
- nodejs+express+mysql实现restful风格的增删改查示例
首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...
- 进入全屏 nodejs+express+mysql实现restful风格的增删改查示例
首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...
- MySQL数据库之表的增删改查
目录 MySQL数据库之表的增删改查 1 引言 2 创建表 3 删除表 4 修改表 5 查看表 6 复制表 MySQL数据库之表的增删改查 1 引言 1.MySQL数据库中,数据库database就是 ...
- MYSQL - database 以及 table 的增删改查
MYSQL - database 以及 table 的增删改查 MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这 ...
- 最简单的mybatis增删改查样例
最简单的mybatis增删改查样例 Book.java package com.bookstore.app; import java.io.Serializable; public class Boo ...
- C#操作Excel数据增删改查(转)
C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...
随机推荐
- el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除
前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...
- Vulnhub 靶场 Os-hackNos WP
About Os-hackNos 描述 Difficulty : Easy to Intermediate Flag : 2 Flag first user And second root Learn ...
- MyBatis框架——单表查询
Mybatis单表查询,示例 1.创建数据库 /* Navicat MySQL Data Transfer Source Server : localhost Source Server Versio ...
- CSRF和XSS区别和预防
名词解释 CSRF(Cross-site request forgery)跨站请求伪造 XSS (Cross-site scripting)跨站脚本攻击,这里缩写css被前端层叠样式表(Cascadi ...
- Inception V1-V4
2019-05-29 20:56:02 一.Inception V1 当不知道在卷积神经网络中该使用1 * 1卷积还是3 * 3的卷积还是5 * 5的卷积或者是否需要进行pooling操作的时候,我们 ...
- [gcd]Codeforces Common Divisors
Common Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- [暴力+前缀和]2019牛客暑期多校训练营(第六场)Upgrading Technology
链接:https://ac.nowcoder.com/acm/contest/886/J来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言52428 ...
- ubuntu 18.04下virtualbox安装windows虚拟机+增强功能+secureCRT
先强调一下,我是在Ubuntu里安装windows虚拟机,如果要看如何安装linux虚拟机的话,那么你走错地方了. 我一直使用Linux系统做开发的,选择Ubuntu是因为多数常用软件对Ubuntu支 ...
- windows10环境下QtCreator中出现skipping incompatible xxx when searching for xxx 问题解决办法
windows10环境下QtCreator中出现skipping incompatible xxx when searching for xxx 我再QtCreator中想导入一个外部库时,他提示不匹 ...
- Springboot CORS跨域访问
Springboot CORS跨域访问 什么是跨域 浏览器的同源策略限制: 它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础 ...