簡易的なショッピングサイト【初心者質問】

前提・実現したいこと

現在、簡易的なショッピングサイトを作成しております。
そこで発生したエラーについてですが、どのように修正をすればよいのか分からず、お力をいただければと思い投稿いたしました。
よろしくお願いいたします。

発生している問題・エラーメッセージ

添付参照

該当のソースコード

【IndexController】

package xxxxx.practice.controlle;

import java.util.List;略

@Controller
@RequestMapping("/practice")
public class IndexController {
	
	@Autowired
	UserMapper userMapper;
	
	@Autowired
	GoodsMapper goodsMapper;
	
	@Autowired
	PurchaseMapper purchaseMapper;
	
	Gson gson = new Gson();
	
	@RequestMapping("practice")
	public String index(Model m) {
		String userName = "taro";
		String password = "taropw";
		List<User> users = userMapper.findByUserNameAndPassword(userName, password); 
		
		User user = new User();
		if(users != null && users.size() > 0) {
					user = users.get(0);
					System.out.println(user.getFullName());
		}
		m.addAttribute("user", user);
		
		List<Goods> goodsList = goodsMapper.findAll();
		if(goodsList != null && goodsList.size() > 0) {
					m.addAttribute("goodsList", goodsList);
		}
		
		return "index";
	}

	@ResponseBody
	@PostMapping("/api/purchase")
	public String purchaseApi(@RequestBody PurchaseForm f) {
		
		Purchase p = new Purchase();
		p.setUserId(f.getUserId());
		p.setGoodsId(f.getGoodsId());
		p.setItemCount(f.getItemCount());
		p.setTotal(f.getTotal());
		purchaseMapper.insert(p);
		
		return "1";
	}
	
	@ResponseBody
	@PostMapping("/api/history")
	public String historyApi(@RequestBody HistoryForm form) {
		String userId = form.getUserId();
		List<HistoryDto> history = purchaseMapper.findHistory(userId);
		
		return gson.toJson(history);
	}
}

【Goods.java】
package xxxxx.model.domain;

import java.sql.Timestamp;
import java.util.List;

public class Goods {
	
	private long id;
	private String goodsName;
	private long price;
	private Timestamp updatedAt;
	private List<Purchase> purchaseList;

以下文字数オーバーのため略（getter/setter）

【Purchase.java】
package xxxxx.practice.model.domain;

import java.sql.Timestamp;

public class Purchase {
	
	private long id;
	private long userId;
	private long goodsId;
	private long itemCount;
	private long total;
	private Timestamp createdAt;
	
	以下文字数オーバーのため略（getter/setter）

【User.java】
package xxxxx.practice.model.domain;

public class User {
	
	private long id;
	private String userName;
	private String password;
	private String fullName;
	private int isAdmin;
	
	以下文字数オーバーのため略（getter/setter）

【HistoryDto.java】
package xxxxx.practice.model.domain.dto;

import java.sql.Timestamp;略

public class HistoryDto {
	
	private long id;
	private long userId;
	private long goodsId;
	private String goodsName;
	private long itemCount;
	private long total;
	private Timestamp createdAt;
	
	public HistoryDto() {}
	
	public HistoryDto(Goods goods) {
		Purchase p = goods.getPurchaseList().get(0);
		this.setId(p.getId());
		this.setUserId(p.geUsertId());
		this.setGoodsId(p.getGoodsId());
		this.setGoodsName(goods.getGoodsName());
		this.setItemCount(p.getItemCount());
		this.setTotal(p.getTotal());
		this.setCreatedAt(p.getCreatedAt());
		
		
}

	以下文字数オーバーのため略（getter/setter）

【HistoryForm.java】

package xxxxx.practice.model.form;

import java.io.Serializable;

public class HistoryForm implements Serializable {
	private static final long serialVersionUID = 1L;
	
	private String userId;

	以下文字数オーバーのため略（getter/setter）

【PurchaseForm.java】

package xxxxx.practice.model.form;

import java.io.Serializable;

public class PurchaseForm implements Serializable {
	private static final long serialVersionUID = 1L;
	
	private long userId;
	private long goodsId;
	private long itemCount;
	private long total;
	
	以下文字数オーバーのため略（getter/setter）

【GoodsMapper.java】
package 〃.practice.model.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;略

@Mapper
public interface GoodsMapper {
	
	@Select("SELECT * FROM goods")
	List<Goods> findAll();
	
	@Delete("DELETE FROM goods WHERE Id = #{id}")
	boolean deleteById(long id);

}

【PurchaseMapper.java】

package 〃.practice.model.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Insert;略
@Mapper
public interface PurchaseMapper {
	
	List<HistoryDto> findHistory(@Param("userId") String userId);
	
	@Insert("INSERT INTO purchase (user_id, goods_id, item_count, total)" +
			"VALUES (#{userId}, #{goodsId}, #{itemCount}, #{total})")
	@Options(useGeneratedKeys=true, keyProperty="id")
	void insert(Purchase purchase);
}

【UserMapper.java】

package 〃.practice.model.mapper;

import java.util.List;略

@Mapper
public interface UserMapper {

	List<User> findByUserNameAndPassword (
			@Param("userName") String userName,
			@Param("password") String password);
}

【PurchaseMapper.xml】

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper
	namespace="〃.practice.model.mapper.PurchaseMapper">

	<select id="findHistory" resultType="〃.practice.model.domain.dto.HistoryDto">
		SELECT p.id, p.user_id, p.goods_id, p.goods_name, p.item_count, p.total, p.created_at
		FROM purchase p
			INNER JOIN goods g
			ON p.goods_id = g.id
		WHERE created_at = (
			SELECT MAX(created_at) FROM purchase p WHERE p.user_id = #{userId})
	</select>
	
</mapper>

【UserMapper.xml】

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper
	namespace="〃.practice.model.mapper.UserMapper">

	<select id="findByUserNameAndPassword"
		resultType="〃.practice.model.domain.User">
		SELECT * FROM user WHERE user_name = #{userName} AND password = #{password}
	</select>

</mapper>

【index.html】

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>ショッピングサイト（仮）</title>

<style>
td:nth-child(1).td:nth-child(3) {
	text-align: right;
}
input[type=number] {
	width: 50px; 
	text-align: right;
}
</style>

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(() => {
	$('button.purchase').on('click', buy);
	$('button#history').on('click', showHistory);
});

let buy = (event) => {
	let targetTr = $(event.target).parent().parent();
	let tdList = $(targetTr).find('td');
	
let total = Number($(tdList[3]).find('input').val()) * Number($(tdList[2]).text());

let data = {
		"userId": $('#hiddenUserId').val(),
		"goodsId": $(tdList[0]).text(),
		"itemCount": $(tdList[3]).find('input').val(),
		"total": total,
};

$.ajax ({
	type: 'POST',
	url: '/practice/api/purchase',
	data: JSON.stringify(data),
	contentType: 'application/json',
	datatype: 'json',
	scriptCharset: 'utf-8'	
})

.then(
		(result) => {
			alert('購入');
			}, () => {
				console.error('Error: ajax connection failed.');
				}
			);
};


let showHistory = (event) => {
	$.ajax({
		type: 'POST',
		url: '/practice/api/history',
		data: JSON.stringify({
			"userId": $('#hiddenUserId').val(),
			}),
			contentType: 'application/json',
			datatype: 'json',
			scriptCharset: 'utf-8'
		})
}

.then(
		(result) => {
			let purchaseList = JSON.parse(result);
			purchaseList.map((v) => {
				console.log(v.userId);
				console.log(v.goodsId);
				console.log(v.goodsName);
				console.log(v.createdAt);
				})
			},
			() => {
				console.error('Error: ajax connection failed.');
				}
			);
};
</script>
</head>
<body>

	<table id="goodsListTable">
		<thead>
			<tr>
				<th>xxx</th><th>xxx</th><th>xxx</th><th>xxx</th><th>xxx</th>
			</tr>
		</thead>
		
		<tbody>
			<tr th:each="item: ${goodsList}">
				<td th:text="${item.id}"/>
				<td th:text="${item.goodsName}"/>
				<td th:text="${item.price}"/>
				<td><input type="number" class="count" value="0" /></td>
				<td><button class="purchase">購入</button></td>
			</tr>
		</tbody>

	</table>

<button id="history">履歴</button>

<input type="hidden" id="hiddenUserId" th:value="${user.id}" />

</body>
</html>

試したこと

誤字脱字の確認。エラーについて調べるものの、いまいちわかりませんでした。

補足情報（FW/ツールのバージョンなど）

stsのプロジェクトは：spring web/ thymeleaf/My SQL Driver/MyBatis Framework を選択しております。

ここにより詳細な情報を記載してください。

※ブラウザエラー

※stsエラー①

※stsエラー②

m.ts10806

2020/05/29 11:40

タイトルと問題が結びつかないです。 mybatis関係ないのでは？タイトル調整された方が良いと思います。

m.ts10806

2020/05/29 11:42 編集

あとコードブロックの冒頭は「言語名」を書くものです。コードブロック内にコード以外は入れないように、できればファイル毎にコードブロックとしてください。でないと、こちらで再現確認するときに「コードと関係”なさそうな”箇所を削除する」という手間が発生し、正しく再現確認ができません（どこまでが実際の1ファイルか、どこまでが実際のコードか、他人には判断できません）

m.ts10806

2020/05/29 11:42

>素人質問ですが、よろしくお願いいたします。「初心者アイコン」を質問につけるにとどめてください。

退会済みユーザー

2020/05/30 10:16

無知で申し訳ございません。色々なご指摘ありがとうございます。

行動規範の内容に同意します

回答1件

クラスに@RequestMapping("/practice")
でそのメソッドに
@RequestMapping("/")
だと/practice/に対するアクセスになるように思いますが、ここは本当に問題ないですか？
1つ階層が変わるのではないでしょうか。

最後のスラッシュは「トレイリングスラッシュ」という名前があります。
これがあるかないかで、リクエストの意味が変わってきます。
URLの終りに「/」(スラッシュ)は必要?、不要?

http://localhost:8080/practice/でアクセスしてどうなるか確認したうえで、
念のためクラスのほうを@RequestMapping("/aaa")とし、
http://localhost:8080/practice/aaa
でアクセスして404にならないか確認してください。

/practiceでアクセスしたいなら
クラスには@RequestMapping("/")
で、メソッドに
@RequestMapping("practice")

とするか、クラスにはつけずにメソッドに
@RequestMapping("/practice")
としたほうが良いと思います。

上記踏まえると、MyBatisやサイトの製造以前に、URLマッピングを設計レベルから一度検討しなおした方がこの手のトラブルは防げるのではと思います。

投稿2020/05/29 11:50

編集2020/05/29 11:52

m.ts10806

総合スコア80875