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文件引入

１. 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 彻底卸载然后安装node和npm

#apt-get 卸载
sudo apt-get remove --purge npm
sudo apt-get remove --purge nodejs
sudo apt-get remove --purge nodejs-legacy
sudo apt-get autoremove

#手动删除 npm 相关目录
rm -r /usr/local/bin/npm
rm -r /usr/local/lib/node-moudels
sudo find / -name npm
rm -r /tmp/npm* 

# 安装node和npm：方法1，apt-get
sudo apt-get install nodejs
sudo apt-get install nodejs-legacy

# 安装node和npm：方法2，下载已经编译好的包来使用（官网：https://nodejs.org/en/）
#   我选择方法2，因为可以自定决定安装哪个版本！
wget -c https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz

# 解压缩，解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：
sudo ln -s /develop/node-v16.13.1-linux-x64/bin/npm   /usr/local/bin/
sudo ln -s /develop/node-v16.13.1-linux-x64/bin/node   /usr/local/bin/

# 之后执行node -v 与 npm -v均可查到版本号

6 部署前端vue项目

# 以 RuoYi-Vue 项目的前端vue项目为例

cd /develop/ideaws/

# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd /develop/ideaws/RuoYi-Vue/ruoyi-ui

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

# 发布
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod

打印出来这些信息，说明前端工程已经启动成功：

7

8

posted @ 2021-08-26 12:14  mediocrep  阅读(45)  评论(0)  编辑  收藏  举报
既然选择了远方，便只顾风雨兼程！