一步一步教你用IntelliJ IDEA 搭建SSM框架（3）——實現用戶登陸功能
上面兩篇博客已經詳細的介紹了在IntelliJ IDEA 搭建SSM框架的整個過程，下面咱們就要在搭建好的環境裏實現咱們想要的功能了。本文完成用戶的登陸功能，主要包括：用戶註冊，登陸，編輯，退出，註銷。html
第一步：設計user表，並用mybatis-geneator生成user表對應的數據文件java
首先，咱們在test數據庫里加一張user表，代碼以下jquery
use test; CREATE TABLE `user` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(40) NOT NULL, `password` varchar(255) NOT NULL, `age` int(4) NOT NULL, `description` varchar(255) NOT NULL, PRIMARY KEY (`id`) )ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; select * from user;
而後，用mybatis-geneator生成user表對應的數據文件。打開generator.properties文件，table=message改成table=user，點擊IntelliJ IDEA右側邊欄的Maven Projects，雙擊 mybatis-generator:generate，運行成功之後會多user表的相關數據文件，以下圖：git
注意：若是須要一次生成全部表的數據文件，先把dao,entity,sqlmap裏面的文件都清空，而後打開generatorConfig.xml，把table標籤替換爲下面的代碼便可github
<table schema="" tableName="%" enableCountByExample="false"
enableUpdateByExample="false" enableDeleteByExample="false"
enableSelectByExample="false" selectByExampleQueryId="false"/>
如今,user數據表已經綁定成功。下面按照上一篇中測試message的方法，用junit測試工具，測一下數據能不能正常寫入數據庫。
第二步：新建文件
在controller文件夾下添加userController.java和homeController.java文件
userController.java:跟用戶有關的路由都會寫在這個文件裏
homeController.java：寫登陸成功之後的路由
在service文件夾下，添加UserService.java文件和impl文件夾，在impl文件夾下，添加UserServiceImpl.javaUserService.java：存放業務層接口
UserServiceImpl.java：實現業務層接口
在js文件夾下添加jQuery文件引用，我這裏加的是jquery-3.3.1.js
在views文件夾下添加：login.jsp,home.jsp,detail.jsp,register.jsp
login.jsp:登陸頁面
home.jsp:登陸之後的頁面
detail.jsp:編輯用戶信息頁面
register.jsp:用戶註冊頁面
第三步：首頁
index.jsp代碼以下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h2>歡迎來到首頁，請先登陸</h2> <div> <a href="/user/login">登陸</a> <a href="/user/register">註冊</a> </div> </body> </html>
第四步：註冊功能
1，寫註冊頁面，在register.jsp中添加代碼以下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <h2>用戶註冊</h2> <form action="/user/register" method="post"> 用戶名：<input type="text" name="name"> 密碼：<input type="password" name="password"> 年齡：<input type="text" name="age"> 描述：<input type="text" name="description"> <input type="submit" value="保存"> </form> </body> <script> if(${status} == 0){ alert("註冊成功") location.href="/"; } </script> </html>
2，dao中實現數據庫操做
dao文件夾中的UserMapper已經有insert接口，sqlmap中的UserMapper.xml中已經實現insert，因此只需在
dao文件夾中的UserMapper中添加selectUserByName接口，在sqlmap中的UserMapper.xml中添加selectUserByName實現。代碼以下：
List<User> selectUserByName(User record);
<select id="selectUserByName" resultMap="BaseResultMap" parameterType="cn.only.entity.User" > select * from user where name = #{name,jdbcType=VARCHAR} </select>
3，service層實現業務邏輯
在UserService.java中寫註冊接口insert，和根據用戶名查找用戶接口selectUserByName，代碼以下：
package cn.only.service; import cn.only.entity.User; import java.util.List; public interface UserService { int insert(User record); List<User> selectUserByName(User record); }
4，在UserServiceImpl.java中實現以上接口，代碼以下：
package cn.only.service.impl; import cn.only.dao.UserMapper; import cn.only.entity.User; import cn.only.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class UserServiceImpl implements UserService{ @Autowired private UserMapper mapper; public int insert(User record){return mapper.insert(record);} public List<User> selectUserByName(User record){return mapper.selectUserByName(record);} }
5，在userController.java中寫路由，代碼以下：
package cn.only.controller; import cn.only.entity.User; import cn.only.service.UserService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.util.List; @Controller @RequestMapping("/user") public class userController { @Resource private UserService userService; @RequestMapping(value="/register") public String register(HttpServletRequest request, Model model){ return "register"; } @RequestMapping(value="/register",method= RequestMethod.POST) public String addUser(@ModelAttribute User user, Model model){ List<User> list=userService.selectUserByName(user); if(list.size()==0){ if(userService.insert(user)==1){ model.addAttribute("status",0); }else{ model.addAttribute("status",1); } }else{ model.addAttribute("status",2); } return "register"; } }
第五步：登陸功能
1，寫登陸頁面，在login.jsp文件，代碼以下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登陸</title> </head> <h2>登陸</h2> <form action="/user/login" method="post"> 用戶名：<input type="text" name="name"> 密碼：<input type="password" name="password"> <input type="submit" value="登陸"> <a href="/user/register">註冊</a> </form> </body> <script> if(${status} == 0){ alert("登陸成功"); location.href="/home"; }else{ alert("登陸失敗，用戶名或密碼錯誤"); } </script> </html>
2，dao中實現數據庫操做
dao文件夾中的UserMapper中添加login接口，在sqlmap中的UserMapper.xml中添加login實現。代碼以下：
User login(User record);
<select id="login" resultMap="BaseResultMap" parameterType="cn.only.entity.User" > select * from user where name = #{name,jdbcType=VARCHAR} AND password=#{password,jdbcType=VARCHAR} </select>
3，service層實現業務邏輯
在UserService.java中寫登陸接口login，代碼以下：
User login(User record);
4，在UserServiceImpl.java中實現以上接口，代碼以下：
public User login(User record){return mapper.login(record);}
5，在userController.java中寫路由，添加代碼以下：
@RequestMapping(value="/login") public String loginPage(@ModelAttribute User user, Model model){ return "login"; } @RequestMapping(value="/login",method= RequestMethod.POST) public String login(@ModelAttribute User user, Model model, HttpSession session){ User u=userService.login(user); if(u!=null){ u.setPassword(""); session.setAttribute("user", u); model.addAttribute("status",0); model.addAttribute("user",user); }else{ model.addAttribute("status",1); } return "login"; }
第六步：登陸成功之後的頁面home
home.jsp代碼以下：
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>主頁</title> <script src="/js/jquery-3.3.1.js"></script> </head> <body> <script> function deleteUser() { if(confirm("用戶一旦刪除須要從新註冊，肯定刪除用戶？")){ jQuery.ajax({url:"/user/delete",async:false,type:"DELETE", success:function (restult) { if(restult == 1){ alert("用戶註銷成功"); location.href="/user/login"; }else{ alert("用戶註銷失敗"); } } }); } } </script> <p style="margin-top:100px;text-align: center">歡迎<span style="font-weight: bolder">${user.name}</span>登陸</p> <a href="/user/detail">修改我的信息</a> <a href="/user/logout">退出</a> <a href="JavaScript:void(0)" onclick="deleteUser()">註銷</a> </body> <script> </script> </html>
在homeController.java中寫路由，添加代碼以下：
package cn.only.controller; import cn.only.entity.User; import cn.only.service.UserService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import javax.annotation.Resource; import javax.servlet.http.HttpSession; @Controller public class homeController { @Resource private UserService userService; @RequestMapping(value="/home") public String home(HttpSession session, Model model){ User u = (User) session.getAttribute("user"); if(u != null){ model.addAttribute("user", u); } return "home"; } }
第七步：編輯用戶
1，編輯頁面，在detail.jsp文件，代碼以下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用戶信息</title> </head> <h2>用戶信息修改</h2> <form action="/user/detail" method="post"> 用戶名：<input type="text" name="name" value="${user.name}" disabled> 年齡：<input type="text" name="age" value="${user.age}"> 描述：<input type="text" name="description" value="${user.description}"> <input type="submit" value="保存"> </form> </body> <script> if(${status} == 0){ alert("修改爲功") location.href="/home"; } </script> </html>
2，dao中實現數據庫操做
dao文件夾中的UserMapper中默認已經添加了selectByPrimaryKey和updateByPrimaryKey兩個接口
在sqlmap中的UserMapper.xml中也已經實現上面的接口。updateByPrimaryKey修改代碼以下：
<update id="updateByPrimaryKey" parameterType="cn.only.entity.User" >
update user
set name = #{name,jdbcType=VARCHAR},
age = #{age,jdbcType=INTEGER},
description = #{description,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
3，service層實現業務邏輯web
在UserService.java中添加根據id查找用戶接口selectByPrimaryKey和更新用戶接口updateByPrimaryKey，代碼以下：
User selectByPrimaryKey(Integer id);
int updateByPrimaryKey(User record);
4，在UserServiceImpl.java中實現以上接口，代碼以下：
public User selectByPrimaryKey(Integer id){return mapper.selectByPrimaryKey(id);}
public int updateByPrimaryKey(User record){return mapper.updateByPrimaryKey(record);}
5，在userController.java中寫路由，添加代碼以下：
@RequestMapping(value="/detail") public String detail(HttpSession session, Model model){ int id=((User)session.getAttribute("user")).getId(); User u =userService.selectByPrimaryKey(id); model.addAttribute("user",u); return "detail"; } @RequestMapping(value="/detail",method= RequestMethod.POST) public String editUser(@ModelAttribute User user, Model model,HttpSession session){ User un = (User) session.getAttribute("user"); User u=(User)userService.selectByPrimaryKey(un.getId()); if(u!=null){ user.setId(un.getId()); user.setName(un.getName()); if(userService.updateByPrimaryKey(user)==1){ model.addAttribute("status",0); }else{ model.addAttribute("status",1); } }else{ model.addAttribute("status",2); } return "detail"; }
第八步：退出
在userController.java中寫退出路由，添加代碼以下：
@RequestMapping(value="/logout",method= RequestMethod.GET) public String logout(HttpSession session){ session.invalidate(); return "redirect:/user/login"; }
第九步：註銷
註銷用戶：刪除用戶
home.jsp中發送的ajax請求以下
function deleteUser() { if(confirm("用戶一旦刪除須要從新註冊，肯定刪除用戶？")){ jQuery.ajax({url:"/user/delete",async:false,type:"DELETE", success:function (restult) { if(restult == 1){ alert("用戶註銷成功"); location.href="/user/login"; }else{ alert("用戶註銷失敗"); } } }); } }
dao文件夾中的UserMapper中默認已經添加了deleteByPrimaryKey接口
在sqlmap中的UserMapper.xml中的實現代碼以下：
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" > delete from user where id = #{id,jdbcType=INTEGER} </delete>
在userController.java中寫路由，添加代碼以下：
@ResponseBody @RequestMapping(value="/delete",method= RequestMethod.DELETE) public Integer delete(HttpSession session, Model model){ User u = (User) session.getAttribute("user"); int result=0; if(u != null){ result= userService.deleteByPrimaryKey(u.getId()); session.setAttribute("user",null); System.out.println("Result:"+result); } return result; }
到此已經完：用戶註冊，登陸，編輯，退出，註銷。
代碼下載地址：https://github.com/greenteaone/helloworld
原文出處：https://www.cnblogs.com/greenteaone/p/11089389.htmlajax
相關文章
- 1. 教你一步一步搭建ssm框架
- 2. （實用篇）一步步搭建Spring+SpringMVC+MyBatis（SSM）框架
- 3. 基於IntelliJ IDEA開發工具搭建SSM框架並實現頁面登陸功能詳細講解一
- 4. ssm框架學習(一)------ssm框架整合實現登陸功能
- 5. 用idea搭建ssm框架（一）
- 6. 使用Struts框架，實現用戶登陸功能
- 7. 一步步帶你作vue後臺管理框架(三)——登陸功能
- 8. 一步步帶你作vue後臺管理框架 - 登陸功能
- 9. 用IDEA搭建SSM框架
- 10. SSM框架集成之用戶登錄功能的實現
- 更多相關文章...
- • Kotlin IntelliJ IDEA環境搭建 - Kotlin 教程
- • SSM（Spring+Spring MVC+MyBatis）框架整合搭建詳細步驟 - Spring教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
