vue全家桶+Koa2开发笔记(6)--app开发

1.环境配置

详见文章《Nuxt 开发 - 项目初始化》

 1.1  使用nuxt脚手架  https://zh.nuxtjs.org/guide/installation

 1.2 在node中不支持使用 import，例如修改node的启动文件 server/index.js 中： const Koa = require('koa')  为  import Koa from 'koa' 

就会报错：

解决方法：

步骤一：在json文件中修改 dev和start命令：

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
  },

步骤二：新建.babelrc 文件

{
  "presets":["es2015"]
}

步骤三：安装 

npm install babel-preset-es2015

npm install babel-cli -S 

问题二：不支持scss

安装  npm install sass-loader node-sass 

2. 快速编辑html . 在vscode中 输入  scaffold ，快速生成vue模板

Emmet插件使用方法总结

HTML/CSS代码快速生成

 

3. nuxtjs中请求数据，我们使用 Nuxt 官方提供的 @nuxtjs/axios 安装后，在 nuxt.config.js 中加上：

export default {
  ...
  modules: [
    '@nuxtjs/axios'
  ],
  ...
}

就可以在页面中通过 this.$axios.get 来获取数据，不需要在每个页面都单独引入 axios.

4.  Node.js使用Nodemailer发送邮件

//验证接口
router.post('/verify', async (ctx, next) => {
  let username = ctx.request.body.username
  const saveExpire = await Store.hget(`nodemail:${username}`, 'expire')
  if (saveExpire && new Date().getTime() - saveExpire < 0) {
    ctx.body = {
      code: -1,
      msg: '验证请求过于频繁，1分钟内1次'
    }
    return false
  }
  //发邮件功能 
  let transporter = nodeMailer.createTransport({
    service: 'qq',
    auth: {
      user: Email.smtp.user,
      pass: Email.smtp.pass
    }
  })
  //接受的信息
  let ko = {
    code: Email.smtp.code(),
    expire: Email.smtp.expire(),
    email: ctx.request.body.email,
    user: ctx.request.body.username
  }

  let mailOptions = {
    from: `"认证邮件" <${Email.smtp.user}>`,
    to: ko.email,
    subject: '《慕课网高仿美团网全栈实战》注册码',
    html: `您在《慕课网高仿美团网全栈实战》课程中注册，您的邀请码是${ko.code}`
  }
  //开始发送
  await transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return console.log(error)
    } else {
      Store.hmset(`nodemail:${ko.user}`, 'code', ko.code, 'expire', ko.expire, 'email', ko.email)
    }
  })
  ctx.body = {
    code: 0,
    msg: '验证码已发送，可能会有延时，有效期1分钟'
  }
})

5 . 中间件可以使您的自定义的函数在渲染页面之前运行

NUXT 中间件 Middleware

middleware: async (ctx)=>{
        let {status,data:{code}} = await ctx.$axios.get('/users/exit')
        if(status == 200 && code == 0){
            window.location.href = '/'
        }
}

注意code的获取等同于下面

middleware: async (ctx) => {
    let {status,data}=await ctx.$axios.get('/users/exit')
    if(status===200&&data&&data.code===0){
      window.location.href='/'
    }
  }

 使用中间件获取方式和异步await等同于下面：

created :function(){
        this.$axios.get('/users/exit').then((res)=>{
            if(res.status == 200 && res.data.code == 0){
                window.location.href = '/'
            }
        }) 
 }