前言
這是一次很簡單的嘗試,初衷是使用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;
這個後端項目,基本上是從手冊、博客上找到的例子,整合到一起,還是花了一些時間才運行起來的。
做個記錄,以免後面自己遺忘了,還有參照!