1.环境配置
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模板
3. nuxtjs中请求数据,我们使用 Nuxt 官方提供的 @nuxtjs/axios 安装后,在 nuxt.config.js 中加上:
export default { ... modules: [ '@nuxtjs/axios' ], ... }
就可以在页面中通过 this.$axios.get
来获取数据,不需要在每个页面都单独引入 axios.
//验证接口 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 . 中间件可以使您的自定义的函数在渲染页面之前运行
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 = '/' } }) }