移动商城第十二篇【用户登陆、回显用户】

超、凢脫俗 2022-03-16 08:04 241阅读 0赞

--------------------

tags: 移动商城项目

--------------------

# 移动商城第十二篇【用户登陆、回显用户】 #

我们来实现用户登陆的功能：

当点击的时候，出来的是一个弹出框，我们想要切换成一个页面。

找到对应的事件、切换成我们的页面就行了。

$("#loginAlertIs").click(function () {
    
                     window.location.href  = "${path}/user/toLogin.do";
                });
    
    复制代码

编写对应的controller进行处理

@Controller
    @RequestMapping("/user")
    public class EbUserController {
    
        @RequestMapping("/toLogin.do")
        public String toLogin() {
            
            
            
            return "passport/login";
    
        }
    
    }
    
    
    复制代码

这个就是我们的登陆页面：

## 验证码 ##

我们先把验证码弄出来，验证码实际上就是一段使用AWT来写的代码。

System.out.println("#######################生成数字和字母的验证码#######################");
            BufferedImage img = new BufferedImage(68, 22, 1);
            Graphics g = img.getGraphics();
            Random r = new Random();
            Color c = new Color(200, 150, 255);
            g.setColor(c);
            g.fillRect(0, 0, 68, 22);
            StringBuffer sb = new StringBuffer();
            char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
            int len = ch.length;
    
            for(int i = 0; i < 4; ++i) {
                int index = r.nextInt(len);
                g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
                g.setFont(new Font("Arial", 3, 22));
                g.drawString("" + ch[index], i * 15 + 3, 18);
                sb.append(ch[index]);
            }
    
            request.getSession().setAttribute("piccode", sb.toString());
            ImageIO.write(img, "JPG", response.getOutputStream());
    复制代码

提供Controller方法

/**
         * 获取验证码图片
         *
         * @return
         */
        @RequestMapping("/getImageCode.do")
        public void getImageCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
            System.out.println("#######################生成数字和字母的验证码#######################");
            BufferedImage img = new BufferedImage(68, 22, 1);
            Graphics g = img.getGraphics();
            Random r = new Random();
            Color c = new Color(200, 150, 255);
            g.setColor(c);
            g.fillRect(0, 0, 68, 22);
            StringBuffer sb = new StringBuffer();
            char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
            int len = ch.length;
    
            for(int i = 0; i < 4; ++i) {
                int index = r.nextInt(len);
                g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
                g.setFont(new Font("Arial", 3, 22));
                g.drawString("" + ch[index], i * 15 + 3, 18);
                sb.append(ch[index]);
            }
    
            request.getSession().setAttribute("piccode", sb.toString());
            ImageIO.write(img, "JPG", response.getOutputStream());
            
        }
    复制代码

页面上直接访问这个地址，就可以获取得到验证码了。

*  **当点击换一张的时候，把图片的src路径切换一下就行了。**

<img src="${path}/user/getImageCode.do?time" onclick="updateImageCode()"
             class="code" alt="换一张"/>
        <a href="javascript:void(0);"
           onclick="updateImageCode()" title="换一张">换一张</a>
    
    复制代码

function updateImageCode() {
    
                var path = "${path}/user/getImageCode.do?time="+new Date().getTime();
    
                //把路径切换掉就行了
                $("#ImageCode").attr("src", path);
    
            }
    
    
    复制代码

## 前台做验证 ##

**Jquery的验证要放在$(function())中才能生效。**

//前台校验
                $(".bg_text input").blur(function () {
    
                    //得到每一个值
                    var val = $(this).val();
    
                    //获取得到每个name
                    var name = $(this).attr("name");
    
    
                    //如果为空，那么就
                    if(val==null || val==""){
    
                        if(name=="username"){
                            $("#errorName").html("请输入用户名");
                            $("#errorName").show();
                        }
                        if(name=="password"){
                            $("#errorName").html("请输入密码");
                            $("#errorName").show();
                        }
                        if(name=="captcha"){
                            $("#errorName").html("请输入验证码");
                            $("#errorName").show();
                        }
                    }else {
                        $("#errorName").hide();
                    }
                });
    
    复制代码

## 后台验证登陆 ##

/**
         * 处理登陆
         * @return
         */
        @RequestMapping("/login.do")
        public String login() {
            return "redirect:/item/toIndex.do";
        }
    
    复制代码

逆向工程出对应的表和映射文件

添加SQL语句

<select id="findUserByUsernamePass" resultMap="BaseResultMap" parameterType="map">
        
        SELECT  * FROM TS_PTL_USER WHERE username=#{username} and password=#{password}
        
      </select>
    
    复制代码

编写Controller、Service

/**
     * 继承SqlSessionDaoSupport能够得到sessionFactory的引用，非常方便！
     */
    @Repository
    public class TsPtlUserDaoImpl extends SqlSessionDaoSupport implements TsPtlUserDao {
    
        String nameSpace = "com.rl.ecps.sqlMap.TsPtlUserMapper.";
    
    
        public TsPtlUser findUserByUsernamePass(Map<String, String> stringMap) {
    
            return this.getSqlSession().selectOne(nameSpace+"findUserByUsernamePass",stringMap);
        }
    }
    
    
    复制代码

@Service
    public class TsptlUserServiceImpl implements TsPtlUserService {
    
    
        @Autowired
        private TsPtlUserDao ptlUserDao;
    
        public TsPtlUser findUserByUsernamePass(String username,String password) {
    
            Map<String, String> map = new HashMap<String, String>();
            map.put("username", username);
            map.put("password", password);
    
    
            return ptlUserDao.findUserByUsernamePass(map);
        }
    
    }
    
    
    复制代码

Controller处理登陆：

/**
         * 处理登陆
         *
         * @return
         */
        @RequestMapping("/login.do")
        public String login(String username, String password, String captcha, HttpSession session, Model model) {
    
            //首先校验验证码是否正确
            String piccode = (String) session.getAttribute("piccode");
    
            if (!StringUtils.equalsIgnoreCase(piccode, captcha)) {
    
                model.addAttribute("tip", "验证码错误！");
                return "passport/login";
            }
    
            //数据库存储的是MD5值，因此我们拿到密码也要md5一下
            String md5Code = MD5.GetMD5Code(password);
            
            //验证用户名和密码
            TsPtlUser user = userService.findUserByUsernamePass(username, md5Code);
            if (user == null) {
                model.addAttribute("tip", "用户名或密码错误了！");
                return "passport/login";
            }
            session.setAttribute("user", user);
            return "redirect:/item/toIndex.do";
    
        }
    
    复制代码

MD5工具类

package com.rl.ecps.utils;
    
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    
    public class MD5 {
        
        private final static String[] strDigits = { "0", "1", "2", "3", "4", "5",
                "6", "7", "8", "9", "a", "b", "c", "d", "e", "f" };
    
        public MD5() {
        }
    
        private static String byteToArrayString(byte bByte) {
            int iRet = bByte;
            if (iRet < 0) {
                iRet += 256;
            }
            int iD1 = iRet / 16;
            int iD2 = iRet % 16;
            return strDigits[iD1] + strDigits[iD2];
        }
    
        private static String byteToNum(byte bByte) {
            int iRet = bByte;
            System.out.println("iRet1=" + iRet);
            if (iRet < 0) {
                iRet += 256;
            }
            return String.valueOf(iRet);
        }
    
        private static String byteToString(byte[] bByte) {
            StringBuffer sBuffer = new StringBuffer();
            for (int i = 0; i < bByte.length; i++) {
                sBuffer.append(byteToArrayString(bByte[i]));
            }
            return sBuffer.toString();
        }
    
        public static String GetMD5Code(String strObj) {
            String resultString = null;
            try {
                resultString = new String(strObj);
                MessageDigest md = MessageDigest.getInstance("MD5");
                resultString = byteToString(md.digest(strObj.getBytes()));
            } catch (NoSuchAlgorithmException ex) {
                ex.printStackTrace();
            }
            return resultString;
        }
    
        public static void main(String[] args) {
            MD5 getMD5 = new MD5();
            System.out.println(getMD5.GetMD5Code("renliang"));
        }
    }
    
    复制代码

在Controller的消息返回到页面上 展示：

});
    
            $(function () {
    
                //得到后台校验的提示，在提示框中显示
                var consoleTip = $("#loginTip").val();
                console.log(consoleTip);
                if(consoleTip =='captchaError'){
                    $("#errorName2").html("验证码错误了！");
                    $("#errorName2").show(500);
                }
    
                if(consoleTip =='userPassError') {
                    $("#errorName2").html("用户名或密码错误了！");
                    $("#errorName2").show(500);
                }
    
            });
    
    
    
    
    复制代码

到目前为止，我们就可以登陆页面了。

接下来，要做的就是将登陆的信息在页面上展示出来。以前我们都是在JSP页面使用JSTL标签来进行判断该session有没有对应的值，如果有就显示出来。

如果登陆了，就显示用户的信息：

*  这样做有一个弊端，**如果我们很多页面上都需要显示用户的信息的话，那么就会有非常多的冗余代码了。**

我们可以使用AJAX来替代JSTL这种方法，要是有很多页面都需要使用的话，只要引入对应的JS文件就行了。

$(function(){
    	$.ajax({
    		url:path+"/user/getUser.do",
    		type:"post",
    		dataType:"text",
    		success:function(responseText){
    			var userObj  = $.parseJSON(responseText);
    			if(userObj.user != null){
    				$("#loginAlertIs").html(userObj.user.username)
    			}
    		},
    		error:function(){
    			alert("系统错误");
    		}
    	})
    })
    
    复制代码

在使用的时候，需要path这么一个变量，我们是可以将其在引入之前定义出来的！

如果输出的JSON带中文的话，那我们需要编码后再输出给浏览器

public static void printJSON(String result, HttpServletResponse response) {
            response.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=UTF-8");
    
            try {
                response.getWriter().write(result);
            } catch (IOException var3) {
                var3.printStackTrace();
            }
    
        }
    复制代码

Controlller代码：

@RequestMapping("/getUser.do")
        public void getUser(HttpSession session,HttpServletResponse response) {
    
            //得到session的值，通过JSON输出给浏览器
            TsPtlUser user = (TsPtlUser) session.getAttribute("user");
            JSONObject jo = new JSONObject();
            jo.accumulate("user", user);
            String result = jo.toString();
    
            //编码后输出
            ResourcesUtils.printJSON(result, response);
        }
    复制代码

# 总结 #

*  需要验证码的时候，我们使用对应的Controller方法，我们的图片引用Controller方法就得到验证码了。
    
     *  需要更换验证码的话，那就重新访问Controller方法即可
 *  校验验证码实际上就是把用户带过去的值和session里面的值做比较。
 *  对于前台校验，就是拿到他们的值，判断他们的输入框内容，从而进行校验
 *  一般在数据库存储的都是MD5值，用户传递过来后，需要MD5后再和数据库进行比较。
 *  **以前使用JSTL来回显用户的数据，实际上使用AJAX能更有通用性**
    
     *  不需要JSP语法支持
     *  静态页面也能够使用
     *  一处写了，其他处引用即可。
 *  **要想引入的JS文件能有对应的变量的话，只需要在前头使用script脚本定义一个变量即可\[全局变量\]**

如果您觉得这篇文章帮助到了您，可以给作者一点鼓励