node+vue实现用户注册和头像上传的实例代码


Posted in Javascript onJuly 20, 2017

最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下

数据库我使用的是MongoDB。

首先做文件上传,要保证协议里面的'Content-Type'为'multipart/form-data'。

注册的步骤:

  1. 将用户名密码,图片等提交给node端
  2. node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库。

项目目录如下,注册功能只是其中的第一步:

node+vue实现用户注册和头像上传的实例代码

前端框架使用的是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) {
 })
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
Vue实现多页签组件
Jan 14 Vue.js
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 #Javascript
通过命令行创建vue项目的方法
Jul 20 #Javascript
基于BootStrap实现简洁注册界面
Jul 20 #Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 #Javascript
深入探究node之Transform
Jul 20 #Javascript
微信小程序“摇一摇”的实例代码
Jul 20 #Javascript
基于JavaScript实现微信抢红包功能
Jul 20 #Javascript
You might like
php 在线打包_支持子目录
2008/06/28 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
python基础教程项目三之万能的XML
2018/04/02 Python
Django框架models使用group by详解
2020/03/11 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Python和Bash结合在一起的方法
2020/11/13 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
四种会话跟踪技术
2015/05/20 面试题
三分钟演讲稿事例
2014/03/03 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
处级干部考察材料
2014/12/24 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书