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

Posted vhyc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了雨燕权限管理前端技术总结相关的知识，希望对你有一定的参考价值。

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" %>
    View Code

     

  • 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>
    View Code

     

  • 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>
    View Code

     

  • 自动for循环
    技术图片 
    <c:forEach var="i" begin="1" end="${totalPage}" step="1">
                    <a onclick="index(${i-1},${totalPage})">${i}</a>
                </c:forEach>
    View Code

     

  • 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";
    View Code

     

3，html相关

  • 官方提交按钮，submit，用于提交表单，a标签也可以
    技术图片 
    <input type="submit" class="btn btn-save" onclick="index(${userId },${userAddtionalForm.userAddtionalId})" value="提交">
    View Code
    技术图片 
    <a onclick="deleteById(${tform.id})">删除</a>
    View Code

     

  • 官方跳转标签
    技术图片 
    <a href="/user/showAddtional?userId=${userId }" data-selector="delete">取消</a>
    View Code

     

  • 官方输入框
    技术图片 
    <input type="text" id="name" name="name" validate-title="用户姓名"
                               validate-rules="[[‘required‘,‘请输入$‘]]" value="${form.name }">
    View Code

     

  • 官方单选框
    技术图片 
    <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>
    View Code

     

  • 官方文件处理
    技术图片 
    <input id="file" type="file" name="file">
    View Code

     

  • 官方勾选框checkbox
    技术图片 
    <input type="checkbox" name="isAutoLogin" data-selector="checkbox" checked="checked" value="on">
    View Code

     

  • 官方分页，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>
    View Code

     

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

     

4，js相关

  • jq获得文件
    技术图片 
    var file = $(‘#file‘)[0].files[0]
    View Code

     

  • jq获得普通
    技术图片 
    var introduce = $(‘#introduce‘).val();
    View Code

     

  • jq获得checkbox，勾选框，没有值 的时候undefined
    技术图片 
    var isAutoLogin = $("input[name=‘isAutoLogin‘]:checked").val();
    View Code

     

  • jq获得raido，单选框，
    技术图片 
    var gender = $("input[name=‘gender‘]:checked").val();
    View Code

     

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 () {
        }
    })
    View Code

     

  • 当有under fined上传影响入参的时候，不让她加入formdata
    技术图片 
    if(userAddtionalId != undefined){
        formData.append("userAddtionalId", userAddtionalId);
    }
    View Code

     

  • ajax显示不是正确的返回，+延时跳转
    技术图片 
    if (data.data != ‘SUCCESS‘) {
                alert(data.data)
            } else {
                alert("成功")
                setTimeout(function() { window.location.href="/user/showAddtional?userId="+ userId }, 1000);
            }
    View Code

     

以上是关于雨燕权限管理前端技术总结的主要内容，如果未能解决你的问题，请参考以下文章

权限管理（React）

前端React最全技术点总结以及代码

sqlserver后端接口最好的语言

前端权限控制

回归 | js实用代码片段的封装与总结（持续更新中...）

物联网平台：前端技术选型总结