• 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 = '/'
                }
            }) 
     }
  • 相关阅读:
    Android开发-API指南-服务
    Android开发-API指南-<uses-sdk>
    User Experience Questionnaire (UEQ)
    Git Remote (转)
    Start and Stop Bitbucket Server
    Bitbucekt Reference
    JIRA reference
    Glassfish 4 修改server.log 等配置
    SVN Trunk Tag Branch
    设置eclipse的Maven插件引入依赖jar包后自动下载并关联相应的源码(转)
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/10385353.html
Copyright © 2020-2023  润新知