最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下
数据库我使用的是mongodb。
首先做文件上传，要保证协议里面的'content-type'为'multipart/form-data'。
注册的步骤:
项目目录如下，注册功能只是其中的第一步:
前端框架使用的是vue.js，ajax使用的是vue的组件vue-resource。
前端上传代码如下:
我要评论
<template>
<div class="signup">
<!--<form id="signform" enctype="multipart/form-data">-->
<div>
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="用户名" v-model="users.username">
<div v-if="judgeuser">请输入合适的用户名</div>
</div>
<div>
<label for="password">密码</label>
<input type="text" name="password" id="password" placeholder="密码" v-model="users.password">
<div v-if="judgepas">请输入符合规范的密码</div>
</div>
<div>
<label for="usernamereply">重复密码</label>
<input type="text" name="usernamereply" id="usernamereply" placeholder="重复密码" v-model="users.passwords">
<div v-if="judgepass">两次输入请保持一致</div>
</div>
<div>
<label for="name">昵称</label>
<input type="text" name="name" id="name" placeholder="昵称" v-model="users.name">
<div v-if="judgename">请输入昵称</div>
</div>
<div>
<label for="sex">性别</label>
<select name="" id="sex" v-model="users.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<label for="photo">头像</label>
<input type="file" name="photo" id="photo" @change="onfilechange"> //通过change事件获取到用户所要上传的图片
</div>
<div>
<label for="pintroduction">个人介绍</label>
<textarea name="pintroduction" id="pintroduction" cols="60" rows="8" v-model="users.pintroduction"></textarea>
</div>
<input type="submit" value="注册" class="submit" @click="submit()">
<!--</form>-->
</div>
</template>
<script>
//首先现在组件中引入vue和vue-resourece
import vue from 'vue';
import vueres from 'vue-resource';
//将vue-resourece注册到全局
vue.use(vueres);
export default{
name:'signup',
data(){
return{
judgeuser:false,
judgepas:false,
judgepass:false,
judgename:false,
users:{
username:null,
password:null,
passwords:null,
sex:null,
pintroduction:null,
photo:null,
}
}
},
methods: {
submit: function () {
var formdata = new formdata();
for (var key in this.users) { //读取data中所要上传的内容循环append到fordata中
if (key) {
formdata.append(key, this.users[key])
}
}
this.$http.post('/signup', formdata,{ //通过调取node端定义的接口，切记一定要将请求头中的content-type改为multipart/form-data否则node端获取到的将是一个字符串
headers:{
'content-type':'multipart/form-data'
}
})
.then()
},
onfilechange: function (e) { //获取到图片文件
var files = e.target.files || e.datatransfer.files;
if (!files.length)return;
this.users.photo = files[0];
}
}
}
</script>
node端接收代码如下：
var express=require('express');
var router = express.router();
var formidable=require('formidable');//上传功能的插件
var path=require('path');
var fs=require('fs');
var user=require('../models/users');//注册信息插入数据库的方法
router.post('/',function (req,res) {
var uploaddir='./public/images/';
var form=new formidable.incomingform();
//文件的编码格式
form.encoding='utf-8';
//文件的上传路径
form.uploaddir=uploaddir;
//文件的后缀名
form.extensions=true;
//文件的大小限制
form.maxfieldssize = 2 * 1024 * 1024;
form.parse(req, function (err, fields, files) {
//fields上传的string类型的信息
//files为上传的文件
var username=fields.username;
var password=fields.password;
var passwords=fields.passwords;
var sex=fields.sex;
var pintroduction=fields.pintroduction;
var name=fields.name;
var file=files.photo;
var oldpath =path.normalize(file.path);//返回正确格式的路径
var newfilename=username+file.name;
var newpath=uploaddir+newfilename;
//写入数据库的信息
var useres={
username:username,
password:password,
sex:sex,
pintroduction:pintroduction,
name:name,
};
//将老的图片路径改为新的图片路径
fs.rename(oldpath,newpath,function(err){
if(err){
console.error("改名失败"+err);
}
else {
useres.filepath=newpath;
user.create(useres);
res.send('注册成功')
}
});
})
});
module.exports = router;
// models/users.js
var user=require('../lib/mongo');
module.exports={
create:function (useres) {
user.create(useres);
}
};
// lib/mongo.js
const moogoose=require('mongoose');
moogoose.connect('mongodb://localhost/myblog');
moogoose.promise = global.promise;
const db=moogoose.connection;
// exports.db=db;
// db.once('open',function () {
//
// });
var userschema=new moogoose.schema({
username:{type:'string',unique:true},
password:{type:'string'},
sex:{type:'string'},
pintroduction:{type:'string'},
name:{type:'string'},
filepath:{type:'string'}
},
{collection:'user'}
);
var user=moogoose.model('user',userschema);
exports.create=function (useres) {
new user(useres).save(function (err,data) {
})
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论