skills_FrontEnd

2023-12-24 20:16:16

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

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

1.1 angularjs文件引入

angularjs 头部引入

<head>
    <% include configHead.ejs %>
    <title>后台管理</title>
</head>

angularjs 尾部或中部引入
<% include homeFooter.ejs %>

1.2 jsp文件引入

<%@ include file="文件名" %>//(等于是将两个jsp合并为一个jsp)
或
<jsp：include page="文件名">//(相当于将两个jsp执行后的内容合并成一个页面)

1.3 html文件引入

１. 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">

iframe引入

<iframe name="" frameborder="0" scrolling="no" marginwidth="0" 
marginheight="0"  width="100%" height="170" src="homeFooter.html">
</iframe>

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} 等表达式。

通过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

在jsp页面中，我们使用EL表达式${key}就可以拿到值了，在html5中，我们需要这样写[[${key}]]。
用thymeleaf模板。
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文件，最终......

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

html的优点：

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

jsp的优点：

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

html的缺点：

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

jsp的缺点：

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

码农公寓