• express实现前后端通信上传图片,存储数据库(mysql)傻瓜教程(三)完结篇


      终于完成了所有自己想要的功能(鼓励下自己),虽然还是很简陋,但是还是挺有满足感的,哈哈。

      附上前两篇的链接:

      第一篇

      第二篇

      进入正题,在第二篇里面已经完成了连接数据库,并且实现了对数据库的增删改查,下面咱们来实现上传的图片存储数据库,并且在第二次访问时返回这张上传的图片。

      昨天遇到的问题是这样的,因为进入首页时候会读取模板(routes/index.js),代码如下:

    router.get('/', function(req, res) {
        res.render('index', {
            title: '孟星魂',
        });
    });

      所以在此路由下无法再获取数据(因为第二次访问页面的时候要从数据库请求图片的路径),咱们就只能在发送一个请求来获取数据,所以要使用中间件,路由中间件的用法http://www.expressjs.com.cn/guide/using-middleware.html#middleware.router

      这里的中间件用法如下(也是问题所在,官网上并没有写清楚如何在前端发送请求的格式)

    router.get('/:id', function(req, res) {
           
        if (req.params.id === "me") {
            //dosomething
        }
    
    })

       前端发送请求是这样:

    $.get('/me', function(data) {
            //do something  
        });

       (是不是很简单,但就是没有文档说明,哭哭哭),express获取参数有三种方法:

    Checks route params (req.params), ex: /user/:id
    Checks query string params (req.query), ex: ?id=12
    Checks urlencoded body params (req.body), ex: id=  

      1、例如:127.0.0.1:3000/index,这种情况下,我们为了得到index,我们可以通过使用req.params.index得到(咱们的例子用的就是这种方法),通过这种方法我们就可以很好的处理Node中的路由处理问题,同时利用这点可以非常方便的实现MVC模式;

      2、例如:127.0.0.1:3000/index?id=12,这种情况下,这种方式是获取客户端get方式传递过来的值,通过使用req.query.id就可以获得,类似于PHP的get方法;

      3、例如:127.0.0.1:3000/index,然后post了一个id=2的值,这种方式是获取客户端post过来的数据,可以通过req.body.id获取,类似于PHP的post方法;


      接下来往get请求中添加回调,主要是访问数据库,查询有没有图片的路径,然后添加到页面中,代码如下:

      

    router.get('/:id', function(req, res) {
        //创建一个connection   
        if (req.params.id === "me") {
            var connection = mysql.createConnection({
                host: '127.0.0.1',
                user: 'root',
                password: '111',
                port: '3306',
                database: 'nodesample',
            });
            connection.connect(function(err) {
                if (err) {
                    console.log('[query] - :' + err);
                    return;
                }
                console.log('[connection connect]  succeed!');
            });
            //执行SQL语句
            var userGetSql = 'SELECT * FROM userinfo';
            //
            connection.query(userGetSql, function(err, result) {
                if (err) {
                    console.log('[SELECT ERROR] - ', err.message);
                    return;
                }
                if (result[0] !== undefined) {
                    res.send(result[0])
                }
                console.log('--------------------------SELECT----------------------------');
                console.log(result);
                console.log('-----------------------------------------------------------------
    
    ');
            });
            //关闭connection
            connection.end(function(err) {
                if (err) {
                    return;
                }
                console.log('[connection end] succeed!');
            });
        }
    
    })

      这里咱们查询已经建立好的userinfo表,返回的result就是数据库中的所有数据,命令行里可以看到打印,这里只返回第一条数据,在实际应用中应该还会传递一个用户的id过来,用来匹配数据库中的数据,在上传时也会匹配这个id,如果出现相同则会更新掉这条数据,

    这些就需要大家自己来动手搞定了,现在保证userinfo表是空的,下次上传的时候保证会读到这条数据。

      图片上传的代码修改如下:

    router.post('/', function(req, res) {
        // console.log(res);
        // res.send(req.body);
        var form = new formidable.IncomingForm();
        form.uploadDir = "./public/upload/temp/"; //改变临时目录
        form.parse(req, function(error, fields, files) {
            for (var key in files) {
                var file = files[key];
                var fName = (new Date()).getTime();
                switch (file.type) {
                    case "image/jpeg":
                        fName = fName + ".jpg";
                        break;
                    case "image/png":
                        fName = fName + ".png";
                        break;
                    default:
                        fName = fName + ".png";
                        break;
                }
                console.log(file, file.size);
                var uploadDir = "./public/upload/" + fName;
                fs.rename(file.path, uploadDir, function(err) {
                    if (err) {
                        res.write(err + "
    ");
                        res.end();
                    }
                    var connection = mysql.createConnection({
                        host: '127.0.0.1',
                        user: 'root',
                        password: '111',
                        port: '3306',
                        database: 'nodesample',
                    });
    
                    connection.connect();
    
                    var userAddSql = 'INSERT INTO userinfo(Id,UserName,UserPass) VALUES(0,?,?)';
                    var userAddSql_Params = ['path', "/upload/" + fName];
                    //
                    connection.query(userAddSql, userAddSql_Params, function(err, result) {
                        if (err) {
                            console.log('[INSERT ERROR] - ', err.message);
                            return;
                        }
    
                        console.log('--------------------------INSERT----------------------------');
                        //console.log('INSERT ID:',result.insertId);        
                        console.log('INSERT ID:', result);
                        console.log('-----------------------------------------------------------------
    
    ');
                    });
    
                    connection.end();
                    res.write("<img src='/upload/" + fName + "' />");
                    res.end();
    
    
                })
    
            }
        });
    });

      就是在上传图片后,把图片的路径存储到数据库中,可以在第二次访问时返回。

      前端的请求可以这样写:

    $.get('/me', function(data) {
            if (data !== null || data !== undefined) {
                $("body").append($("<img src=" + data.UserPass + ">"))
            }                   
        });

      直接在页面中append这张图片,src从返回的数据中获取。

      好啦,现在大家可以重启express,上传一张图片后,在刷新页面,便可以看到刚刚上传的图片了!!

      好了教程到此圆满结束了,自己的第一篇博客,写作过程中收获颇多,也请大家发现问题,多提意见,不胜感激,最后附上整个项目的源代码,点击下载,

      解压后运行express的启动代码就好,运行不成功的先配置好数据库!!

    set DEBUG=myapp & npm start

       mac

    DEBUG=myapp npm start

      祝大家好运~

      欢迎任何形式的转载,但请务必注明原文详细链接

      

  • 相关阅读:
    redis-x64-3.2.100下载安装
    open with live server没反应
    JavaScript 语言的历史
    在navicat查看mysql的版本
    node.js安装教程
    个人简介
    C语言结课课程设计
    CommonJS 规范 与 ES6 规范
    大文件分片上传,断点续传,秒传
    babel编译
  • 原文地址:https://www.cnblogs.com/wunan/p/5035793.html
Copyright © 2020-2023  润新知