关于二手车系统学习--登录模块

1.样式1-17行

 <div class="cheader">
      <div style="width: 80%;margin: 0 auto;line-height: 50px;padding-top: 10px">
        <el-row>
          <el-col
            :span="5"
            style="font-size: 20px;cursor: pointer;color: #00ae66;font-weight: bold;margin-left:40px"
          >您身边的二手车交易专家</el-col>
                           
          <el-col :span="8">
            <el-input
             size="medium"
              placeholder="请输入内容"
              v-model="keywords"
              class="input"
            ></el-input>
          </el-col>

这段代码是一个Vue.js模板，可能用于构建一个网页的头部（header）。它利用了Element UI组件库中的el-row、el-col和el-input组件来布局和提供交互功能。下面是对这段代码的解释：
<div class="cheader">: 这表示一个HTML div元素，包含了一个CSS类cheader，用于定义此区域的样式。
<div style="width: 80%;margin: 0 auto;line-height: 50px;padding-top: 10px">: 这是另一个div，设置了内联样式，包括宽度、自动居中、行高和上填充（padding-top）。这通常用于将内容居中并设置合适的行高。

- <el-row>: 这是Element UI中的行布局组件，用于组织行内的子组件。

- <el-col :span="5" ...>: 这是Element UI中的列布局组件，span属性定义了这列占据的宽度份额，取值范围为1到24。此列的样式设置包括：字体大小、鼠标指针样式、颜色、字体粗细和左侧外边距。

文本: “您身边的二手车交易专家” 是这列中显示的文本。根据样式设置，这个文本以20px字体大小显示，带有绿色字样和粗体。
- <el-col :span="8">: 这是另一个列，宽度份额为8，包含一个输入框。

- <el-input ...>: 这是Element UI中的输入组件，带有placeholder属性以提供占位提示信息，v-model="keywords"绑定了Vue组件中的keywords变量，这意味着输入框的内容会自动与keywords变量同步。class="input"为这个输入框添加了额外的CSS类。
这段代码总体上展示了一个网页头部的布局，其中包括一个标题和一个用于输入搜索关键词的文本输入框。

2.搜索框

<el-col :span="8">
    <el-input
     size="medium"
      placeholder="请输入内容"
      v-model="keywords"
      class="input"
    ></el-input>
  </el-col>
  <el-button size="medium" 
  style="height:100%; float:left; margin-top:8px; 
  line-height:16px; margin-left:0px;" type="success" 
  class="cbtn-bg" @click="searchcar()">我要搜车</el-button>

在这里插入图片描述

2.1数据定义

<script type="text/ecmascript-6">
import cfooter from "../components/cfooter";
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
export default {
  components: {
    cfooter: cfooter
  },
  name: 'login',
  data() {
    return {
      keywords:"",
     
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      ruleForm: {
        username: '',
        password: '',
        usertype: 2
       
      },
    
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },

这是Vue.js组件的一个脚本，名为login。
组件导入了cfooter组件，以及从…/api/userMG导入的login函数。还使用了设置、获取和删除cookie的辅助函数（setCookie, getCookie, delCookie），以及js-md5库用于密码哈希。

在这里插入图片描述

3.生命周期

mounted () {
    this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
    })
},

  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem('userdata'))
    
    this.getuserpwd()
    
  },

在这里插入图片描述

4.车辆搜索界面的代码

searchcar(params){ 
          
          this.$router.push({
                path:'/login'
                ,query: {
                  keywords:this.keywords
                  }}
                )
        },

在这里插入图片描述

5.登录模块的方法

 submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true
         
          // 注释
          this.ruleForm.usertype=2;
          login(this.ruleForm).then(res => {
            if (res.status==0) {
              if (this.rememberpwd) {
                //保存帐号到cookie，有效期7天
                setCookie('user', this.ruleForm.username, 7)
                //保存密码到cookie，有效期7天
                setCookie('pwd', this.ruleForm.password, 7)

              } else {
                delCookie('user')
                delCookie('pwd')

              }
              //如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                // 缓存token
                localStorage.setItem('logintoken', res.data.token)
                // 缓存用户个人信息
                localStorage.setItem('userdata', JSON.stringify(res.data))
                this.$store.commit('login', 'true')
                this.$router.push({ path: '/login' })
              }, 650)
                        this.$message({
              message: '登录成功',
              type: 'success'
            })
            } else {
              this.$message.error(res.msg)
              this.logining = false
              return false
            }
          })
        } else {
          // 获取图形验证码
          this.getcode()
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }
      })

    },

在这里插入图片描述

6.请求的管理

在这里插入图片描述
写的关于用户发的请求的整理

7.登录后端代码

controller层

 @ApiOperation(value = "登录", notes = "", httpMethod = "POST", produces = MediaType.APPLICATION_JSON_VALUE)
    @PostMapping(value = "/login")
    public Result login(HttpSession session,
                        @RequestBody LoginVo loginVo) throws Exception {

        Users user=usersService.login(loginVo);
        if (StringUtil.isEmpty(user)){
            return Result.createByErrorMessage("用户名或密码错误");
        }

        if (user.getStatus()==1){
            return Result.createByErrorMessage("您的账号已被禁用，请联系管理员");
        }

        user.setPassword(null);
        session.setAttribute("user",user);
        return Result.createBySuccess("登录成功",user);

    }

在这里插入图片描述

Service层

public Users login(LoginVo loginVo) throws GeneralSecurityException {
        LambdaQueryWrapper<Users> lambdaQueryWrapper = new LambdaQueryWrapper<Users>()
                .eq(Users::getUsername,loginVo.getUsername())
                .eq(Users::getIdentity,loginVo.getUsertype());
        Users users=usersMapper.selectOne(lambdaQueryWrapper);
        if (StringUtil.isEmpty(users)){
            return null;
        }
        String pwd= MD5Util.MD5EncodeUtf8(loginVo.getPassword());
        System.err.println(pwd);
        if (!pwd.equals(users.getPassword())){
            return null;
        }
        return users;
    }