Vue求职网站之登录注册

1.实现功能

• 注册账号
• 通过email发送验证码实现注册
• 用户根据用户名以及密码实现登录

2.使用工具

• vue-cli: vue项目的脚手架工具，帮你搭好框架，快速开发
• vue-router: 是vue的路由系统，会把各个组件渲染到正确的地方
• axios: HTTP请求工具
• vuex:数据管理工具，可以进行数据上的通信。 比如存储一些公共变量或者是不同组件间的数据处理等。

相关文档：
新手向：Vue 2.0 的建议学习顺序
axios中文说明
vuex入门
vuex API文档

3.前端页面

3.1 页面交互展示

GIF.gif

3.2 页面逻辑

思路

1. 点击菜单栏登录按钮显示登陆界面，背景主页增加滤镜虚化

• 点击菜单栏注册按钮同理，若此时存在登录界面则将其不显示
• 用户登录成功后注册及登录按钮不显示，显示用户名及登出按钮

4. 邮箱验证功能

4.1逻辑思路

1. 点击发送验证码，如果邮箱框地址为空，则提示输入

• 若之前已经发送验证码且在15min之内，则提示验证码已发送，若超过15min则重新发送，更新验证码及发送时间
• 之前没有发送过验证码，则发送验证码,存储验证码及发送时间

流程图.png

4.2 代码展示

• type.js

export const SAVECODE = 'SAVECODE' //验证码保存
export const SENDCODE = 'SENDCODE' //发送验证码
export const SAVETIME = 'SAVETIME' //存储发送时间

• state.js

const state = {
  code: null,
  sendEmail:false,
  sendTime: null
};

• getters.js

export const SendEmail = state => state.login.sendEmail;
export const GetCode = state => state.login.code;
export const GetTime = state => state.login.sendTime;

• mutations.js

const mutations = {
  [SENDCODE](state){
    state.sendEmail = true;
  },
  [SAVECODE](state,code){
    state.code = code;
    console.log(code);
  },
  [SAVETIME](state,time){
    state.sendTime = time;
  }
}

• action.js

export const SendEmail = ({ commit } ,data) => {
  api.localEmail(data).then(function (response) {
    console.log(response.data.type);
    if( response.data.type == true) {
      commit(SENDCODE);
      commit(SAVECODE, response.data.data);
    }
    else{
      alert("请输入有效的邮箱");
      commit(SAVECODE, null);
      commit(SAVETIME, null);
    }
  })
  .catch(function (error) {
    console.log(error);
  });
};

export const SetTime = ({ commit },data) => {
  commit(SAVECODE,data);
};

• api.js

localEmail: function (data) {
    console.log(data);
    return Vue.axios.post('/api/sendEmail',data)
  }

• 模块安装

npm install nodemailer --save

• app.js

app.post('/api/sendEmail', function(req, res) {
  var email = req.body.email;
  console.log(email);
  var success = false;
  var number = getRanom();
  var transporter = nodemailer.createTransport({
    service: 'qq',
    port: 465, // SMTP 端口
    secureConnection: true, // 使用 SSL
    auth: {
        user: '[email protected]',
        //这里密码不是qq密码，是你设置的smtp密码
        pass: 'odbmwzsvarwabebi'
    }
});
var mailOptions = {
    from: '[email protected]', // 发件地址
    to: email, // 收件列表
    subject: '邮箱信息验证', // 标题
    //text和html两者只支持一种
    text: '验证码是'+number // 标题
};
transporter.sendMail(mailOptions, function(error, info){
    if(error){
      console.log("出错");
    }
    else{
      success = true;
      console.log("成功")
    }
    res.send({
      type: success,
      data: number
    });
  });
});

• reg.vue

源码地址