SpringBoot快速搭建网站实现——员工管理系统

最新推荐文章于 2024-04-13 05:57:13 发布

单调递增Get

最新推荐文章于 2024-04-13 05:57:13 发布

阅读量417

点赞数 1

分类专栏： Java学习笔记文章标签： java spring

本文链接：https://blog.csdn.net/qq_43794338/article/details/113622385

版权

Java学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

素材提供
HTML5模板下载地址

1、访问界面

IndexController

在这里插入图片描述

@Controller
public class IndexController {
    @RequestMapping({"/","/index.html"})
    public String index(){
        return "index";
    }
}

MyMvcConfig

在这里插入图片描述

@Configurable
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry){
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

2、拦截器

在这里插入图片描述

public class LoginHanderInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //登录成功后，应用有用户自己的session
        Object loginUser = request.getSession().getAttribute("loginUser");
        if(loginUser==null){//unlogin
            request.setAttribute("msg","没有权限，请先登录");
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }
        return true;

    }
}

在这里插入图片描述

public class MyMvcConfig implements WebMvcConfigurer {
    @Override//alt+fn+ins
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
        //registry.addViewController("/main.html").setViewName("dashboard");
    }

    @Override//拦截器
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginHanderInterceptor())
                .addPathPatterns("/**").excludePathPatterns("/index.html","/","/user/login","/*.css","/*.js","/*.svg");
    }
}

在这里插入图片描述

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    //@RequestBody
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Model model, HttpSession session){
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            //return "dashboard";//这里是有明码显示的跳转界面
            session.setAttribute("loginUser",username);
            return "redirect:/main.html";//这里是没有明码的跳转，链接显示main不是密码
        }else{
            model.addAttribute("msg","用户名或者密码错误");
            return "index";
        }
    }
}

3、跳转页面

在这里插入图片描述

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;
    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();//获取所有员工
        model.addAttribute("emps",employees);
        return "emp/list";
    }
}

在这里插入图片描述
list
侧边栏修改为（非重点）

<!--    侧边栏-->
    <div th:insert="~{dashboard::sidebar}"></div>
dashboard
<li class="nav-item">
  <a class="nav-link" th:href="@{/emps}">
    员工管理
  </a>
</li>

tips：没有跳转成功，应该是不能两个页面的同一位置比如说员工管理都设置th:href="@{/emps}"

4、列表循环展示

list.html

<table class="table table-striped table-sm">
  <thead>
    <tr>
      <th>id</th>
      <th>lastname</th>
      <th>email</th>
      <th>gender</th>
      <th>department</th>
      <th>birth</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="emp:${emps}">
      <td th:text="${emp.getId()}"></td>
      <td>[[${emp.getLastName()}]]</td>
      <td th:text="${emp.getEmail()}"></td>
      <td th:text="${emp.getGender()}"></td>
      <td th:text="${emp.getDepartment().getDepartmentName()}"></td>
      <td th:text="${emp.getBirth()}"></td>
    </tr>
  </tbody>
</table>

5、按钮高亮设置

<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{index.html}">

6、提取公共页面

方法：
在这里插入图片描述
使用：

commons.html

把头部和侧边栏等放到这里，然后其他的地方链接过去

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--头部-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow" th:fragment="topbar">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">[[${session.loginUser}]]</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">注销</a>
        </li>
    </ul>
</nav>
<!--侧边栏-->
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse" th:fragment="sidebar">
    <div class="sidebar-sticky pt-3">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" th:href="@{index.html}">
                    <span data-feather="home"></span>
                    首页 <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="file"></span>
                    Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="shopping-cart"></span>
                    Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/emps}">
                    员工管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="users"></span>
                    Customers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="bar-chart-2"></span>
                    Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="layers"></span>
                    Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
                <span data-feather="plus-circle"></span>
            </a>
        </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span>
                    Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span>
                    Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span>
                    Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span>
                    Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>
</html>

其他页面的替代方式

<!--    导航栏-->
    <div th:replace="~{commons/commons::topbar}"></div>
<!--    侧边栏-->
    <div th:replace="~{commons/commons::sidebar}"></div>

7、添加员工

1.按钮提交
2.跳转到添加页面
3.添加员I成功
4.返回首页

编号数字变为部门

<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>

在这里插入图片描述

@Autowired
DepartmentDao departmentDao;
@GetMapping("/emp")
public String toAddpage(Model model){
    //查出所有部门的信息
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    return "emp/add";
}

在这里插入图片描述

public Department getDepartmentById(Integer id) {
    return departments.get(id);
}
public Collection<Department> getDepartments(){
    return departments.values();
}
//@getmapping 获取跳转
//html 中第二种跳转方式<form th:action="@{/emp}" method="post">
//因为这里使用的post方法，所以跳转方式为
@PostMapping("/emp")
public String toEmp(Employee employee){//Model model
    //查出所有部门的信息
    System.out.println("save=>"+employee);
    employeeDao.save(employee);
    return "redirect:/emps";
}

添加员工方式有两种

方法一：return “redirect:/emps”;
方法二：forward
add.html

<div class="form-group">
  <label>department</label>
    <select class="form-control" name="department.id">
      <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
    </select>
</div>

可能出错的地方

Q:名字传不进去
A:大小写出错，name字段要修改

8、编辑员工

后端
在这里插入图片描述
EmployeeDao

//select employee by id
public Employee getEmployeeByid(Integer id) {
    return employees.get(id);
}

EmployeeController
//去修改员工的界面
@GetMapping("/emp/{id}")
public String toUpdateEmp(@PathVariable("id")Integer id,Model model){
    //查出原来的数据
    Employee employee = employeeDao.getEmployeeByid(id);
    model.addAttribute("emp",employee);
    //查出所有部门的信息
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    return "emp/update";
}

@PostMapping("/updateEmp")
public String updateEmp(Employee employee){
    employeeDao.save(employee);
    return "redirect:/emps";
}

前端
在这里插入图片描述
list.html 修改按钮，实现上传功能

//修改按钮，实现上传功能
<a calss="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">edit</a>

这里注意button的位置需要修改为
update.html

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
  <form th:action="@{/updateEmp}" method="post">
    <input type="hidden" name="id" th:value="${emp.getId()}">
    <div class="form-group">
      <label>Last name</label>
      <input th:value="${emp.getLastName()}" type="text" name="lastName" class="form-control" placeholder="qiye">
    </div>
    <div class="form-group">
      <label>Email</label>
      <input th:value="${emp.getEmail()}" type="email" name="email" class="form-control" placeholder="1232@qq.com">
    </div>
    <div class="form-group">
      <label>Gender</label>
      <div class="form-check form-check-inline">
        <input  th:checked="${emp.getGender()==1}" type="radio" name="gender" class="form-check-input" value="1">
        <label class="form-check-label">男</label>
      </div>
      <div class="form-check form-check-inline">
        <input th:checked="${emp.getGender()==0}" type="radio" name="gender" class="form-check-input" value="0">
        <label class="form-check-label">女</label>
      </div>
    </div>
    <div class="form-group">
      <label>department</label>
        <select class="form-control" name="department.id">
          <option th:selected="${dept.getId() == emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
        </select>
    </div>
    <div class="form-group">
      <label>Birth</label>
      <input th:value="${#dates.format(emp.getBirth(),'yyyy/MM/dd HH:mm')}" type="text" name="birth" class="form-control" placeholder="2019/2/2">
    </div>
    <button type="submit" class="btn btn-primary">修改</button>
  </form>
</main>

注意：

日期格式一定要调成一致，否则会出错
建议在配置中设置
application

#时间日期
spring.mve.date-format=yyyy-MM-dd

可能遇到的问题

button修改过程中

<button calss="btn btn-sm btn-primary" th:href="@{/emp/${emp.id}}">edit</button>
//这方法不行用下一行
<button calss="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">edit</button>
th:text="${emp.getId()}"  //不可修改

button出现不能点击的情况

<button calss="btn btn-sm btn-danger">delete</button>
//需要修改为
<a calss="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">edit</a>

9、删除员工

前端
在这里插入图片描述
list

<a calss="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">delete</a>

后端
在这里插入图片描述
EmployeeController

//删除员工
@GetMapping("/delemp/{id}")
public String deleteEmp(@PathVariable("id")Integer id){
    employeeDao.delete(id);
    return "redirect:/emps";
}

EmployeeDao

public void delete(Integer id) {
    employees.remove(id);
}

单调递增Get

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录