javascript
基于Spring MVC + Spring + MyBatis的【密室逃脱游戏主题排行榜】
資源下載:
https://download.csdn.net/download/weixin_44893902/25706959
一、語言和環境
1. 實現語言:Java語言
2. 環境要求:eclipse/myeclipse /idea、maven、mysql
3. 使用技術:Spring、SpringMVC、MyBatis、連接池和 json 包自行選擇
二、實現功能
密室逃脫游戲越來越受年輕人的喜歡,現在將各地密室游戲主題進行排名,評選2021年度最受玩家喜歡的密室主題。
說明:下列界面樣式僅供參考,實際完成效果美觀合理即可。
1、顯示數據
根據圖1格式,顯示t_games表中所有的數據,并且按照【票數】列進行降序排序,其實【主題種類】一列在t_games表存的是數字,需結合t_gamesType表中對應id值顯示出種類文字。每行數據后面有一個投票按鈕可向對應主題進行投票。
2、查詢數據
可根據【主題名稱】和【主題類型】進行數據查詢。若【主題名稱】為空,則按照【主題類型】查詢,若【主題名稱】不為空,則需要根據【主題名稱】進行模糊查詢并且也要結合【主題類型】查詢。【主題類型】需是下拉框,且里面的選項是從數據庫表t_gamesType中查詢出來。如圖所示。
3、投票功能
點擊【操作】列中的投票按鈕,彈出一個二次確認框,再次點擊確定,可為對應的主題投票,投票成功后,該數據票數+1,如圖所示:
投票數據刷新后,若票數有變化,要按新的數據進行降序排序,如圖所示:
4、新增主題
點擊新增按鈕,進入新增頁面,主題種類中的選項需要去數據庫中t_gamesType表查詢,上線時間需要date控件,點擊新增按鈕后,將數據插入數據表中,新增主題票數默認為0,并返回主頁面顯示最新數據,如圖所示:
三、數據庫設計
1、創建數據庫:gamesDB。
2、創建密室排行數據表(t_games)
結構如下:
表名:t_ games
實體名稱:密室排行數據表
主鍵:id
| 1 | id | 主鍵 | int | 11 | 非空 | id主鍵列,自增1 |
| 2 | gamesName | 密室主題名 | varchar | 50 | 非空 | |
| 3 | gamesType | 密室類型編號 | int | 11 | 非空 | 外鍵,t_gamesType表中id |
| 4 | producers | 出品方 | Varchar | 50 | 非空 | |
| 5 | uptime | 上線時間 | date | 非空 | ||
| 6 | votes | 票數 | int | 11 | 非空 | 默認值為0 |
四、推薦步驟
1、使用MySql創建數據庫,創建對應的2張表,按照要求插入數據。
t_games表
t_gamesType表
2、使用開發工具創建項目,使用maven添加spring、springMVC、mybatis、連接池等相關依賴坐標。
3、完成MyBatis持久層功能操作,分別針對2個表完成對應的功能編寫。
4、完成業務邏輯層接口、實現類的功能實現。
5、完成控制器對應的功能編寫
6、創建界面分別和控制器進行交互實現相應的功能
7 斜體樣式、部署項目到Tomcat,運行訪問測試項目是否正常
五、實現代碼
1、MySQL數據庫
gamesdb.sql
2、JAVA代碼
gamesDB
(1) com.cst.controller【控制層】
① TGamesController,java
package com.cst.controller;import java.util.List; import javax.annotation.Resource; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping;import com.cst.entity.TGames; import com.cst.service.TGamesService;@Controller public class TGamesController {@ResourceTGamesService tGamesService;//查詢所有數據,模糊查詢@RequestMapping("/tGamesList")public String accountList(Model model,String keyword,String type){List<TGames> selectAll = tGamesService.selectAll(keyword,type);model.addAttribute("selectAll",selectAll);return "games";}//進入添加的方法@RequestMapping("/addGames")public String addAccount() {return "addGames";} //執行添加的操作@RequestMapping("/addGamesDo")public String addAccountDo(TGames games) {games.setVotes(0);int users = tGamesService.insert(games);if (users>0) {return "redirect:/tGamesList.do";}else {return "forward:/addGames.do";}}@RequestMapping("/updateGamesDo")public String updateGamesDo(Integer id,Integer votes) {TGames games=new TGames();int votes1=votes+1;games.setId(id);games.setVotes(votes1);tGamesService.updateByPrimaryKey(games);return "redirect:/tGamesList.do";}}(2) com.cst.dao【數據庫訪問層】
① TGamesMapper.java
package com.cst.dao;import com.cst.entity.TGames; import java.util.List;import org.apache.ibatis.annotations.Param;public interface TGamesMapper {int deleteByPrimaryKey(Integer id);int insert(TGames record);TGames selectByPrimaryKey(Integer id);List<TGames> selectAll(@Param("keyword")String keyword,@Param("type")String type);int updateByPrimaryKey(TGames record); }② TGamestypeMapper.java
package com.cst.dao;import com.cst.entity.TGamestype; import java.util.List;public interface TGamestypeMapper {int deleteByPrimaryKey(Integer id);int insert(TGamestype record);TGamestype selectByPrimaryKey(Integer id);List<TGamestype> selectAll();int updateByPrimaryKey(TGamestype record); }③ TGamesMapper.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="com.cst.dao.TGamesMapper" ><resultMap id="BaseResultMap" type="com.cst.entity.TGames" ><id column="id" property="id" jdbcType="INTEGER" /><result column="games_name" property="gamesName" jdbcType="VARCHAR" /><result column="games_type" property="gamesType" jdbcType="INTEGER" /><result column="producers" property="producers" jdbcType="VARCHAR" /><result column="uptime" property="uptime" jdbcType="VARCHAR" /><result column="votes" property="votes" jdbcType="INTEGER" /><result column="type_name" property="typeName" jdbcType="VARCHAR" /></resultMap><delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >delete from t_gameswhere id = #{id,jdbcType=INTEGER}</delete><insert id="insert" parameterType="com.cst.entity.TGames" >insert into t_games (id, games_name, games_type, producers, uptime, votes)values (#{id,jdbcType=INTEGER}, #{gamesName,jdbcType=VARCHAR}, #{gamesType,jdbcType=INTEGER}, #{producers,jdbcType=VARCHAR}, #{uptime,jdbcType=VARCHAR}, #{votes,jdbcType=INTEGER})</insert><update id="updateByPrimaryKey" parameterType="com.cst.entity.TGames" >update t_gamesset votes = #{votes,jdbcType=INTEGER}where id = #{id,jdbcType=INTEGER}</update><select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >select id, games_name, games_type, producers, uptime, votesfrom t_gameswhere id = #{id,jdbcType=INTEGER}</select><select id="selectAll" resultMap="BaseResultMap" >select g.id, games_name, type_name, producers, uptime, votesfrom t_games g,t_gamestype t where g.games_type=t.id<if test="keyword!=null and keyword!=''">and games_name like concat('%', #{keyword}, '%')</if><if test="type!=null and type!=''">and type_name=#{type}</if>order by votes desc</select> </mapper>④ TGamestypeMapper.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="com.cst.dao.TGamestypeMapper" ><resultMap id="BaseResultMap" type="com.cst.entity.TGamestype" ><id column="id" property="id" jdbcType="INTEGER" /><result column="type_name" property="typeName" jdbcType="VARCHAR" /></resultMap><delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >delete from t_gamestypewhere id = #{id,jdbcType=INTEGER}</delete><insert id="insert" parameterType="com.cst.entity.TGamestype" >insert into t_gamestype (id, type_name)values (#{id,jdbcType=INTEGER}, #{typeName,jdbcType=VARCHAR})</insert><update id="updateByPrimaryKey" parameterType="com.cst.entity.TGamestype" >update t_gamestypeset type_name = #{typeName,jdbcType=VARCHAR}where id = #{id,jdbcType=INTEGER}</update><select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >select id, type_namefrom t_gamestypewhere id = #{id,jdbcType=INTEGER}</select><select id="selectAll" resultMap="BaseResultMap" >select id, type_namefrom t_gamestype</select> </mapper>(3) com.cst.entity 【存放實體的包】
① TGames.java
package com.cst.entity;public class TGames {private Integer id;private String gamesName;private Integer gamesType;private String producers;private String uptime;private Integer votes;private String typeName;public String getTypeName() {return typeName;}public void setTypeName(String typeName) {this.typeName = typeName == null ? null : typeName.trim();}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getGamesName() {return gamesName;}public void setGamesName(String gamesName) {this.gamesName = gamesName == null ? null : gamesName.trim();}public Integer getGamesType() {return gamesType;}public void setGamesType(Integer gamesType) {this.gamesType = gamesType;}public String getProducers() {return producers;}public void setProducers(String producers) {this.producers = producers == null ? null : producers.trim();}public String getUptime() {return uptime;}public void setUptime(String uptime) {this.uptime = uptime == null ? null : uptime.trim();}public Integer getVotes() {return votes;}public void setVotes(Integer votes) {this.votes = votes;} }② TGamestype.java
package com.cst.entity;public class TGamestype {private Integer id;private String typeName;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getTypeName() {return typeName;}public void setTypeName(String typeName) {this.typeName = typeName == null ? null : typeName.trim();} }(4) com.cst.generator【實體類自動生成包】
① Generator.java
package genter; import java.io.IOException; import java.io.InputStream; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import org.mybatis.generator.api.MyBatisGenerator; import org.mybatis.generator.config.Configuration; import org.mybatis.generator.config.xml.ConfigurationParser; import org.mybatis.generator.exception.InvalidConfigurationException; import org.mybatis.generator.exception.XMLParserException; import org.mybatis.generator.internal.DefaultShellCallback;public class Generator { /** targetRuntime="MyBatis3Simple", 不生成Example*/ public void generateMyBatis() {//MBG執行過程中的警告信息List<String> warnings = new ArrayList<String>();//當生成的代碼重復時,覆蓋原代碼boolean overwrite = true ;String generatorFile = "/generatorConfig.xml";//String generatorFile = "/generator/generatorConfigExample.xml";//讀取MBG配置文件InputStream is = Generator.class.getResourceAsStream(generatorFile);ConfigurationParser cp = new ConfigurationParser(warnings);Configuration config;try {config = cp.parseConfiguration(is);DefaultShellCallback callback = new DefaultShellCallback(overwrite);//創建MBGMyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);//執行生成代碼myBatisGenerator.generate(null);} catch (IOException e) {e.printStackTrace();} catch (XMLParserException e) {e.printStackTrace();} catch (InvalidConfigurationException e) {e.printStackTrace();} catch (SQLException e) {e.printStackTrace();} catch (InterruptedException e) {e.printStackTrace();}for (String warning : warnings) {System.out.println(warning);} }public static void main(String[] args) {Generator generator = new Generator();generator.generateMyBatis(); } }(5) com.cst.service【與頁面進行交互】
① TGamesService.java
package com.cst.service;import java.util.List;import com.cst.entity.TGames; import com.cst.entity.TGamestype;public interface TGamesService {int insert(TGames record);List<TGames> selectAll(String keyword,String type);int updateByPrimaryKey(TGames record); }(6) com.cst.service.imp【service的實現類】
① TGServiceImpl.java
package com.cst.service.imp;import java.util.List;import javax.annotation.Resource;import org.springframework.stereotype.Service;import com.cst.dao.TGamesMapper; import com.cst.entity.TGames; import com.cst.entity.TGamestype; import com.cst.service.TGamesService;@Service public class TGServiceImpl implements TGamesService{@ResourceTGamesMapper tgamesMapper; @Overridepublic List<TGames> selectAll(String keyword,String type) {// TODO Auto-generated method stubList<TGames> tGamesList=tgamesMapper.selectAll(keyword,type);return tGamesList;}@Overridepublic int insert(TGames record) {// TODO Auto-generated method stubint add=tgamesMapper.insert(record);return add;}@Overridepublic int updateByPrimaryKey(TGames record) {// TODO Auto-generated method stubint updateByPrimaryKey = tgamesMapper.updateByPrimaryKey(record);return updateByPrimaryKey;}}3、JSP頁面
(1) Index.jsp【設置默認打開頁面】
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> </head> <body> <%String path=request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; %> <script type="text/javascript"> window.location.href="<%=basePath%>/tGamesList.do"; </script> </body> </html>(2) games.jsp【主頁面】
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; %> <style>.wrap{width: 80%;margin: 0 auto;}h1 {width:40%;margin:0 auto;}a{text-decoration: none;}p{text-align: right;}h2{position:relative;left:40%;}tr:hover{background: orange;}img{width:100%;height:100%;} </style> </head> <body> <div style="width: 70%;margin: 0 auto;"> <h2>2021年密室逃脫主題排行榜</h2><fieldset><legend>搜索</legend><div style="margin:10px"><form action="tGamesList.do" >主題名稱:<input type="text" name="keyword" id="keyword" value="" />類型:<select name="type"><option selected="selected" value="">請選擇</option><option value="恐怖">恐怖</option><option value="諜戰">諜戰</option><option value="解謎">解謎</option></select><input type="submit" value="搜索"/><a href="addGames.do"><input type="button" value="新增"/></a></form></div></fieldset><hr/><table width="100%" border="1px" cellpadding="5" cellspacing="0"><tr style="background-color: gray;"><td width="10%" align="center" >編號</td><td width="15%" align="center">主題名稱</td><td width="10%" align="center">主題種類</td><td width="20%" align="center">出品方</td><td width="15%" align="center">上線時間</td><td width="10%" align="center">票數</td><td align="center" width="15%">操作</td></tr><c:forEach items="${selectAll}" var="games"><tr align="center"><td>${games.id}</td><td>${games.gamesName}</td><td>${games.typeName}</td><td>${games.producers}</td><td>${games.uptime}</td><td>${games.votes}</td><td><a href="#" onclick="delAccount(${games.id},${games.votes})">投票</a> </td></tr></c:forEach><tr style="text-align: center;background-color: white;"><td colspan="6"></td><td>共計${selectAll.size()}條數據</td></tr></table> </div> </body> <script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script> <script type="text/javascript">function delAccount(id,votes) {if(confirm("確定投票嗎?")){location.href="updateGamesDo.do?id="+id+"&votes="+votes;}} </script> </html>(3) addGames.jsp【添加頁面】
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{width: 100%;}.wrap_table{width: 40%;margin: 0 auto;text-align: center;}table{text-align: center;margin: 0 auto;}</style></head><body><div class="wrap_table"><h2>新增密室逃脫主題</h2><form action="addGamesDo.do" method="post"><table border="1" cellspacing="" cellpadding=""><tr><td>名稱:</td><td><input type="text" name="gamesName" id="name" value="" /></td><tr><td>類型</td><td><select name="gamesType"><option selected="selected" value="">請選擇</option><option value="1">恐怖</option><option value="2">諜戰</option><option value="3">解謎</option></select></td></tr><tr><td>出品方:</td><td><input type="text" name="producers" id="producers" value="" /></td></tr><tr><td>上線時間:</td><td><input type="date" name="uptime" id="number" value="" /></td></tr><tr><td colspan="2"><input type="button" name="" id="button" onclick="addAccount()" value="確定" /><input type="reset" name="" id="" value="重置" /></td></tr></table></form></div><script type="text/javascript">function addAccount() {var name = document.getElementById("name").value;var number = document.getElementById("number").value;var money = document.getElementById("producers").value;var button = document.getElementById("button");console.log(button)if(name==""){alert("名稱不能為空!");return false;}else if(number==""){alert("日期不能為空!");return false;}else if(money==""){alert("出品方不能為空!");return false;}else{button.setAttribute("type","submit");}}</script></body> </html>(4) web.xml【xml配置】
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"><display-name>gamesDB</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><!--spring容器 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/applicationContext-*.xml</param-value></context-param><!-- 監聽器,加載spring配置 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 前端控制器 --><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/spring-mvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping><!-- 設置post請求的字符編碼過濾器 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping> </web-app>總結
以上是生活随笔為你收集整理的基于Spring MVC + Spring + MyBatis的【密室逃脱游戏主题排行榜】的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ubuntu 生活之电视卡
- 下一篇: 医院实验室建设基础配置情况SICOLAB