Vue+Node+Express+MySqlの試み

前言
これは簡単な試みで、nodejsを使ってPHPを置き換え、完全なwebプロジェクトを構築することを目的としています.
プロジェクトロジック
vue開発フロントエンドは,現在devモードでproxyエージェントとnodeバックエンドを用いて通信している.Node+expressはバックエンドのwebサービスを構築し、mysqlに接続し、削除・変更を行う.
機能実装
1.フロントエンドはaxiosを通じてget、post、formdataピクチャアップロードの機能を実現した.2.バックエンドはget、post、formdataデータを受信し、データベースからデータを返し、ピクチャがピクチャアドレスを返す機能を保存する.3.画像は指定されたフォルダに格納され、xamppで静的ディレクトリを指定して画像格納する機能.
次の開発
1.現在mysqlに対するselect操作のみが実現されており、次はinset、update、delete操作を実現する必要がある.2.vueプロジェクトは現在もdevモードであり、buildプロジェクトがproductモードに入る必要があり、サーバはxamppである.
最後に
最後のステップは、すべてのプロジェクトが外部ネットワークに移行し、アリクラウドに暫定的に移行します.
code
Vue端の画像アップロードコード:upfile.vue:

change(){
            let that = this
            let file = that.$refs.avatar.files[0];
            let URL = window.URL || window.webkitURL;
            let imageURL = URL.createObjectURL(file);
            that.avatar = imageURL
            let fd = new FormData()
            fd.append('file', file)
            that.$store.dispatch('upfile', {
                fd: fd,
                callback: function(res){
                    that.avatar = that.$store.state.imageURL + res.data
                    console.log(res)
                }
            })
        }

Vue端のvuexコード:store.js:

upfile (context, data) {
        axios.create().post('/upfile', data.fd, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(response => {
            console.log('success')
            data.callback(response.data)
        }).catch(res => {
            console.log('error')
            data.callback(res)
        })  
    },

ノード端のupfile.js:

var express = require('express');
var path = require('path');
var fs = require('fs');
var formidable = require('formidable');
var router = express.Router();

/* GET users listing. */
router.post('/', function(req, res, next) {
  var date = new Date();
  var time = date.getFullYear() + substr2(date.getMonth()+1) + substr2(date.getDate());
  var form = new formidable.IncomingForm();
  form.encoding = 'utf-8';
  form.uploadDir = path.join(__dirname + "/../../blog/upload/"+time);
  form.keepExtensions = true;//    
  form.maxFieldsSize = 2 * 1024 * 1024;

  fs.mkdir(form.uploadDir, { recursive: true }, function(err){
    if (err) {
        return console.error(err);
    }
  });
  
  form.parse(req, function (err, fields, files){
      var filename = files.file.name;
      var nameArray = filename.split('.');
      var type = nameArray[nameArray.length - 1];
      var name = '';
      var str1 = '0123456789';
      var str2 = 'abcdefghijklmnopqrstuvwxyz';
      var str = str1 + str2;
      for(var i = 0; i < 12; i++){
        var rondom = parseInt(Math.random() * str.length);
        name += str.substr(rondom,1);
      }      
      var avatarName = name + '.' + type;
      var newPath = form.uploadDir + "/" + avatarName;
      fs.renameSync(files.file.path, newPath);
      res.send({status: 1, msg: 'success', body: fields, data:"/upload/"+time+'/'+avatarName});
  })
});

function substr2(num){
  num = num < 10 ? '0' + num : num
  return num;
}

module.exports = router;

ノード側のデータベース構成:/model/db.js:

var mysql = require('mysql');
var db = {}

//    ，            
db.select = function(connection, sql, callback){
    connection.query(sql, function (error, results, fields) {
        if (error) throw error;
        callback(results);
    });
}
//     
db.close = function(connection){
    //    
    connection.end(function(err){
        if(err){
            return;
        }else{
            console.log('    ');
        }
    });
}

//       
db.connection = function(){
    //     
    var connection = mysql.createConnection({
        host:'localhost',
        user:'root',
        password:'',
        database:'test',
        port:3306
    });
    //     
    connection.connect(function(err){
        if(err){
            console.log(err);
            return;
        }
    });
    return connection;
}
module.exports = db;

ノード側のクエリロジック:getuserinfo.js:

var express = require('express');
var router = express.Router();
var db = require('../model/db');

router.get('/', function(req, res, next) {
  var connection = db.connection();
  var sqlString = 'SELECT * FROM `user` WHERE id = ' + req.query.userid;
  db.select(connection, sqlString, function(data){
    if(data.length){
      res.send({status: 1, msg: 'success', data: data[0]});
    }else{
      res.send({status: 0, msg: '      : '+req.query.userid});
    }
  });
  db.close(connection);
});

module.exports = router;

このバックエンドプロジェクトは、基本的にマニュアルやブログから見つけた例を統合したものなのか、実行に時間がかかったものなのか.後で自分で忘れないように記録して、参照もあります!