element-plus+guiplan制作注册页面

---

前言

用guiplan快速制作一个注册页面，模拟用户数据并实现简单的校验等

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、使用步骤

创建一个页面

创建一个注册页面，选择空页面模板即可

复制页面：

切换到做好的登录页面，然后选择这个最外层部分，也就是这个背景，按ctrl+c复制

粘贴页面

再切换到注册页面，然后按ctrl+v将登录页面粘贴进来，修改标题将系统登录改为系统注册

保存页面并创建路由

输入保存位置，并点击保存即可自动保存页面。如果没有启动服务点击右边的启动图标，来启动本地服务。

点击 文件->打开路由配置

点击一键插入路由，注册页面的路由即可配置完成

当然这里用的vite对@符号做了定义所以可以手动修改路由配置。@前面添加一个/ ,name值也可以改为中文“注册”

{
	  path: '/user/register',
	  name: '注册',
	  meta: {
	  icon: 'md-funnel',
	  title: 'user_register'
  },
  component: () => import('/@/views/user/register.vue')
  },

预览注册页面

右下角输入端口，这里是3000，点击打开预览并点击刷新。这里会自动打开当前3000端口的首页，首页顶部会显示整个路由链接，点击注册即可跳转到当前正在制作的注册页面

点击开启编辑模式按钮，系统会自动用红色边框选择当前所选的元素

按方向键移动选择元素，选择el-form元素，可以看到这里所创建的数据与绑定的方法

点击数据可以看到登录页面所用到的数据字段以即校验方法

再添加一个字段password2,并对password2自定义一个校验方法，代码如下

form: {
          username: '',
          password: '',
          password2:''
        },
 rules: {
   username: [
     { required: true, message: '请输入用户名称', trigger: 'blur' },
     { min: 1, max: 15, message: '用户名称必须大于1个字', trigger: 'blur' }
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
     { min: 6, message: '密码长度必须大于6个字', trigger: 'blur' }
   ],
   password2: [
     { required: true, message: '请再次输入密码', trigger: 'blur' },
     {
		validator:(rule,value,callback)=>{
			if(value&&value == this.form.password){
					callback()
			}else{
              callback(new Error("密码输入不一致"));
            }
		},
		trigger:"change"
	}]
 }

再选中输入密码文本框，ctrl+c复制所选的密码文本框，ctrl+shift + v 粘贴到相邻下方，如下图：

将el-form-item校验改为password2

再将文本框绑定改为password2

将文本提示改为请再次输入密码

选中登录按钮将内容改为注册

将绑定的点击方法改为register()

再选中el-form将login方法改为register

可以看到方法里自动含有校验

输入信息测试校验

这样一个注册页面以及相关的表单校验就完成了

源代码

最后附上自动生成的vue源代码

总结

可以看到用guiplan之后，之前做个的页面以及模板都是可以复用的。哪怕只有部分内容也是可以复用。文本框或按钮以及它们绑定的事件，数据，方法都可以一并复制粘贴到其他页面中，删除元素对应的数据，绑定，方法也会一并删除，并不会产生过多的垃圾数据。