-
Axure生成原型的HTML页面怎么转成JSP
2023-11-08 07:43:03
提问者：文静演变睫毛膏
我要回答答
共1条用户回答-
步骤一：生成原型
用Axure rp可以直接生成原型（F5即可），选择路径后，该路径上会出现一个文件夹（假设叫原型），就是我们的原型了。
其中的HTML文件是主要的页面
原型\resources\css目录下文件的作用是描述Axure rp中统一的显示风格
原型\resources\scripts目下是一些脚本文件
原型\页面名_files\目录下是该页面独有的页面风格描述文件，脚本文件，和该页面会用到的图片资源。
步骤二：建立web项目并配置
既然是web开发，自是用myeclipse了。jdk的配置和tomcat的配置就不再讲啦。新建一个叫MyWeb的项目，右击项目名MyWeb，新建一个JSP页面，就叫做myJsp吧。
这样的一个JSP页面我们需要对它稍作修改，以支持HTML中的一些东西。实际上只需要修改第一行：pageEncoding="ISO-8859-1"，把后面的编码格式改为“UTF-8”就行啦。
步骤三：加入HTML并修改其他配置
我们把原型中某页面的HTML文件用文本格式打开，全选，复制~~~然后打开刚刚项目的myJsp.jsp，把刚刚的东西复制到<html></html>之间即可。好了，这样我们的代码就可以运行了，但是别以为这么简单就结束了。
此时我们的jsp文件有什么问题呢，第一，它其中没有包含会用到的图片资源，css等资源。第二，它的对资源的获取路径有问题。还有一点非常非常重要的，就是Axure rp生成的原型的HTML中的资源目录中会有中文，但是这个带有中文的资源目录是JSP不能识别的。这点等等我会提到。
知道了这些问题，赶紧改。先把原型的resource目录拷贝到项目的webroot目录下，再把页面名_files文件夹拷到webroot目录下。然后，我们先把<link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet">这样的代码中使用的css目录改成我们刚刚拷到webroot下的resource文件里的相应css文件（文件是相同的噢）。 再修改<SCRIPT src="resources/scripts/jquery-1.4.2.min.js"></SCRIPT>中的js文件，还是在我们刚刚拷贝进webroot中的文件中找到相应文件，把这个文件的路径替换刚才的路径。
最后修改图片资源路径。我们在代码中仔细寻找<INPUT type="image" id=u2 src="Images\transparent.gif" class="u2" >和<IMG src="Images/4.jpg" class="raw_image">样子的代码，这样的代码意思是引用该图片并显示在网页上。我们还是用和刚刚相同的方法找到刚刚拷贝进项目的文件夹中的相应图片，将其相对路径改到src=“ ”中。
还有要注意的一点是，无论是图片路径还是css路径，千万不要包含中文，不然JSP无法识别的。好了，项目基本上搞定了，让我们运行看看。
步骤四：发布和运行
先用tomcat发布项目，再在浏览器中输入http://localhost:8080/项目名称/myJsp.jsp，有没有发现页面显示效果和Axure rp 的原型显示效果一模一样啦。
2023-11-09 17:36:26
沉默打荷花
MORE相关课程
ONLINE COURSES -
