当前位置: 首页 > 后端技术 > Node.js

Vue+Node+Express+MySql的尝试

时间:2023-04-03 18:53:52 Node.js

前言这是一个很简单的尝试。初衷是用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。最后一步是将所有项目迁移到外网,暂定为阿里云。codeVue端的图片上传代码:upfile.vue:change(){letthat=thisletfile=that.$refs.avatar.files[0];让URL=window.URL||窗口.webkitURL;让imageURL=URL.createObjectURL(文件);that.avatar=imageURLletfd=newFormData()fd.append('file',file)that.$store.dispatch('upfile',{fd:fd,callback:function(res){that.avatar=that.$store.state.imageURL+res.dataconsole.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:varexpress=require('express');varpath=require('path');varfs=require('fs');varformidable=require('formidable');varrouter=express.Router();/*获取用户列表。*/router.post('/',function(req,res,next){vardate=newDate();vartime=date.getFullYear()+substr2(date.getMonth()+1)+substr2(date.getDate());varform=newformidable.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){returnconsole.error(err);}});form.parse(req,function(err,fields,files){varfilename=files.file.name;varnameArray=filename.split('.');vartype=nameArray[nameArray.length-1];varname='';varstr1='0123456789';varstr2='abcdefghijklmnopqrstuvwxyz';变量str=str1+str2;for(vari=0;i<12;i++){varrondom=parseInt(Math.random()*str.length);名称+=str.substr(rondom,1);}varavatarName=名字+'.'+类型;varnewPath=form.uploadDir+"/"+avatarName;fs.renameSync(files.file.path,newPath);res.send({status:1,msg:'success',body:fields,data:"/upload/"+time+'/'+avatarName});})});函数substr2(num){num=num<10?'0'+num:numreturnnum;}module.exports=router;节点端数据库配置:/model/db.js:varmysql=require('mysql');vardb={}//查询操作,注意使用异步返回查询结果db。select=function(connection,sql,callback){connection.query(sql,function(error,results,fields){if(error)throwerror;callback(results);});}//关闭数据库db.close=function(connection){//关闭连接connection.end(function(err){if(err){return;}else{console.log('closeconnection');}});}//get数据库连接db.connection=function(){//数据库配置varconnection=mysql.createConnection({host:'localhost',user:'root',password:'',database:'test',port:3306});//数据库连接connection.connect(function(err){if(err){console.log(err);return;}});返回连接;}module.exports=db;Node端查询逻辑:getuserinfo.js:varexpress=require('express');varrouter=express.Router();vardb=require('../model/db');router.get('/',function(req,res,next){varconnection=db.connection();varsqlString='SELECT*FROM`user`WHEREid='+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;这个后端项目基本上是从手册和博客中找到的例子,集成在一起,或者花了一些时间来运行做个记录,免得以后忘了,有个参考!