상품 수정 기능
상품 수정 기능
상품 수정의 전반적인 흐름은 아래와 같습니다.
1. DetailProduct.js에서 [수정] 버튼을 누르면 http://localhost/update 주소를 요청하고 ProductController의 update() method가 호출됩니다.
2. Controller에서 받은 입력값을 DAO에 보냅니다.
3. DAO는 mapper에 자료를 전달하여 테이블의 레코드가 수정됩니다.
4. 서버에서 처리가 완료되면 React의 ListProduct.js가 실행되고 최신 상품목록을 받아와서 화면에 출력합니다.
1. DetailProduct.js (React)
파일 위치: c:/react/frontend/src/components/DetailProduct.js
[생략]
function DetailProduct() {
[생략]
<tr>
<td>상품이미지</td>
<td>
<span dangerouslySetInnerHTML={{ __html: image_url }}></span>
<br />
<input type='file' ref={img} />
</td>
</tr>
<tr>
<td colSpan='2' align='center'>
<button type='button' onClick={() => {
const form = new FormData();
form.append('product_code', data.product_code);
form.append('product_name', product_name.current.value);
form.append('price', price.current.value);
form.append('description', description.current.value);
form.append('img', img.current.files[0]);
fetch('/update', {
method: 'post',
encType: 'multipart/form-data',
body: form
}).then(() => {
navigate('/');
});
}
}>수정</button>
<button onClick={() => navigate('/')}>목록</button>
</td>
</tr>
</tbody>
</table>
</>
);
}
};
export default DetailProduct;
[해설]
[수정] 버튼을 클릭하면 태그에 입력한 내용들을 form 으로 묶어서 서버로 보내게 됩니다. 상품등록과 다른 부분은 상품코드도 같이 보낸다는 것입니다.
form.append('product_code', data.product_code);
상품코드를 보내야 서버에서 해당되는 상품을 찾아서 정보를 보내주게 됩니다.
2. product.xml (Spring Boot)
id가 update인 태그를 작성합니다.
파일 위치: src/main/resources/mappers/product.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="product">
<select id="list" resultType="java.util.Map">
select * from product
where product_name like #{product_name}
order by product_name
</select>
<insert id="insert">
insert into product (product_name, description, price, filename)
values
(#{product_name}, #{description}, #{price}, #{filename})
</insert>
<select id="detail" resultType="java.util.Map">
select * from product
where product_code=#{product_code}
</select>
<update id="update">
update product
set product_name=#{product_name},
price=#{price},
description=#{description},
filename=#{filename}
where product_code=#{product_code}
</update>
</mapper>
[해설]
map에 전달된 값들이 #{변수}에 매핑되어 레코드가 수정됩니다.
<update id="update">
update product
set product_name=#{product_name},
price=#{price},
description=#{description},
filename=#{filename}
where product_code=#{product_code}
</update>
3. ProductDAO.java (Spring Boot)
update() method를 작성합니다.
파일위치: src/main/java/com/example/product/ProductDAO.java
[생략]
@Repository
public class ProductDAO {
[생략]
public Map<String, Object> detail(String product_code) {
return sqlSession.selectOne("product.detail", product_code);
}
public void update(Map<String, Object> map) {
sqlSession.update("product.update", map);
}
}
[해설]
public void update(Map<String, Object> map) {
sqlSession.update("product.update", map);
}
Controller에서 전달한 값이 map에 저장됩니다.
id가 update 태그에 저장된 sql 명령어가 실행됩니다.
4. ProductController.java (Spring Boot)
update() method를 작성합니다.
파일위치: src/main/java/com/example/product/ProductController.java
[생략]
@RestController
public class ProductController {
[생략]
@RequestMapping("/detail/{product_code}")
public Map<String, Object> detail(@PathVariable String product_code, ModelAndView mav) {
return productDao.detail(product_code);
}
@RequestMapping("/update")
public void update(@RequestParam Map<String, Object> map, @RequestParam(required = false) MultipartFile img,
HttpServletRequest request) {
String filename = "-";
if (img != null && !img.isEmpty()) {
filename = img.getOriginalFilename();
try {
ServletContext application = request.getSession().getServletContext();
String path = application.getRealPath("/static/images/");
img.transferTo(new File(path + filename));
} catch (Exception e) {
e.printStackTrace();
}
} else {
String product_code = map.get("product_code").toString();
Map<String, Object> product = productDao.detail(product_code);
filename = product.get("filename").toString();
}
map.put("filename", filename);
productDao.update(map);
}
}
[해설]
@RequestMapping("/update")
public void update(@RequestParam Map<String, Object> map, @RequestParam(required = false) MultipartFile img, HttpServletRequest request) {
write() method와 비슷한 형식입니다.
첨부파일을 제외한 값들은 Map에 저장되고 첨부파일은 MultipartFile에 저장됩니다.
if (img != null && !img.isEmpty()) {
} else {
}
새로운 첨부파일이 있는지에 따라 처리하는 로직입니다.
String product_code = map.get("product_code").toString();
Map<String, Object> product = productDao.detail(product_code);
filename = product.get("filename").toString();
map.put("filename", filename);
새로운 첨부파일이 없는 경우에는 map에 저장된 상품코드를 조회하여 상품코드에 해당하는 레코드를 가져와서 파일이름을 저장합니다.
productDao.update(map);
레코드를 수정합니다.
수정 완료 후 React의 ListProduct.js 가 실행되어 상품 목록이 바뀝니다.
5. 상품 수정 실행 결과 확인
상품 상세 화면에서 [수정] 버튼을 누르면 상품 정보가 변경됩니다.