标签：return SpringBoot employees page --- 上手 id public String

文章目录

• • • 首页实现
    • 国际化
    • • 点击按钮切换语言信息
    • 登录功能实现
    • 拦截器功能实现
    • 员工表展示
    • 实现ajax和分页
    • 一对多前端传值
    • 员工增加更新删除
    • 错误页面
    • 退出登录

首页实现

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

• 注意导入thymeleaf，变更页面匹配thymeleaf语法
• 静态资源最好使用thymeleaf接管，@{/}

国际化

• 步骤：

  1. 编写国际化配置文件，抽取页面需要显示的国际化消息
     

  2. springboot自动配置好了管理国际化资源文件的组件，只需要在配置文件中修改值即可

     # 国际化配置文件的路径
     spring.messages.basename=i18n.login
     

  3. thymeleaf获取国际化信息值th:text="#{login.find}，th:placeholder="#{login.email}"等

点击按钮切换语言信息

• 原理：国际化Locale（区域信息对象），LocaleResolver（获取区域信息对象）

  @Bean
  //容器中没有localeResolver这个bean的时候使用，也就是说用户写了的话不会生成
  @ConditionalOnMissingBean(name = DispatcherServlet.LOCALE_RESOLVER_BEAN_NAME)
  @SuppressWarnings("deprecation")
  //这个默认的区域信息解析器是根据请求头带来的区域信息获取Locale进行国际化
  public LocaleResolver localeResolver() {
     if (this.webProperties.getLocaleResolver() == WebProperties.LocaleResolver.FIXED) {
        return new FixedLocaleResolver(this.webProperties.getLocale());
     }
     if (this.mvcProperties.getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) {
        return new FixedLocaleResolver(this.mvcProperties.getLocale());
     }
     AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
     Locale locale = (this.webProperties.getLocale() != null) ? this.webProperties.getLocale()
           : this.mvcProperties.getLocale();
     localeResolver.setDefaultLocale(locale);
     return localeResolver;
  }
  

• 点超链接后重新转到当前页面

  <a th:href="@{/index.html(l='zh_CN')}">中文</a>
  <a th:href="@{/index.html(l='en_US')}">English</a>
  

• 自己写一个区域信息解析器

  public class MyLocaleResolver implements LocaleResolver {
  
      @Override
      public Locale resolveLocale(HttpServletRequest httpServletRequest) {
          //获取前端传来的值
          String l = httpServletRequest.getParameter("l");
          //初始化为默认
          Locale locale = Locale.getDefault();
          if(!StringUtils.isEmpty(l)){
              String[] split = l.split("_");
              locale = new Locale(split[0], split[1]);
          }
          return locale;
      }
  

• 把写好的解析器放入到spring容器

  @Configuration
  public class MyMvcConfig {
  
      @Bean
      //注意！！因为要保证只存在我们写的localeResolver，所以bean名称只能为localeResolver
      public LocaleResolver localeResolver() {
          return new MyLocaleResolver();
      }
  
  }
  

登录功能实现

• 登录表单

  <form class="form-login" th:action="@{/user/login}">
      <h2 class="form-login-heading" th:text="#{login.tip}">请登录</h2>
      <!--这里判断msg是否为空，虽然没必要，但了解一下怎么写-->
      <p style="color: red;text-align: center" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
      <div class="login-wrap">
          <input type="text" name="username" class="form-control" th:placeholder="#{login.username}" autofocus>
          <br>
          <input type="password" name="password" class="form-control" th:placeholder="#{login.password}">
  

• 编写controller

  @RequestMapping("/user/login")
  public String login(
      @RequestParam("username") String username,
      @RequestParam("password") String password,
      Model model){
      if (!StringUtils.isEmpty(username) && "123456".equals(password)){
          return "redirect:/index";
      }else {
          model.addAttribute("msg","用户名或者密码错误");
          return "login";
      }
  }
  
  @RequestMapping("index")
  public String index(){
      return "index";
  }
  

拦截器功能实现

• 实现拦截器方法

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

• 配置拦截器

  @Configuration
  public class MyMvcConfig implements WebMvcConfigurer {
  
      @Override
      public void addInterceptors(InterceptorRegistry registry) {
          //所有请求都拦截，再排除一些请求
          registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                  .excludePathPatterns("/index.html", "/", "/user/login", "/assets/**", "/css/**", "/img/**", "/js/**");
      }
      
  }
  

员工表展示

• 实现导航栏、侧边栏等构建的重用

  <!--可重用组件加上th:fragment="menu"-->
  <aside th:fragment="menu">
  <!--其他页面放入组件，需要标识组件所在的页面-->
  <div th:replace="~{index.html :: menu}"></div>
  

• js实现侧边栏获取点击状态（有瑕疵）

  <script th:src="@{/js/menu.js}"></script>
  <script type="text/javascript" th:inline="javascript">
      msg('table');
  </script>
  

  • menu.js

    function msg(message) {
        //根据传参(id)获取需要改变class的标签
        $("#" + message).attr("class", "active");
        let li = $("#" + message + "_li");
        //如果id存在
        if(li.length>0){
            li.attr("class", "active");
        }
    }
    

• thymeleaf实现侧边栏获取点击状态

  • 在调用语句里传参

    <div th:replace="~{index.html :: menu(active = 'table')}"></div>
    

  • 被调用语句中获取参数并进行判断

    <li th:class="${active=='table'} ? 'active'"><a th:href="@{/employees}">Basic Table</a></li>
    

• controller

  private EmployeeDAO employeeDAO;
  
  @Autowired
  public void setEmployeeDAO(EmployeeDAO employeeDAO) {
      this.employeeDAO = employeeDAO;
  }
  
  @RequestMapping("/employees")
  public String list(Model model){
      Collection<Employee> employees = employeeDAO.getAll();
      model.addAttribute("employees", employees);
      return "basic_table";
  }
  

• 获取和展示信息

  <thead>
  <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>性别</th>
      <th>部门</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="employee : ${employees}">
      <td th:text="${employee.getId()}"></td>
      <td th:text="${employee.getLastName()}"></td>
      <td th:text="${employee.getEmail()}"></td>
      <!--判断，符合条件则有效-->
      <td th:if="${employee.getGender()} == 1">男</td>
      <td th:if="${employee.getGender()} == 0">女</td>
      <!--或者-->
      <td th:text="${employee.getGender()==0?'女':'男'}"></td>
      
    <td th:text="${employee.getDepartment().getDepartmentName()}"></td>
      <!--日期处理-->
      <td th:text="${#dates.format(employee.getBirth(),'yyyy-mm-dd')}"></td>
  </tr>
  

实现ajax和分页

• 页面中调用ajax

  <script type="text/javascript" th:inline="javascript">
      //第一个参数为当前页数，第二个参数为ajax请求url
      tableAjax(page, [[@{/}]]+'employeesAjax');
  </script>
  

• ajax.js

  function tableAjax(page, url) {
      $.ajax({
          url: url,
          //给后端传当前页面，用于分页
          data: {"page": page},
          success: function (employees) {
              //显示和隐藏上一页、下一页，用于分页
              if (page > 1) {
                  $("#up").show();
              } else{
                  $("#up").hide();
              }
              if (page >= employees.length / 2) {
                  $("#down").hide();
              } else{
                  $("#down").show();
              }
  
              let html = null;
              for (let i = 0; i < employees.length; i++) {
                  if(employees[i].gender === 1){
                      gender = '男';
                  }else{
                      gender = '女';
                  }
                  html += "<tr>" +
                      "<td>" + employees[i].id + "</td>" +
                      "<td>" + employees[i].lastName + "</td>" +
                      "<td>" + employees[i].email + "</td>" +
                      "<td>" + employees[i].gender + "</td>" +
                      "<td>" + employees[i].department.departmentName + "</td>" +
                      "<td>" + employees[i].birth + "</td>" +
                      "</tr>";
              }
              $("#table").html(html);
              $("#page").text(page);
          }
      });
  }
  

• 分页

  <div>
      <!--显示当前页面-->
      <span id="page" th:text="${page}"></span>
      <a id="up" hidden onclick="pagedown()">上一页</a>
      <a id="down" onclick="pageup()">下一页</a>
      <script type="text/javascript" th:inline="javascript">
          let page = [[${page}]];
  
          function pageup() {
              page += 1;
              tableAjax(page, [[@{/}]]+'employeesAjax');
          }
          function pagedown() {
              page -= 1;
              tableAjax(page, [[@{/}]]+'employeesAjax');
          }
      </script>
  </div>
  

• controller

  @RequestMapping("/employees")
  public String list(Model model){
      Collection<Employee> employees = employeeDAO.getAll();
      model.addAttribute("employees", employees);
      model.addAttribute("page",1);
      return "basic_table";
  }
  
  @RequestMapping("/employeesAjax")
  @ResponseBody
  public Collection<Employee> employeesAjax(int page){
      //返回的java对象springboot集成的jackson会自动帮我们解析成json对象并传输给前端
      return employeeDAO.getAll(page);
  }
  

一对多前端传值

• 当后端需要一个对象参数，且该对象内包含其他对象时

  public class Employee {
      private Integer id;
      private String lastName;
      private String email;
      private Integer gender; //0：女 1：男
      private Department department;
      private Date birth;
  

  //例如
  public String addEmployee(Employee employee) {
  

• 前端可以这样传值

  <!--用对象.对象的属性作为参数名即可-->
  <select name="department.id"></select>
  <!--一般情况直接用对象的属性名传参即可-->
  <input type="text" name="lastName">
  

  • 猜测一下大概原理，mvc会获取到form提交的所有name和对应的值，然后每个name找对应的controller方法的参数并赋值，如果name里面有.的话就会查找对应对象里的属性，例如department.id，会先判断出department是所需对象参数的类的属性，然后再在department对象中找id属性

员工增加更新删除

• 增加controller

  @RequestMapping("/toAdd")
  public String toUpdate(Model model) {
      //获取所有部门，用于下拉框选择部门
      Collection<Department> departments = departmentDAO.getDepartments();
      model.addAttribute("departments", departments);
      return "add_table";
  }
  
  @RequestMapping("/addEmployee")
  public String addEmployee(Employee employee) {
      System.out.println(employee);
      employeeDAO.save(employee);
      return "redirect:/employees";
  }
  

• 更新html

  <form class="form-horizontal style-form" role="form" th:action="@{/updateEmployee}" method="post">
      <input hidden name="id" th:value="${employee.getId()}">
      <div class="form-group">
          <label class="col-sm-1 control-label">姓名</label>
          <div class="col-sm-8">
              <input type="text" class="form-control" name="lastName" th:value="${employee.getLastName()}">
          </div>
      </div>
      <div class="form-group">
          <label class="col-sm-1 control-label">邮箱</label>
          <div class="col-sm-8">
              <input type="email" class="form-control" id="text3" name="email" th:value="${employee.getEmail()}">
          </div>
      </div>
      <div class="form-group">
          <label class="col-sm-1 control-label">性别</label>
          <div class="col-sm-8">
              <div class="radio">
                  <label>
                      <input type="radio" name="gender" value="1" th:checked="${employee.getGender() == 1}">
                      男
                  </label>
                  <label>
                      <input type="radio" name="gender" value="0" th:checked="${employee.getGender() == 0}">
                      女
                  </label>
              </div>
          </div>
      </div>
      <div class="form-group">
          <label class="col-sm-1 control-label">部门</label>
          <div class="col-sm-8">
              <label>
                  <select class="form-control" name="department.id" style="margin: 5px 0 0 0">
                      <option th:selected="${dept.getId()==employee.getDepartment().getId()}" th:each="dept : ${departments}"
                              th:text="${dept.getDepartmentName()}"
                              th:value="${dept.getId()}">
                      </option>
                  </select>
              </label>
          </div>
      </div>
      <div class="form-group">
          <label class="col-sm-1 control-label">生日</label>
          <div class="col-sm-8">
              <input type="text" class="form-control">
          </div>
      </div>
      <button type="submit" class="btn btn-theme">Sign in</button>
  </form>
  

• 更新controller

  @RequestMapping("/toUpdate/{id}")
  public String toUpdate(@PathVariable("id") Integer id, Model model) {
      //根据获取的员工id获取员工所有信息并传给前端
      Employee employee = employeeDAO.getEmployeeByID(id);
      Collection<Department> departments = departmentDAO.getDepartments();
      model.addAttribute("departments", departments);
      model.addAttribute("employee", employee);
      return "update_table";
  }
  
  @RequestMapping("/updateEmployee")
  public String updateEmployee(Employee employee) {
      employeeDAO.update(employee);
      return "redirect:/employees";
  }
  

• 删除controller

  @RequestMapping("/delete/{id}")
  public String delete(@PathVariable("id") Integer id){
      employeeDAO.delete(id);
      return "redirect:/employees";
  }
  

错误页面

• 404等错误页面定制，只需要在该目录下创建对应的html，404.html、500.html等
  

退出登录

@RequestMapping("/user/logout")
public String logout(HttpSession session){
    //清除当前session对象
    session.invalidate();
    return "redirect:/";
}

标签：return,SpringBoot,employees,page,---,上手,id,public,String
来源： https://blog.csdn.net/qq_43607736/article/details/117716736

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。