前言
这是一次很简单的尝试，初衷是使用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) }) },Node端的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;Node端的数据库配置：/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;Node端的查询逻辑：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;这个后端项目，基本上是从手册、博客上找到的例子，整合到一起，还是花了一些时间才运行起来的。
做个记录，以免后面自己遗忘了，还有参照！