• 登录注册实现

    一、前端页面注册到Vue

    1.创建登录和注册组件

    1. <template>
    2.   <div>
    3.     login
    4.   </div>
    5.  
    6. </template>
    7.  
    8. <script>
    9. export default {
    10.   name: 'HomeView',
    11.   data() {
    12.     return {
    13.  
    14.     }
    15.   },
    16.   methods: {
    17.   },
    18. }
    19. </script>
    1. <template>
    2.   <div>
    3.     register
    4.   </div>
    5.  
    6. </template>
    7.  
    8. <script>
    9. export default {
    10.   name: 'Register',
    11.   data() {
    12.     return {}
    13.   },
    14.   methods: {},
    15. }
    16. </script>

    2.组件路由注册

    在router/index.js文件中注册 登录和注册的vue组件路由

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import HomeView from '../views/HomeView.vue'
    4. import Login from '../views/Login.vue'
    5. import Register from '../views/Register.vue'
    6.  
    7. Vue.use(VueRouter)
    8.  
    9. const routes = [
    10.   {
    11.     path: '/',
    12.     name: 'Login',
    13.     component: Login
    14.   },
    15.   {
    16.     path: '/register',
    17.     name: 'Register',
    18.     component: Register
    19.   },
    20.   {
    21.     path: '/home',
    22.     name: 'home',
    23.     component: HomeView
    24.   },
    25.   {
    26.     path: '/about',
    27.     name: 'about',
    28.     // route level code-splitting
    29.     // this generates a separate chunk (about.[hash].js) for this route
    30.     // which is lazy-loaded when the route is visited.
    31.     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    32.   }
    33. ]
    34.  
    35. const router = new VueRouter({
    36.   routes
    37. })
    38.  
    39. export default router

    二、Login页面编写

    1. <template>
    2.   <body id="poster">
    3.   <el-form class="login-container" label-position="left" label-width="0px">
    4.     <h2 class="login_title">
    5.       系统登录
    6.     </h2>
    7.     <el-form-item label="">
    8.       <el-input type="text" v-model="loginFrom.loginName" placeholder="账号"></el-input>
    9.     </el-form-item>
    10.  
    11.     <el-form-item label="">
    12.       <el-input type="password" v-model="loginFrom.password" placeholder="密码"></el-input>
    13.     </el-form-item>
    14.  
    15.     <el-form-item>
    16.       <el-button type="primary" style="width: 100%;background:#505458;border:none" @click="login">登录</el-button>
    17.       没有账号？<el-button @click="toRegister" style="margin-top: 5px">点我注册</el-button>
    18.     </el-form-item>
    19.   </el-form>
    20.   </body>
    21.  
    22. </template>
    23.  
    24. <script>
    25. export default {
    26.   name: 'HomeView',
    27.   data() {
    28.     return {
    29.       loginFrom: {
    30.         name: '',
    31.         loginName:'',
    32.         password:''
    33.       }
    34.     }
    35.   },
    36.   methods: {
    37.     login() {
    38.       console.log('submit!',this.loginFrom);
    39.       this.axios.post('http://localhost:3333/user/login',this.loginFrom).then((resp)=>{
    40.         let data = resp.data;
    41.         if(data.success){
    42.             this.loginFrom = {},
    43.                 this.$message({
    44.                     message: '登录成功',
    45.                     type: 'success'
    46.                 });
    47.             this.$router.push({
    48.               path:'/home'
    49.             })
    50.         }
    51.       })
    52.       this.$router.push({
    53.         path:'/home'
    54.       })
    55.     },
    56.     toRegister(){
    57.       //Vue跳转
    58.       this.$router.push({
    59.         path:'/register'
    60.       })
    61.     }
    62.   },
    63. }
    64. </script>
    65.  
    66. <style>
    67.  
    68. #poster{
    69.   background-position: center;
    70.   height: 100%;
    71.   width: 100%;
    72.   background-size: cover;
    73.   position: fixed;
    74. }
    75. body{
    76.   margin: 0px;
    77.   padding: 0px;
    78. }
    79. .login-container{
    80.   border-radius: 15px;
    81.   background-clip: padding-box;
    82.   margin:150px auto;
    83.   padding: 35px 35px 15px 35px;
    84.   width: 600px;
    85.   height: 290px;
    86.   background:#fff;
    87.   border:1px solid #eaeaea;
    88.   box-shadow:0 0 1000px #cac6c6;
    89. }
    90. .login_title{
    91.   margin:0px auto 30px auto;
    92.   text-align: center;
    93.   color:#505458
    94. }
    95.  
    96. </style>

    三、Register页面编写

    1. <template>
    2.  
    3.   <div id="poster">
    4.     <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="register-container">
    5.       <h2 class="register_title" style="display:inline;">
    6.         系统登录
    7.       </h2>
    8.       <el-button style="margin:0px 0px 10px 10px" @click="toLogin">去登录</el-button>
    9.  
    10.       <el-form-item label="账号" prop="account">
    11.         <el-input v-model="ruleForm.account" placeholder="请输入账号" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
    12.       </el-form-item>
    13.  
    14.       <el-form-item label="姓名" prop="name">
    15.         <el-input type="text" v-model="ruleForm.name" placeholder="请输入姓名" autocomplete="off" prefix-icon="el-icon-user"></el-input>
    16.       </el-form-item>
    17.  
    18.       <el-form-item label="性别">
    19.         <el-select v-model="ruleForm.sex" placeholder="性别" style="right: 140px">
    20.           <el-option label="男" value="男"></el-option>
    21.           <el-option label="女" value="女"></el-option>
    22.         </el-select>
    23.       </el-form-item>
    24.  
    25.  
    26.  
    27.       <el-form-item label="电话" prop="phone">
    28.         <el-input v-model="ruleForm.phone" placeholder="请输入电话号码" autocomplete="off" prefix-icon="el-icon-phone"></el-input>
    29.       </el-form-item>
    30.  
    31.  
    32.       <el-form-item label="密码" prop="password">
    33.         <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
    34.       </el-form-item>
    35.  
    36.       <el-form-item label="确认密码" prop="checkPass">
    37.         <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请确认密码" prefix-icon="el-icon-lock"></el-input>
    38.       </el-form-item>
    39.  
    40.       <el-form-item style="margin-right:100px">
    41.         <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
    42.         <el-button @click="resetForm('ruleForm')">重置</el-button>
    43.       </el-form-item>
    44.     </el-form>
    45.   </div>
    46. </template>
    47.  
    48. <script>
    49. export default {
    50.   name: 'Register',
    51.   data() {
    52.     var validatePass = (rule, value, callback) => {
    53.       if (value === '') {
    54.         callback(new Error('请输入密码'));
    55.       } else {
    56.         if (this.ruleForm.checkPass !== '') {
    57.           this.$refs.ruleForm.validateField('checkPass');
    58.         }
    59.         callback();
    60.       }
    61.     };
    62.     var validatePass2 = (rule, value, callback) => {
    63.       if (value === '') {
    64.         callback(new Error('请再次输入密码'));
    65.       } else if (value !== this.ruleForm.password) {
    66.         callback(new Error('两次输入密码不一致!'));
    67.       } else {
    68.         callback();
    69.       }
    70.     };
    71.     return {
    72.       ruleForm: {
    73.         account:'',
    74.         password: '',
    75.         name:'',
    76.         checkPass: '',
    77.         phone:'',
    78.         sex: ''
    79.       },
    80.       rules: {
    81.         account: [
    82.           { required: true, message: '请输入账号', trigger: 'blur' },
    83.           { min: 6, max:20, message: '长度在 6 到 15 个字符', trigger: 'blur' }
    84.         ],
    85.         name: [
    86.           { required: true, message: '请输入用户姓名', trigger: 'blur' },
    87.           { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    88.         ],
    89.         phone: [
    90.           //手机号格式校验规则
    91.           { required: true, message: '请填写手机号', trigger: 'blur' },
    92.           { pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    93.             , message: '手机号格式不正确', trigger: 'blur' }
    94.         ],
    95.         password: [
    96.           { validator: validatePass, trigger: 'blur' }
    97.         ],
    98.         checkPass: [
    99.           { validator: validatePass2, trigger: 'blur' }
    100.         ],
    101.       }
    102.     };
    103.   },
    104.   methods: {
    105.     submitForm(ruleForm) {
    106.       //清除表单
    107.       this.ruleForm = {};
    108.       //axios请求
    109.       this.axios.post('http://localhost:3333/user/register', this.ruleForm).then((resp) => {
    110.         console.log(resp)
    111.         let data = resp.data;
    112.         console.log(data)
    113.         if (data.success) {
    114.           //消息提示
    115.           this.$message({
    116.             message:'注册成功',
    117.             type:'success'
    118.           });
    119.         }
    120.       })
    121.     },
    122.     resetForm(formName) {
    123.       this.$refs[formName].resetFields();
    124.     },
    125.     toLogin(){
    126.       this.$router.push({
    127.         path:'/'
    128.       })
    129.     }
    130.   }
    131. }
    132. </script>
    133.  
    134. <style>
    135. #poster{
    136.   background-position: center;
    137.   height: 100%;
    138.   width: 100%;
    139.   background-size: cover;
    140.   position: fixed;
    141.   margin: 0px;
    142.   padding: 0px;
    143. }
    144.  
    145. .register-container{
    146.   border-radius: 15px;
    147.   background-clip: padding-box;
    148.   margin:80px auto;
    149.   padding: 35px 35px 15px 35px;
    150.   width: 600px;
    151.   height: 480px;
    152.   background:#fff;
    153.   border:1px solid #eaeaea;
    154.   box-shadow:0 0 1000px #cac6c6;
    155. }
    156. .register_title{
    157.   margin:0px auto 30px auto;
    158.   text-align: center;
    159.   color:#505458
    160. }
    161.  
    162. </style>

    四、后端注册代码实现

    首先前端填写表单，发送post请求调接口

    1. submitForm(ruleForm) {
    2.       //axios请求
    3.       this.axios.post('http://localhost:3333/user/register', this.ruleForm).then((resp) => {
    4.         console.log(resp)
    5.         let data = resp.data;
    6.         console.log(data)
    7.         if (data.success) {
    8.           //消息提示
    9.           this.$message({
    10.             message:'注册成功',
    11.             type:'success'
    12.           });
    13.         }
    14.       })
    15.     },

    controller层

    registerUserVo对应前端传过来表单的实体类，然后对密码进行加盐处理

    1.   @PostMapping("/register")
    2.      public CommonDto register(@RequestBody RegisterUserVo registerUserVo){
    3.           CommonDto<User> commonDto = new CommonDto<>();
    4.           //密码加盐
    5.           registerUserVo.setPassword(DigestUtils.md5DigestAsHex(registerUserVo.getPassword().getBytes()));
    6.           userService.register(registerUserVo);
    7.           commonDto.setMessage("注册成功");
    8.           return commonDto;
    9.      }

    service层

    service层首先判断传过来的数据数据库中id是否为空，如果不为空，再根据account字段查询数据库中有无相同account数据，若没有才可注册，接着用雪花算法设置一个id，把数据插入数据库中

    1.    @Override
    2.      public void register(RegisterUserVo registerUserVo) {
    3.           User user = BeanCopyUtils.copyBean(registerUserVo, User.class);
    4.           if (ObjectUtils.isEmpty(registerUserVo.getId())){
    5.                User userDB = selectByAccount(registerUserVo.getAccount());
    6.                if(ObjectUtils.isEmpty(userDB)){
    7.                     user.setId(snowflake.nextId());
    8.                     userMapper.insert(user);
    9.                }
    10.           }
    11.      }
    1. //查询account是否被注册
    2.      public User selectByAccount(String account){
    3.           LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    4.           wrapper.eq(User::getAccount,account);
    5.           List<User> userList = userMapper.selectList(wrapper);
    6.           if(CollectionUtils.isEmpty(userList)){
    7.                return null;
    8.           }else {
    9.                return userList.get(0);
    10.           }
    11.      }

    utils工具类

    雪花算法

    1. package com.like.utils;
    2. import lombok.extern.slf4j.Slf4j;
    3. import org.springframework.stereotype.Component;
    4.  
    5. import java.text.MessageFormat;
    6.  
    7. @Slf4j
    8. @Component
    9. public class Snowflake {
    10.     // ==============================Fields===========================================
    11.     /**
    12.      * 开始时间戳 (2000-01-01 00:00:00)
    13.      */
    14.     private static final long TWEPOCH = 946656000000L;
    15.  
    16.     /**
    17.      * 机器id所占的位数 5
    18.      */
    19.     private static final long WORKER_ID_BITS = 5L;
    20.  
    21.     /**
    22.      * 数据标识id所占的位数 5
    23.      */
    24.     private static final long DATA_CENTER_ID_BITS = 5L;
    25.  
    26.     /**
    27.      * 支持的最大机器id，结果是 31
    28.      */
    29.     private static final long MAX_WORKER_ID = ~(-1L << WORKER_ID_BITS);
    30.  
    31.     /**
    32.      * 支持的最大数据标识id，结果是 31
    33.      */
    34.     private static final long MAX_DATA_CENTER_ID = ~(-1L << DATA_CENTER_ID_BITS);
    35.  
    36.     /**
    37.      * 序列在id中占的位数
    38.      */
    39.     private static final long SEQUENCE_BITS = 12L;
    40.  
    41.     /**
    42.      * 机器ID向左移12位
    43.      */
    44.     private static final long WORKER_ID_SHIFT = SEQUENCE_BITS;
    45.  
    46.     /**
    47.      * 数据标识id向左移17位(12+5)
    48.      */
    49.     private static final long DATA_CENTER_ID_SHIFT = SEQUENCE_BITS + WORKER_ID_BITS;
    50.  
    51.     /**
    52.      * 时间戳向左移22位(5+5+12)
    53.      */
    54.     private static final long TIMESTAMP_LEFT_SHIFT = SEQUENCE_BITS + WORKER_ID_BITS + DATA_CENTER_ID_BITS;
    55.  
    56.     /**
    57.      * 生成序列的掩码，这里为4095 (0b111111111111=0xfff=4095)
    58.      */
    59.     private static final long SEQUENCE_MASK = ~(-1L << SEQUENCE_BITS);
    60.  
    61.     /**
    62.      * 步长 1024
    63.      */
    64.     private static final long STEP_SIZE = 1024;
    65.  
    66.     /**
    67.      * unsigned int max value
    68.      */
    69.     private static final long UINT_MAX_VALUE = 0xffffffffL;
    70.  
    71.     /**
    72.      * 工作机器ID(0~31)
    73.      */
    74.     private long workerId;
    75.  
    76.     /**
    77.      * 工作机器ID 计数器
    78.      */
    79.     private long workerIdFlags = 0L;
    80.  
    81.     /**
    82.      * 数据中心ID(0~31)
    83.      */
    84.     private long dataCenterId;
    85.  
    86.     /**
    87.      * 数据中心ID 计数器
    88.      */
    89.     private long dataCenterIdFlags = 0L;
    90.  
    91.     /**
    92.      * 毫秒内序列(0~4095)
    93.      */
    94.     private long sequence = 0L;
    95.  
    96.     /**
    97.      * 毫秒内序列基数[0|1024|2048|3072]
    98.      */
    99.     private long basicSequence = 0L;
    100.  
    101.     /**
    102.      * 上次生成ID的时间戳
    103.      */
    104.     private long lastTimestamp = -1L;
    105.  
    106.     /**
    107.      * 工作模式
    108.      */
    109.     private final WorkMode workMode;
    110.  
    111.     public enum WorkMode { NON_SHARED, RATE_1024, RATE_4096; }
    112.  
    113.     //==============================Constructors=====================================
    114.  
    115.     public Snowflake() {
    116.         this(0, 0, WorkMode.RATE_4096);
    117.     }
    118.  
    119.     /**
    120.      * 构造函数
    121.      * @param workerId     工作ID (0~31)
    122.      * @param dataCenterId 数据中心ID (0~31)
    123.      */
    124.     public Snowflake(long workerId, long dataCenterId) {
    125.         this(workerId, dataCenterId, WorkMode.RATE_4096);
    126.     }
    127.  
    128.     /**
    129.      * 构造函数
    130.      * @param workerId     工作ID (0~31)
    131.      * @param dataCenterId 数据中心ID (0~31)
    132.      * @param workMode     工作模式
    133.      */
    134.     public Snowflake(long workerId, long dataCenterId, WorkMode workMode) {
    135.         this.workMode = workMode;
    136.         if (workerId > MAX_WORKER_ID || workerId < 0) {
    137.             throw new IllegalArgumentException(MessageFormat.format("worker Id can't be greater than {0} or less than 0", MAX_WORKER_ID));
    138.         }
    139.         if (dataCenterId > MAX_DATA_CENTER_ID || dataCenterId < 0) {
    140.             throw new IllegalArgumentException(MessageFormat.format("datacenter Id can't be greater than {0} or less than 0", MAX_DATA_CENTER_ID));
    141.         }
    142.         this.workerId = workerId;
    143.         this.workerIdFlags = setSpecifiedBitTo1(this.workerIdFlags, this.workerId);
    144.         this.dataCenterId = dataCenterId;
    145.         this.dataCenterIdFlags = setSpecifiedBitTo1(this.dataCenterIdFlags, this.dataCenterId);
    146.     }
    147.  
    148.     // ==============================Methods==========================================
    149.  
    150.     /**
    151.      * 获取机器id
    152.      *
    153.      * @return 所属机器的id
    154.      */
    155.     public long getWorkerId() {
    156.         return workerId;
    157.     }
    158.  
    159.     /**
    160.      * 获取数据中心id
    161.      *
    162.      * @return 所属数据中心id
    163.      */
    164.     public long getDataCenterId() {
    165.         return dataCenterId;
    166.     }
    167.  
    168.     /**
    169.      * 获得下一个ID (该方法是线程安全的)
    170.      *
    171.      * @return SnowflakeId
    172.      */
    173.     public synchronized long nextId() {
    174.         long timestamp = timeGen();
    175.         //如果当前时间小于上一次ID生成的时间戳，说明系统时钟回退过这个时候应当抛出异常
    176.         if (timestamp < this.lastTimestamp) {
    177.             if (timestamp > TWEPOCH) {
    178.                 if (WorkMode.NON_SHARED == this.workMode) {
    179.                     nonSharedClockBackwards(timestamp);
    180.                 } else if (WorkMode.RATE_1024 == this.workMode) {
    181.                     rate1024ClockBackwards(timestamp);
    182.                 } else {
    183.                     throw new RuntimeException(MessageFormat.format("Clock moved backwards. Refusing to generate id for {0} milliseconds", lastTimestamp - timestamp));
    184.                 }
    185.             } else {
    186.                 throw new RuntimeException(MessageFormat.format("Clock moved backwards. Refusing to generate id for {0} milliseconds", lastTimestamp - timestamp));
    187.             }
    188.         }
    189.         //如果是同一时间生成的，则进行毫秒内序列
    190.         if (this.lastTimestamp == timestamp) {
    191.             this.sequence = (this.sequence + 1) & SEQUENCE_MASK;
    192.             //毫秒内序列溢出
    193.             if (this.sequence == 0) {
    194.                 //阻塞到下一个毫秒,获得新的时间戳
    195.                 timestamp = tilNextMillis(this.lastTimestamp);
    196.             }
    197.         }
    198.         //时间戳改变，毫秒内序列重置
    199.         else {
    200.             this.sequence = this.basicSequence;
    201.         }
    202.         //上次生成ID的时间戳
    203.         this.lastTimestamp = timestamp;
    204.         //移位并通过或运算拼到一起组成64位的ID
    205.         return ((timestamp - TWEPOCH) << TIMESTAMP_LEFT_SHIFT)
    206.                 | (this.dataCenterId << DATA_CENTER_ID_SHIFT)
    207.                 | (this.workerId << WORKER_ID_SHIFT)
    208.                 | this.sequence;
    209.     }
    210.  
    211.     /**
    212.      * 阻塞到下一个毫秒，直到获得新的时间戳
    213.      *
    214.      * @param lastTimestamp 上次生成ID的时间戳
    215.      * @return 当前时间戳
    216.      */
    217.     protected long tilNextMillis(long lastTimestamp) {
    218.         long timestamp0;
    219.         do {
    220.             timestamp0 = timeGen();
    221.         } while (timestamp0 <= lastTimestamp);
    222.         return timestamp0;
    223.     }
    224.  
    225.     /**
    226.      * 返回以毫秒为单位的当前时间
    227.      *
    228.      * @return 当前时间(毫秒)
    229.      */
    230.     protected long timeGen() {
    231.         return System.currentTimeMillis();
    232.     }
    233.  
    234.     /**
    235.      * 尝试解决时钟回拨
      【* 仅用于 单机生成不对外 的情况 *】
    236.      *
    237.      * @param timestamp 当前时间戳
    238.      * @return void
    239.      */
    240.     private void nonSharedClockBackwards(long timestamp) {
    241.         if (this.dataCenterIdFlags >= UINT_MAX_VALUE && this.workerIdFlags >= UINT_MAX_VALUE) {
    242.             throw new RuntimeException(MessageFormat.format("Clock moved backwards. Refusing to generate id for {0} milliseconds", lastTimestamp - timestamp));
    243.         } else {
    244.             //如果仅用于生成不重复的数值，尝试变更 dataCenterId 或 workerId 修复时钟回拨问题
    245.             log.warn("Clock moved backwards. Refusing to generate id for {} milliseconds", lastTimestamp - timestamp);
    246.             //先尝试变更 dataCenterId，当 dataCenterId 轮询一遍之后，尝试变更 workerId 并重置 dataCenterId
    247.             if (this.dataCenterIdFlags >= UINT_MAX_VALUE) {
    248.                 if (++this.workerId > MAX_WORKER_ID) { this.workerId = 0L; }
    249.                 this.workerIdFlags = setSpecifiedBitTo1(this.workerIdFlags, this.workerId);
    250.                 // 重置 dataCenterId 和 dataCenterIdFlags
    251.                 this.dataCenterIdFlags = this.dataCenterId = 0L;
    252.             } else {
    253.                 if (++this.dataCenterId > MAX_DATA_CENTER_ID) { this.dataCenterId = 0L; }
    254.             }
    255.             this.dataCenterIdFlags = setSpecifiedBitTo1(this.dataCenterIdFlags, this.dataCenterId);
    256.             this.lastTimestamp = -1L;
    257.             log.warn("Try to fix the clock moved backwards. timestamp : {}, worker Id : {}, datacenter Id : {}", timestamp, workerId, dataCenterId);
    258.         }
    259.     }
    260.  
    261.     /**
    262.      * 尝试解决时钟回拨
      【* 仅用于每毫秒生成量 不大于 1024 的情况 *】
    263.      *
    264.      * @param timestamp 当前时间戳
    265.      * @return void
    266.      */
    267.     private void rate1024ClockBackwards(long timestamp) {
    268.         if (this.basicSequence > (SEQUENCE_MASK - STEP_SIZE)) {
    269.             throw new RuntimeException(MessageFormat.format("Clock moved backwards. Refusing to generate id for {0} milliseconds", lastTimestamp - timestamp));
    270.         } else {
    271.             log.warn("Clock moved backwards. Refusing to generate id for {} milliseconds", lastTimestamp - timestamp);
    272.             this.basicSequence += STEP_SIZE;
    273.             this.lastTimestamp = -1L;
    274.             log.warn("Try to fix the clock moved backwards. timestamp : {}, basicSequence : {}", timestamp, basicSequence);
    275.         }
    276.     }
    277.  
    278.     /**
    279.      * Set the specified bit to 1
    280.      *
    281.      * @param value    raw long value
    282.      * @param index    bit index (From 0~31)
    283.      * @return long value
    284.      */
    285.     private long setSpecifiedBitTo1(long value, long index) {
    286.         return value |= (1L << index);
    287.     }
    288.  
    289.     /**
    290.      * Set the specified bit to 0
    291.      *
    292.      * @param value    raw long value
    293.      * @param index    bit index (From 0~31)
    294.      * @return long value
    295.      */
    296.     private long setSpecifiedBitTo0(long value, long index) {
    297.         return value &= ~(1L << index);
    298.     }
    299.  
    300.     /**
    301.      * Get the specified bit
    302.      * @param value    raw long value
    303.      * @param index    bit index(From 0-31)
    304.      * @return 0 or 1
    305.      */
    306.     private int getSpecifiedBit(long value, long index) {
    307.         return (value & (1L << index)) == 0 ? 0 : 1;
    308.     }
    309.  
    310. }

    BeanCopy类

    1. package com.like.utils;
    2.  
    3. import org.springframework.beans.BeanUtils;
    4.  
    5. import java.util.List;
    6. import java.util.stream.Collectors;
    7.  
    8. public class BeanCopyUtils {
    9.  
    10.     private BeanCopyUtils(){
    11.  
    12.     }
    13.  
    14.  
    15.      public static  V copyBean(Object source,Class clazz) {
    16.           V result;
    17.           try {
    18.                result = clazz.getDeclaredConstructor().newInstance();
    19.                BeanUtils.copyProperties(source, result);
    20.           } catch (Exception e) {
    21.                throw new RuntimeException(e);
    22.           }
    23.           return result;
    24.      }
    25.  
    26.      public static  List copyBeanList(List list,Class clazz){
    27.           return list.stream().
    28.                   map(o -> copyBean(o, clazz))
    29.                   .collect(Collectors.toList());
    30.      }
    31.  
    32. }

    五、后端登录代码实现

    首先拿到前端传来的数据，用LoginVo接收，然后根据账号判断是否注册过，若已注册，则判断密码是否正确，从而放行

    前端login方法

    1.  login() {
    2.       console.log('submit!',this.loginForm);
    3.       this.axios.post('http://localhost:3333/user/login',this.loginForm).then((resp)=>{
    4.         let data = resp.data;
    5.         if(data.success){
    6.             this.loginForm = {},
    7.                 this.$message({
    8.                     message: data.message,
    9.                     type: 'success'
    10.                 });
    11.             this.$router.push({
    12.               path:'/home'
    13.             })
    14.         }
    15.       })
    16.     }

    后端代码

    LoginUserVo

    1. package com.like.common;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.EqualsAndHashCode;
    6. import lombok.NoArgsConstructor;
    7.  
    8. @Data
    9. @AllArgsConstructor
    10. @NoArgsConstructor
    11. @EqualsAndHashCode(callSuper = false)
    12. public class LoginUserVo {
    13.      /**
    14.       * 账号
    15.       */
    16.      private String account;
    17.      /**
    18.       * 密码
    19.       */
    20.      private String password;
    21. }

    controller层 

    1.  @PostMapping("/login")
    2.      public CommonDto login(@RequestBody LoginUserVo loginUserVo){
    3.           CommonDto commonDto = userService.login(loginUserVo);
    4.           return commonDto;
    5.      }

    service层

    1. @Override
    2.      public CommonDto login(LoginUserVo loginUserVo) {
    3.           CommonDto commonDto = new CommonDto();
    4.           User userDB = selectByAccount(loginUserVo.getAccount());
    5.           if(ObjectUtils.isEmpty(userDB)){
    6.               commonDto.setSuccess(false);
    7.               commonDto.setContent("账号不存在");
    8.               return commonDto;
    9.           }
    10.           String loginUserVoPassword = DigestUtils.md5DigestAsHex(loginUserVo.getPassword().getBytes());
    11.           String password = userDB.getPassword();
    12.  
    13.           if(loginUserVoPassword.equals(password)){
    14.                commonDto.setMessage("恭喜你登录成功");
    15.           }
    16.           commonDto.setContent(loginUserVo);
    17.           return commonDto;
    18.      }

  • 相关阅读:
    Himall商城Web帮助类删除、获取设置指定名称的Cookie特定键的值（2）
    协程原理与设计
    py2neo 查询语句
    速看|期待已久的2022年广州助理检测工程师真题解析终于出炉
    Redis-服务器
    c# Dictionary vs SortedDictionary
    《Go Web 编程》之第3章 接收请求
    （NDK编译）详解使用Android.mk编译的C/C++程序过程
    get_post (攻防世界)(简单php)
    java计算机毕业设计智能化管理的仓库管理源码+mysql数据库+系统+lw文档+部署
  • 原文地址：https://blog.csdn.net/m0_63732435/article/details/133521173