源码地址

　　https://github.com/king-y/NodeJs/tree/master/user

目录结构

　　

mysql.js

  1. var mysql = require('mysql');
  2.  
  3. var pool = mysql.createPool({
  4.       host     : '127.0.0.1',
  5.       user     : 'root',
  6.       password : '',
  7.       database : 's79'
  8.     });
  9.  
  10. exports.query = function(sql,data){
  11.     pool.getConnection(function(err,connection){
  12.         connection.query(sql,function(err,result){
  13.               data(err,result);
  14.               connection.release();
  15.         });
  16.     });
  17. }

app.js

  1. var express = require('express');
  2. var bodyParser = require('body-parser');
  3. var fs = require('fs');
  4. var sql = require('./conf/mysql.js');
  5. var app = express();
  6.  
  7. app.set('view engine','ejs');
  8. app.set('views','./views/');
  9.  
  10. app.use(bodyParser.urlencoded({ extended: false }));
  11.  
  12. // display user
  13. app.get('/',function(req,res){
  14.         sql.query('select * from user',function(err,result){
  15.           if (err) {
  16.             res.render('index',{title:"用户列表",datas:[]});
  17.           }else{
  18.             res.render('index',{title:"用户列表",datas:result});
  19.           }
  20.         });
  21. });
  22.  
  23. // add user
  24. app.get('/add',function(req,res){
  25.   res.render('add');
  26. });
  27.  
  28. app.post('/add',function(req,res){
  29.   var name = req.body.name;
  30.   var age = req.body.age;
  31.   sql.query('insert into user(name,age) values("'+name+'","'+ age +'")',function(err,result){
  32.      if(err){
  33.             res.send('新增失败'+err);
  34.         }else {
  35.             res.redirect('/');
  36.         }
  37.   });
  38. });
  39.  
  40. // edit user
  41. app.get('/edit/:id',function(req,res){
  42.     var id = req.params.id;
  43.     sql.query('select * from user where id = ' + id,function(err,result){
  44.             res.render('edit',{datas:result});
  45.     });
  46. });
  47.  
  48. app.post('/edit',function(req,res){
  49.   var id = req.body.id;
  50.   var name = req.body.name;
  51.   var age = req.body.age;
  52.   sql.query('update user set name = "'+name+'"  , age = "'+age+'" where id = '+id,function(err,result){
  53.     if (err) {
  54.       res.send('更新失败'+err);
  55.     }else{
  56.       res.redirect('/');
  57.     }
  58.   })
  59.  
  60. });
  61.  
  62. // del user
  63. app.get('/del/:id',function(req,res){
  64.   var id = req.params.id;
  65.   sql.query('delete from user where id = '+id,function(err,result){
  66.      if(err){
  67.             res.send('删除失败'+err);
  68.         }else {
  69.             res.redirect('/');
  70.         }
  71.   });
  72. });
  73.  
  74. app.listen(3000);

index.ejs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>
  7.         <%= title %>
  8.     </title>
  9.     <style>
  10.     table.TB_COLLAPSE {
  11.         width: 100%;
  12.         border-collapse: collapse;
  13.     }
  14.  
  15.     table.TB_COLLAPSE caption {
  16.         padding: 10px;
  17.         font-size: 24px;
  18.         background-color: #f3f6f9;
  19.     }
  20.  
  21.     table.TB_COLLAPSE thead th {
  22.         padding: 5px 0px;
  23.         color: #fff;
  24.         background-color: #915957;
  25.     }
  26.  
  27.     table.TB_COLLAPSE tbody td {
  28.         padding: 5px 0px;
  29.         color: #555;
  30.         text-align: center;
  31.         background-color: #fff;
  32.         border-bottom: 1px solid #915957;
  33.     }
  34.  
  35.     table.TB_COLLAPSE tfoot td {
  36.         padding: 5px 0px;
  37.         text-align: center;
  38.         background-color: #d6d6a5;
  39.     }
  40.     a {
  41.         color: #555;
  42.         text-decoration: none;
  43.     }
  44.     a:hover{
  45.         color:#cae;
  46.     }
  47.     </style>
  48. </head>
  49.  
  50. <body>
  51.     <table class="TB_COLLAPSE">
  52.         <tr>
  53.             <th>编号</th>
  54.             <th>姓名</th>
  55.             <th>年龄</th>
  56.             <th>操作</th>
  57.         </tr>
  58.         <% for(var i = 0; i < datas.length; i++) {%>
  59.         <tr>
  60.             <td>
  61.                 <%= datas[i].id %>
  62.             </td>
  63.             <td>
  64.                 <%= datas[i].name %>
  65.             </td>
  66.             <td>
  67.                 <%= datas[i].age %>
  68.             </td>
  69.             <td><a href="/add">添加用户</a>|<a href="/del/<%= datas[i].id %>">删除</a>|<a href="/edit/<%= datas[i].id %>">编辑</a></td>
  70.         </tr>
  71.         <% } %>
  72.     </table>
  73. </body>
  74.  
  75. </html>

add.ejs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>添加用户</title>
  7.     <style>
  8.     .myButton {
  9.     -moz-box-shadow: 0px 0px 0px 0px #a4e271;
  10.     -webkit-box-shadow: 0px 0px 0px 0px #a4e271;
  11.     box-shadow: 0px 0px 0px 0px #a4e271;
  12.     background-color:#89c403;
  13.     -moz-border-radius:28px;
  14.     -webkit-border-radius:28px;
  15.     border-radius:28px;
  16.     border:1px solid #74b807;
  17.     display:inline-block;
  18.     cursor:pointer;
  19.     color:#ffffff;
  20.     font-family:Arial;
  21.     font-size:17px;
  22.     padding: 3px 71px;
  23.     margin-top: 10px;
  24.     text-decoration:none;
  25.     text-shadow:0px 1px 0px #528009;
  26.     }
  27.     .myButton:hover {
  28.         background-color:#77a809;
  29.     }
  30.     .myButton:active {
  31.         position:relative;
  32.         top:1px;
  33.     }
  34.     input{
  35.         border: 1px solid #cae;
  36.         color:#cea;
  37.     }
  38.     hr{
  39.         border:1px solid #cea;
  40.     }
  41.     </style>
  42. </head>
  43.  
  44. <body>
  45.     <form class="form-horizontal" action="/add" method="post">
  46.         <fieldset>
  47.             <div id="legend" class="">
  48.                 <legend class="leipiplugins-orgvalue">添加用户</legend>
  49.                 <hr>
  50.             </div>
  51.             <div class="control-group">
  52.                 <!-- Text -->
  53.                 <div class="controls">
  54.                     <input name="name" type="text" placeholder="请输入您的姓名" title="姓名" value="" class="leipiplugins" leipiplugins="text">
  55.                 </div>
  56.             </div>
  57.             <br>
  58.             <div class="control-group">
  59.                 <!-- Text -->
  60.                 <div class="controls">
  61.                     <input name="age" type="text" placeholder="请输入您的年龄" title="年龄" value="" class="leipiplugins" leipiplugins="text">
  62.                 </div>
  63.             </div>
  64.              <input class="myButton" type="submit" value="提交">
  65.         </fieldset>
  66.     </form>
  67. </body>
  68.  
  69. </html>

edit.ejs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>编辑用户</title>
  7.     <style>
  8.     .myButton {
  9.     -moz-box-shadow: 0px 0px 0px 0px #a4e271;
  10.     -webkit-box-shadow: 0px 0px 0px 0px #a4e271;
  11.     box-shadow: 0px 0px 0px 0px #a4e271;
  12.     background-color:#89c403;
  13.     -moz-border-radius:28px;
  14.     -webkit-border-radius:28px;
  15.     border-radius:28px;
  16.     border:1px solid #74b807;
  17.     display:inline-block;
  18.     cursor:pointer;
  19.     color:#ffffff;
  20.     font-family:Arial;
  21.     font-size:17px;
  22.     padding: 3px 71px;
  23.     margin-top: 10px;
  24.     text-decoration:none;
  25.     text-shadow:0px 1px 0px #528009;
  26.     }
  27.     .myButton:hover {
  28.         background-color:#77a809;
  29.     }
  30.     .myButton:active {
  31.         position:relative;
  32.         top:1px;
  33.     }
  34.     input{
  35.         border: 1px solid #cae;
  36.         color:#cea;
  37.     }
  38.     hr{
  39.         border:1px solid #cea;
  40.     }
  41.     </style>
  42. </head>
  43.  
  44. <body>
  45.     <form class="form-horizontal" action="/edit" method="post">
  46.         <fieldset>
  47.             <div id="legend" class="">
  48.                 <legend class="leipiplugins-orgvalue">编辑用户</legend>
  49.                 <hr>
  50.             </div>
  51.             <div class="control-group">
  52.                 <!-- Text -->
  53.                 <div class="controls">
  54.                     <input type="hidden" name="id" value="<%= datas[0].id %>">
  55.                     <input name="name" type="text"  value=" <%= datas[0].name %> " class="leipiplugins" leipiplugins="text">
  56.                 </div>
  57.             </div>
  58.             <br>
  59.             <div class="control-group">
  60.                 <!-- Text -->
  61.                 <div class="controls">
  62.                     <input name="age" type="text"  value=" <%= datas[0].age %> " class="leipiplugins" leipiplugins="text">
  63.                 </div>
  64.             </div>
  65.              <input class="myButton" type="submit" value="提交">
  66.         </fieldset>
  67.     </form>
  68. </body>
  69.  
  70. </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实现简单用户管理增删改查的更多相关文章

  1. nodejs+express+mysql实现restful风格的增删改查示例

    首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...

  2. 进入全屏 nodejs+express+mysql实现restful风格的增删改查示例

    首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...

  3. node+express+mysql实现简单的数据增删改查

    前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp  新建一个以ejs为模板的expre ...

  4. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  5. 大数据之路week05--day01（JDBC 初识之实现一个系统 实现用户选择增删改查 未优化版本）

    要求,实现用户选择增删改查. 给出mysql文件,朋友们可以自己运行导入到自己的数据库中: /* Navicat MySQL Data Transfer Source Server : mysql S ...

  6. 最简单的mybatis增删改查样例

    最简单的mybatis增删改查样例 Book.java package com.bookstore.app; import java.io.Serializable; public class Boo ...

  7. salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  8. 【Mybatis】简单的mybatis增删改查模板

    简单的mybatis增删改查模板: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...

  9. MySQL数据库之表的增删改查

    目录 MySQL数据库之表的增删改查 1 引言 2 创建表 3 删除表 4 修改表 5 查看表 6 复制表 MySQL数据库之表的增删改查 1 引言 1.MySQL数据库中,数据库database就是 ...

随机推荐

  1. 【博客大赛】使用LM2677制作的3V至24V数控可调恒压源

    [博客大赛]使用LM2677制作的3V至24V数控可调恒压源   http://bbs.ednchina.com/BLOG_ARTICLE_3013105.HTM LM2677,是TI公司生产的高效率 ...

  2. CF915G Coprime Arrays 莫比乌斯反演、差分、前缀和

    传送门 差分是真心人类智慧--完全不会 这么经典的式子肯定考虑莫比乌斯反演,不难得到\(b_k = \sum\limits_{i=1}^k \mu(i) \lfloor\frac{k}{i} \rfl ...

  3. linux配置iptables(3)

    简单通用 web 服务器iptables 配置 *filter :INPUT DROP [0:0]:FORWARD DROP [0:0]:OUTPUT ACCEPT [0:0] #超出 链规则 的数据 ...

  4. Task 异步编程测试案例及基础应用说明

    对于多线程,我们经常使用的是Thread.在我们了解Task之前,如果我们要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于“任务的编程模型”所冲击,因为tas ...

  5. 2017NOIP游记

    记得去年这个时候,大概刚接触OI.没想到时间这么快,第一次2017NOIP之旅已经结束.初测成绩出来了,100+100+95+50=345,有浙江三十几名(@Cptraser 机房370大佬).总体感 ...

  6. 【SDOI2017】数字表格

    题面 题解 这道题目还有一种比较有意思的解法. 定义一种运算\((\mathbf f\oplus\mathbf g)(x) = \prod\limits_{d\mid x}\mathbf f(d)^{ ...

  7. 分布式全文搜索引擎ElasticSearch

    一 什么是 ElasticSearch Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elas ...

  8. python-scapy学习笔记-(1)

    主要功能函数sniff sniff(filter="",iface="any",prn=function,count=N) filter参数允许我们对Scapy ...

  9. Jmeter（GUI模式）教程

    前些天,领导让我做接口的压力测试.What??我从未接触过这方面,什么都不知道,一脸蒙.于是我从学习jmeter开始入手. 现在记录下来jmeter的使用步骤,希望能对大家有所帮助. 一.安装Jmet ...

  10. 饿了么element UI<el-dialog>弹出层</el-dialog>修改默认样式不能在<style scoped>修改

    如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套. 如果在scoped下修改style.所 ...