雨燕权限管理前端技术总结

1，url数量，

• list,show这些页面可以直接显示数据的，使用get，model返回数据
• save,login,regiset直接打开一个填充表页面，使用get，直接跳转一个jsp
• save.json,login.json,regiset.json提交数据，使用ajax ，post，根据返回信息由前端跳转
• 总结：有几个页面就有几个get方法，页面有几个提交就有几个匹配的post方法，

2，jsp相关

• jstl标签添加

  <%@ page language="java" contentType="text/html;charset=UTF-8"
           pageEncoding="UTF-8" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

• url这个时候是被springmvc控制的，如user/admin/list，现在游标在list，使用静态资源要回退两格，

  href="../../user/css/common

• if标签，

  性别:
                          <c:if test="${null == condition4Gender.code}">
                              <input type="radio" name="gender" value="" checked>全选
                              <input type="radio" name="gender" value="MALE">男
                              <input type="radio" name="gender" value="FEMALE">女
                          </c:if>

• forEach标签，使用枚举时候引入相关类

  <%@page import="com.liepin.ycdemo.platform.user.enums.EnumGender" %>

  <c:forEach items="${userList}" var="tform" varStatus="count">
                          <tr>
                              <td class="user-name">
                                  <a href="#">${tform.name}</a>
                              </td>
                              <td>${tform.gender.desc}</td>
                              <td>${tform.phone}</td>
                              <td>${tform.position}</td>
                              <td>${tform.state.desc}</td>
                              <td>${tform.role.desc}</td>
                              <td class="controls">
                                  <a href="/user/admin/show?userId=${tform.id}">修改</a>
                                  <a onclick="deleteById(${tform.id})">删除</a>
                                  <a href="/user/showAddtional?userId=${tform.id}" data-selector="delete">查看</a>
                              </td>
                          </tr>
                      </c:forEach>

• 自动for循环

  <c:forEach var="i" begin="1" end="${totalPage}" step="1">
                      <a onclick="index(${i-1},${totalPage})">${i}</a>
                  </c:forEach>

• Java 的model方面

  model.addAttribute("condition4Name", name);
          model.addAttribute("condition4Phone", phone);
          model.addAttribute("condition4Gender", gender);
          model.addAttribute("userList", employeeDtoListQuery.getList());
          model.addAttribute("rowCount", employeeDtoListQuery.getTotalCount());
          model.addAttribute("pageSize", pageSize);
          model.addAttribute("curPage", curPage);
          model.addAttribute("totalPage", PageUtil.calTotalPage(pageSize, employeeDtoListQuery.getTotalCount()));
          return "user/management";

3，html相关

• 官方提交按钮，submit，用于提交表单，a标签也可以

  <input type="submit" class="btn btn-save" onclick="index(${userId },${userAddtionalForm.userAddtionalId})" value="提交">

  <a onclick="deleteById(${tform.id})">删除</a>

• 官方跳转标签

  <a href="/user/showAddtional?userId=${userId }" data-selector="delete">取消</a>

• 官方输入框

  <input type="text" id="name" name="name" validate-title="用户姓名"
                                 validate-rules="[['required','请输入$']]" value="${form.name }">

• 官方单选框

  <c:if test="${'1' == form.gender.code}">
                              <input type="radio" name="gender" value="MALE" checked>男
                              <input type="radio" name="gender" value="FEMALE">女
                          </c:if>
                          <c:if test="${'2' == form.gender.code}">
                              <input type="radio" name="gender" value="MALE" >男
                              <input type="radio" name="gender" value="FEMALE" checked>女
                          </c:if>

• 官方文件处理

  <input id="file" type="file" name="file">

• 官方勾选框checkbox

  <input type="checkbox" name="isAutoLogin" data-selector="checkbox" checked="checked" value="on">

• 官方分页，jsp版本

  <a onclick="index(${0},${totalPage})"><<</a>
              <a onclick="index(${curPage-1},${totalPage})">上页</a>
              <c:if test="${curPage - 2 <= 0 &&  totalPage<=5}">
                  <c:forEach var="i" begin="1" end="${totalPage}" step="1">
                      <a onclick="index(${i-1},${totalPage})">${i}</a>
                  </c:forEach>
              </c:if>
  
              <c:if test="${curPage - 2 <= 0 &&  totalPage>5}">
                  <c:forEach var="i" begin="1" end="5" step="1">
                      <a onclick="index(${i-1},${totalPage})">${i}</a>
                  </c:forEach>
              </c:if>
  
              <c:if test="${curPage - 2 > 0 && curPage + 2<totalPage}">
                  <c:forEach var="i" begin="${curPage -1 }" end="${curPage + 3}" step="1">
                      <a onclick="index(${i-1},${totalPage})">${i}</a>
                  </c:forEach>
              </c:if>
  
              <c:if test="${curPage - 2 > 0 && curPage + 2>=totalPage}">
                  <c:forEach var="i" begin="${totalPage - 4 }" end="${totalPage}" step="1">
                      <a onclick="index(${i-1},${totalPage})">${i}</a>
                  </c:forEach>
              </c:if>
              <a onclick="index(${curPage+1},${totalPage})">下页</a>
              <a>现在第${curPage+1}页</a>
              <a onclick="index(${totalPage-1},${totalPage})">>></a>
              <a>共${rowCount}条记录，${totalPage}页</a>

• 官方大输入框text area，回显不能写value里面

  <textarea id="introduce" name="introduce" style="700px;height:200px;">
                          杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点
                      一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的
                      时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经
                      淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只
                      是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强
                      作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让
                      你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑
                      惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收
                      集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的
                      一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田。
                      </textarea>

4，js相关

• jq获得文件

  var file = $('#file')[0].files[0]

• jq获得普通

  var introduce = $('#introduce').val();

• jq获得checkbox，勾选框，没有值 的时候undefined

  var isAutoLogin = $("input[name='isAutoLogin']:checked").val();

• jq获得raido，单选框，

  var gender = $("input[name='gender']:checked").val();

5，策略

• 普通ajax，注意ajax的url要写全http这些

   var username = $('#username').val();
      var password = $('#password').val();
      var position = $('#position').val();
      var email = $('#email').val();
      var birthday = $('#birthday').val();
      var name = $('#name').val();
      var phone = $('#phone').val();
      var gender = $("input[name='gender']:checked").val();
      if (username == '' || password == '' || position == '' || email == '' || birthday == '' || name == '' || phone == '' || gender == '') {
          alert('有信息尚未填写好')
          return;
      }
      console.log(username, password, position, email, birthday, name, phone, gender);
      var formData = new FormData();
      formData.append("username", username);
      formData.append("password", password);
      formData.append("position", position);
      formData.append("email", email);
      formData.append("birthday", birthday);
      formData.append("name", name);
      formData.append("phone", phone);
      formData.append("gender", gender);
  
  
      $.ajax({
          url: 'http://localhost:8080/auth/register.json',
          type: 'POST', //GET
          data: formData,
          timeout: 10000,    //超时时间
          contentType: false,//这里
          processData: false,//这两个一定设置为false
          beforeSend: function (xhr) {
          },
          success: function (data, textStatus, jqXHR) {
              console.log(data);
              if (data.data != 'SUCCESS') {
                  alert(data.data)
              } else {
                  alert("注册成功，跳转到登录页")
                  setTimeout(function() { window.location.href="/auth/login" }, 1000);
              }
          },
          error: function (xhr, textStatus) {
              console.log('错误')
              console.log(xhr)
              console.log(textStatus)
          },
          complete: function () {
          }
      })

• 当有under fined上传影响入参的时候，不让她加入formdata

  if(userAddtionalId != undefined){
          formData.append("userAddtionalId", userAddtionalId);
      }

• ajax显示不是正确的返回，+延时跳转

  if (data.data != 'SUCCESS') {
                  alert(data.data)
              } else {
                  alert("成功")
                  setTimeout(function() { window.location.href="/user/showAddtional?userId="+ userId }, 1000);
              }