1.模板认识
<一.简介:velocity-1.6.3.jar默认模板后缀为vm;freemarker-2.2.19.jar默认模板后缀为ftl。
<二.模板技术和jsp的异同点:第一次jsp执行流程;jsp转译为java文件,编译为class文件;第二次之后jsp执行流程:直接访问class文件。
<三.模板技术怎样输出数据:数据(struts2的值栈)+模板(html文件,vm文件,ftl文件)=输出文本.
<四.Velocity模板技术可以实现的功能:
<a.动态页面静态化:xxx.jsp-->xxx.html:在后台准备数据,在前端准备模板,通过IO把数据与模板合并,真正的生成一个html页面发出来的。
<b. 用作发邮箱,短信模板
<c.代码生成器
<五.pom.xml:添加jar文件
<!-- 代码生成器模版技术 -->
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity</artifactId>
<version>1.6</version>
</dependency>
2.EasyCode(它是idea中的一个插件)
<安装:
1.在线安装:点击file-->Settings-->Plugins-->查找easy code-->点击下载安装
2.离线安装(先下载相应的zip包)--->Install plugin from disk
3.添加数据源右侧data source-->mysql-->输入用户名密码--->不用选择数据库,会默认当前数据库
4.新建一个测试数据库-->生成的路径是path和里面的路径拼接而成的
5.依次生成domain层,dao层,service层,controller层,jsp和js模板
3.web项目排错技巧
<1.web项目运行的基本机制:
2.确认是前端还是后端出错:
当一个涉及前后台的功能(甚至是整个页面)没有达到预期,首先要界定是前台还是后台的问题。首先是理清思路:
(1)确认前台是否正确发出了请求
这可以和接口文档进行比对。如果请求有问题那么前台肯定是有问题的,没有问题继续下一步。
(2)确认后台是否正确返回了结果
也是需要和接口文档进行比对,如果返回的结果有问题那么后台肯定是有问题的,没有问题那么就是前端的处理反馈逻辑有问题。
通过以上步骤,可以快速界定是前台还是后台出问题了,而且还可以进一步确定是前端的发送请求有问题还是处理反馈有问题。
查看发送的请求和后台反馈结果的方法是浏览器抓包,这里以Google浏览器为例,其它浏览器类似。
(1)打开浏览器开发者工具
在浏览器中按F12打开开发者工具
(2)查看发送的请求
a. 切换到network标签页
b. 执行访问后台的操作
此处以登录为例,输入账号、密码,单击登录按钮。此时就可以观察到发送的请求
单击这个请求,可以在Headers标签页查看详细信息。
如果是post方式,查看的请求是这样的
c. 查看后台反馈结果
在Response标签页中可以查看后台反馈结果。
四、前端调试
如果已经确定前端有问题,可以通过调试进一步确定问题。
(1)语法错误
如果有语法错误,在Console标签页中可以查看错误提示和位置
此处是提示url没有定义,原因是定义的变量叫“url1”,而使用的变量叫“url”。
(2)逻辑错误
遇到逻辑错误就需要借助于断点、查看表达式调试方法定位错误了
(1)打开需调试的文件
切换到Sources标签页、打开文件
(2)设置断点
(3)运行前端代码
运行前端代码与Java代码有所不同,前端代码是在浏览器中运行。因为这里想调试的代码是当页面加载完成后自动执行的,所以刷新页面即可执行这些代码。当执行至断点处,程序暂停。
上图中的蓝色框就是标记即将要执行的代码,然后就可以像调试Java代码一样借助于工具进行调试
上图中红色框中的四个按钮分别是:
resume:继续执行后续代码,直到遇到下一个断点,快捷键是F8
step over:继续下一条,如果是函数调用也当做一条普通代码执行,即不查看函数内部执行过程,快捷键是F10。
step into:也是继续下一条,如果是函数调用会进入函数内部查看执行过程,快捷键是F11。
step out:跳出函数,直接到函数调用处,快捷键是Shift+F11。
如果现在想查看当前代码中断点处函数调用(该函数在cookie.js文件中定义)的详细过程,可以使用F11,执行之后可以看到程序调到cookie.js中的getCookie函数内部了。
(4)查看表达式
可以想临时查看一下变量或者表达式的值,可以按下图方式操作。
如果需要特别关注变量或者表达式的值,也可以按下图步骤添加到watch窗口。