序文
SSMの3つの主要なアーキテクチャを学んだ後、多くの小さなパートナーは、実践的なトレーニングのためのシンプルで使いやすいプロジェクトを見つける方法を知らないと思います。彼らはブログで優れたプロジェクトを見て、すべてをコードでダウンロードすることがよくあります。 、そして開始する場所がありません。したがって、この記事では、最も単純で理解しやすいプロジェクト構造とコードを使用して、比較的完全なバックエンドシステム（つまり、ログインからログアウトまでのプロセス全体）を構築するように努めています。（初心者に適しています）
プロジェクト全体の運用プロセスの動的図は次のとおりです（アップロードされた画像のサイズにCSDNの制限があるため、ここに記録されたgif画像は非常に不明瞭です。画像をクリックすると、より明確に表示されます）:(
クリック表示する画像上）
サービスはサーバーにデプロイされており、オンラインで体験できます：オンライン体験へのリンク
プロジェクトの全体的な構造：
使用されるテクノロジースタックは次のとおりです。
- フレーム：SSM
- データベース：MySQL
- フロントエンドフレームワーク：ブートストラップはJSPページをすばやく構築します
- プロジェクト管理：MAVEN
- 開発ツール：Intellij IDEA
- 開発環境：Windows
このプロジェクトから、フロントエンドからバックエンドまでの構築プロセスを完全かつ独立して体験し、SSMフレームワークを使用してバックエンドでのCRUDのプロセス全体を完了することができます。
注：プロジェクトコードのダウンロードリンク：SSM_HRMSコードのダウンロードリンク。
1.準備
準備部分には、主にデータベーステーブルの確立とSSMフレームワークの確立が含まれます。
1データベーステーブル
tbl_empテーブル：
DROP TABLE IF EXISTS `tbl_emp`;
CREATE TABLE `tbl_emp`(
`emp_id` int(11) UNSIGNED NOT NULL auto_increment,
`emp_name` VARCHAR(22) NOT NULL DEFAULT '',
`emp_email` VARCHAR(256) NOT NULL DEFAULT '',
`gender` CHAR(2) NOT NULL DEFAULT '',
`department_id` int(11) NOT NULL DEFAULT 0,
PRIMARY KEY(`emp_id`)
) ENGINE=INNODB DEFAULT CHARSET=UTF8;
tbl_deptテーブル：
DROP TABLE IF EXISTS `tbl_dept`;
CREATE TABLE `tbl_dept`(
`dept_id` int(11) UNSIGNED NOT NULL auto_increment,
`dept_name` VARCHAR(255) NOT NULL DEFAULT '',
`dept_leader` VARCHAR(255) NOT NULL DEFAULT '',
PRIMARY KEY(`dept_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
対応するエンティティクラスについては、bean /Employee.javaおよびbean / Department.javaを参照してください。
（テスト部分では、EmployeeMapperTest.javaとDepartmentMapperTest.javaを実行し、テーブルにデータを挿入できます）
2 SSMプロジェクトの構築と起動
（1）このプロジェクトはMAVENを使用してJARパッケージを管理します。最初に、プロジェクトで使用される可能性のある依存パッケージをインポートします
。pom.xmlを参照してください。
（2）Webプロジェクト構成ファイル：web.xml：
WEB-INF /web.xmlを参照してください。
（3）Springコンテナー構成ファイル：applicationContext.xml：
resources /applicationContext.xmlを参照してください。
（4）SpringMVC構成ファイル：springmvc.xml：
resources /springmvc.xmlを参照してください。
3テスト
上記の構成ファイルを書き込んだ後、コントローラーディレクトリに新しいTestController.javaファイルとWEB-INF / jsp / test.jspを作成して、コンテナーを起動し、成功したかどうかをテストできます。
2.DAOレイヤーコードの完成とテスト
この章では、主にデータベースの下部にあるCRUDコードの実装とテストについて説明します。
1.MyBasits構成ファイル。resources
/ MyBatis.xmlを参照してください。
2. DAOレイヤーコード
最初に、エンティティクラスEmployeeとテーブルtbl_empの関連する操作コードを記述します。
EmployeeMapper.javaの主なインターフェースは次のとおりです。
int deleteOneById(@Param("empId") Integer empId);
int updateOneById(@Param("empId") Integer empId,
@Param("employee") Employee employee);
int insertOne(Employee employee);
Employee selectOneById(@Param("empId") Integer empId);
Employee selectOneByName(@Param("empName") String empName);
// 查询带有部门信息的Employee
Employee selectWithDeptById(@Param("empId") Integer empId);
// 分页查询
List<Employee> selectByLimitAndOffset(@Param("limit") Integer limit,@Param("offset") Integer offset);
int countEmps();
具体的な実装については、EmployeeMapper.javaおよびEmployeeMapper.xmlのコードを参照してください。
記述後、実装されたコードをテストして、コードの正確さを検証する必要があります。
テストケースコードについては、EmployeeMapperTest.javaを参照してください。
同様に、
エンティティクラスDepartmentおよびテーブルtbl_deptの関連する操作コードの実装は上記と同様です。特定の実装については、DepartmentMapper.javaおよびDepartmentMapper.xmlを参照してください。テストケースコードについては、DepartmentMapperTest.javaを参照してください。
第三に、フロントエンドページの構築
フロントエンドページの最終的な効果は次のとおりです。
メインページ：
従業員の操作ページ（部門の操作ページと同様）:(
画像をクリックして表示）
最後に、ランディングページ（より単純なページと最も単純なログイン判断）を追加し
ます:(画像をクリックして表示します）
主なことは、Bootstrap3を使用してこのフロントエンドページを構築してから、SSMフレームワークとJSPを使用して、フロントエンドからバックエンドまでのプロセス全体を完了することです。
まず、フロントエンドページを構築するためのBootstrap3。
1メインページの静的構造
メインページのHTMLコードの実装は、webapp / static / html / hrms_main.htmlに配置されています（ここでは、見やすく、参照しやすいようにしています）。
メインページ全体が完成したら、ナビゲーションバー、左側のサイドバー、テールなど、すべてパブリックパーツであるパブリックパーツのコードを抽出します
。それぞれhrms_head.html、hrms_foot.html、およびhrms_leftsidebar.htmlを参照してください。
2JSPの実装と公開ページの階層化
上記のパブリック部分のHTMLコードは、以下のJSPで実装されます。詳細については、WEB-INF / jsp / commomディレクトリのhead.jsp、foot.jsp、およびleftsidebar.jspを参照してください。
次に、主に3つの一般的な部分（ナビゲーションバー+左側のバー+テール+カルーセル部分）を含むメインページのコンテンツを実現します。実現効果は次のとおりです。
（画像をクリックして表示）
新しいmain.jspを作成し、上記の3つのパブリックパーツのコードをインポートしてから、
<<%@ include file="./commom/xx.jsp"%>>Bootstrapを使用してカルーセルダイアグラムパーツを実装します。具体的な実装については、main.jspのコードを参照してください。
3従業員の操作/部門の操作のための静的ページの実装
従業員の操作ページには、メインページと同じ3つの共通部分があります。違いは、メインページがカルーセル図であるのに対し、中央の部分には従業員情報の表が表示されることです。
（画像をクリックすると表示されます）
以下はemployeePageページを実装します。詳細なコードについては、employeePage.jspを参照してください（つまり、main.jspのカルーセル部分を従業員フォーム表示部分に置き換えることができます）。
（比較と表示を容易にするために、コードの実装されたHTML部分はプロジェクトディレクトリに残されます。
実装されたHTMLコードについては、WEB-INF / static / html /hrms_employee.htmlを参照してください。
対応する部門によって表示されるページは次のとおりです。同様に、
実装されたHTMLコードはWEB-INF / static / html / hrms_department.htmlに示されています。
次に、上記のコードはそれぞれJSPページ、つまり対応するemployeePage.jspとdepartmentPage.jspで実装されます。
第4に、従業員のCRUD操作のフロントエンドとバックエンド
1従業員情報クエリのデータ表示
ページの作成後、背景から取得したデータを対応するページに表示する必要があります。ページデータ表示部分の主な実現方法は、JSPJSTL式とAJAX + jQueryを使用して、バックグラウンドから取得したデータをページの対応する位置に表示することです。
部門運営は従業員運営と類似しているため、以下では主に従業員表示ページの実現について説明します。
プロセス全体は、データベースからデータをクエリし、それをSpringMVCのModelAndViewに配置することです。その後、フロントエンドはJSTLを介して取得した結果セットを解析できます。
（1）最初にJSON関連の操作クラスJsonMsg.javaを記述します。
（2）ビジネスオペレーション：EmployeeService.java;
（3）コントローラークラス：EmployeeController.java; EmployeeController.javaの
インターフェイス "" emp / getEmpList？pageNo = XXX ""は、入力されたページ数に対応するデータを返します。ページ番号、使用JSTL式を分析して表示します。
@RequestMapping(value = "/getEmpList", method = RequestMethod.GET)
public ModelAndView getEmp(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){
ModelAndView mv = new ModelAndView("");
int limit = 5;
// 记录的偏移量(即从第offset行记录开始查询)，
// 如第1页是从第1行(offset=(21-1)*5=0,offset+1=0+1=1)开始查询；
// 第2页从第6行(offset=(2-1)*5=5,offset+1=5+1=6)记录开始查询
int offset = (pageNo-1)*limit;
//获取指定页数包含的员工信息
List<Employee> employees = employeeService.getEmpList(offset, limit);
//获取总的记录数
int totalItems = employeeService.getEmpCount();
//获取总的页数
int temp = totalItems / limit;
int totalPages = (totalItems % limit == 0) ? temp : temp+1;
//当前页数
int curPage = pageNo;
//将上述查询结果放到Model中，在JSP页面中可以进行展示
mv.addObject("employees", employees)
.addObject("totalItems", totalItems)
.addObject("totalPages", totalPages)
.addObject("curPage", curPage);
return mv;
}
次に、employeePage.jspページのバックエンドモーダルのデータを取り出して表示します。
主なコードは次のとおりです。
<tbody>
<c:forEach items="${employees}" var="emp">
<tr>
<td>${emp.empId}</td>
<td>${emp.empName}</td>
<td>${emp.empEmail}</td>
<td>${emp.gender == "M"? "女": "男"}</td>
<td>${emp.department.deptName}</td>
<td>
<a href="#" role="button" class="btn btn-primary">编辑</a>
<a href="#" role="button" class="btn btn-danger">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
と
<div class="table_items">
当前第<span class="badge">${curPage}</span>页，共有<span class="badge">${totalPage}</span>页，总记录数<span class="badge">${totalItems}</span>条。
</div>
（4）ページングバーのコード実装。
ページネーションバーの完成した効果は次のとおりです:(
画像をクリックして表示）
ページングバーを完了するために必要な要件は次のとおりです。
- 現在のページをアクティブ化する必要があります（主にページの1、2、3、4、および5ページ）。
- ホームページ（1ページ）で、<<クリックを禁止します。
- 最後のページ（最後のページ）では、>>をクリックすることは禁止されています。
- デフォルトでホームページデータを表示します。
- 最初のページ、前のページ、最後のページ、次のページはイベントを追加し、対応するページ番号データを表示します
- 中央のページの各ページにクリックイベントを追加し、対応するページにジャンプします。
- 左側の情報列の現在のページXは、クリックされたページ数に応じて同期して表示される必要があります。
メインコードの実装は、フロントエンドでjQuery + JSTLを使用して実装されます。コードは次のように表示されます。
<div class="panel-body">
此处代码略
</div>
そして、対応するjQueryは、前のページと次のページの操作を実現します。
$(function () {
//上一页
var curPage = ${curPage};
var totalPages = ${totalPages};
$(".prePage").click(function () {
if (curPage > 1){
var pageNo = curPage-1;
$(this).attr("href", "/emp/getEmpList?pageNo="+pageNo);
}
});
//下一页
$(".nextPage").click(function () {
if (curPage < totalPages){
var pageNo = curPage+1;
$(this).attr("href", "/emp/getEmpList?pageNo="+pageNo);
}
});
})
最後に、メインページの従業員情報への指定リンクを追加して、現在の従業員情報が表示されているページにジャンプします（部門の操作は類似しており、繰り返されません）。会社のロゴをクリックすると、次のようになります。メインページにジャンプします。
コードは次のとおりです
。head.jsp：
<script type="text/javascript">
//跳转到主页面
$("#company_logo").click(function () {
$(this).attr("href", "/hrms/main");
});
leftsidebar.jsp：
<script type="text/javascript">
//跳转到员工页面
$(".emp_info").click(function () {
$(this).attr("href", "/hrms/emp/getEmpList");
});
//跳转到部门页面
$(".dept_info").click(function () {
$(this).attr("href", "/hrms/dept/getDeptList");
});
</script>
この時点で、従業員情報の表示部分は基本的に完成しています。
2人のスタッフの追加
次に、従業員の新しい操作が実装され、新しく追加されたデータの簡単な検証が行われます。
完成したページ効果は次のとおりです:(
画像をクリックして表示）
主な要件は次のとおりです。
- （1）左側の列の従業員追加ボタンをクリックして、従業員追加のモーダルページをポップアップします。
- （2）入力した名前と電子メール形式を確認します。形式が正しくない場合は、エラーメッセージが表示されます。
- （4）入力した名前が繰り返されるかどうかを判断します。繰り返されると、繰り返される情報が表示されます。
- （5）追加が成功したら、追加されたレコードが配置されているページ（最後のページ）にジャンプします。
- （6）追加に失敗した場合、エラーメッセージが表示されます。
バックグラウンドコードの実装には、主に次のものが含まれます。
/**
* 查询输入的员工姓名是否重复
* @param empName
* @return
*/
@RequestMapping(value = "/checkEmpExists", method = RequestMethod.GET)
@ResponseBody
public JsonMsg checkEmpExists(@RequestParam("empName") String empName){
//对输入的姓名与邮箱格式进行验证
String regName = "(^[a-zA-Z0-9_-]{3,16}$)|(^[\\u2E80-\\u9FFF]{2,5})";
if(!empName.matches(regName)){
return JsonMsg.fail().addInfo("name_reg_error", "输入姓名为2-5位中文或6-16位英文和数字组合");
}
Employee employee = employeeService.getEmpByName(empName);
if (employee != null){
return JsonMsg.fail().addInfo("name_reg_error", "用户名重复");
}else {
return JsonMsg.success();
}
}
/**
* 新增记录后，查询最新的页数
* @return
*/
@RequestMapping(value = "/getTotalPages", method = RequestMethod.GET)
@ResponseBody
public JsonMsg getTotalPage(){
int totalItems = employeeService.getEmpCount();
//获取总的页数
int temp = totalItems / 5;
int totalPages = (totalItems % 5 == 0) ? temp : temp+1;
return JsonMsg.success().addInfo("totalPages", totalPages);
}
/**
* 新增员工
* @param employee 新增的员工信息
* @return
*/
@RequestMapping(value = "/addEmp", method = RequestMethod.POST)
@ResponseBody
public JsonMsg addEmp(Employee employee){
int res = employeeService.addEmp(employee);
if (res == 1){
return JsonMsg.success();
}else {
return JsonMsg.fail();
}
}
フロントエンドコードについては、employeeAdd.jspを参照してください。
主にjQuey操作ですが、エラーメッセージの表示など、多くの操作を呼び出す関数にカプセル化できます。この記事は、見やすくするためにカプセル化されていません。
3スタッフの変更
譜表変更操作の完了ページは次のとおりです:(
画像をクリックして表示）
変更の主な要件は次のとおりです。
- （1）従業員のIDと名前を取得してクリックし、変更します。
- （2）IDまたは名前に従って対応する従業員情報を照会し、それを表示します。
- （3）部門のリストをエコーします。
- （4）変更を加え、変更されたメールボックスの形式を判断します。
- （5）更新ボタンをクリックして、保存のためにAJAXリクエストをバックグラウンドに送信します。
- （6）変更が成功したら、現在の変更ページにジャンプします。
バックグラウンドコードの実装には、主に次のものが含まれます。
/**
* 更改员工信息
* @param empId
* @param employee
* @return
*/
@RequestMapping(value ="/updateEmp/{empId}", method = RequestMethod.PUT)
@ResponseBody
public JsonMsg updateEmp(@PathVariable("empId") Integer empId, Employee employee){
int res = employeeService.updateEmpById(empId, employee);
if (res != 1){
return JsonMsg.fail().addInfo("emp_update_error", "更改异常");
}
return JsonMsg.success();
}
フロントエンドページ+ jQueryコードについては、employeeUpdate.jspを参照してください。
4従業員の削除
従業員の削除操作の完了ページは次のとおりです:(
画像をクリックして表示）
削除の主な要件は次のとおりです。
- （1）確認ボックスがポップアップします：XX情報を削除するかどうか。
- （2）削除操作を実行するためのAJAXリクエストを送信します。
- （3）削除が成功したら、現在のページにジャンプします。
背景コード：
/**
* 员工删除操作
* @param empId
* @return
*/
@RequestMapping(value = "/deleteEmp/{empId}", method = RequestMethod.DELETE)
@ResponseBody
public JsonMsg deleteEmp(@PathVariable("empId") Integer empId){
int res = employeeService.deleteEmpById(empId);
if (res != 1){
return JsonMsg.fail().addInfo("emp_del_error", "员工删除异常");
}
return JsonMsg.success();
}
フロントエンドページコードについては、employeePage.jspを参照してください。
<!-- ==========================员工删除操作=================================== -->
$(".emp_delete_btn").click(function () {
var curPage = ${curPage};
var delEmpId = $(this).parent().parent().find("td:eq(0)").text();
var delEmpName = $(this).parent().parent().find("td:eq(1)").text();
if (confirm("确认删除【" + delEmpName+ "】的信息吗？")){
$.ajax({
url:"/hrms/emp/deleteEmp/"+delEmpId,
type:"DELETE",
success:function (result) {
if (result.code == 100){
alert("删除成功！");
window.location.href="/hrms/emp/getEmpList?pageNo="+curPage;
}else {
alert(result.extendInfo.emp_del_error);
}
}
});
}
});
この時点で、SSMプロジェクトの追加、削除、変更、チェックの操作は基本的に完了しています。部門の操作は上記と同様です。この記事では繰り返しません。興味がある場合は、部門のコードをざっと読むことができます。関連する操作。
5ログインページ
最後に、プロジェクトを完全にするために、ランディングページが追加され、達成された効果は
次のとおりです:(
画像をクリックして表示）
単純なログイン検証は主にバックグラウンドで実行され、コードはLoginController.javaに表示されます。
/**
* 登录：跳转到登录页面
* @return
*/
@RequestMapping(value = "/login", method = RequestMethod.GET)
public String login(){
return "login";
}
/**
* 对登录页面输入的用户名和密码做简单的判断
* @param request
* @return
*/
@RequestMapping(value = "/dologin", method = RequestMethod.POST)
@ResponseBody
public JsonMsg dologin(HttpServletRequest request){
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username + password);
if (!"admin1234".equals(username + password)){
return JsonMsg.fail().addInfo("login_error", "输入账号用户名与密码不匹配，请重新输入！");
}
return JsonMsg.success();
}
/**
* 跳转到主页面
* @return
*/
@RequestMapping(value = "/main", method = RequestMethod.GET)
public String main(){
return "main";
}
/**
* 退出登录：从主页面跳转到登录页面
* @return
*/
@RequestMapping(value = "/logout", method = RequestMethod.GET)
public String logout(){
return "login";
}
フロントページのlogin.jspコードを参照してください。また、ログアウトボタンの操作については、head.jspを参照してください。
//账号退出
$(".hrms_logout").click(function () {
window.location.href = "/hrms/logout";
});
注：
容器配置：
5、プロジェクトコードのダウンロード
最後に、このプロジェクトのコードを私のgithubにアップロードします。プロジェクトのソースコードをダウンロードする場合は、ここをクリックしてください。
それが役に立ったと思うなら、私のgithub、THXでスターを注文することを忘れないでください！
問題がある場合は、QQ：1032335358で私に連絡してください。（CSDNから指定してください）
2018/03/09ニュージャージー州。
【404ページ修正】-2019/01/31修正
今回は比較的忙しく、多くの学生のコメントに返信する時間がなかったので、大変申し訳ありません。
コメントを読んだ後、それは基本的にログインへの応答がなく、ページをクリックしたときに404の問題です。404は一般的に絶対パスの問題です。コードに絶対パスを追加でき、エラーは発生しません。
コンテナを構成するときは、次の構成をクリックするだけで、上記の問題を解決できます。
