二、功能详情描述
1. 登录功能【注意页面布局以及样式跳转】
- 用户名输入之后，后端校验用户名与密码长度是否正确，不正确时给出提示。
2. 后端对其用户名密码正确性进行校验
3. 点击登录，跳转到欢迎界面
2. 登录功能：后端代码实现【三层架构】
- domain【User表】
package com.czxy.domain; import lombok.Data; import javax.persistence.Column; import javax.persistence.Table; @Table(name = "`user`") @Data //自动生成构造set/get方法 public class User { @Column(name = "username") private String username; @Column(name = "pwd") private String password; }
- dao【UserMapper接口】
package com.czxy.dao; import com.czxy.domain.User; import tk.mybatis.mapper.common.Mapper; @org.apache.ibatis.annotations.Mapper public interface UserMapper extends Mapper<User> { }
- service【UserService接口】
package com.czxy.service; import com.czxy.domain.User; public interface UserService { //登录 User login(User user); }
- service-impl【UserServiceImpl 接口实现类】
package com.czxy.service; import com.czxy.dao.UserMapper; import com.czxy.domain.Company; import com.czxy.domain.User; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import tk.mybatis.mapper.entity.Example; import javax.annotation.Resource; import java.util.List; @Service @Transactional public class UserServiceImpl implements UserService { @Resource private UserMapper userMapper; @Override public User login(User user) { Example example = new Example(User.class); // 条件判断 Example.Criteria c = example.createCriteria(); //判断用户名是否存在正确 if (user.getUsername()!= null && !user.getUsername().equals("")){ c.andEqualTo("username",user.getUsername()); } //判断密码是否存在正确 if (user.getPassword()!= null && !user.getPassword().equals("")){ c.andEqualTo("pwd",user.getPassword()); } //查询 List<User> list = userMapper.selectByExample(example); //判断集合是否有数据，有则该用户存在，登录成功，反之 if (list.size() > 0 && list != null ){ return list.get(0); } return null ; } }
- controller【UserController】
package com.czxy.controler; import com.czxy.domain.Company; import com.czxy.domain.User; import com.czxy.service.UserService; import com.czxy.vo.BaseResult; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import javax.servlet.http.HttpSession; @RestController @RequestMapping("/user") @CrossOrigin //允许跨域 public class UserController { @Resource private UserService userService; @PostMapping("/login") public BaseResult login(@RequestBody User user, HttpSession session){ User login = userService.login(user); System.out.println(login); if (login != null ){ //登录成功 session.setAttribute("loginUser",login); return BaseResult.ok("恭喜主人，登录成功！"); }else { return BaseResult.error("用户名或密码不正确!"); } } }
3. 登录功能：前端实现
1. 导入reset.css处理页面边缘留白
reset.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
- App.vue
<template> <div id="app"> <!-- 一级路由设置 --> <router-view></router-view> </div> </template> <script> export default { } </script> <style> html,body,#app { height: 100%; } </style>
- 路由设置
- view -> Login.vue 创建登录页面
<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <!-- 卡片标题 --> <el-link type="primary" class="el-icon-s-home">传智专修学院</el-link> </div> <!-- 内容start --> <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" > <el-form-item label="用户名" prop="username"> <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input> </el-form-item> <el-form-item label="密码" prop="pwd"> <el-input v-model="user.pwd" placeholder="请输入" prefix-icon="el-icon-lock" show-password></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm()">登录</el-button> <el-button @click="resetForm()">取消</el-button> </el-form-item> </el-form> <!-- 内容end --> </el-card> </div> </template> <script> import axios from 'axios' ; export default { data() { return { //用户对象 user:{}, //校验规则 rules: { //对用户名进行校验 username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], //对密码进行校验 pwd: [ { required: true, message: '请输入密码', trigger: 'change' } ], }, }; }, methods: { // 登录成功 submitForm() { this.$refs.ruleForm.validate( async(valid) => { let {data: baseResult } = await axios.post(`http://localhost:8888/user/login`,this.user); if (baseResult.code == 20000 ) { this.$message.success(baseResult.msg); this.$router.push("/homeLogin"); }else { this.$message.error(baseResult.msg); } }); }, //取消重置方法 resetForm() { this.$refs.ruleForm.resetFields(); } } } </script> <style> /* 上下左右居中样式 */ .login { height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #b3c0d1; } /* 外围卡片背景、宽度样式设置 */ .box-card { background-color: #f0f8ff; width: 480px; } /* 字体设置 */ .el-link { font-size: 1.5rem; } </style>
- 登录页面详解
- 登录成功，跳转到欢迎页面。【注重页面布局】
- 页面展示
2. 布局样式代码
- 设置Home.vue路由，分布设置二级路由视图【公司列表、案例列表、以及登录成功后的页面】
- 创建Home.vue欢迎导航页面
<template> <div id="app"> <!-- 布局容器start --> <el-container> <el-header>公 司 司 法 案 件 管 理 系 统</el-header> <el-container> <el-aside width="200px"> <!-- 导航列表start --> <el-menu default-active="$route.path" router class="el-menu-vertical-demo" > <el-submenu index="/"> <template slot="title"> <el-menu-item index="/homeLogin" >公司管理</el-menu-item> </template> <el-menu-item index="/company">公司列表</el-menu-item> <el-menu-item index="/case">案件列表</el-menu-item> </el-submenu> </el-menu> <!-- 导航列表end --> </el-aside> <el-container> <!-- 内容体start --> <el-main> <!-- 二级路由视图 --> <router-view></router-view> </el-main> <!-- 内容体end --> <!-- 底部start --> <el-footer>公 司 司 法 案 件 管 理 系 统 Element UI 版</el-footer> <!-- 底部start --> </el-container> </el-container> </el-container> <!-- 布局容器end --> </div> </template> <script> export default { } </script> <style> /* 顶部标题样式 */ .el-header { background-color: #545c64; color: #bbbdbe; text-align: center; line-height: 60px; font-size: 2.5rem; } /* 底部演示 */ .el-footer { background-color: #b3c0d1; color: #1b1b1b; text-align: center; line-height: 60px; } /* 中间内容体样式 */ .el-main { background-color: #f5fffa; color: #118812; } /* 左边导航列表样式 */ .el-aside { background-color: #D3DCE6; color: #333; text-align: center; line-height: 200px; } /* 外围满屏设置样式 */ .el-container { height: 100%; } </style>
Home.vue页面详解
