[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