其他分享
首页 > 其他分享> > skills_FrontEnd

skills_FrontEnd

作者:互联网

1 网页文件中引入另一个网页文件

在写页面的时候,有些东西是一样的,比如头部的导航或者尾部的标注。所以复用的东西可以写到一个文件中,之后再引入,angularjs或是jsp中都有很好的标签引入,而html没有,但是可以借助一些方式进行引入。

1.1 angularjs文件引入

  1. angularjs 头部引入
<head>
    <% include configHead.ejs %>
    <title>后台管理</title>
</head>
  1. angularjs 尾部或中部引入
    <% include homeFooter.ejs %>

1.2 jsp文件引入

<%@ include file="文件名" %>//(等于是将两个jsp合并为一个jsp)

<jsp:include page="文件名">//(相当于将两个jsp执行后的内容合并成一个页面)

1.3 html文件引入

1. js方法,引入homeHeader.html和homeFooter.html,div使用class引入

<script type="text/javascript">
        $(document).ready(function () {
            $('.configHead').load('homeHeader.html');
            $('.configFoot').load('homeFooter.html');
        });
    </script>
</head>
<body>
<header>
 <div class="configHead">
  1. iframe引入
<iframe name="" frameborder="0" scrolling="no" marginwidth="0" 
marginheight="0"  width="100%" height="170" src="homeFooter.html">
</iframe>
  1. css引入
    可以在css定义某个class,将所需要添加的东西负载上去,之后引用该class就可以了。

参考链接:https://www.cnblogs.com/liziyou/p/6437701.html

2 静态页面html内获取contextPath

function getContextPath() {
    var pathName = document.location.pathname;
    var index = pathName.substr(1).indexOf("/");
    var result = pathName.substr(0,index+1);
    return result;
}

3 html文件中如何获取请求中传递的参数

html不认识jstl,无法使用 <c:if> , ${param1} 等表达式。

  1. 通过js解析请求url
    比如有一条请求一个html页面,传递了两个参数:
一、字符串分割分析法。
这里是一个获取URL带REQUESTRING参数的JAVASCRIPT客户端解决方案。
相当于asp的request.querystring,PHP的$_GET,jsp的request.getParameter
//var USERCODE="<%=request.getParameter("USERCODE")%>";
//以上是用request.getParameter在浏览器端获取参数值, 也可以是用该方法在服务器端获取参数方法
函数:
方法1:
<Script language="javascript">
function GetRequest() {
   var url = location.search; //获取url中含"?"符后的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}
</Script>
然后我们通过调用此函数获取对应参数值:
<Script language="javascript">
var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request['参数1'];
参数2 = Request['参数2'];
参数3 = Request['参数3'];
参数N = Request['参数N'];
</Script>
以此获取url串中所带的同名参数

方法2:
	function getURLParameter(name) {
	    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)')
		.exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
	}
	var orgid = getURLParameter('orgid');
	var orglevel = getURLParameter('orglevel');
	console.log('orgid='+orgid);
	console.log('orglevel='+orglevel);

方法3:
在index.html中的<script>标签中,输入js代码:$('body').append(location.search);

二、正则分析法。
function GetQueryString(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
   var r = window.location.search.substr(1).match(reg);
   if (r!=null) return unescape(r[2]); return null;
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

原文链接:https://blog.csdn.net/weixin_40648180/java/article/details/80745024
https://blog.csdn.net/weixin_30367945/article/details/99739938?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare
  1. 在jsp页面中,我们使用EL表达式${key}就可以拿到值了,在html5中,我们需要这样写[[${key}]]。

  2. 用thymeleaf模板。

  3. AngularJS在页面上可以使用{{name}}去取值。

4 html和jsp的区别及优缺点

♥ HTML(Hypertext Markup Language)文本标记语言,它是静态页面,和JavaScript一样解释性语言,为什么说是解释性语言呢?因为,只要你有一个浏览器那么它就可以正常显示出来,而不需要指定的编译工具,只需在TXT文档中写上HTML标记就OK。
JSP(Java Server Page)看这个意思就知道是Java服务端的页面,所以它是动态的,它是需要经过JDK编译后把内容发给客户端去显示,我们都知道,Java文件编译后会产生一个class文件,最终执行的就是这个class文件,JSP也一样,它也要编译成class文件!JSP不止要编译,它还得要转译,首先把JSP转译成一个Servlet文件,然后在编译成class文件。当用户访问JSP时就执行了class文件,最 终......

  1. 最简单的区别就是,HTML能直接打开,jsp只能发布到Tomact等服务器上才能打开
  2. 定义上HTML页面是静态页面可以直接运行,JSP页面是动态页它运行时需要转换成servlet
  3. 他们的表头不同,这个是JSP的头“ <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>”在表头中有编码格式和导入包等
  4. 也是很好区分的在jsp中用<%%>就可以写Java代码了,而html没有<%%>

html的优点:

  1. 开发过程中前端与后端脱离,交互通过JSON传输来实现
  2. 跨平台能力更强,依托于浏览器的支持
  3. 使后台数据接口能够得到复用

jsp的优点:

  1. 可被爬虫爬到
  2. 减少请求次数
  3. 不用考虑浏览器的兼容性

html的缺点:

  1. 开发难度大,考虑浏览器的兼容性
  2. 页面请求过多
  3. 属于后加载,无法被爬虫爬到
  4. 接口代码需要新增很多
  5. 无法直接显示java实体类对象,需要转换为json格式

jsp的缺点:

  1. 增大了服务器的压力
  2. 前端与后端未脱离,拖慢开发进度
  3. 过于依赖java运行环境
  4. 复用较低。

5

标签:FrontEnd,skills,html,jsp,var,参数,class,页面
来源: https://www.cnblogs.com/mediocreWorld/p/15188950.html