共计 3279 个字符,预计需要花费 9 分钟才能阅读完成。
前言
这是一次很简单的尝试,初衷是使用 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; |
这个后端项目,基本上是从手册、博客上找到的例子,整合到一起,还是花了一些时间才运行起来的。
做个记录,以免后面自己遗忘了,还有参照!
正文完