碼上快樂

相關內容    簡體    繁體

一步一步教你用IntelliJ IDEA 搭建SSM框架（3）——實現用戶登錄功能

本文轉載自   查看原文   2019-07-01 15:56   1515    java/ MYSQL

上面兩篇博客已經詳細的介紹了在IntelliJ IDEA 搭建SSM框架的整個過程，下面我們就要在搭建好的環境里實現我們想要的功能了。本文完成用戶的登錄功能，主要包括：用戶注冊，登錄，編輯，退出，注銷。

第一步：設計user表，並用mybatis-geneator生成user表對應的數據文件

        首先，我們在test數據庫里加一張user表，代碼如下

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表的相關數據文件，如下圖：

 

注意：如果需要一次生成所有表的數據文件，先把dao,entity,sqlmap里面的文件都清空，然后打開generatorConfig.xml，把table標簽替換為下面的代碼即可

<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.java
 
        
UserService.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>
 
         
 
         View Code 
        
 
         
         
        

第四步：注冊功能

 
        
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>
 
         
 
         View Code 
        
 
        
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);
}
 
         
 
         View Code 
        
 
        
 
        
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);}
}
 
         
 
         View Code 
        
 
        
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";
    }
}
 
         
 
         View Code 
        
 
        
第五步：登錄功能
 
        
 
        
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>
 
         
 
         View Code 
        
 
        
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";
    }
 
         
 
         View Code 
        
 
        
 
        
 
 
        
第六步：登錄成功以后的頁面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>
 
         
 
         View Code 
        
 
        
 
        
在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";
    }

}
 
         
 
         View Code 
        
 
        
 
 
        
 
        
第七步：編輯用戶

 
        
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>
 
         
 
         View Code 
        
 
        

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層實現業務邏輯
 
        
在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";
    }
 
         
 
         View Code 
        
 
        

第八步：退出
 
        
在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

 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        一步一步教你用IntelliJ IDEA 搭建SSM框架（2）——配置mybatis-geneator  
        一步一步教你用IntelliJ IDEA 搭建SSM框架（1）  
        一步一步教你用CSS畫愛心  
        如何使用PyQt5一步步實現用戶登錄GUI界面、登錄后跳轉？  
        一步步教你用Mac電腦使用Idea工具編譯Spring5源碼  
        一步步使用SpringBoot結合Vue實現登錄和用戶管理功能  
        Eclipse一步一步搭建SSM+Maven  
        一步步實現 Prism + MEF（一）--- 搭建框架  
        一步一步教你搭建和使用FitNesse  
        一步一步教你編寫與搭建自動化測試框架——python篇  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM