说是解决,其实不是很完美的解决的,写出来只是想记录一下这个问题或者看一下有没有哪位仁兄会的,能否知道一二。

下面说说出现问题:

问题是这样的,当我查询一个一对多的实体的时候,工具直接就爆了,差不多我就猜到是哪里死循环了,最后等了好久,查看原因,果然是堆溢出,再然后是jsckson的错误。那么必然是序列化的问题了。

这是jackson的错误:

  1. at java.security.AccessController.doPrivileged(Native Method)
  2. at java.net.URLClassLoader.findClass(URLClassLoader.java:354)
  3. at java.lang.ClassLoader.loadClass(ClassLoader.java:425)
  4. at java.lang.ClassLoader.loadClass(ClassLoader.java:412)
  5. at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:308)
  6. at java.lang.ClassLoader.loadClass(ClassLoader.java:358)
  7. at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1617)
  8. at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1547)
  9. at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:691)
  10. at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
  11. at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:656)
  12. at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:675)
  13. at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)

这是循环引用的错误:

  1. 严重: Servlet.service() for servlet [springDispatcherServlet] in context with path [/Shop] threw exception [Request processing failed; nested exception is org.springframework.http.converter.HttpMessageNotWritableException: Could not write JSON: Infinite recursion (StackOverflowError) (through reference chain: com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]->com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]->com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]->com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]->com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]->com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]->com.web.module.index.model.entity.Account["user"]->com.web.module.index.model.entity.User["accounts"]->org.hibernate.collection.internal.PersistentSet[0]-
  2. j。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。还有很多的相同的错误

下面是两个实体:

User.java:

  1. package com.web.module.index.model.entity;
  2.  
  3. import java.io.Serializable;
  4. import java.util.HashSet;
  5. import java.util.Set;
  6.  
  7. import javax.persistence.Entity;
  8. import javax.persistence.FetchType;
  9. import javax.persistence.Id;
  10. import javax.persistence.OneToMany;
  11. import javax.xml.bind.annotation.XmlAccessType;
  12. import javax.xml.bind.annotation.XmlAccessorType;
  13. import javax.xml.bind.annotation.XmlElement;
  14. import javax.xml.bind.annotation.XmlRootElement;
  15.  
  16. import org.hibernate.validator.constraints.NotEmpty;
  17.  
  18. import com.fasterxml.jackson.annotation.JsonIgnore;
  19.  
  20. @XmlAccessorType(XmlAccessType.FIELD)
  21. @XmlRootElement(name="user")
  22. @Entity
  23. public class User implements Serializable{
  24.  
  25. /**
  26. *
  27. */
  28. private static final long serialVersionUID = 1L;
  29. @XmlElement
  30. @Id
  31. private String id;
  32. /**
  33. * validate适用于springmvc
  34. */
  35. @XmlElement
  36. //@NotEmpty
  37. private String name;
  38.  
  39. @JsonIgnore
  40. @OneToMany(mappedBy="user",targetEntity=Account.class,fetch=FetchType.EAGER)
  41. private Set<Account> accounts=new HashSet<Account>();
  42.  
  43. public String getName() {
  44. return name;
  45. }
  46.  
  47. public void setName(String name) {
  48. this.name = name;
  49. }
  50.  
  51. public String getId() {
  52. return id;
  53. }
  54.  
  55. public void setId(String id) {
  56. this.id = id;
  57. }
  58.  
  59. public Set<Account> getAccounts() {
  60. return accounts;
  61. }
  62.  
  63. public void setAccounts(Set<Account> accounts) {
  64. this.accounts = accounts;
  65. }
  66.  
  67. @Override
  68. public String toString() {
  69. return "User [id=" + id + ", name=" + name + ", accounts=" + accounts
  70. + "]";
  71. }
  72.  
  73. }

Account.java:

  1. package com.web.module.index.model.entity;
  2.  
  3. import java.io.Serializable;
  4.  
  5. import javax.persistence.CascadeType;
  6. import javax.persistence.Entity;
  7. import javax.persistence.FetchType;
  8. import javax.persistence.Id;
  9. import javax.persistence.JoinColumn;
  10. import javax.persistence.ManyToOne;
  11.  
  12. import com.fasterxml.jackson.annotation.JsonIgnore;
  13.  
  14. @Entity
  15. public class Account implements Serializable{
  16.  
  17. /**
  18. *
  19. */
  20. private static final long serialVersionUID = 1L;
  21.  
  22. @Id
  23. private String id;
  24.  
  25. private String code;
  26. private String password;
  27.  
  28. @JsonIgnore
  29. @JoinColumn(name="user_id")
  30. @ManyToOne(targetEntity=User.class,fetch=FetchType.EAGER)
  31. private User user;
  32. public String getId() {
  33. return id;
  34. }
  35.  
  36. public void setId(String id) {
  37. this.id = id;
  38. }
  39.  
  40. public String getCode() {
  41. return code;
  42. }
  43.  
  44. public void setCode(String code) {
  45. this.code = code;
  46. }
  47.  
  48. public String getPassword() {
  49. return password;
  50. }
  51.  
  52. public void setPassword(String password) {
  53. this.password = password;
  54. }
  55.  
  56. public User getUser() {
  57. return user;
  58. }
  59.  
  60. public void setUser(User user) {
  61. this.user = user;
  62. }
  63.  
  64. @Override
  65. public String toString() {
  66. return "Account [id=" + id + ", code=" + code + ", password="
  67. + password + ", user=" + user + "]";
  68. }
  69.  
  70. }

后来去网上看了一下,这个问题很多人遇到。解决方案也有很多.

1.在关联的实体上面设置@JsonIgnore,这个注解的意思是表示在序列化的时候,忽略这个属性.但是我现在的逻辑是在页面中必须使用到这个关联实体中的属性,所以就不能这么做了,不然在页面中是取不出这个数据的。

  1. Uncaught TypeError: Cannot read property 'name' of undefined1,2都会出现)

2.采用单向多对一的形式,这样就不会出现循环的问题,这个确实是个方案,但是如果在一的那边需要使用到多的这边的话,就不好搞了。所以感觉还是不是很满意。

3.后来想了想,既然是这样,要不我在一的那边使用@JsonIgnore吧。目前在页面中没使用。其实这个是第二个是差不多的,有点不同的是除了页面展示的时候不能够显示多的那面的数据,在其他的业务中还是能够使用的。这也是我在前面说不是很满意的解决办法。

4.第四种解决就是前面的3差不多,当我们使用多的一边的时候,可以正确的显示,但是在我们使用一的那一端的时候,我们可以使用List自己拼装,有点像下面的代码:

  1. @RequestMapping(value="result/{id}",method=RequestMethod.GET)
  2. public @ResponseBody List<?> result(@PathVariable("id") String id){
  3. System.out.println(id);
  4. List<Map<String,Object>> list=Lists.newArrayList();
  5. //Map<String,Object> map=new HashMap<String,Object>();
  6. Map<String,Object> map=null;
  7. Random r=new Random();
  8. DecimalFormat dfmt=new DecimalFormat("#,###.00");
  9. for(int i=0;i<4;i++){
  10. int price=r.nextInt(10)+1;
  11. int number=r.nextInt(100000)+10000;
  12. map=new HashMap<String,Object>();
  13. map.put("tradegoods", "煤"+i);
  14. map.put("units", "顿");
  15. map.put("consumer", "XX物流"+id);
  16. map.put("unitPrice", dfmt.format(price));
  17. map.put("number", dfmt.format(number));
  18. map.put("count", dfmt.format(price*number));
  19. list.add(map);
  20. }
  21. //设置日期格式
  22. return list;
  23. }

这样jackson序列化的时候,就不会出错了,而且使用起来就不用像A.B.name这样了,而且使用起来也更加的简单。我们在JS里面就可以这样使用:

  1. if(id!=""&&id){
  2. $.ajax({
  3. type: 'GET',
  4. url: $ctx + '/example/demo/result/'+id,
  5. dataType: 'json',
  6. success: function(data) {
  7. for(var i=;i<data.length;i++){
  8. data[i].num=i+;
  9. }
  10. //alert(JSON.stringify(data));
  11. viewModel.result(data);
  12. $(".notice-hide").show();
  13. $(".notice-show").hide();
  14. },
  15. error: function(req, textStatus, errorThrown){
  16. }
  17. });

html:

  1. <tbody data-bind="foreach: result">
  2. <tr>
  3. <td data-bind="text:num"></td>
  4. <td data-bind="text:tradegoods"></td>
  5. <td data-bind="text:units"></td>
  6. <td data-bind="text:consumer"></td>
  7. <td data-bind="text:unitPrice" class="format_"></td>
  8. <td data-bind="text:number" class="format_"></td>
  9. <td data-bind="text:count" class="format_"></td>
  10. </tr>
  11. </tbody>

这样就完美的解决了这个问题。

5添加Filter的方式进行动态的过滤属性 ,上面的解决方法还是或多或少的影响到我们正常的使用类,下面说的方法是不会影响放到原有的类的。

jsckson的ObjectMapper有一个

  1. public final void addMixInAnnotations(Class<?> target, Class<?> mixinSource)
  2. {
  3. _mixInAnnotations.put(new ClassKey(target), mixinSource);
  4. }
  5.  
  6. public final Class<?> findMixInClassFor(Class<?> cls) {
  7. return (_mixInAnnotations == null) ? null : _mixInAnnotations.get(new ClassKey(cls));
  8. }
  9.  
  10. public final int mixInCount() {
  11. return (_mixInAnnotations == null) ? : _mixInAnnotations.size();
  12. }

这样的方法,这个方法的使用就要结合JsonIgnoreProperties注解一起来进行使用。我们需要定义一个接口,这个接口的作用是用来专门的过滤属性的。

还是针对上面的例子,我们要解决问题的话  ,我们需要在定义一个接口:

  1. package com.hotusm.jackson;
  2.  
  3. import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
  4.  
  5. @JsonIgnoreProperties(ignoreUnknown=true,value={"user"})
  6. public interface AccountFilter {
  7. }

这个接口非常简单,就是一个注解,注解其中的value就是表示的是我们需要将那些属性给忽略掉,增加了这么一个接口后,我们就可以使用上面提到的方法。

  1. objectMapper.addMixInAnnotations(Account.class, AccountFilter.class);

之后再使用这个objectmapper的时候,在account类上面的user就不会被忽略掉了,通过这种方式,我们不用修改原来类的任何地方。但是这种方式需要我们重新创建一个接口,所以下面一种就是解决这种每次都要创建的痛苦了。

6.利用自定义注解的方式来进行过滤,这种方式也是看到其他人使用,感觉非常好,也就做一个简单的总结。

大概的讲一下思路

1.还是使用addMixInAnnotations方法,但是不需要我们每次都创建一个接口而是采用全注解的形式来。也许会很奇怪,前面的方法命名

是传入两个class啊 ,我们不手动创建的话,那该怎样的去调用呢。这里我们使用字节码技术Javassist来动态的创建class。

2.大概的思路就是我们自定义方法级别注解,注解上面可以指定某些类上的哪些属性需要忽略。然后对这些方法进行增强,增强逻辑中获取到这些注解中的类以及这个类上面忽略的

下面是上面理论的一个简单的实践:

第一步:自定义注解:

  1. package com.hotusm.jackson.annotation;
  2.  
  3. import java.lang.annotation.Documented;
  4. import java.lang.annotation.ElementType;
  5. import java.lang.annotation.Inherited;
  6. import java.lang.annotation.Retention;
  7. import java.lang.annotation.RetentionPolicy;
  8. import java.lang.annotation.Target;
  9.  
  10. @Target(ElementType.METHOD)
  11. @Documented
  12. @Retention(RetentionPolicy.RUNTIME)
  13. @Inherited
  14. public @interface IgnoreProperty {
  15. /**
  16. * 指定类
  17. */
  18. Class<?> pojo();
  19.  
  20. /**
  21. *指定上面的类那些属性需要过滤的
  22. */
  23. String[] value();
  24. }

上面这个注解就是我们后面要使用到的动态的在方法上面直接指定类需要忽略的属性。

第二步:对ObjectMapper进行装饰(写的例子,不是很优雅)

  1. package com.hotusm.jackson.annotation;
  2.  
  3. import java.lang.reflect.Method;
  4. import java.util.Collection;
  5. import java.util.HashSet;
  6.  
  7. import javassist.CannotCompileException;
  8. import javassist.ClassPool;
  9. import javassist.CtClass;
  10. import javassist.bytecode.AnnotationsAttribute;
  11. import javassist.bytecode.ClassFile;
  12. import javassist.bytecode.ConstPool;
  13. import javassist.bytecode.annotation.Annotation;
  14. import javassist.bytecode.annotation.ArrayMemberValue;
  15. import javassist.bytecode.annotation.BooleanMemberValue;
  16. import javassist.bytecode.annotation.MemberValue;
  17. import javassist.bytecode.annotation.StringMemberValue;
  18.  
  19. import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
  20. import com.fasterxml.jackson.databind.ObjectMapper;
  21.  
  22. public class ObjectMapperBuilder {
  23.  
  24. public ObjectMapper build(Method method) throws CannotCompileException{
  25. IgnoreProperty ignoreProperty = method.getAnnotation(IgnoreProperty.class);
  26. String[] value = ignoreProperty.value();
  27. Class<?> pojo = ignoreProperty.pojo();
  28. checkParamter(method,value,pojo);
  29. Class<?> clazz=doBuild(value);
  30. ObjectMapper objectMapper=new ObjectMapper();
  31. objectMapper.addMixInAnnotations(pojo, clazz);
  32. return objectMapper;
  33. }
  34. /**
  35. * 根据传入的参数构造一个class
  36. * @throws CannotCompileException
  37. */
  38. public Class<?> doBuild(String[] values) throws CannotCompileException{
  39. ClassPool pool = ClassPool.getDefault();
  40. CtClass cc = pool.makeInterface("ProxyMixInAnnotation" + System.currentTimeMillis());
  41. ClassFile classFile = cc.getClassFile();
  42. ConstPool cp = classFile.getConstPool();
  43. AnnotationsAttribute attr = new AnnotationsAttribute(cp,
  44. AnnotationsAttribute.visibleTag);
  45. Annotation jsonIgnorePropertiesAnnotation = new Annotation(
  46. JsonIgnoreProperties.class.getName(), cp);
  47. BooleanMemberValue ignoreUnknownMemberValue = new BooleanMemberValue(false, cp);
  48. //
  49. ArrayMemberValue arrayMemberValue = new ArrayMemberValue(cp);
  50. Collection<MemberValue> memberValues = new HashSet<MemberValue>();
  51. for(int i=;i<values.length;i++){
  52. StringMemberValue memberValue = new StringMemberValue(cp);// 将name值设入注解内
  53. memberValue.setValue(values[i]);
  54. memberValues.add(memberValue);
  55. }
  56. arrayMemberValue.setValue(memberValues.toArray(new MemberValue[]{}));
  57. jsonIgnorePropertiesAnnotation.addMemberValue("value", arrayMemberValue);
  58. jsonIgnorePropertiesAnnotation.addMemberValue("ignoreUnknown", ignoreUnknownMemberValue);
  59. attr.addAnnotation(jsonIgnorePropertiesAnnotation);
  60. classFile.addAttribute(attr);
  61. Class clazz = cc.toClass();
  62. return clazz;
  63. }
  64. protected void checkParamter(Object... objs){
  65. boolean isTrue=true;
  66. if(objs==null||objs.length<=){
  67. isTrue=false;
  68. }
  69. for(Object obj:objs){
  70. if(obj==null){
  71. isTrue=false;
  72. }
  73. }
  74. if(!isTrue){
  75. throw new RuntimeException("参数出现错误");
  76. }
  77. }
  78. }

上面这一步我们已经看到了熟悉的addMixInAnnotations。后面的参数就是我们使用javassist根据value数组创建的动态类,这个动态类增加了一个很重要的注解就是JsonIgnoreProperties(这个注解就是我们6中讲的过滤属性的),现在通过build方法返回的ObjectMapper已经满足了动态的过滤属性的。

下面是一个测试:

  1. @Test
  2. @IgnoreProperty(pojo=Article.class,value={"user"})
  3. public void testJacksonAnnotation(){
  4. User user=new User();
  5. user.setName("hotusm");
  6. Article a1=new Article();
  7. a1.setTitle("t1");
  8. a1.setUser(user);
  9. Article a2=new Article();
  10. a2.setTitle("t2");
  11. a2.setUser(user);
  12. Article a3=new Article();
  13. a3.setTitle("t3");
  14. a3.setUser(user);
  15. List<Article> as=new ArrayList<Article>();
  16. as.add(a1);
  17. as.add(a2);
  18. as.add(a3);
  19. user.setArticles(as);
  20. ObjectMapper objectMapper;
  21. try {
  22. objectMapper = new ObjectMapperBuilder().build(Main.class.getMethod("testJacksonAnnotation"));
  23. String str = objectMapper.writeValueAsString(user);
  24. System.out.println(str);
  25. } catch (Exception e) {
  26. e.printStackTrace();
  27. }
  28. }

在打印出来的json数据我们就可以明显的看出来已经把Article中的user属性给过滤掉了。(注意,user和article是一对多的关系

总结:因为上面写的一个例子只是为了显示出问题,并没有进行代码的优化,以及功能的完善,如果是要在生产过程中使用的话,我们完全可以这样做:1.注解可以在类或者是方法上面2.所有多出来的操作都应该是对客户端程序员来说是透明的,我们可以通过方法的增强以及对ObjectMapper进行装饰。3.将方法或者类上面的注解信息放入到缓存中去,而不用发每次都要提取一次

JPA一对多循环引用的解决的更多相关文章

  1. JPA一对多循环引用的解决&&JackSon无限递归问题

    说是解决,其实不是很完美的解决的,写出来只是想记录一下这个问题或者看一下有没有哪位仁兄会的,能否知道一二. 下面说说出现问题: 问题是这样的,当我查询一个一对多的实体的时候,工具直接就爆了,差不多我就 ...

  2. C#项目间循环引用的解决办法,有图有真相

    C#项目间循环引用的解决办法,有图有真相 程序间的互相调用接口,c#禁止互相引用,海宏软件,20160315 /// c#禁止互相引用,如果项目[订单]中有一个orderEdit单元,要在项目[进销存 ...

  3. 在mvc返回JSON时出错:序列化类型为“System.Data.Entity.DynamicProxies.Photos....这个会的对象时检测到循环引用 的解决办法

    在MVC中返回JSON时出错,序列化类型为“System.Data.Entity.DynamicProxies.Photos....这个会的对象时检测到循环引用. public ActionResul ...

  4. Block的使用及循环引用的解决

    Block是一个很好用的东西,这篇文章主要来介绍:1.什么是Block?2.Block的使用?3.Block的循环引用问题及解决. 1.什么是Block? 说这个问题之前,我先来说一下闭包(Closu ...

  5. EF中Json序列化对象时检测到循环引用的解决办法

    MVC4 EF中将数据表外键引用的是自身,转换成Json时,总是提示错误:“序列化类型为....的对象时检测到循环引用.”: 解决办法: 把要序列化的对象转为匿名对象去掉导航属性,如下 :本来是var ...

  6. IOS block 循环引用的解决

    在介绍block循环引用前我们先了解一下typeof. typeof是什么??? typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类 ...

  7. 解决ASP.NET MVC返回的JsonResult 中 日期类型数据格式问题,和返回的属性名称转为“驼峰命名法”和循环引用问题

    DateTime类型数据格式问题 问题 在使用ASP.NET MVC 在写项目的时候发现,返回给前端的JSON数据,日期类型是 Date(121454578784541) 的格式,需要前端来转换一下才 ...

  8. 【JSON 注解】JSON循环引用1-----Jackson常用注解介绍 eq:@JsonIgnore

    循环引用:实体A与实体B有关系,A中有B作为字段,B中有A作为一个字段.查询A对象后,将A对象转化为JSON格式数据时,会因为序列化过程中导致A中有B字段,B字段中又有A,这样就引起了循环引用的问题! ...

  9. iOS循环引用问题

    今天面试问道了循环引用,所以就看了看,原来只是知道使用了Block容易造成循环引用.今天就来简单的介绍一些循环引用. 先来简单介绍一下什么是循环引用? 循环引用可以简单的理解成:A对象引用了B对象,B ...

随机推荐

  1. Java-条件语句、循环语句练习

    题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米)? double height=0.08; for(int i=1;i>0;i++) { heig ...

  2. Android开发学习之路-Service和Activity的通信

    在很多时候,Service都不仅仅需要在后台运行,还需要和Activity进行通信,或者接受Activity的指挥,如何来实现,来看代码. 定义一个服务 // 创建一个服务,然后在onBind()中返 ...

  3. Atitti usrQBf1801 翻页控件规范  v2

    Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPa ...

  4. IOS开发之控件篇UICollectionViewControllor第一章 - 普通介绍

    1.介绍 UICollectionView和UICollectionViewControllor是IOS6.0后引入的新控件 使用UICollectionView必须实现三个接口: UICollect ...

  5. zabbix 3.0 安装 ubuntu环境

    zabbix 3.0 安装 标签(空格分隔): 开发 [TOC] 下载deb # wget http://repo.zabbix.com/zabbix/3.0/ubuntu/pool/main/z/z ...

  6. C++标准库vector类型详解

    Vector简介 vector是定义在C++标准模板库,它是一个多功能.能够操作多种数据结构和算法的模板类(关于模板类我们后面会介绍,如何创建自己的模板类).vector是一个容器,能够像容器一样存放 ...

  7. .NET实现Office Excel自定义公式 广泛应用于报表与数据分析

    在管理软件开发的功能点中,有相当一部分功能是与Excel做数据交互,产生Excel 数据报表.如果Excel报表的数据计算方法很有规律可循,则可以通过自定义公式来解决.比如常见的资产负债表,利润表,取 ...

  8. ASP.NET MVC中简单使用Autofac

    项目中引入Autofac的目的是为了实现控制反转,即IoC,Inversion of Control.控制反转可以有效的降低类之间的相互依赖关系,增加架构的弹性,降低软件复杂度. 示例代码: IPro ...

  9. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  10. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...