Vue全家桶+SSR+Koa2全栈开发美团网⑧—

在pages目录下新建register.vue，点击注册按钮就能跳转至http://localhost:3000/register，因为在user.vue中写过

<nuxt-link to="/register" class="register">注册</nuxt-link>

但是注册的模板和首页的模板不一样，所以在layouts目录下新建一个空白模板black.vue，写入

<template><div class="layout-black"><nuxt/></div>
</template><script>
export default {}
</script>

<template><div class="page-register"><article class="header"><header><a href="/" class="site-logo"></a><span class="login"><em class="bold">已有美团账号？</em><a href="/login"><el-button type="primary" size="small">登录</el-button></a></span></header></article><section><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="昵称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="ruleForm.email"></el-input><el-button size="mini" round @click="sendMsg">发送验证码</el-button><span class="status">{{statusMsg}}</span></el-form-item><el-form-item label="验证码" prop="code"><el-input v-model="ruleForm.code" maxlength="4"></el-input></el-form-item><el-form-item label="密码" prop="pwd"><el-input v-model="ruleForm.pwd" type="password"></el-input></el-form-item><el-form-item label="确认密码" prop="cpwd"><el-input v-model="ruleForm.cpwd" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="register">同意以下协议并注册</el-button><div class="error">{{error}}</div></el-form-item><el-form-item><a class="f1" href="http://www.meituan.com/about/terms" target="_blank">《美团网用户协议》</a></el-form-item></el-form></section></div>
</template><script>
export default {layout: 'black',data () {return {statusMsg: '',error: '',ruleForm: {name: '',email: '',code: '',pwd: '',cpwd: '',},rules: {name: [{required: true, type: 'string', message: '请输入昵称', trigger: 'blur'}],email: [{required: true, type: 'email', message: '请输入邮箱', trigger: 'blur'}],pwd: [{required: true, message: '创建密码', trigger: 'blur'}],cpwd: [{required: true, message: '确认密码', trigger: 'blur'}, {validator: (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'))}else if (value !== this.ruleForm.pwd) {callback(new Error('两次输入密码不一致'))}else {callback()}}, trigger: 'blur'}]}}},methods: {sendMsg () {},register () {}}
}
</script>

Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册相关推荐

Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发
首页header组件开发 pages目录下的index.vue组件页面默认引用layouts目录下的default.vue模板,所以我们在default.vue模板中直接使用element模板 < ...
Vue全家桶+SSR+Koa2全栈开发美团网笔记
实战准备 1.环境准备与项目安装 node 8.12 npm 6.4.1 vue 2.5.17 webpack 4.19 nuxt 2.0.0 1. npm install -g npx 2. npx ...
Vue全家桶+SSR+Koa2全栈开发美团网③——mongoose基础
先安装mongoDB,启动数据库然后安装mongoDB可视化数据管理工具Robo 3T 还是在koa2项目下安装mongoose npm i mongoose 在koa2根目录下新建一个dbs文件夹 ...
【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程整合学习目录（持续更新中）
写在开头大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
Vue全家桶+MongoDB+Koa2全栈开发网站
github网址MT-PC 实战准备项目安装: npm install -g npx npx create-nuxt-app project-name npm install --update-bi ...
实战：Vue全家桶+SSR+Koa2实现美团网
目录项目演示地址 [高仿美团网](http://mt-app.qkongtao.cn/) 源码下载 [码云](https://gitee.com/KT1205529635/mt-app) 项目介绍 ...
python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...
python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例新建项目login_ajax 修改urls.py,增加路径 fro ...
基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...
慕课网python就业_python全栈开发慕课网
前端 web框架: flask:简单.轻量.灵活性大 (官网,stck overflowa); 目录结构:配置,发布,资源,日志,测试... 前后端协作:整体发布,前后端分离发布 django:简单, ...

Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册

Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册相关推荐

最新文章

热门文章