ユーザー追加ページ構築(nieValidateフォーム検証、ajax携帯番号非同期検証)

6537 ワード

ユーザを追加
1>userinfo_を作成するadd.jsp、ユーザーページを追加します.
フォームに提出するコントロールに注意してください.nameは対応するクラスの属性と一致します.
2>UserInfoControllerにクリックボタンを追加してページに移動します.ページにセキュリティがありますので(web-inf下)

	@RequestMapping("user/loadadd.do")
	public String loadadd(){
		return "userinfo/userinfo_add";
	}

3>userinfo_list.jspページはユーザー追加ボタンにあります.

        href="user/loadadd.do"

4>UserInfoDAO.java追加add方法

	/**
	 *     
	 * @param user
	 * @return
	 *    int      
	 */
	public int add(UserInfo user);

5>UserInfoDAO.xml sqlを追加して登録する.

      	<insert id="add" parameterType="UserInfo">
	insert into user_info(user_name,user_sex,user_phone,user_pw,user_type)
	values(#{userName},#{userSex},#{userPhone},#{userPw},#{userType})
	</insert>

6>IUserInfoService追加

        /**
	 *     
	 * @param user
	 */
	public void addUser(UserInfo user);

7>対応するUserInfoServiceImpl追加

        	@Autowired
	private UserInfoDAO userdao;
	
	public void addUser(UserInfo user){


		int i = userdao.add(user);
		System.out.println(i);
		
	}

8>UserInfoControllerに追加(追加成功などのメッセージをmodelで返す必要があります.追加成功後にヒントページにジャンプします.)

        /**
	 *     
	 * @param user
	 * @param model
	 * @return
	 */
	@RequestMapping("user/add.do")
	public String add(UserInfo user,Model model){
		//    
		String info = "    ";
		try {
			userservice.addUser(user);
			info="    !";
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		//            
		model.addAttribute("info",info);
		
		return "userinfo/userinfo_info";
	}

9>ヒントページuserinfo_info.jsp

        <head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<title>Insert title here</title>
<script type="text/javascript">
alert('${info}');
window.location="<%=basePath%>user/list.do";
</script>
</head>

ヒント(エラー/成功)情報は、ユーザーリストページにジャンプします.
10>ただし、フォームに必要な項目が空であっても提出できます.
フォーム検証ツール:nice Validate

対応する漢化ファイルjsファイルとcssスタイルファイルを紹介します.
公式サイトで使い方を確認します

11>携帯電話番号の非同期認証ajax(加入者を追加すると、同じ携帯番号を記入した場合、直ちに携帯番号が占有されていることを提示する)
記入した携帯番号に基づいて調べます.

1)userinfo_add.jsp、携帯番号inputにIDをuser Phoneにあげます. 2)jsを追加する:(jquery appi)
$(this).val()は現在のテキストボックスの値を取得します.
blur:テキスト枠を移動するイベントに注目してください.

         	<script type="text/javascript">
	   $(function(){
		   $("#userPhone").blur(function(){
			   
			   //ajax
			   //    ，    url    
			   //        
			   //             
			   //          
			   $.post('',


{userPhone:userPhone},function(){},"json");
			   
			   
		   });
	   });
	</script>

3)バックグラウンド作成受付方法UserInfoController

	/**
	 *       
	 * @param user
	 * @return
	 */
	@RequestMapping("user/userajax.do")
	public @ResponseBody UserInfo userAjax(UserInfo user){//


              ，      @ResponseBody
		
		System.out.println(user);
		if(user!=null){
			user.setUserName("w  ");
		}
		
		return user;
	}

@ResonseBody:文字列、配列、map、オブジェクトなどを直接jsonに変えることができます. 書式

まず、syssoプリントテストを行います.

4)ここでは要求と応答から文字列を読み取るためにそしてオブジェクトを回転 json形式になるので、springmvc_にします.back.xmlには以下のような構成があります.

        <!--         /      -->
	<bean id="stringHttpMessage"
		


class="org.springframework.http.converter.StringHttpMessageConver


ter">
		<property name="supportedMediaTypes">
			<list>
				<value>text/plain;charset=UTF-


8</value>
			</list>
		</property>
	</bean>


	<!--         JSON -->
	<bean id="jsonConverter"
		


class="org.springframework.http.converter.json.MappingJacksonHttp


MessageConverter"></bean>


	<bean
		


class="org.springframework.web.servlet.mvc.annotation.AnnotationM


ethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<ref bean="stringHttpMessage" />
				<ref bean="jsonConverter" />
			</list>


		</property>
	</bean>

5)UserInfoDAOは携帯電話番号による問い合わせ方法を編纂する.

       /**
	 *           
	 * @param user
	 * @return
	 */
	public UserInfo getUserInfo(UserInfo user);

6)該当する、UserInfoDAO.xmlプロファイルにsqlを登録する.

            <select id="getUserInfo" parameterType="UserInfo" resultMap="usermap">
      select * from user_info
      <where>
          <if test="userId != null and userId != ''">
          and user_id=#{userId}
          </if>
          <if test="userPhone != null and userPhone != ''">
          and user_phone=#{userPhone}
          </if>
      </where>
    </select>

7)対応するサービス層とimpl層の追加方法 8)UserInfoControillerは戻り結果を処理し、情報を返す

   	/**
	 *       
	 * @param user
	 * @return
	 */
	@RequestMapping("user/userajax.do")
	public @ResponseBody String userAjax(UserInfo user){//              ，      @ResponseBody
		
		//      ajax             
	     UserInfo puser = userservice.getUserInfo(user);
	
	     if (puser !=  null) {
			return "         ，     !";
		}else{
			return "   !        ";
		}
		
	}

9)userinfo_add.jsp:

      <span id="errorinfo" style="color: red;  margin-left: 50px"></span>

           	<!-- ajax      -->
	<script type="text/javascript">
	   $(function(){
		   $("#userPhone").blur(function(){
			   
			   //ajax
           $.post('user/userajax.do',{userPhone:                  
                    $(this).val()},function(user){
			   
                     $("#errorinfo").html(str);				
   },"json");
		   });
	   });
	</script>

uuntuネットワークカードの設定モード

Spring Coud_31_SprigCloud配置センター/例