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

目录

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 前端环境

  • 编写默认布局

  • 编写自定义登陆布局

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

  • 编写默认布局

     

  • 编写自定义登陆布局

     

    <template>
  <nuxt/>
</template>
​
<script>
export default {
​
}
</script>
​
<style>
​
</style>

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

     

    <template>
  <div>
    登录
  </div>
</template>
​
<script>
export default {
  layout: 'user'
}
</script>
​
<style>
​
</style>

2.1.2 后端环境（9000）

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

  • pom文件

    ​
    <dependencies>
        <!--web起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- nacos 客户端 -->
        <dependency>
            <groupId>com.alibaba.nacos</groupId>
            <artifactId>nacos-client</artifactId>
        </dependency>
​
        <!-- nacos 服务发现 -->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>
​
        <!--swagger2-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
        </dependency>
​
        <!-- feign 远程调用 -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>
​
        <!--测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
​
        <!-- mybatis plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
        </dependency>
        <!-- mysql驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--自定义项目-->
        <dependency>
            <groupId>com.czxy</groupId>
            <artifactId>nacos-nuxt-student-domain</artifactId>
        </dependency>
​
        <!-- redis 启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <!-- JavaMail 启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>
        <!-- MQ 启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-amqp</artifactId>
        </dependency>
​
        <!-- fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
​
        <!--开发者工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
​
        <!--jwt工具-->
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
        </dependency>
        <!--joda 时间工具类 -->
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>
        <!--JavaBean工具类，用于JavaBean数据封装-->
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
        </dependency>
​
    </dependencies>

  • 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 liangtong@itcast.cn
 * @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 liangtong@itcast.cn
 * @description
 */
@Mapper
public interface TbUserMapper extends BaseMapper<TbUser> {
}
​
    package com.czxy.user.service;
​
import com.baomidou.mybatisplus.extension.service.IService;
import com.czxy.domain.TbUser;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
public interface TbUserService extends IService<TbUser> {
}
​
    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 liangtong@itcast.cn
 * @description
 */
@Service
@Transactional
public class TbUserServiceImpl extends ServiceImpl<TbUserMapper, TbUser> 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 liangtong@itcast.cn
 * @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 liangtong@itcast.cn
 * @description
 */
public interface TbUserService extends IService<TbUser> {
    TbUser findByUserName(String userName);
}
​

    • 实现类

      public class TbUserServiceImpl extends ServiceImpl<TbUserMapper, TbUser> implements TbUserService {
    @Override
    public TbUser findByUserName(String userName) {
        //1 拼条件
        QueryWrapper<TbUser> 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 liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/user")
public class TbUserController {
    @Resource
    private TbUserService tbUserService;
​
    /**
     * 用户登录的校验
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @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 liangtong@itcast.cn
 * @description
 */
public interface TbUserService extends IService<TbUser> {
​
    /**
     * 登录
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @return
     */
    TbUser login(TbUser loginUser);
}
​

    • 实现类

          @Override
    public TbUser login(TbUser loginUser) {
        //1 拼条件
        QueryWrapper<TbUser> 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 liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/user")
public class TbUserController {
    @Resource
    private TbUserService tbUserService;
​
    /**
     * 登录
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @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）绘制登录页面

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="text" icon="el-icon-s-home">传智专修学院</el-button>
      </div>
      <!-- 正文 -->
      <el-form :model="user" :rules="rules" ref="loginForm" label-width="80px" >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" >登录</el-button>
          <el-button >取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
​
<script>
export default {
  layout: 'user',
  data() {
    return {
      user: {},
      rules: {
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ]
      }
    }
  },
}
</script>
​
<style>
  .login {
​
  }
  .login .box-card {
    width: 500px;
  }
</style>

2）登录框居中

  • 扩展：登录框居中

    • 登录页面拷贝样式

       

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

    • 登录布局页面拷贝样式

       

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

3）登录

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="text" icon="el-icon-s-home">传智专修学院</el-button>
      </div>
      <!-- 正文 -->
      <el-form :model="user" :rules="rules" ref="loginForm" label-width="80px" >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" >登录</el-button>
          <el-button >取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
​
<script>
export default {
  layout: 'user',
  data() {
    return {
      user: {
        userName: 'jack',
        password: '1234'
      },
      rules: {
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
    login() {
      // 校验
      //this.$refs['loginForm'].validate((valid) => {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 校验通过后ajax登录
          let { data:baseResult } = await this.$axios.post('/user-service/user/login', this.user)
          if(baseResult.code == 20000) {
            // 成功
            this.$message.success(baseResult.message)
            // 跳转
            this.$router.push('/')
          } else {
            // 失败
            this.$message.error(baseResult.message)
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
      
    }
  },
}
</script>
​
<style>
  .login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login .box-card {
    width: 500px;
  }
</style>

4）表单校验：内置校验

 

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

 

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="text" icon="el-icon-s-home">传智专修学院</el-button>
      </div>
      <!-- 正文 -->
      <el-form :model="user" :rules="rules" ref="loginForm" label-width="80px" >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" >登录</el-button>
          <el-button >取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
​
<script>
export default {
  layout: 'user',
  data() {
    // 自定义校验规则start
    var validateLoginCheck = async (rule, value, callback) => {
      // 校验通过：callback();
      // 校验未通过：callback(new Error('请输入密码'));
      // 发送ajax，进行用户名校验
      let user = {
        userName: value
      }
      let { data:baseResult } = await this.$axios.post(`/user-service/user/check`, user)
      if(baseResult.code == 20000) {
        // 成功
        callback();
      } else {
        // 失败
        callback(new Error(baseResult.message));
      }
    };
    // 自定义校验规则end
    return {
      user: {
        userName: 'jack',
        password: '1234'
      },
      rules: {
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },
            { validator: validateLoginCheck, trigger: 'blur' }
          ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
    login() {
      // 校验
      //this.$refs['loginForm'].validate((valid) => {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 校验通过后ajax登录
          let { data:baseResult } = await this.$axios.post('/user-service/user/login', this.user)
          if(baseResult.code == 20000) {
            // 成功
            this.$message.success(baseResult.message)
            // 跳转
            this.$router.push('/')
          } else {
            // 失败
            this.$message.error(baseResult.message)
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
      
    }
  },
}
</script>
​
<style>
  .login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login .box-card {
    width: 500px;
  }
</style>

2.3 首页

2.3.1 需求

 

2.3.2 前端实现

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

    • 编写布局

    • 左侧垂直菜单

    • 头像+弹出提示

  • 设置reset.css（优化）

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

    • 编写布局

    • 左侧垂直菜单

    • 头像+弹出提示

     

    <template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="22" class="title">
          学生管理系统(SMS)
        </el-col>
        <el-col :span="2">
​
          <!-- <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <el-avatar slot="reference" size="large" src="/5.jpg"></el-avatar>
            <div class="avatarItem">用户详情</div>
            <div class="avatarItem">修改密码</div>
            <div class="avatarItem">退出登录</div>
          </el-popover> -->
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :size="50" src="/5.jpg"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>用户详情</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 菜单start -->
        <el-menu
          :default-active="$route.path"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/classes">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>班级管理</span>
            </template>
            <el-menu-item index="/classes/classesAdd">添加班级</el-menu-item>
            <el-menu-item index="/classes/classesList">班级列表</el-menu-item>
          </el-submenu>
          <el-submenu index="/student">
            <template slot="title">
              <span>学生管理</span>
            </template>
            <el-menu-item index="/student/studentList">学生列表</el-menu-item>
          </el-submenu>
         
        </el-menu>
        <!-- 菜单end -->
      </el-aside>
      <el-main>
        <!-- 视图显示 -->
        <nuxt/>
      </el-main>
    </el-container>
    <el-footer>传智专修学院</el-footer>
  </el-container>
</template>
​
<script>
export default {
​
}
</script>
​
<style>
  html, body, #__nuxt, #__layout, .el-container {
    height: 100%;
  }
  body {
    margin: 0;
  }
  .avatarItem {
    width: 100px;
    display: inline-block;
    margin: 5px 0;
  }
  .title {
    font-size: 30px;
    font-weight: bold;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #545c64;
    color: #fff;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
</style>

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

posted @ 2022-11-09 08:11  陶然同学  阅读(182)  评论(0)    收藏  举报