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

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实用代码片段的封装与总结(持续更新中...)

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