Preface

This is a very simple attempt. The original intention is to replace PHP with nodejs and build a complete web project.

Project logic

vue develops the front-end, and is still in the dev mode. It uses proxy proxy proxy to communicate with the node back-end.
node+express builds back-end web services, connects to mysql, and performs addition, deletion, modification and query.

Function realization

1. Through axios, the front-end has realized the functions of get, post and upload of formdata pictures.
2. The back end receives get, post and formdata data data, queries the data returned from the database, and saves the address of the returned pictures.
3. Pictures are stored in the specified folder, and a static directory is specified through xampp to store pictures.

Next step development

1. At present, only the select operation of mysql is implemented. The next step is to implement the inset, update and delete operations.
2.vue project is still in dev mode. build project needs to enter product mode, and the server is xampp.

Last

In the last step, all the projects will be migrated to the Internet, temporarily Alibaba cloud.

code

Image upload code of Vue end:
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)
                }
            })
        }

vuex code of Vue end:
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 on Node side:

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;//Suffix suffix
  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;

Database configuration on Node side:
/model/db.js:

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

//Query operation, pay attention to asynchronous return of query results
db.select = function(connection, sql, callback){
    connection.query(sql, function (error, results, fields) {
        if (error) throw error;
        callback(results);
    });
}
//close database
db.close = function(connection){
    //Close connection
    connection.end(function(err){
        if(err){
            return;
        }else{
            console.log('Close connection');
        }
    });
}

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

Query logic on Node side:
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: 'The user could not be found: '+req.query.userid});
    }
  });
  db.close(connection);
});

module.exports = router;

This back-end project, basically, is an example from the manual and blog, integrated together, or it took some time to run.
Make a record so that you don't forget it later, and have a reference!