【学生管理系统】用户管理之用户登录

目录

2. 用户管理

2.1 环境搭建

2.1.1 前端环境

2.1.2 后端环境（9000）

2.2 用户登录

2.2.1 需求

2.2.2 后端实现

2.2.3 前端实现

2.3 首页

2.3.1 需求

2.3.2 前端实现

2. 用户管理

2.1 环境搭建

2.1.1 前端环境

• 编写默认布局

• 编写自定义登陆布局

• 编写登录页面，使用登录布局

• 编写默认布局

  

   

• 编写自定义登陆布局

  

   

  
  ​
  
  ​
  

• 编写登录页面，使用登录布局

  

   

  
  ​
  
  ​
  

2.1.2 后端环境（9000）

• 项目名：nacos-nuxt-student-service-user

• pom文件

  ​
      
          
          
              org.springframework.boot
              spring-boot-starter-web
          
          
          
              com.alibaba.nacos
              nacos-client
          
  ​
          
          
              com.alibaba.cloud
              spring-cloud-starter-alibaba-nacos-discovery
          
  ​
          
          
              io.springfox
              springfox-swagger2
          
          
              io.springfox
              springfox-swagger-ui
          
  ​
          
          
              org.springframework.cloud
              spring-cloud-starter-openfeign
          
  ​
          
          
              org.springframework.boot
              spring-boot-starter-test
          
  ​
          
          
              com.baomidou
              mybatis-plus-boot-starter
          
          
          
              mysql
              mysql-connector-java
          
          
          
              com.czxy
              nacos-nuxt-student-domain
          
  ​
          
          
              org.springframework.boot
              spring-boot-starter-data-redis
          
          
          
              org.springframework.boot
              spring-boot-starter-mail
          
          
          
              org.springframework.boot
              spring-boot-starter-amqp
          
  ​
          
          
              com.alibaba
              fastjson
          
  ​
          
          
              org.springframework.boot
              spring-boot-devtools
              true
          
  ​
          
          
              io.jsonwebtoken
              jjwt
          
          
          
              joda-time
              joda-time
          
          
          
              commons-beanutils
              commons-beanutils
          
  ​
      

• yml文件

  # 服务端口号
  server:
    port: 9000
  # 服务名
  spring:
    application:
      name: user-service
    datasource:
      driverClassName: com.mysql.jdbc.Driver
      url: jdbc:mysql://127.0.0.1:3306/cloud_es_user?useUnicode=true&characterEncoding=utf8
      username: root
      password: 1234
      druid:    #druid 连接池配置
        initial-size: 1       #初始化连接池大小
        min-idle: 1           #最小连接数
        max-active: 20        #最大连接数
        test-on-borrow: true  #获取连接时候验证，会影响性能
    cloud:
      nacos:
        discovery:
          server-addr: 127.0.0.1:8848   #nacos服务地址
  ​
  #开启log4j打印SQL语句
  logging:
    level:
      com:
        czxy:
          user:
            mapper: debug
  ​
  # mp日志打印
  mybatis-plus:
    configuration:
      log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    global-config:
      db-config:
        logic-delete-value: 1
        logic-not-delete-value: 0
  ​
  sc:
    jwt:
      secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥
      pubKeyPath: D:/rsa/rsa.pub # 公钥地址
      priKeyPath: D:/rsa/rsa.pri # 私钥地址
      expire: 360 # 过期时间,单位分钟

• 启动类

  package com.czxy;
  ​
  import org.springframework.boot.SpringApplication;
  import org.springframework.boot.autoconfigure.SpringBootApplication;
  import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
  import org.springframework.cloud.openfeign.EnableFeignClients;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  @SpringBootApplication      //spring boot
  @EnableDiscoveryClient      //服务发现
  @EnableFeignClients         //远程调用
  public class UserServiceApplication {
      public static void main(String[] args) {
          SpringApplication.run(UserServiceApplication.class, args);
      }
  }
  ​

• 拷贝config

  

   

• 基本结构：mapper、service、controller

  

   

  package com.czxy.user.mapper;
  ​
  import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  import com.czxy.domain.TbUser;
  import org.apache.ibatis.annotations.Mapper;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  @Mapper
  public interface TbUserMapper extends BaseMapper {
  }
  ​

  package com.czxy.user.service;
  ​
  import com.baomidou.mybatisplus.extension.service.IService;
  import com.czxy.domain.TbUser;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  public interface TbUserService extends IService {
  }
  ​

  package com.czxy.user.service.impl;
  ​
  import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  import com.czxy.domain.TbUser;
  import com.czxy.user.mapper.TbUserMapper;
  import com.czxy.user.service.TbUserService;
  import org.springframework.stereotype.Service;
  import org.springframework.transaction.annotation.Transactional;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  @Service
  @Transactional
  public class TbUserServiceImpl extends ServiceImpl implements TbUserService {
  }
  ​

  package com.czxy.user.controller;
  ​
  import com.czxy.user.service.TbUserService;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RestController;
  ​
  import javax.annotation.Resource;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  @RestController
  @RequestMapping("/user")
  public class TbUserController {
      @Resource
      private TbUserService tbUserService;
  ​
  ​
  }
  ​

2.2 用户登录

2.2.1 需求

• 基本校验：非空、长度

   

• 异步校验：

 

• 登录成功后，跳转到首页

2.2.2 后端实现

1）用户名校验

• 需求：用户名不存在不能登录、用户存在可以登录

• 编写service

• 编写controller

• 编写service

  • 接口

    package com.czxy.user.service;
    ​
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.czxy.domain.TbUser;
    ​
    /**
     * @author 桐叔
     * @email [email protected]
     * @description
     */
    public interface TbUserService extends IService {
        TbUser findByUserName(String userName);
    }
    ​

  • 实现类

    public class TbUserServiceImpl extends ServiceImpl implements TbUserService {
        @Override
        public TbUser findByUserName(String userName) {
            //1 拼条件
            QueryWrapper queryWrapper = new QueryWrapper<>();
            queryWrapper.eq("user_name", userName);
    ​
            //2 查询
            TbUser findUser = baseMapper.selectOne(queryWrapper);
            return findUser;
        }
    }

• 编写controller

  package com.czxy.user.controller;
  ​
  import com.czxy.domain.TbUser;
  import com.czxy.user.service.TbUserService;
  import com.czxy.vo.BaseResult;
  import org.springframework.web.bind.annotation.PostMapping;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RestController;
  ​
  import javax.annotation.Resource;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  @RestController
  @RequestMapping("/user")
  public class TbUserController {
      @Resource
      private TbUserService tbUserService;
  ​
      /**
       * 用户登录的校验
       * @author 桐叔
       * @email [email protected]
       * @return
       */
      @PostMapping("/check")
      public BaseResult check(@RequestBody TbUser tbUser) {
          //1 查询：通用用户名查询
          TbUser findUser = tbUserService.findByUserName(tbUser.getUserName());
          //2 返回
          if(findUser != null) {
              return BaseResult.ok("可以登录");
          }
          return BaseResult.error("用户名不存在");
      }
  ​
  ​
  }
  ​

2）用户登录

• 编写service

• 编写controller

• 编写service

  • 接口

    package com.czxy.user.service;
    ​
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.czxy.domain.TbUser;
    ​
    /**
     * @author 桐叔
     * @email [email protected]
     * @description
     */
    public interface TbUserService extends IService {
    ​
        /**
         * 登录
         * @author 桐叔
         * @email [email protected]
         * @return
         */
        TbUser login(TbUser loginUser);
    }
    ​

  • 实现类

        @Override
        public TbUser login(TbUser loginUser) {
            //1 拼条件
            QueryWrapper queryWrapper = new QueryWrapper<>();
            queryWrapper.eq("user_name", loginUser.getUserName());
            queryWrapper.eq("password", loginUser.getPassword());
    ​
            //2 查询
            TbUser findUser = baseMapper.selectOne(queryWrapper);
            return findUser;
        }

• 编写controller

  package com.czxy.user.controller;
  ​
  import com.czxy.domain.TbUser;
  import com.czxy.user.service.TbUserService;
  import com.czxy.vo.BaseResult;
  import org.springframework.web.bind.annotation.PostMapping;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RestController;
  ​
  import javax.annotation.Resource;
  ​
  /**
   * @author 桐叔
   * @email [email protected]
   * @description
   */
  @RestController
  @RequestMapping("/user")
  public class TbUserController {
      @Resource
      private TbUserService tbUserService;
  ​
      /**
       * 登录
       * @author 桐叔
       * @email [email protected]
       * @return
       */
      @PostMapping("/login")
      public BaseResult login(@RequestBody TbUser tbUser) {
          //1 查询：通用用户名查询
          TbUser findUser = tbUserService.login(tbUser);
          //2 返回
          if(findUser != null) {
              return BaseResult.ok("登录成功");
          }
          return BaseResult.error("用户名或密码不匹配");
      }
  ​
  ​
  }
  ​

2.2.3 前端实现

1）绘制登录页面

​

​

2）登录框居中

• 扩展：登录框居中

  • 登录页面拷贝样式

    

     

      .login {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

  • 登录布局页面拷贝样式

    

     

      html, body, #__nuxt, #__layout {
        height: 100%;
      }

3）登录

​

​

4）表单校验：内置校验

 

5）用户名校验：自定义校验

 

​

​

2.3 首页

2.3.1 需求

 

2.3.2 前端实现

• 将element ui布局内容编写nuxt的默认布局中

  • 编写布局

  • 左侧垂直菜单

  • 头像+弹出提示

• 设置reset.css（优化）

• 将element ui布局内容编写nuxt的默认布局中

  • 编写布局

  • 左侧垂直菜单

  • 头像+弹出提示

  

   

  
  ​
  
  ​
  

• 设置reset.css（优化）--待定