Hacker and Geeker's Way

前一篇post主要记录了Spring JPA和Hibernate的问题，接着记录其他一些工具遇到的问题。

Jsoup

Jsoup是一个比较火的Java解析Html工具，简单易用，功能强大，在github上有不少星星。

使用Jsoup连接url时报403

一般使用Jsoup连接url都不会有什么问题，正常的写法如下：

1

Jsoup.connect(url).get();

但有些网站会获取用户的浏览器信息，而上面的写法是没有浏览器信息的，这个时候就会报403的错误，需要在连接时加上userAngent。

1

Jsoup.connect(url).userAgent("Mozilla").get();

Css Selector

使用Jsoup来抓取网页信息，最简单的一种方式就是通过Css selector，这样可以让你少写很多代码。比如下面的一段html:

1
2
3

<div id="main">
	<div class="header"></div>
</div>

使用css selector可以这样简单的获得。

1

doc.select("#main div.header")

Velocity

项目用到了Velocity来定制邮件模板，这样可以方便的修改邮件格式。在网上可以搜到很多关于Spring和Velocity集成的文章，但大部分是讲如何使用Velocity来生成页面的，而如何生成其他文件的说明比较少，下面我们就来看一下如何配置的。

• 先配置velocityConfigurer的bean，这里定义了模板文件的路径，属性和编码等信息。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <bean id="velocityConfigurer" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer"> <property name="resourceLoaderPath" value="WEB-INF/velocity" /> <property name="velocityProperties"> <props> <prop key="directive.foreach.counter.name"> loopCounter </prop> <prop key="directive.foreach.counter.initial.value"> 0 </prop> <prop key="input.encoding">UTF-8</prop> <prop key="output.encoding">UTF-8</prop> </props> </property> </bean>

• 在需要使用的Sevice里面引入，这样就可以在service里面使用到Velocity的配置信息了。

  1 2 3 4 5

  @Service public class MailService { @Resource(name = "velocityConfigurer") private VelocityConfigurer velocityConfigurer; }

• 使用Velocity的工具类来得到生成的文件信息。

  • temple是模板文件的名称。
  • model是生成文件所需的参数。

    1 2 3

    String content = VelocityEngineUtils.mergeTemplateIntoString( velocityConfigurer.getVelocityEngine(), temple, MAIL_ENCODING, model);

Angularjs

Angularjs功能比较强大，使用它之后基本可以不用使用JQuery了，这里记录一下使用遇到的一个比较奇怪的问题。

• 问题: 使用Angularjs发起一个post请求，带了几个请求的参数，后台接收请求时获取不到参数。开始的写法如下：

1
2
3
4
5
6
7
8
9
10

var queryData = {
               "depGroup": $("#dep_group").val() || "",
               "website": $("#website").val() || "",
               "startDate": $("#start_date").val() || "",
               "endDate": $("#end_date").val() || ""
           };

$http.post('api/search', queryData).success(function (data) {
                   $scope.blogs = data;
               });

• 接收不到参数的原因是angularjs把参数转成了json导致后台接收不到，需要在发起请求时将参数转换一下，修改后的代码如下：

1
2
3
4
5
6
7

var postConfig = {
       headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
       transformRequest: transform
   };

   $http.post('api/search', queryData，postConfig).success(function (data) {
                   $scope.blogs = data;

Semantic-ui

这个是我比较喜欢的一个css框架，这里要注意的地方是有些功能和Angularjs结合起来会发现不起作用，如果不起作用可以尝试使用angular-semantic这个工具看看能否解决问题。

• semantic-ui的表单规则和行为设置，简单的示例如下，需要设置规则(rules)和配置(setting即校验通过后的行为)。

js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var rules = {
	searchKeyword: {
        identifier: 'searchKeyword',
        rules: [
            {
                type: 'empty',
                prompt: '请输入查询关键字'
            }
        ]
    }
};

var setting = {
    onSuccess: function () {
        // 发http请求
    }
};

$('#searchForm').form(rules, setting);

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="searchForm" class="ui form">
       <div class="two fields">
           <div class="field">
               <div class="ui icon input">
                   <input id="searchKeyword" type="text" name="searchKeyword" placeholder="请输入查询关键字...">
                   <i class="search icon"></i>
               </div>
           </div>

           <div class="field">
               <div id="searchBtn" class="ui blue submit button">查询</div>
           </div>
       </div>
       <div class="ui error message"></div>
   </div>