购物商城系统设计与实现总结_登录功能的实现

用户只有登陆系统后才能使用全部功能，例如购物车和个人订单，否则点击这些功能都会跳转到登录页面。登陆页面填写信息有误时，都会显示错误提示，可以点击重置按钮，将输入框置空重新输入。若没有账号，可点击左下角提示文字跳转到注册页面进行注册。登陆成功后会弹出提示框提示成功。

 

<template>
  <div id="Login">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="@/assets/imgs/logo.jpg" alt />
      </div>
      <!-- 登陆表单区域 -->
      <form class="login_form">
        <!-- 用户名  通过双向绑定，将表单项绑定为一个变量-->
        <div>
          <input type="text" v-model="username" placeholder="请输入用户名" @blur="check_username" v-focus>
          <i class="iconfont icon-yonghu icon-user"></i>
          <span class="error_tip" v-show="error_username">{{tip_username}}</span>
        </div>
        <!-- 密码 -->
        <div>
          <input v-model="password" type="password" placeholder="请输入密码" @blur="check_password">
          <i class="iconfont icon-ai-password icon-pwd"></i>
          <span class="error_tip" v-show="error_password">{{tip_password}}</span>
        </div>
        <div>
          <!-- 验证码 -->
          <input type="text" v-model="code" placeholder="请输入右图所示验证码" id="code_input" @blur="check_code">
          <span class="pic_code" :style="{backgroundColor:gencode.bgColor,color:gencode.codeColor}" @click="generatedCode()">{{gencode.codeNumber}}</span>
          <span class="error_tip" v-show="error_code">{{tip_code}}</span>
        </div>
      </form>
      <!-- 按钮区 -->
      <div class="btns">
        <button @click="login">登录</button>
        <button @click="resetLoginForm">重置</button>
      </div>
      <div class="goreg" onselectstart="return false">没有账号，<span @click="$router.push({path:'/home/register'})">去注册&gt;&gt;</span></div>
    </div>
  </div>
</template>

<script>
import { getLoginData } from '@/api/index'
// 混入属性，验证码生成方法复用
import {genCodeMixin} from '@/assets/js/mixin'
export default {
  name: 'Login',
  // 混入对象
  mixins:[genCodeMixin],
  data() {
    return {
      username: '',
      password: '',
      //错误提示信息
      tip_username:'',
      tip_password:'',
      error_username:false,
      error_password:false,
    }
  },
  mounted() {
    //生成图形验证码
    this.generatedCode()
  },
  methods: {
    //检测密码
    check_password() {
      let re = /^[a-zA-Z0-9]{8,20}$/;
      if(re.test(this.password)){
        this.error_password=false;
      }else {
        this.tip_password='注意：密码必须由8-20个大小写字母、数字组成';
        this.error_password=true;
      }
    },
    //点击重置按钮,重置登陆表单使用户名，密码为空
    resetLoginForm() {
      this.username = ''
      this.password = ''
    },
    //登陆判断
    login() {
      if(this.error_username || this.error_password || this.error_code){
        alert('请将有误信息修改正确后再提交')
      }else{
        //根据输入的用户名，进行请求，查找是否有对应的密码
        getLoginData({username: this.username})
        .then(res => {
          //如果查找为空，提示用户名为空
          if(res == undefined || res.length <= 0){
            this.tip_username = '用户名为空'
            this.error_username=true;
          }
          //如果返回数据库的密码和输入密码不一致，提示密码错误
          else if(this.password != res[0].password){
            this.tip_password = '密码错误'
            this.error_password=true;
          }
          else{
            //使用 $emit 触发父组件home 的事件islogin 并传递用户名
            sessionStorage.setItem("userName", this.username);
            alert('登陆成功')
            this.$emit('islogin')
            this.$router.push({path:'/home/first'})
          }
        })
        .catch(error => {
          alert('登录error')
        })
      }
    },
  }
}
</script>

<style scoped>
/* 验证码和按钮样式复用 */
@import '../../assets/css/loginRegis.css';
#Login {
  width: 100%;
  height: 650px;
  background-color: #85cffe;
}
.login_box {
  width: 430px;
  height: 350px;
  padding-right: 10px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}
.login_form div{
  height: 68px;
}
.login_form input {
  height: 35px;
  width: 360px;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding-left: 35px;

}
.icon-user {
  height: 35px;
  width: 35px;
  position: absolute;
  left: 30px;
  top: 10px;
}
.icon-pwd {
  height: 35px;
  width: 35px;
  position: absolute;
  left: 30px;
  top: 75px;
}
.tips{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: red;
  position: absolute;
  left: 50px;
  bottom: 45px;
}
.goreg{
  margin-left: 15px;
  margin-top: 310px;
  font-size: 14px;
}
.goreg span{
  color: #237dd6;
  cursor: pointer;
}
</style>

       登陆页面中，用户名和密码的输入格式判断和注册页方式相同，如果输入有错误，则显示提示信息在对应输入框下，并将输入内容清空。

       如果输入格式无误，则根据输入的用户名，进行请求，查找数据库对应信息表，返回输入用户名对应的信息。若返回为空，则说明未查找到与输入用户名相同的用户信息，提示用户名为空。若返回不为空，比对返回的密码和输入的密码是否相同，不同则密码错误，相同则登陆成功。

 登陆成功时，利用父子组件传值，使用 $emit 触发父组件home 的事件islogin, 并通过sessionStorage保存用户名作为路由切换时，登陆状态的判断，因为某些页面需要登录才开放进入权限。存储的用户名在用户点击查看购物车、订单、个人信息等页面信息时，也可以利用其查询对应信息。