专栏首页Code思维奇妙屋浅入深出Vue:注册

浅入深出Vue:注册

基本布局已经有了, 现在我们来开始做我们的注册页面~ 当然需要注册才能发表文章啊(糟老头子坏得很, 我可以只有我一个人能发啊)。

这里我们设定只有注册才能发表文章,也就淡化了管理员这个概念。在开发中先将原型做出来,然后再对其进行迭代、重构来达到我们最终想要的效果。

准备

  1. 新建 vue 组件,编写注册页面的代码
  2. 为这个组件建立路由对象

这里我们依旧是采用 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>

上面代码中的 69都是计算得来的,总共是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 库用来向后端接口发起异步请求,具体的使用方式可以查阅官方文档:

看云文档

到底为止,注册功能算是完成了80%了,剩下的等把登录页面写完之后,再加上:

  • 注册成功后跳转到登录页面即可

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅入深出Vue:文章编辑

    这里咱们就使用 markdown 作为编辑语言吧,简洁通用。那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢。

    若羽
  • 浅入深出Vue:文章列表

    这里我们选择 ElementUI 中的 Table 组件来进行展示,文章列表接口的数据定义如下:

    若羽
  • 浅入深出Vue:登录

    入门篇可能代码篇幅会较多一些,在后面若羽会将整个项目的代码传到 github 上去,让大家可以直接下载下来运行,修改。

    若羽
  • Vue使用Element实现增删改查+打包

    在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

    憧憬博客
  • jQuery 写法示例

    Joel
  • DOM 操作写法示例

    Joel
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • SaaS-HRM企业管理

    在src目录下创建文件夹,命名规则:module-模块名称()在文件夹下按照指定的结构配置assets,components,pages,router,stor...

    cwl_java
  • 表格中的输入框验证

    IT茂茂
  • 【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉

    在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。

    魏晓蕾

扫码关注云+社区

领取腾讯云代金券