基本布局已经有了, 现在我们来开始做我们的注册页面~
当然需要注册才能发表文章啊 (糟老头子坏得很, 我可以只有我一个人能发啊).
这里我们设定只有注册才能发表文章, 也就淡化了管理员这个概念. 在开发中先将原型做出来, 然后再对其进行迭代, 重构来达到我们最终想要的效果.
准备
新建 vue 组件, 编写注册页面的代码
为这个组件建立路由对象
这里我们依旧是采用 ElementUI 中的组件, 因为是注册, 需要提交表单.
因此我们来看看 ElementUI 中表单组件相关的文档:
官方文档: 点击查看
实现登录页面
首先先在 views 目录下新建 Signup.vue 组件.
然后编写视图代码:
- <template>
- <div>
- <el-form>
- <el-form-item prop="username" label="用户名">
- <el-input></el-input>
- </el-form-item>
- <el-form-item prop="password" label="密码">
- <el-input type="password"></el-input>
- </el-form-item>
- <el-form-item prop="rePassword" label="确认密码">
- <el-input type="password"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" size="small"> 注册 </el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script>
- export default {
- name: "Signup"
- }
- </script>
- <style scoped>
- </style>
这里只是实现了页面, 还没有实现其他的逻辑.
建立路由对象
其实路由对象应该和组件建立一起, 当你的组件新建之后, 就应该去为它建一个路由对象.
这样你能够边写代码, 边看实际效果.
- import Vue from 'vue'
- import Router from 'vue-router'
- import Home from './views/Home.vue'
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'home',
- component: Home
- },
- {
- path: '/about',
- name: 'about',
- component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
- },
- {
- path: '/signup',
- name: 'signup',
- component: () => import('./views/Signup.vue')
- }
- ]
- })
好了, 现在我们可以来看看效果:
这个效果有点感人啊, 整个元素全部铺开在页面上, 完全没有用户体验了.
不行, 我们得改改, 虽说不是专业的设计师. 但是基本的设计还是要有的
重构布局
这里我们依旧在 ElementUI 中查找看是否有现成的解决方案:
布局文档: 点击查看
很好, 这里我们可以利用 el-row, el-col 来进行布局.
它是基于 24 分栏的栅栏布局, 我们想要让这个表单居中应该怎么办呢?
要居中的话, 左右两边的栅栏数相等即可, 也就实现了表单这个块元素是位于水平居中的.
代码:
- <template>
- <div>
- <el-row>
- <el-col :span="6" :offset="9">
- <el-form label-width="80px">
- <el-form-item prop="username" label="用户名">
- <el-input></el-input>
- </el-form-item>
- <el-form-item prop="password" label="密码">
- <el-input type="password"></el-input>
- </el-form-item>
- <el-form-item prop="rePassword" label="确认密码">
- <el-input type="password"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" size="small"> 注册 </el-button>
- </el-form-item>
- </el-form>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- export default {
- name: "Singup"
- }
- </script>
- <style scoped>
- </style>
上面代码中的 6 和 9 都是计算得来的, 总共是 24, 左右两边又要相等, 那么中间的表单占用了 6 格, 还剩下 18 格. 平分下来每边就是 9 格了.
现在效果就好很多了:
编写登录逻辑
页面已经完成, 剩下的就是编写注册逻辑:
点击注册, 首先验证密码和确认密码是否一致
密码一致则向后端接口发起请求
这里的接口我们使用 postman 模拟出来的接口.
在这之前我们先把数据定义一下, 并且绑定到表单元素中去:
- data() {
- return {
- model: {
- username: '',
- password: '',
- rePassword: ''
- }
- };
- },
- <template>
- <div>
- <el-row>
- <el-col :span="6" :offset="9">
- <el-form label-width="80px">
- <el-form-item prop="username" label="用户名">
- <el-input v-model="model.username"></el-input>
- </el-form-item>
- <el-form-item prop="password" label="密码">
- <el-input type="password" v-model="model.password"></el-input>
- </el-form-item>
- <el-form-item prop="rePassword" label="确认密码">
- <el-input type="password" v-model="model.rePassword"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" size="small"> 注册 </el-button>
- </el-form-item>
- </el-form>
- </el-col>
- </el-row>
- </div>
- </template>
首先给注册按钮添加对应事件:
<el-button type="primary" size="small" @click="submit"> 注册 </el-button>
然后在 methods 中实现此函数:
- submit() {
- if(this.model.password !== this.model.rePassword){
- this.$message.error('两次出入密码不一致.');
- return ;
- }
- axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/signup', this.model)
- .then(res => {
- if(res.data.Code === 200){
- this.$message.success("注册成功");
- }
- });
- }
实际效果:
这段逻辑中使用了 axios 库用来向后端接口发起异步请求, 具体的使用方式可以查阅官方文档:
看云文档 https://www.kancloud.cn/yunye/axios/234845
到底为止, 注册功能算是完成了 80% 了, 剩下的等把登录页面写完之后, 再加上:
注册成功后跳转到登录页面即可
来源: https://www.cnblogs.com/By-ruoyu/p/11190854.html