搭建登陆页面与使用element-ui的检验规则还有后台服务的搭建 2

一：前端

1：把APP.vue里的东西删一删，然后router里面引入的也删一删

2：在views里面创建login文件夹 里面创建index.vue

3：然后再router里面引入登陆组件（import Login from "@/views/login"）然后再routers里面进行配置--{url的地址 ，当前路由的名称，当前路由地址匹配的组件是哪个}。

4：APP.vue里面也有路由出口 进行一下测试。这时候把地址换成/login 就会显示登录组件。

登录页面能够正常显示，那么下面进行页面的显示--利用element-ui

 

5：找frmo表单验证

复制经典表单的内容，粘贴到index.vue中--只留第一个el-from就可以其余删除

然后进行修改 名称 lable是表单的名称，其中from要在data里面定义一下，要不然会报错

data() {
    return {
        form:{
            username:'',
            passname:''
        }
    };

同时也要在onsubmit方法也要再method定义一下-复制ele-ui表单内容

基础页面就创建好了，进行样式修改--样式改成下面这样基础页就搭建好了，下面进行表单验证。

6： 校验规则：

用户名，密码必须输入还有必须大于4位与12位，必须是英文，数字和下划线组成的

去element-ui里面找自定义校验规则

普通表单两个步骤进行校验：

通过v-bind绑定一个rules属性  然后再通过props写出要校验的名字，然后就在data里面定义rules，rules里面写校验片段的规则（校验是可以从表单复制的）

自定义表单校验：

绑定rules属性  然后props写出校验的名字，然后在data里面定义这个校验规则是什么，然后再在rules里面通过validator添加你属性要规定的规则方法是哪个。下面这个是自定义的例子

 回过来说这个校验怎么办：详解：

 

 

 这都写完了，我要进行登录了

{

表单的ref可以理解成一个id，登录里面的方法那个命名必须和ref一样，有了ref这个属性可以在vue当中，通过js代码的this.$refs[],[]里面填ref的名字，就能拿到当前的dom元素，如果我想获取dom元素，就添加一个ref属性

}

还是说提交方法，这两个必须对应上，保证 submitForm方法提交的传给他的形参

复制element-ui里面的方法---formNmae的值是from

 到这为止登录成功可以成功弹出弹窗

 

二：现在进行后台服务搭建

创建sms-pro-server文件夹

npm init -y  让package.json出来

npm i -s express blueimp-md5 body-parser mongoose  ----body-parser主要是获取post请求提交上来的数据

 中间件的使用要注意，还有一个路由中间件没写。