• Vuejs实战项目:登陆页面


    1、在view文件夹下创建login文件夹,创建index.vue:代表登录的组件

    配置router.js,导入登录组件

    import Vue from "vue";
    import Router from "vue-router";
    // 导入登录组件’
    import Login from './views/login/index.vue'
    
    Vue.use(Router);
    
    export default new Router({
      // mode: "history",
      //base: process.env.BASE_URL,
      routes: [
        {
          path: '/login',
          name: 'login',  //路由名称
          component: Login  //组件对象
        }
    
      ]
    });

    2、结合Element-UI编写index.vue,index.vue的目录为:views/login/index.vue

    <template>
        <div class="login-container">
            <bubbles-effect :options="options"></bubbles-effect>
          <el-form ref="form" :model="form" label-width="80px" class="login-form">
            <h2 class="login-title" style="center">后台管理系统登录</h2>
            <el-form-item label="账号" class="box">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" class="box">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登录</el-button>
              <el-button class="cancle">取消</el-button>
            </el-form-item>
          </el-form>
          
        </div>
        
        <!-- <vue-canvas-nest></!-->
    
    </template>
    
    
    <script>
    import vueCanvasNest from "vue-canvas-nest";
    //   import bubblesEffect from 'vue-canvas-effect'
    
    export default {
      data() {
        return {
          form: {
            username: "",
            password: ""
          },
          options: {
            color: "rgba(225,225,225,0.5)", //Bubble color
            radius: 15, //Bubble radius
            densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
            clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
          }
        };
      },
      components: {
        vueCanvasNest
        // bubblesEffect
      },
      methods: {
        onSubmit() {
          console.log("submit!");
        }
      }
    };
    </script>
    
    
    <style scoped>
    .login-form {
       350px;
      /* 上下嫌隙 160px,左右自动居中 */
      margin: 160px auto;
      background-color: rgb(255, 255, 255, 0.8);
      padding: 28px;
      border-radius: 20px;
      /* border: solid 1px black; */
      box-shadow: 0 0 30px 3px rgba(119,118,118,0.33);
    }
    
    .login-container {
      position: absolute;
       100%;
      height: 100%;
    }
    
    .login-title {
      color: #303133;
      text-align: center;
    }
    
    .cancle {
        margin-left: 80px; 
    }
    
    .box {
         margin-left: 0px; 
    }
    </style>

    3、表单验证

      1、在el-form中导入 :rules="rules",el-form-item导入pro=“属性名称”

    在export的data中配置rules:

     rules: {
            username: [
                { required: true, message: '密码不能为空', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '密码不能为空', trigger: 'blur' }
            ]
          },

    配置methods:

    methods: {
        submitForm(formName) {
            //定位到表单,再进行校验
            this.$refs[formName].validate(valid => {
                // console.log(valid)      //成功为true,失败为false
                if(valid){
                    // 提交表单给后台进行验证是否正确
                }else{
                    console.log('验证失败')
                    return false
                }
            })
        },
    //     onSubmit() {
    //       console.log("submit!");
    //     }
    //   }
      }

    4、easyMock添加系统登录后台服务接口

      1、修改.env.develoment文件中的目标服务接口地址---------VUE_APP_SERVICE_URL

      2、配置 Mock.js,创建新的接口

        ①当登录成功后,响应状态码2000和token值,token用来认证(后面请求只要是成功的,状态码均为2000,这个是与后台接口的约定)

      *  请求URL:/user/login

      *  请求方式:post

      *  描述: 登录认证

      *  mock.js 接口配置:

    {
      "code": 2000, //状态码
      "flag": true,
      "message": '验证成功',
      "data": {
        "token": "admin"
      }
    }

        ②通过token获取用户信息:

          添加响应用户信息模拟接口:

          *  请求URL:/user/info/{token}

          *  请求方式:get

          *  描述:响应用户信息

          *  mock.js 配置

    {
      "code": 2000,
      "flag": true,
      "message": '成功获取用户信息',
      "data": {
        "id|1-10000": 1,
        "name": "@cname",
        "roles": ["manager"]
      }
    }

    5、登录逻辑实现

    在src/api 下创建login.js,导出两个方法

    import request from '@/utils/request'
    
    // 导出函数
    export function login(username, password) {
        return request({
            url: '/user/login',
            method: 'post',
            data: {
                username,   //username: username
                password
            }
        })
    }
    
    // 获取返回的用户信息
    export function getUserInfo(token) {
        return request({
            url:  `/user/info/${token}`,
            method: 'get'
        })
    }

    表单校验:

    methods: {
        submitForm(formName) {
            //定位到表单,再进行校验
            this.$refs[formName].validate(valid => {
                // console.log(valid)      //成功为true,失败为false
                if(valid){
                    // 提交表单给后台进行验证是否正确,then后面传入回调函数
                    login(this.form.username,this.form.password).then(response => {
                        const resp = response.data
                        console.log(resp,resp.flag,resp.data.token)
                        if (resp.flag) {
                            // 当resp.flag为true时,表示验证成功
                            // 通过token获取用户信息
                            getUserInfo(resp.data.token).then(response => {
                                const respUser = response.data
                                console.log(respUser)
                                if (respUser.flag){
                                    // 获取到用户的数据
                                    //成功
                                    console.log('userInfo',respUser.data)
                                    //  1.保存token,用户信息
                                    localStorage.setItem('msm-user', JSON.stringify(respUser.data))
                                    localStorage.setItem('msm-token', resp.data.token)
                                    //  前往首页
                                    this.$router.push('/')
                                }else{
                                    this.$message.error(respUser.message);
                                }
                                
                            })
                        }else {
                            // 未通过,弹出警告
                            this.$message.error(resp.message);
                        }
                    })
    
                }else{
                    console.log('验证失败')
                    return false
                }
            })
        },
    //     onSubmit() {
    //       console.log("submit!");
    //     }
    //   }
      }
  • 相关阅读:
    Splashtop :符合 HIPAA 标准的远程桌面软件
    学生如何在家中访问学校许可的软件
    Splashtop用于远程实验室的功能得到增强
    docker环境安装,镜像和容器常用命令
    vue-cli入门
    webpack快速入门
    Vue路由vue-router
    Vue组件化
    Vue指令
    Vue实例
  • 原文地址:https://www.cnblogs.com/flypig666/p/11580925.html
Copyright © 2020-2023  润新知