首页 / NODEJS / Nodejs+Express+Mysql实现简单用户管理增删改查

Nodejs+Express+Mysql实现简单用户管理增删改查

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Nodejs+Express+Mysql实现简单用户管理增删改查，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5669字，纯文字阅读大概需要9分钟。

内容图文

 

源码地址

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

目录结构

　　Nodejs+Express+Mysql实现简单用户管理增删改查 - 文章图片

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实现简单用户管理增删改查所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/920135.html

来源：【匿名】