step3---->往工程中添加View层模板------->网上下载一些可用的View模板，将其修改后添加至自己的项目工程中

文章内容概述：

　　搭建一个web网站时，为了使得你的网站的界面美观，一般需要使用CSS、JavaScript等来美化你的网站界面，实际上现在有很多开源的view层模板，开发者可以从相关网站下载合适的view模板，进行一定的修改之后直接加入到自己的web project中，这样可以加快网站的搭建速度。本文针对我的机器学习管理平台的搭建过程作一个记录，以便于日后网站维护与管理。

机器学习管理平台（leapMotion）View层搭建过程：

　　step1：向工程中添加信息门户界面，如下图

　　　　　　

　　　　　　具体搭建过程：针对我想要的界面效果，我从Internet上下载了一个相关模板，本机存放路径如下图：

　　　　　　

　　　　　　该view模板所包含的文件如下图，其实就是一些html、css、js文件的集合而已

　　　　　　

　　　　　　　　有了这些文件，下面就可以将它们添加到myeclipse的相应的工程中去了，（添加方法：将上述文件及文件夹copy---粘贴到myeclipse中是src/main/webapp文件夹下即可）

　　　　　　  

　　　　　　注意，其实为了保证工程目录结构的整洁性，其实应该将上述文件位置作相应的修改，如style.css最好放在/css文件夹下，当然这就需要更改相应文件代码，使其路径都得到更新，本阶段先不做更改，保留开源view模板原有目录结构，后期可以进行修改。

　　　　　　按照上述操作过程将“网站首页（门户界面）”的view模板添加到自己的工程中后，可以启动tomcat，通过浏览器访问网站首页，检验该view模板是否被成功添加至自己的网站，如下图：

　　　　　　

　　

　　step2：向工程中添加登录界面

 　　　　　　具体添加过程：从网站上下载使用AmazeUI_admin_2.7.2这个模板作为本系统的登录界面、错误信息显示界面...

　　　　　　下载的模板如下：

　　　　　　

　　　　　　　　将上述下载内容添加到myeclipse的src/main/webapp/jsp文件夹下

　　　　　　　　

　　　　　　　　浏览器访问相应界面，查看该view模板是否被成功导入：

　　　　　　　　

 

　

　　step3：向工程中添加web后台管理view模板

 

　　　　　　具体添加过程：使用spring_time_free_standard这个模板作为本系统的后台管理界面

　　　　　　下载的view模板：

　　　　　　

　　　　　　将上述view模板添加到自己的工程中，具体添加过程如下：

　　　　　　　　将上述view模板的/css/images文件夹下的所有图片放到myeclipse的src/mian/webapp/css/images文件夹下

　　　　　　　　将上述view模板的/css/style.css文件更名为style-managePlatform.css(更名是为了防止和myeclipse中工程中src/mian/webapp/css文件夹下已有文件冲突)，然后将更名后的css文件放到myeclipse的src/mian/webapp/css文件夹下

　　　　　　　　将上述view模板的index.html文件更名为managePlatform.html存放至myeclipse的src/mian/webapp文件夹下

    　　　　检验管理平台view模板是否成功添加至自己的web工程，在浏览器地址栏输入如下网址：

　　　　　　

遗留问题：

　　工程目录结构不规范，后面需要对工程目录结构作出整理，整体成标准目录结构，这样网站的后期维护与管理才会变得更加容易。　　　　　

 

向自己的工程中添加View模板时可能出现的问题：

问题一：添加的某个jQuery库文件在myeclipse中报错

报错：　　

　　　　　　Eclipse自动解析时提示以下错误：

　　　　　　Internal validation error
　　　　　　Java.lang.ArrayIndexOutOfBoundsException: 9
 　　　　　　at org.eclipse.wst.jsdt.internal.compiler.ast.CaseStatement.resolveCase(CaseStatement.java:82)

　　　　　　...............

　　　　　　JQuery.mobile-1.1.0.min.js

问题原因：

　　　　　myeclipse对jQuery库文件进行自动解析的过程中出现错误

解决办法：

　　　　   方法一，可以通过禁用项目的JavaScript部分代码解析方法来避免这个错误：

　　　　　　　　1.右键点击项目属性

　　　　　　　　2.找到Javascript

　　　　　　　　3.找到Include Path,切换到Source 页面

　　　　　　　　4.双击Exclude，出现编辑界面，在Exclusion patterns中Add一个模式:**/jquery.mobile/*  确定返回

　　　　　方法二，  另外还有一种打patch的方式，参考文档