zoukankan      html  css  js  c++  java
  • 应用node+express+mysql 实现简单的增删改查

    记录下来备忘

    1、准备好webstrom编辑器,编辑器调整字体大小等在file->settings->editor下设置 注册码 来源网上:

    2017.2.27更新
    选择“license server” 输入:http://idea.imsxm.com/

    2、准备好 mysql 因为我本机有安装xampp 所以不需要单独准备mysql数据库 如果没有需要安装,安装了mysql的Navicat Premium管理工具。

    3、查看下本机node和express是否安装 版本node -v  express --version

    4 、打开webstrom新建工程File->New->Project->nodejs  

    手动更改views下支持的模板文件格式,现在views下都是ejs文件,修改 app.js

    app.set('views', path.join(__dirname, 'views'));
    var template = require('art-template');
    template.config('base', '');
    template.config('extname', '.html');
    app.engine('.html', template.__express);
    app.set('view engine', 'html');

    这期中有个坑,安装art-template  需要安装art-template 3.0.3 默认安装4以上版本 会出现template.config不是函数的错误

    可能art-template 4 换其他的方法了。

    新建数据库 略过

    在routes下新建db.js 连接数据库

    //db.js
    //连接mysql
    var mysql = require('mysql');
    var pool = mysql.createPool({
        host:'localhost',
        user:'root',
        password:'',
        database:'testdb'
    })
    
    
    function query(sql, callback) {
        pool.getConnection(function (err, connection) {
            // Use the connection
            connection.query(sql, function (err, rows) {
                callback(err, rows);
                connection.release();//释放链接
            });
        });
    }
    exports.query = query;

    在views下新建users.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{{title}}</title>
    </head>
    <body>
    <form method="post" action="/users/search">
        姓名:<input type="text" value="{{s_name}}" name="s_name">
        年龄:<input type="text" value="{{s_age}}" name="s_age">
        <input type="submit" value="查询">
    </form>
    
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        {{each datas as value index}}
        <tr>
            <td>{{value.id}}</td>
            <td>{{value.name}}</td>
            <td>{{value.age}}</td>
            <td><a href="/users/add">新增</a></td>
            <td><a href="/users/del/{{value.id}}">删除</a></td>
            <td><a href="/users/toUpdate/{{value.id}}">修改</a></td>
        </tr>
        {{/each}}
    </table>
    </body>
    </html>

    在routes下新建user.js

    var express = require('express');
    var router = express.Router();
    
    var db = require('./db.js');
    /* GET users listing. */
    router.get('/', function(req, res, next) {
      db.query('select * from userinfo',function(err,rows){
        if(err){
          res.render('users',{title:'Express',datas:[]});
        }else{
          res.render('users',{title:'Express',datas:rows});
        }
      })
    });
    
    //新增
    router.get('/add',function(req,res){
      res.render('add');
    })
    router.post('/add',function(req,res){
      var name = req.body.name;
      var age = req.body.age;
      db.query("insert into userinfo(name,age) values ('"+name+"',"+age+")",function(err,rows){
        if(err){
          res.end("新增失败");
        }else{
          res.redirect('/users');
        }
      });
    })
    //删除
    router.get('/del/:id',function(req,res){
      var id = req.params.id;
      db.query("delete from userinfo where id="+id,function(err,rows){
          if(err){
            res.end("删除失败" + err);
          }else{
            res.redirect("/users");
          }
      })
    })
    //修改
    router.get('/toUpdate/:id', function (req, res) {
        var id = req.params.id;
        db.query("select * from userinfo where id=" + id, function (err, rows) {
            if (err) {
                res.end('修改页面跳转失败:' + err);
            } else {
                res.render("update", {datas: rows});       //直接跳转
            }
        });
    });
    router.post('/update', function (req, res) {
        var id = req.body.id;
        var name = req.body.name;
        var age = req.body.age;
        db.query("update userinfo set name='" + name + "',age='" + age + "' where id=" + id, function (err, rows) {
            if (err) {
                res.end('修改失败:' + err);
            } else {
                res.redirect('/users');
            }
        });
    });
    
    //查询
    router.post('/search', function (req, res) {
        var name = req.body.s_name;
        var age = req.body.s_age;
    
        var sql = "select * from userinfo";
    
        if (name) {
            sql += " and name='" + name + "' ";
        }
    
        if (age) {
            sql += " and age=" + age + " ";
        }
        sql = sql.replace("and","where");
        db.query(sql, function (err, rows) {
            if (err) {
                res.end("查询失败:", err)
            } else {
                res.render("users", {title: 'Express', datas: rows, s_name: name, s_age: age});
            }
        });
    });
    //
    module.exports = router;

    新增页面add.html

    <!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.html

    <!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>

    可以简单遍历数据库字段到页面。

        

     参考 http://www.cnblogs.com/zhengyeye/p/nodejs.html 感谢原作者

  • 相关阅读:
    批量插入SQL(适用于数据量十万级以上的快速大量插入)
    python爬虫BUG(爬取航班信息)
    python爬虫实例(爬取航班信息)
    python入门基础
    C#生成Guid的几种方式
    微信小程序echart图
    替换SQL字段中的换行符,回车符
    ASP.NET目录
    增删改查程序
    C++中explicit关键字的使用
  • 原文地址:https://www.cnblogs.com/junwu/p/6952033.html
Copyright © 2011-2022 走看看