web前后端分离势在必行【填坑记一】{{1012}}

川长思鸟来 2022-05-25 11:20 200阅读 0赞

##                                     Web前后端分离填坑记     ##

前言：

对于小项目采用springmvc框架前后端不用划分太细，用jsp页面开发即可，这样节约时间和成本。

（可以参照LP框架，下载地址 http://www.shinians.com）

然则：但是随着前端框架"火热"发展，用户也越来越重视体验和速度。毕竟后端开发人员精力也不够呀·~~~

前后端分离也算好事，但是需要一个好的架构才能逐步解决分离带来的那些“坑”....

================填坑走起【前后分离第七天】====================================

！！一旦决定，势在必行！！

开发很多项目，一直以来是前端开发好html页面后，然后就没有然后了.......

所以一个前端往往应对很对项目（毕竟一个页面开发也就1-2天搞定），接下来的工作全权由后端开发人员做，也因此算半个前端人士，了解些常用框架语言。

铺垫太多了······说正题了，开始说遇到哪些坑

小坑走起......

先了解了前后端分离用到的框架，有个初步认识，新技术太多如果贸然引用对整个项目进度不好把控，决定提前试试水，半分离开发

**1、前端不再采用jsp页面开发，用html代替之**

后端开始填坑：

采用办分离说明html和jsp页面视图解析同时，后端如何解析呢？

决定在springmvc.xml配置视图解析，支持html解析，具体配置如下

**解析判断走的自定义类  HtmlResourceView 代码如下**

/**

* @author:shinians
     * @description:
     * @date:Created in 23:39 2018/4/28
     * @modified By:
     */
    public class HtmlResourceView extends InternalResourceView {
        @Override
        public boolean checkResource(Locale locale) throws Exception {
            File file = new File(this.getServletContext().getRealPath("/") + getUrl());
            return file.exists();
        }
    }

这样就可以解析html了，前端用html开发，不用再转换为html，不就节省时间了,是不是应该高兴@!^!

然则这才到什么地方，路还远着呢.......坑才刚开始...

\[这是个坑，必填之\]

**2、前端已经用html开发，接下里如何开发？**

之前的想法是html跳转是通过后台action转发，地址栏限制不可直接通过html地址访问（技术很好实现，此坑不填）

个人理解这么做 “坑”应该出现了，既然分离，**既然以后彻底分离这种跳转不应该再有后端进行跳转，**

不然分离的意义也就不存在了，前端还是需要后端去写action方法进行指定跳转页面(晕。。。图什么呀)

填坑：前端的跳转交给前端处理，后端不进行跳转转发，采用直接url跳转（暂时先采用这种，不知道有没有坑）

**3、html页面路径以及head，footer公共部分引入，js、css引入，图片相对路径和绝对路径等问题**

一旦用html这些问题是必须考虑到的。之前jsp开发用绝对路径，而且支持el表达式，可以获取上下文等等，都洒洒水木问题啦。

如何解决上面的问题呢？

首先要解决的是部署项目的上下文问题？在html中如何获取web项目的上下文。

暂时采用如下代码获取，不知道有没有坑，不过不管如何，决定采用新的模式，为了纪念下之前走的弯路，获取上下文代码如下：

function getContextPath(){
    				var pathName = document.location.pathname;
    				alert(pathName)
    				var index = pathName.substr(1).indexOf("/");
    				var result = pathName.substr(0,index+1);
    				return result;
    	}                    //定义变量，引入js使用
    			var get_root=getContextPath();

接下来如何引入js和css？代码如下

<title>LP框架 官网-LP旨在打造超速Web开发平台框架之利器,开发集成插件配套方案，免费技术支持服务，让框架"小白"3分钟超速搭建自己的专有服务</title>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="keywords" content="LP官网,LP,LP框架,LP协同办公,limp,Java应用开源框架, Java EE(J2EE)快速开发框架,JAVA开发框架,java" />
    		<meta name="description" content="LP框架是一款极速 web开发框架平台（有3分钟速成之神速美称），由十年同学倾心打造,配有成熟的解决方案，以及相关插件供开发者使用，最重要的是免费，提供技术支持【QQ交流群：369022804 加群备注:LP官网】" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="author" content="十年,shiniandate@163.com">
    
    		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>

首先引入**head.min.js文件，**然后通过head加载css和js文件。加载代码如下

head.load(get_root+"/view/lp/css/load-index.css");//加载css
    
    	   head.load(get_root+"/view/lp/js/jquery-1.11.0.js");
    	   head.load(get_root+"/view/lp/bootstrap/js/bootstrap.min.js");
    	   head.load(get_root+"/systemsite/plug/layui-v2.2.6/layui.all.js");
    	   head.load(get_root+"/systemsite/plug/js-utils/system-site.js");
    
    	   head.load(get_root+"/view/lp/js/scrolling-nav.js");
    	   head.load(get_root+"/view/lp/js/jquery.easing.min.js");
    	   head.load(get_root+"/view/lp/js/wow.js");
    	   head.load(get_root+"/view/lp/js/wow-id.js");
    	   head.load(get_root+"/view/lp/js/jquery.nicescroll.js");
    	   head.load(get_root+"/view/lp/js/lp-index.js");

load-index.css加载样式代码如下，只有这样才不会存在路径问题。

@import "../bootstrap/css/bootstrap.min.css";
    @import "lp-style.css";
    @import "font-awesome.css";
    @import "animate.css";
    @import "portfolio.css";
    @import "lp-index.css";
    @import "../../../systemsite/plug/layui-v2.2.6/css/layui.css";

终于路径问题坑已经填完，（不过对于img标签中src在html中如何引入？通过js修改？这个坑到这应该可以做终止了，继续向下走吧，路还很长）

4、直接进行html url地址跳转，不再进行转发

这样的话html不再存在路径的问题，可以直接用相对路径即可，暂时采用这种相对路径的方式，浏览器直接进行跳转

对于公共部分（head和footer）思路是用魔板语言渲染加载。

5、前端框架采用vue+layui+nodejs

暂时采用这种技术，后面遇到坑在调整。

一周的坑 忐忐忑忑算是填个七七八八，接下来还有很多路要走.....

更多框架信息，请关注 www.shinians.com  官网，相互学习