用户详情页

首先, 先找个默认头像的文件

将none.jpg放入 WebContent/rs/user_avatar/none.jpg

none.jpg的位置

打开UserProfileModule类,加入一个方法, 用于内部跳转到profile.jsp

  1.     @At("/")
  2.     @GET
  3.     @Ok("jsp:jsp.user.profile")
  4.     public UserProfile index(@Attr(scope=Scope.SESSION, value="me")int userId) {
  5.         return get(userId);
  6.     }

新建一个jsp文件 WebContent/WEB-INF/jsp/user/profile.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <title>用户详情页</title>
  9. <script type="text/javascript"
  10.     src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
  11. <script type="text/javascript">
  12.     var base = '${base}';
  13.     $.fn.serializeObject = function() {
  14.         var o = {};
  15.         var a = this.serializeArray();
  16.         $.each(a, function() {
  17.             if (o[this.name] !== undefined) {
  18.                 if (!o[this.name].push) {
  19.                     o[this.name] = [ o[this.name] ];
  20.                 }
  21.                 o[this.name].push(this.value || '');
  22.             } else {
  23.                 o[this.name] = this.value || '';
  24.             }
  25.         });
  26.         return o;
  27.     };
  28.     $(function() {
  29.         $("#user_profile_btn").click(function() {
  30.             //alert(JSON.stringify($("#user_profile").serializeObject()));
  31.             $.ajax({
  32.                 url : base + "/user/profile/update",
  33.                 type : "POST",
  34.                 data : JSON.stringify($("#user_profile").serializeObject()),
  35.                 success : function() {
  36.                     location.reload();
  37.                 }
  38.             });
  39.         });
  40.     });
  41. </script>
  42. </head>
  43. <body>
  44.     <div>
  45.         <div>
  46.             头像 <img alt="用户头像" src="${base}/user/profile/avatar">
  47.             <p />
  48.             <form action="${base}/user/profile/avatar" method="post"
  49.                 enctype="multipart/form-data">
  50.                 头像文件 <input type="file" name="file">
  51.                 <button type="submit">更新头像</button>
  52.             </form>
  53.             <span class="color:#f00"> <%
  54.      if (session.getAttribute("upload-error-msg") != null) {
  55.          String msg = session.getAttribute("upload-error-msg")
  56.                  .toString();
  57.          out.print(msg);
  58.          session.removeAttribute("upload-error-msg");
  59.      }
  60.  %>
  61.             </span><p />
  62.         </div>
  63.     </div>
  64.     <div>
  65.         <form action="#" id="user_profile" method="post">
  66.             <div>
  67.                 id:<c:out value="${obj.userId}"></c:out><p />
  68.             </div>
  69.             <div>
  70.                 昵称:<input name="nickname" value="${obj.nickname}"><p />
  71.             </div>
  72.             <div>
  73.                 邮箱:<input name="email" value="${obj.email}">
  74.                 <p />
  75.             </div>
  76.             <div>
  77.                 邮箱验证状态:<c:out value="${obj.emailChecked}"></c:out><p />
  78.             </div>
  79.             <div>
  80.                 性别:<input name="gender" value="${obj.gender}"><p />
  81.             </div>
  82.             <div>
  83.                 自我介绍:<input name="description" value="${obj.description}"><p />
  84.             </div>
  85.             <div>
  86.                 地理位置:<input name="location" value="${obj.location}"><p />
  87.             </div>
  88.         </form>
  89.         <button type="button" id="user_profile_btn">更新</button>
  90.     </div>
  91. </body>
  92. </html>

文件很长,当然也很丑,也许后期会把UI弄好一点,现在先凑合着看吧.

关于文件上传

  • 直接ajax上传是不行的, 那是html4的限制,不是nutz的问题
  • swfupload等等都可以用的,因为发送的格式都是html multipart
  • UploadAdaptor管理的是临时文件夹!!需要自行把文件移动到需要的目录去,或者扔到数据库去