---

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这么一个变量，我们是可以将其在引入之前定义出来的！

    <script type="text/javascript">var path = "${path}";</script>

如果输出的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脚本定义一个变量即可[全局变量]

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