Nodejs+Express+Mysql实现简单用户管理增删改查
源码地址
https://github.com/king-y/NodeJs/tree/master/user
目录结构
mysql.js
var mysql = require('mysql');
var pool = mysql.createPool({
host : '127.0.0.1',
user : 'root',
password : '',
database : 's79'
});
exports.query = function(sql,data){
pool.getConnection(function(err,connection){
connection.query(sql,function(err,result){
data(err,result);
connection.release();
});
});
}
app.js
var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var sql = require('./conf/mysql.js');
var app = express();
app.set('view engine','ejs');
app.set('views','./views/');
app.use(bodyParser.urlencoded({ extended: false }));
// display user
app.get('/',function(req,res){
sql.query('select * from user',function(err,result){
if (err) {
res.render('index',{title:"用户列表",datas:[]});
}else{
res.render('index',{title:"用户列表",datas:result});
}
});
});
// add user
app.get('/add',function(req,res){
res.render('add');
});
app.post('/add',function(req,res){
var name = req.body.name;
var age = req.body.age;
sql.query('insert into user(name,age) values("'+name+'","'+ age +'")',function(err,result){
if(err){
res.send('新增失败'+err);
}else {
res.redirect('/');
}
});
});
// edit user
app.get('/edit/:id',function(req,res){
var id = req.params.id;
sql.query('select * from user where id = ' + id,function(err,result){
res.render('edit',{datas:result});
});
});
app.post('/edit',function(req,res){
var id = req.body.id;
var name = req.body.name;
var age = req.body.age;
sql.query('update user set name = "'+name+'" , age = "'+age+'" where id = '+id,function(err,result){
if (err) {
res.send('更新失败'+err);
}else{
res.redirect('/');
}
})
});
// del user
app.get('/del/:id',function(req,res){
var id = req.params.id;
sql.query('delete from user where id = '+id,function(err,result){
if(err){
res.send('删除失败'+err);
}else {
res.redirect('/');
}
});
});
app.listen(3000);
index.ejs
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>
<%= title %>
</title>
<style>
table.TB_COLLAPSE {
width: 100%;
border-collapse: collapse;
} table.TB_COLLAPSE caption {
padding: 10px;
font-size: 24px;
background-color: #f3f6f9;
} table.TB_COLLAPSE thead th {
padding: 5px 0px;
color: #fff;
background-color: #915957;
} table.TB_COLLAPSE tbody td {
padding: 5px 0px;
color: #555;
text-align: center;
background-color: #fff;
border-bottom: 1px solid #915957;
} table.TB_COLLAPSE tfoot td {
padding: 5px 0px;
text-align: center;
background-color: #d6d6a5;
}
a {
color: #555;
text-decoration: none;
}
a:hover{
color:#cae;
}
</style>
</head> <body>
<table class="TB_COLLAPSE">
<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].name %>
</td>
<td>
<%= datas[i].age %>
</td>
<td><a href="/add">添加用户</a>|<a href="/del/<%= datas[i].id %>">删除</a>|<a href="/edit/<%= datas[i].id %>">编辑</a></td>
</tr>
<% } %>
</table>
</body> </html>
add.ejs
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>添加用户</title>
<style>
.myButton {
-moz-box-shadow: 0px 0px 0px 0px #a4e271;
-webkit-box-shadow: 0px 0px 0px 0px #a4e271;
box-shadow: 0px 0px 0px 0px #a4e271;
background-color:#89c403;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #74b807;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding: 3px 71px;
margin-top: 10px;
text-decoration:none;
text-shadow:0px 1px 0px #528009;
}
.myButton:hover {
background-color:#77a809;
}
.myButton:active {
position:relative;
top:1px;
}
input{
border: 1px solid #cae;
color:#cea;
}
hr{
border:1px solid #cea;
}
</style>
</head> <body>
<form class="form-horizontal" action="/add" method="post">
<fieldset>
<div id="legend" class="">
<legend class="leipiplugins-orgvalue">添加用户</legend>
<hr>
</div>
<div class="control-group">
<!-- Text -->
<div class="controls">
<input name="name" type="text" placeholder="请输入您的姓名" title="姓名" value="" class="leipiplugins" leipiplugins="text">
</div>
</div>
<br>
<div class="control-group">
<!-- Text -->
<div class="controls">
<input name="age" type="text" placeholder="请输入您的年龄" title="年龄" value="" class="leipiplugins" leipiplugins="text">
</div>
</div>
<input class="myButton" type="submit" value="提交">
</fieldset>
</form>
</body> </html>
edit.ejs
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>编辑用户</title>
<style>
.myButton {
-moz-box-shadow: 0px 0px 0px 0px #a4e271;
-webkit-box-shadow: 0px 0px 0px 0px #a4e271;
box-shadow: 0px 0px 0px 0px #a4e271;
background-color:#89c403;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #74b807;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding: 3px 71px;
margin-top: 10px;
text-decoration:none;
text-shadow:0px 1px 0px #528009;
}
.myButton:hover {
background-color:#77a809;
}
.myButton:active {
position:relative;
top:1px;
}
input{
border: 1px solid #cae;
color:#cea;
}
hr{
border:1px solid #cea;
}
</style>
</head> <body>
<form class="form-horizontal" action="/edit" method="post">
<fieldset>
<div id="legend" class="">
<legend class="leipiplugins-orgvalue">编辑用户</legend>
<hr>
</div>
<div class="control-group">
<!-- Text -->
<div class="controls">
<input type="hidden" name="id" value="<%= datas[0].id %>">
<input name="name" type="text" value=" <%= datas[0].name %> " class="leipiplugins" leipiplugins="text">
</div>
</div>
<br>
<div class="control-group">
<!-- Text -->
<div class="controls">
<input name="age" type="text" value=" <%= datas[0].age %> " class="leipiplugins" leipiplugins="text">
</div>
</div>
<input class="myButton" type="submit" value="提交">
</fieldset>
</form>
</body> </html>
推荐两个工具网站,在线生成表单和按钮.
表单:http://formbuild.leipi.org/?
按钮:https://www.bestcssbuttongenerator.com/#/0
http://www.shejidaren.com/css-button-generator-and-beautifucl-style-sheet.html
Nodejs+Express+Mysql实现简单用户管理增删改查的更多相关文章
- 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框架写后台.前段时间 ...
- node+express+mysql实现简单的数据增删改查
前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp 新建一个以ejs为模板的expre ...
- springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
- 大数据之路week05--day01（JDBC 初识之实现一个系统 实现用户选择增删改查 未优化版本）
要求,实现用户选择增删改查. 给出mysql文件,朋友们可以自己运行导入到自己的数据库中: /* Navicat MySQL Data Transfer Source Server : mysql S ...
- 最简单的mybatis增删改查样例
最简单的mybatis增删改查样例 Book.java package com.bookstore.app; import java.io.Serializable; public class Boo ...
- salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建
VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...
- 【Mybatis】简单的mybatis增删改查模板
简单的mybatis增删改查模板: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...
- MySQL数据库之表的增删改查
目录 MySQL数据库之表的增删改查 1 引言 2 创建表 3 删除表 4 修改表 5 查看表 6 复制表 MySQL数据库之表的增删改查 1 引言 1.MySQL数据库中,数据库database就是 ...
随机推荐
- Kafka笔记--常用指令(新建、删除topic)
新建topic ./kafka-topics.sh --zookeeper 192.168.1.160:2181 --create --topic kafkatestsmall2 --partitio ...
- Linux安装maven以及配置-Centos7版本
1.Linux安裝maven 1.如果電腦沒有wget命令的,先使用yum安裝wget命令.eg: yum install wget 2.安裝好后就可以直接使用wget命令去下載maven. 附:打开 ...
- [转][南京米联ZYNQ深入浅出]第二季更新完毕课程共计16节课
[南京米联]ZYNQ第二季更新完毕课程共计16节课 [第二季ZYNQ] ...
- vim-plug 插件安装与操作
安装 vim-plug curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/juneg ...
- 【JVM.2】垃圾收集器与内存分配策略
垃圾收集器需要完成的3件事情: 哪些内存需要回收? 什么时候回收? 如何回收? 在前一节中介绍了java内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭:栈 ...
- *C#(WPF)--矩阵拖动和矩阵动画（拖动展开，不足动画效果）
最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行 ...
- [UWP 自定义控件]了解模板化控件(2)：模仿ContentControl
ContentControl是最简单的TemplatedControl,而且它在UWP出场频率很高.ContentControl和Panel是VisualTree的基础,可以说几乎所有VisualTr ...
- Kafka(分布式发布-订阅消息系统)工作流程说明
Kafka系统架构Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和 ...
- libc.so.6: version 'GLIBC_2.14' not found报错提示的解决方案
线上一台服务器在执行leveldb程序的时候,报错:"libc.so.6: version `GLIBC_2.14' not found". 排查原因及解决方法如下: 1)产生原因 ...
- Nextcloud私有云盘在Centos7下的部署笔记
搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是“下一代”存储.初一看觉得“口气”不小,刚推出来就重新“定义”了Clo ...