'用户注册登录（二）'

后台的搭建

前面介绍了用户登录注册的前台页面，现在我们开始来介绍一下后台接口的实现。

后台的一些依赖包
后台的包依赖
项目文件组成
后台项目文件组成
我们新建一个app.js用来引入Koa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const Koa = require('koa')
const app = new Koa()
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const {check_token} = require('./utils/token')
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
// 添加token 验证中间件
app.use(check_token);
// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});
module.exports = app

这里是用户登录注册的接口实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
const User = require('../db').User;
// const Comment = require('../db').Comment
const sha1 = require('sha1');
const { PWD_ENCODE_STR} = require('../utils/config');
const {create_token, check_token_code} = require('../utils/token');
const xss = require('xss')
module.exports = {
  // 用户注册
  async register(ctx, next){
    let {user_name = '', user_id =　'', user_pwd = '', re_user_pwd = '', avatar = "", code = '', code_token = ''} = ctx.request.body;
    try {
      if(user_name == '' || user_id == "" || user_pwd == ""){
        ctx.body = {
          code: 401,
          msg: "注册失败，请填写完整表单!"
        }
        return;
      }
      if(avatar == ''){
        ctx.body = {
          code: 401,
          msg: "注册失败，请上传头像!"
        }
        return;
      }
      if(user_pwd.length < 5){
        ctx.body = {
          code: 401,
          msg: '注册失败，密码最少为5位！'
        }
        return;
      }
      if(user_pwd != re_user_pwd){
        ctx.body = {
          code: 401,
          msg: "注册失败，2次密码输入不一致!"
        }
        return;
      }
      
      // 验证码判断
      let mark = await check_token_code({token:code_token,code});
      if(!mark){
        ctx.body = {
          code: 401,
          msg: '登录失败，验证码错误!'
        }
        return;
      }
      // 判断 user_id 是否重复
      let res = await User.find({user_id});
      if(res.length != 0){
        ctx.body = {
          code: 409,
          msg: '注册失败，登录账号重复了，换一个吧！'
        }
        return;
      }
      user_pwd = sha1(sha1(user_pwd + PWD_ENCODE_STR));
      // 防止xss攻击， 转义
      user_name = xss(user_name);
      let token = create_token(user_id);
      let user = new User({user_id,user_name,user_pwd,avatar,token});
      res = await user.save();
      if(res.user_id != null){
        ctx.body = {
          code: 200,
          msg: "注册成功!",
          data: {
            user_id: res.user_id,
            user_name,
            avatar,
            token,
          }
        }
      }else{
        ctx.body = {
          code: 500,
          msg: "注册失败，服务器异常!"
        }
      }
    }catch (e){
      console.log(e);
      ctx.body = {
        code: 500,
        msg: "注册失败，服务器异常！"
      }
    }
  },
  // 用户登录
  async login(ctx, next){
    let {user_id = '', user_pwd = '' , code = "" , code_token = ''} = ctx.request.body;
    try {
      if(user_id == '' || user_pwd == ''){
        ctx.body = {
          code: 401,
          msg: "登录失败，请输入登录账号或密码!"
        }
        return;
      }
      // 验证码判断
      let mark = await check_token_code({token:code_token,code});
      if(!mark){
        ctx.body = {
          code: 401,
          msg: '登录失败，验证码错误!'
        }
        return;
      }
      user_pwd = sha1(sha1(user_pwd + PWD_ENCODE_STR));
      let res = await User.find({user_id,user_pwd});
      if(res.length == 0){
        ctx.body = {
          code: 401,
          msg: '登录失败，用户名或者密码错误!'
        }
        return;
      }
      let token = create_token(user_id);
      res[0].token = token;
      res[0].save();
      ctx.body = {
        code: 200,
        msg: "登录成功!",
        data: {
          user_id: res[0].user_id,
          user_name: res[0].user_name,
          avatar: res[0].avatar,
          token
        }
      }
    } catch(e){
      console.log(e); 
      ctx.body = {
        code: 500,
        msg: '登录失败，服务器异常!'
      }
    }
  },
  //获取用户头像
  async getAvatar(ctx,next){
    let user_id = ctx.params.id;
    try{
      let res = await User.find({user_id});
      ctx.body = {
        code: 200,
        msg: '获取用户头像成功',
        data: {
          userAva: res
        }
      }
    }catch(e) {
     console.log(e);
     ctx.body = {
       code: 500,
       msg: "获取用户头像失败，服务器异常，请稍后再试！"
     }
   }
  }
}

验证码的实现，使用gd-bmp插件来生成验证码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
const BMP24 = require('gd-bmp').BMP24;
const {create_token} = require('../utils/token');
const Checkcode = require('../db').Checkcode;
module.exports = {
  // 验证码获取
  async checkcode(ctx, next){
    try {
      let {code,img} = makeCapcha();
      let token = create_token(code);
      await new Checkcode({token,code}).save();
      ctx.body = {
        code: 200,
        msg: '获取验证码成功！',
        data: {
          token,
          img: "data:image/bmp;base64," + img.getFileData().toString('base64')
        }
      }
    } catch(e){
      console.log(e);
      ctx.body = {
        code: 500,
        msg: '获取验证码失败！'
      }
    }
  }
}
function rand(min, max) {
  return Math.random()*(max-min+1) + min | 0; //特殊的技巧，|0可以强制转换为整数
}
function makeCapcha() {
  var img = new BMP24(100, 40);
  img.drawCircle(rand(0, 100), rand(0, 40), rand(10 , 40), rand(0, 0xffffff));
  //边框
  img.drawRect(0, 0, img.w-1, img.h-1, rand(0, 0xffffff));
  img.fillRect(0, 0, 100, 40, 0x252632);
  // img.fillRect(rand(0, 100), rand(0, 40), rand(10, 35), rand(10, 35), rand(0, 0xffffff));
  img.drawLine(rand(0, 100), rand(0, 40), rand(0, 100), rand(0, 40), rand(0, 0xffffff));
  //return img;
  //画曲线
  var w=img.w/2;
  var h=img.h;
  var color = rand(0, 0xffffff);
  var y1=rand(-5,5); //Y轴位置调整
  var w2=rand(10,15); //数值越小频率越高
  var h3=rand(4,6); //数值越小幅度越大
  var bl = rand(1,5);
  for(var i=-w; i<w; i+=0.1) {
      var y = Math.floor(h/h3*Math.sin(i/w2)+h/2+y1);
      var x = Math.floor(i+w);
      for(var j=0; j<bl; j++){
          img.drawPoint(x, y+j, color);
      }
  }
  var p = "ABCDEFGHKMNPQRSTUVWXYZ3456789";
  var str = '';
  for(var i=0; i<4; i++){
      str += p.charAt(Math.random() * p.length |0);
  }
  var fonts = [BMP24.font12x24, BMP24.font16x32];
  // var fonts = [BMP24.font8x16, BMP24.font12x24, BMP24.font16x32];
  var x = 15, y=8;
  for(var i=0; i<str.length; i++){
      var f = fonts[Math.random() * fonts.length |0];
      y = 8 + rand(-5, 5);
      img.drawChar(str[i], x, y, f, rand(0xaaaaaa, 0xffffff));
      x += f.w + rand(2, 8);
  }
  return {code:str,img}
}

后台只是实现了一些简单的交互接口，希望后期对后台的使用能够丰富起来

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

乐于分享,喜欢环境音乐,爱看动漫,偶尔写写技术博客的小程一枚...