[2.会員加入処理]

83447 ワード

1. webapp/js/my.jsを


$(document).ready(function(){
	$("#memberInsertBtn").click(function(){//회원 가입 처리
	
		var name=$("#name").val();
		var id=$("#id").val();
		var pw=$("#pw").val();
		
		//alert(name+":"+id+":"+pw);
		
		$.post("../memberInsert.pcm",
			  {
			    name:name,
			    id:id,
			    pw:pw
			  },
			  function(data, status){
			    alert( data);
			  });
	});
});

2. webapp/html/memberInsertForm.htmlで参照js

<script type="text/javascript" src="../js/my.js"></script>

3. HomeController.Javaをに変更

package com.ssafy.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HomeController {
	@RequestMapping(value = "memberInsert.pcm", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")
			
	@ResponseBody
	public String memberInsert(HttpServletRequest request,
			HttpServletResponse response)throws Exception{
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");
		String name=request.getParameter("name");
		System.out.println("memberInsert:"+id+"\t"+pw+"\t"+name);
	
		return name;
	}		
}

memberInsertの入力を受信できるようになりました.

4.Webブラウザalertに名前が表示されていることを確認します。

ヒントがあることを確認!

5.mybatisを使うために、pom。xmlに次の依存性を追加

pom.xmlの変更

120行から挿入

		<!-- https://mvnrepository.com/artifact/commons-beanutils/commons-beanutils -->
		<dependency>
		    <groupId>commons-beanutils</groupId>
		    <artifactId>commons-beanutils</artifactId>
		    <version>1.8.0</version>
		</dependency>
		
		<!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp -->
		<dependency>
		    <groupId>commons-dbcp</groupId>
		    <artifactId>commons-dbcp</artifactId>
		    <version>1.2.2</version>
		</dependency>
		
		<!-- https://mvnrepository.com/artifact/cglib/cglib -->
		<dependency>
		    <groupId>cglib</groupId>
		    <artifactId>cglib</artifactId>
		    <version>2.2</version>
		</dependency>
		
		
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis</artifactId>
		    <version>3.1.0</version>
		 </dependency>
		    
		 <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis-spring</artifactId>
		    <version>1.1.0</version>
		</dependency>

6. WEB-INF/spring/action-mybatis.xmlの生成

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">

	<bean id="propertyPlaceholderConfigurer"
		class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"
	>
		<property name="locations">
			<list>
				<value>/WEB-INF/config/jdbc/jdbc.properties</value>
			</list>
		</property>
	</bean>
	
	<bean id="dataSource" class="org.apache.ibatis.datasource.pooled.PooledDataSource">
		<property name="driver" value="${jdbc.driverClassName}"></property>
		<property name="url" value="${jdbc.url}"></property>
		<property name="username" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>
	
	<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="configLocation" value="classpath:mybatis/model/modelConfig.xml"></property>
		<property name="mapperLocations" value="classpath:mybatis/mappers/*.xml"></property>
	</bean>
	
	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
		<constructor-arg index="0" ref="sqlSessionFactoryBean"></constructor-arg>
	</bean>
	

	
	<bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource"></property>		
	</bean>
	
	<tx:annotation-driven transaction-manager="txManager" />
</beans>

以下のようにします.

7.WEB-INF/web.xmlで黄色の部分を変更する


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>
	
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/action-mybatis.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
		
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>*.pcm</url-pattern>
	</servlet-mapping>

</web-app>

8. WEB-INF/config/jdbc/jdbc.propertiesの作成

jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/cafe
jdbc.username=ssafy
jdbc.password=12345

9. src/main/resources/mybatis/model/modelConfig.xmlの作成

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
    PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

	<typeAliases>
		<typeAlias type="com.ssafy.web.vo.MemberVO" alias="memberVO"/>
	</typeAliases>

</configuration>

メンバーVOのオブジェクト設定が完了しました.

10.src/main/resources/mybatis/mappers/member.xmlの作成

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
<mapper namespace="mapper.member">
	<resultMap type="memberVO" id="memResult">
		<result property="id" column="memid" />
		<result property="pw" column="pw" />
		<result property="name" column="memname" />
		<result property="date" column="memdate" />
	</resultMap>
	
	<select id="selectAllMemberList" resultMap="memResult">
		<![CDATA[
			select * from member order by memdate desc
		]]>
	</select>
	
	<select id="login" resultType="String" parameterType="memberVO">
		<![CDATA[
			select name from member where id=#{id} and pw=#{pw}
		]]>
	</select>
	
	<select id="selectMemberById" resultMap="memResult" parameterType="String">
		<![CDATA[
			select * from member where memid=#{id}
		]]>
	</select>
	
	<select id="selectMemberByPw"  resultMap="memResult" parameterType="String">
		<![CDATA[
			select * from member where pw=#{pw}
		]]>
	</select>
	
	<insert id="memberInsert"   parameterType="memberVO" >
		<![CDATA[
			insert into member(id, pw, name) 
			values(#{id},#{pw},#{name})
		]]>
	</insert>
	
	<update  id="updateMember"  parameterType="memberVO" >
		<![CDATA[
			update member
			set pw=#{pw}, memname=#{name}
			where memid=#{id}
		]]>
	</update>
	
	<delete id="deleteMember" parameterType="String">
		<![CDATA[
			delete from member where memid=#{id}
		]]>
	
	</delete>
	

</mapper>

11 mysql-connectorはpomです。xmlの読み込み

		<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
		<dependency>
		    <groupId>mysql</groupId>
		    <artifactId>mysql-connector-java</artifactId>
		    <version>8.0.28</version>
		</dependency>

確認可能

12.MemberVOの作成

package com.ssafy.web.vo;

public class MemberVO {
	
	private int no;
	private String id, name, pw, email;
	
	public MemberVO(int no, String id, String name, String pw, String email) {
		super();
		this.no = no;
		this.id = id;
		this.name = name;
		this.pw = pw;
		this.email = email;
	}
	public MemberVO(String id, String pw) {
		setId(id);
		setPw(pw);
	}
	public int getNo() {
		return no;
	}
	public void setNo(int no) {
		this.no = no;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	@Override
	public String toString() {
		return "MemberVO [no=" + no + ", id=" + id + ", name=" + name + ", pw=" + pw + ", email=" + email + "]";
	}
}

13.MemberDAOの作成：

package com.ssafy.web.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.ssafy.web.vo.MemberVO;

@Repository
public class MemberDAO {
	@Autowired
	SqlSession sqlSession;
	
	public void memberInsert(MemberVO m) {
		sqlSession.insert("mapper.member.memberInsert", m);
	}

}

14.MemberServiceの作成：

package com.ssafy.web.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ssafy.web.dao.MemberDAO;
import com.ssafy.web.vo.MemberVO;

@Service
public class MemberService {
	
	@Autowired
	MemberDAO memberDAO;
	
	public void memberInsert(MemberVO m) throws Exception{
		memberDAO.memberInsert(m);
	}

}

15.HomeControllerの変更：

package com.ssafy.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ssafy.web.service.MemberService;
import com.ssafy.web.vo.MemberVO;

@Controller
public class HomeController {
	
	@Autowired MemberService memberService;
	@RequestMapping(value = "memberInsert.pcm", 
			method= {RequestMethod.POST},
			produces = "application/text; charset=utf8")
			
	@ResponseBody
	public String memberInsert(HttpServletRequest request,
			HttpServletResponse response)throws Exception{
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");
		String name=request.getParameter("name");
		System.out.println("memberInsert:"+id+"\t"+pw+"\t"+name);
	
		try {
			MemberVO vo = new MemberVO(0, id, name, pw, null);
			memberService.memberInsert(vo);
			return name+"님 회원가입 되셨습니다";
		}catch(Exception e) {
			return e.getMessage();
		}		
	}		
}

16. my.jsでは会員入庫は閉鎖されます

$(document).ready(function(){
	$("#memberInsertBtn").click(function(){//회원 가입 처리
	
		var name=$("#name").val();
		var id=$("#id").val();
		var pw=$("#pw").val();
		
		//alert(name+":"+id+":"+pw);
		
		$.post("../memberInsert.pcm",
			  {
			    name:name,
			    id:id,
			    pw:pw
			  },
			  function(data, status){
			    alert( data);
			    window.close();
			  });
		
	});

});

17.運転確認

mysql workbench

エラーの修正

Reference

この問題について([2.会員加入処理]), 我々は、より多くの情報をここで見つけました https://velog.io/@fe26min/2.-회원가입-처리하기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

@Autowired自動注入空ポインタ異常(Junitユニットテストで問題発生)

dbossパフォーマンステスト