Vuejs实战项目:登陆页面

Posted flypig666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 
  width: 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;
  width: 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!");
//     
//   
  

 

以上是关于Vuejs实战项目:登陆页面的主要内容,如果未能解决你的问题,请参考以下文章

Vue实战-实现登陆页面

Vue实战-实现登陆页面

java项目实战Servlet具体解释以及Servlet编写登陆页面

WebGL初探—Three.js全景图实战

vue整合pdfjs,实现pdf文件预览

vuejs实战