vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

0.效果演示

插入视频插不进来，就很烦。可以出门右拐去优酷看下(点我！)。 

1.后端搭建

1.1项目结构

首先看一下后端的server目录

 挨个解释一下

• 首先dbs文件夹顾名思义，操作数据库的，modules就是操作数据库的mongoose模型。
• config.js是为了方便修改数据库数据。
• interface就是接口文件夹，utils就是工具的意思呗，接口需要用到的axios和账号集权的passport都在这里修改（passport是啥待会儿再细说）。
• 和utils同级的就是users.js 就是user接口的路由,具体的逻辑就在这个文件里
• index.js和dbs，interface文件夹同级。是整个server目录的入口文件。

 

1.2后端配置

首先看一下config.js，直接放代码。

// 导出相应的配置，然后可以方便的用下面的数据，改的话也比较方便修改。
export default {
  //dbs 表示需要连接的服务器
  dbs: "mongodb://127.0.0.1:27017/myblog2",
  //redis对象是提供redis的信息
  redis: {
    get host() {
      return "127.0.0.1";
    },
    get port() {
      return 6379;
    }
  },
  // smtp对象是利用邮箱来发送验证码的
    smtp: {
    get host() {
      return "stmp.qq.com";
    },
    get user() {
      return "470557449@qq.com";
    },
    // 这个pass码是qq邮箱给提供的。下面是随机打的不是真实的。
    get pass() {
      return "pfpeqwddadadasdaf";
    },
    // 制造一个随机的验证码
    get code() {
      return () => {
        return Math.random()
          .toString(16)
          .slice(2, 6)
          .toUpperCase();
      };
    },
    // 创建一个时间，时间就是发送邮箱的时间。
    get expire() {
      return () => {
        return new Date().getTime() + 60 * 60 * 1000;
      };
    }
  }
};

针对于smtp协议，就是你可以利用它来发送验证码的。至于如何获取qq邮箱的pass码？

↓首先打开邮箱点击设置：

↓点击上方navbar的账号按钮

↓滑到下面，找到smtp选项 

 

1.3创建数据模型

铺垫性的东西太多，建议都学完再来看。

1、mongodb和mongoose不详细展开讲了，mongodb可参考我之前写的入门教程（点我！）

2、mongoose大体流程是引入，创建shcema ，创建model。然后进行操作。详情进入官网（点我！）。针对于这个顺序先不引入，引入是index.js里的，现在先讲创建schema和创建model这个部分的。

3、用了些async await和解构赋值的语法，如果有不太理解的可以自动跳转去学习一下新版本的js，推荐阮一峰的《ECMAScript 6 入门教程》（直接点书名！）

 

不多说，直接放代码：

// server/dbs/modules/user.js
// 导入Monogoose
import mongoose from "mongoose";
// 创建schema
const Schema = mongoose.Schema;
// 创建userSchema
const UserSchema = new Schema({
  username: {
    type: String,
    unique: true,
    require: true
  },
  password: {
    type: String,
    require: true
  },
  email: {
    type: String,
    require: true
  }
});
// 导出user模型
export default mongoose.model("User", UserSchema);

现在登录注册需要存入库中的只需要这些，验证方面的缓存数据统一存到redis里。reids的逻辑统一在users的接口里讲。

 

1.4创建users接口 

可能大家没注意到我没说utils里的内容，axios和passport.js 。因为现在时机未到。

现在先配置一下user接口，支起来个架子，然后再谈逻辑

// koa-router必引的，不多解释
import Router from "koa-router";
// 发送验证码用redis，因为可能需求量会很大。redis效率较高
import Redis from "koa-redis";
// 用nodeMailer插件来发送邮件。
import nodeMailer from "nodemailer";
// USer模型，来操作mongodb
import User from "../dbs/modules/users";
// 用来发邮件的配置参数
import Email from "../dbs/config";
// axios来请求数据
import axios from "./utils/axios";
//来引入passprot中间件
import Passport from "./utils/passport";

// 创建一个路由，他的最开始用/users
let router = new Router({ prefix: "/users" });

// 创建一个redis的仓库。
let Store = new Redis().client;

// 导出router
export default router;

 redis的逻辑是引入koa-redis插件，然后新建store对象。然后我们针对store对象进行相应的操作。详细介绍请去npm看（点我！）

 

1.4.1 注册验证码接口

首先第一个任务那就是注册，注册的逻辑是填写邮箱和用户名，确定密码，然后发送验证码邮件进行验证。

那么首先配置的就是发送验证码的路由，因为都是线性的代码，所以直接放代码，代码如下：

 1 // 发送验证码
 2 router.post("/verify", async ctx => {
 3   //获取username
 4   let username = ctx.request.body.username;
 5 
 6   //可以不看6-16行，看到结尾再回来看。
 7   //获得验证码的有效时间
 8   const saveExpire = await Store.hget(`nodemail:${username}`, "expire");
 9   //如果验证码的有效时间太短，就不能再发次发送。
10   if (saveExpire && new Date().getTime() - saveExpire < 0) {
11     ctx.body = {
12       code: -1,
13       msg: "验证请求过于频繁，1分钟内1次"
14     };
15     return false;
16   }
17   //然后用nodeMailer创建一个transport
18   let transporter = nodeMailer.createTransport({
19     // server名称
20     service: "qq",
21     // user的名称和他的pass
22     auth: {
23       user: Email.smtp.user,
24       pass: Email.smtp.pass
25     }
26   });
27   //获取到验证码和时间，还有用户输入的邮箱和用户名
28   let ko = {
29     code: Email.smtp.code(),
30     expire: Email.smtp.expire(),
31     email: ctx.request.body.email,
32     user: ctx.request.body.username
33   };
34   // 邮件的配置文件
35   let mailOptions = {
36     from: `" 博客注册认证邮件" <${Email.smtp.user}>`,
37     to: ko.email,
38     subject: "王梓瑞的博客注册验证码",
39     html: `验证码是${ko.code}，请尽快完成注册！`
40   };
41   await transporter.sendMail(mailOptions, (error, info) => {
42     if (error) {
43       return console.log(error);
44     } else {
45       // 当邮件发送成功了，就将数据保存起来，以后可以拿来用。
46       Store.hmset(
47         `nodemail:${ko.user}`,
48         "code",
49         ko.code,
50         "expire",
51         ko.expire,
52         "email",
53         ko.email
54       );
55     }
56   });
57   ctx.body = {
58     code: 0,
59     msg: "验证码已发送，可能会有延时，有效期1分钟"
60   };
61 });

 

1.4.2注册接口 

等发完验证码 ，我们就可以继续进行注册操作。

同样直接放代码，很好理解。

router.post("/signup", async ctx => {
  // 先获取表单里的信息,这么写是es6的解构赋值语法
  const { username, password, email, code } = ctx.request.body;
  if (code) {
    const saveCode = Store.hget(`nodemail:${username}`, "code");
    const saveExpire = Store.hget(`nodemail:${username}`, "expire");

    if (saveCode == code) {
      if (new Date().getTime() - saveExpire > 0) {
        ctx.body = {
          code: -1,
          msg: "验证码已过期，请重新尝试"
        };
        return false;
      }
    } else {
      ctx.body = {
        code: -1,
        msg: "请填写正确的验证码"
      };
    }
  } else {
    ctx.body = {
      code: -1,
      msg: "未输入验证码"
    };
  }

  let user = await User.find({ username });
  if (user.length) {
    ctx.body = {
      code: -1,
      msg: "已被注册"
    };
    return;
  }
  let nuser = await User.create({ username, password, email });
  console.log(nuser);
  if (nuser) {
    ctx.body = {
      code: 0,
      msg: "注册成功"
    };
  } else {
    ctx.body = {
      code: -1,
      msg: "注册失败"
    };
  }
});

 

 

1.4.3 登录接口

进行到这里就涉及到了passport，因为登陆的状态是需要集中去进行管理的，那么就涉及到Passport这个插件。如果需要快速上手的话，可以看看这篇简书（点我！）

我这里直接就是讲实战了。不多说了，可以参考着上面的简书加上我的代码自行理解。

// server/interface/utils/passport.js
// 引入 passprot ,然后引入本地策略，就是验证用户是否成立，最后引入操作模型。
import passport from "koa-passport";
import LocalStrategy from "passport-local";
import UserModel from "../../dbs/modules/users";

// passport 加载策略中间件，然后通过新建location对象在里面进行对用户的鉴定。
passport.use(
  //创建新的策略，然后三个参数分别是 用户名密码和回调
  new LocalStrategy(async function(username, password, done) {
    //此处用where是表示搜索的时候参数是一个对象
    let where = {
      username
    };
    // 用user的Mongoose的模型来搜索user在数据库中的记录，用res来接收
    const res = await UserModel.findOne(where);
    // 判断res是否存在， 不存在就用策略的回调函数done返回一个用户不存在的错误信息。
    if (res != null) {
      // 如果数据库里的Password和输入的password吻合，就返回一个res
      if (res.password === password) {
        return done(null, res);
      } else {
        // 不吻合就返回一个密码错误。
        return done(null, false, "密码错误");
      }
    } else {
      return done(null, false, "用户不存在");
    }
  })
);

// 序列化和反序列化，没什么大事。
passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(user, done) {
  return done(null, user);
});

// 导出passport集权控制中间件。
export default passport;

 

再放user.js接口里的代码

router.post("/signin", async (ctx, next) => {
  return Passport.authenticate("local", (err, user, info, status) => {
    if (err) {
      ctx.body = {
        code: -1,
        msg: err
      };
    } else {
      if (user) {
        ctx.body = {
          code: 0,
          msg: "登录成功",
          user
        };
        return ctx.login(user);
      } else {
        ctx.body = {
          code: 1,
          msg: info
        };
      }
    }
  })(ctx, next);
});

 

这里可能有人会有疑问，就说我的接口都没有获取到ctx里面的username和password数据，怎么直接就return了passport的对象呢？

问题就在必须在index.js让koa2对象使用bodyParser的中间件。代码如下：

 // bodyParser中的extendTypes必须要加，要不然passport就无法解析username和passport
  app.use(
    bodyParser({
      extendTypes: ["json", "form", "text"]
    })
  );

 

然后就可以解析到登录过来的username和passport了。

 

1.4.4 退出和查询用户接口

直接放代码，没有难度

router.get("/getUser", async ctx => {
  if (ctx.isAuthenticated()) {
    const { username, email } = ctx.session.passport.user;
    ctx.body = {
      user: username,
      email
    };
  } else {
    ctx.body = {
      user: "",
      email: ""
    };
  }
});

 

退出登录

router.get("/exit", async (ctx, next) => {
  await ctx.logout();
  if (!ctx.isAuthenticated()) {
    ctx.body = {
      code: 0
    };
  } else {
    ctx.body = {
      code: -1
    };
  }
});

 

如果你想获取用户数据的话还有第二种方法，从session获取，session是什么？大家自行百度下，简单来说就是服务端的cookie。

然后运用vuex 配合 nuxt.js的nuxtServerInit方法。这个又需要理解vuex和nuxtServerInit，这个放上链接，vuex，nuxtServerInit

项目结构

 

 

如果用vue-cli会有modules文件夹来放模型的，但是nuxt.js直接都放在平级了，详情可参照nuxt.js文档。(点我！)

 

同样直接放代码吧。

//store/user.js
const state = () => ({
  user: ""
});
const mutations = {
  setUser(state, param) {
    state.user = param;
  }
};
const actions = {
  setUser: ({ commit }, param) => {
    commit("setUser", param);
  }
};

export default { state, mutations, actions };

//store/index.js
const actions = {
  async nuxtServerInit({ commit }, { req }) {
    if (req.user) {
      commit("user/setUser", req.user.username);
    }
  }
};

export { actions };

 

 然后我们就可以在页面的任何位置调用 $store.state.user.user 即可获得用户的用户名了。可以省去异步获取的操作。

 

1.5 index.js文件

直接放代码，之前解释的都解释过了，这个就是一个启动后端的文件

// server/index.js
const Koa = require("koa");
const consola = require("consola");
const { Nuxt, Builder } = require("nuxt");

import bodyParser from "koa-bodyparser"; // 这个一开始就要加，不加的话解析不出来request.body。post请求就白给。
import json from "koa-json";
import mongoose from "mongoose";
import dbConfig from "./dbs/config";
import Redis from "koa-redis";
import session from "koa-generic-session";
import users from "./interface/users";
import passport from "./interface/utils/passport";

const app = new Koa();

// Import and Set Nuxt.js options
const config = require("../nuxt.config.js");
config.dev = app.env !== "production";

async function start() {
  // Instantiate nuxt.js
  const nuxt = new Nuxt(config);

  const {
    host = process.env.HOST || "127.0.0.1",
    port = process.env.PORT || 3000
  } = nuxt.options.server;

  //这个是加密用的
  app.keys = ["my", "keyskeys"];
  //是否设置代理
  app.proxy = true;
  //session的前缀
  app.use(session({ key: "my", prefix: "my:uid", store: new Redis() }));
  //mongoose链接Mongodb
  mongoose.connect(dbConfig.dbs, {
    useNewUrlParser: true
  });
  //初始化passport
  app.use(passport.initialize());
  //让passport使用session
  app.use(passport.session());

  // Build in development
  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build();
  } else {
    await nuxt.ready();
  }
  //解析json用的中间件
  app.use(json());
  // bodyParser中的extendTypes必须要加，要不然passport就无法解析username和passport
  app.use(
    bodyParser({
      extendTypes: ["json", "form", "text"]
    })
  );
  // 加载路由中间件
  app.use(users.routes()).use(users.allowedMethods());

  app.use(ctx => {
    ctx.status = 200;
    ctx.respond = false; // Bypass Koa's built-in response handling
    ctx.req.ctx = ctx; // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
    nuxt.render(ctx.req, ctx.res);
  });

  app.listen(port, host);
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  });
}

start();