移动商城第五篇(用户模块)【用户登陆、回显用户、拦截器、收货地址】

移动商城【用户登陆、回显用户】

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

640?wx_fmt=png

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

640?wx_fmt=png

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

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

                window.location.href  = "${path}/user/toLogin.do";
           });

编写对应的controller进行处理

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

   @RequestMapping("/toLogin.do")
   public String toLogin() {



       return "passport/login";

   }

}

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

640?wx_fmt=png

验证码

我们先把验证码弄出来,验证码实际上就是一段使用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());
       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());    }
   @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());

   }

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

    <img src="${path}/user/getImageCode.do?time" onclick="updateImageCode()"         class="code" alt="换一张"/>    <a href="javascript:void(0);"       onclick="updateImageCode()" title="换一张">换一张</a>
   <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);        }

           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();                }            });
           $(".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";    }
   @RequestMapping("/login.do")
   public String login() {
       return "redirect:/item/toIndex.do";
   }

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

640?wx_fmt=png

添加SQL语句

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

   SELECT  * FROM TS_PTL_USER WHERE username=#{username} and password=#{password}

 </select>

编写Controller、Service

/** * 继承SqlSessionDaoSupport能够得到sessionFactory的引用,非常方便! */@Repositorypublic 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);    }}
@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);
   }
}
@Servicepublic 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);    }}
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";    }
   @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"));    }}

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);            }        });
       $(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有没有对应的值,如果有就显示出来。

如果登陆了,就显示用户的信息:

640?wx_fmt=png

我们可以使用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("系统错误");        }    })})
   $.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>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();        }    }
       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);    }"/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);
   }
640?wx_fmt=png

用户拦截器

当用户点击“我的商城”的时候,该用户是需要登陆后才能进入该页面的。

并且,“我的商城”中的数据也是需要用户登陆后才能进入的。因此我们需要配置拦截器。

640?wx_fmt=png

修改“我的商城”超链接,和提供对应的controller方法

    <p class="l"><a href="#" title="商城首页">商城首页</a><samp>|</samp><a href="${path}/user/login/index.do" title="我的商城">我的商城</a></p><a href="#" title="商城首页">商城首页</a><samp>|</samp><a href="${path}/user/login/index.do" title="我的商城">我的商城</a></p>

提供对应的controller方法

    /**     * 跳转到我的商城页面     * @return     */    @RequestMapping("/login/toPersonal.do")    public String toPersonal() {        return "person/index";    }
   @RequestMapping("/login/toPersonal.do")
   public String toPersonal() {

       return "person/index";
   }
640?wx_fmt=png

上面的那些超链接都是需要用户登陆了才能访问的。

编写拦截器

package com.rl.ecps.interceptor;import com.rl.ecps.model.TsPtlUser;import org.springframework.web.servlet.HandlerInterceptor;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;/** * Created by ozc on 2017/10/10. */public class LoginInteceptor implements HandlerInterceptor {    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {        //得到session        HttpSession session = request.getSession();        TsPtlUser user = (TsPtlUser) session.getAttribute("user");        /**         * 如果没有登陆,就跳转到登陆页面,登陆了就放行。         */        if (user == null) {            response.sendRedirect(request.getContextPath() + "/user/toLogin.do");            return false;        } else {            return true;        }    }    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {    }    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {    }}

import com.rl.ecps.model.TsPtlUser;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
* Created by ozc on 2017/10/10.
*/

public class LoginInteceptor implements HandlerInterceptor {


   public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

       //得到session
       HttpSession session = request.getSession();
       TsPtlUser user = (TsPtlUser) session.getAttribute("user");

       /**
        * 如果没有登陆,就跳转到登陆页面,登陆了就放行。
        */

       if (user == null) {
           response.sendRedirect(request.getContextPath() + "/user/toLogin.do");
           return false;
       } else {
           return true;
       }

   }

   public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

   }

   public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

   }
}

注册拦截器

    <!--注册拦截器,只要是/login下路径的,我都要拦截!-->    <mvc:interceptors>        <mvc:interceptor>            <mvc:mapping path="/user/login/**"/>            <bean class="com.rl.ecps.interceptor.LoginInterceptor"></bean>        </mvc:interceptor>    </mvc:interceptors>
   <mvc:interceptors>
       <mvc:interceptor>
           <mvc:mapping path="/user/login/**"/>
           <bean class="com.rl.ecps.interceptor.LoginInterceptor"></bean>
       </mvc:interceptor>
   </mvc:interceptors>
640?wx_fmt=png

收货地址查询、添加、更新

我们接下来要做的就是用户的收货地址部分。

640?wx_fmt=png

修改其超链接:

<li><a href="${path}/user/login/toDeliverAddress.do" title="收货地址" class="here">收货地址</a></li><a href="${path}/user/login/toDeliverAddress.do" title="收货地址" class="here">收货地址</a></li>

提供对应的controller方法

    /**     * 跳转到收货地址页面     * @return     */    @RequestMapping("/login/toDeliverAddress.do")    public String toDeliverAddress() {        return "person/deliverAddress";    }
   @RequestMapping("/login/toDeliverAddress.do")
   public String toDeliverAddress() {

       return "person/deliverAddress";
   }

进去页面以后是这样子的:

640?wx_fmt=png

看到我们收货地址的数据库表:

640?wx_fmt=png

数据库表的字段也很简单,没什么好说的:

DROP TABLE EB_SHIP_ADDR CASCADE CONSTRAINTS;CREATE TABLE EB_SHIP_ADDR  (   SHIP_ADDR_ID         NUMBER(11)                      NOT NULL,   PTL_USER_ID          NUMBER(11),   SHIP_NAME            VARCHAR2(80)                    NOT NULL,   PROVINCE             VARCHAR2(40)                    NOT NULL,   CITY                 VARCHAR2(40)                    NOT NULL,   DISTRICT             VARCHAR2(40)                    NOT NULL,   ZIP_CODE             VARCHAR2(40),   ADDR                 VARCHAR2(400)                   NOT NULL,   PHONE                VARCHAR2(60)                    NOT NULL,   DEFAULT_ADDR         NUMBER(1)                      DEFAULT 0 NOT NULL,   CONSTRAINT PK_EB_SHIP_ADDR PRIMARY KEY (SHIP_ADDR_ID));COMMENT ON TABLE EB_SHIP_ADDR IS'收货地址';COMMENT ON COLUMN EB_SHIP_ADDR.SHIP_ADDR_ID IS'收货人地址主键';COMMENT ON COLUMN EB_SHIP_ADDR.PTL_USER_ID IS'前台用户ID';COMMENT ON COLUMN EB_SHIP_ADDR.SHIP_NAME IS'收货人姓名';COMMENT ON COLUMN EB_SHIP_ADDR.PROVINCE IS'省份';COMMENT ON COLUMN EB_SHIP_ADDR.CITY IS'城市';COMMENT ON COLUMN EB_SHIP_ADDR.DISTRICT IS'地区';COMMENT ON COLUMN EB_SHIP_ADDR.ZIP_CODE IS'邮编';COMMENT ON COLUMN EB_SHIP_ADDR.ADDR IS'街道地址';COMMENT ON COLUMN EB_SHIP_ADDR.PHONE IS'联系电话';COMMENT ON COLUMN EB_SHIP_ADDR.DEFAULT_ADDR IS'默认收货地址:若为默认收货地址则为1。';TABLE EB_SHIP_ADDR CASCADE CONSTRAINTS;

CREATE TABLE EB_SHIP_ADDR  (
  SHIP_ADDR_ID         NUMBER(11)                      NOT NULL,
  PTL_USER_ID          NUMBER(11),
  SHIP_NAME            VARCHAR2(80)                    NOT NULL,
  PROVINCE             VARCHAR2(40)                    NOT NULL,
  CITY                 VARCHAR2(40)                    NOT NULL,
  DISTRICT             VARCHAR2(40)                    NOT NULL,
  ZIP_CODE             VARCHAR2(40),
  ADDR                 VARCHAR2(400)                   NOT NULL,
  PHONE                VARCHAR2(60)                    NOT NULL,
  DEFAULT_ADDR         NUMBER(1)                      DEFAULT 0 NOT NULL,
  CONSTRAINT PK_EB_SHIP_ADDR PRIMARY KEY (SHIP_ADDR_ID)
);

COMMENT ON TABLE EB_SHIP_ADDR IS
'收货地址';

COMMENT ON COLUMN EB_SHIP_ADDR.SHIP_ADDR_ID IS
'收货人地址主键';

COMMENT ON COLUMN EB_SHIP_ADDR.PTL_USER_ID IS
'前台用户ID';

COMMENT ON COLUMN EB_SHIP_ADDR.SHIP_NAME IS
'收货人姓名';

COMMENT ON COLUMN EB_SHIP_ADDR.PROVINCE IS
'省份';

COMMENT ON COLUMN EB_SHIP_ADDR.CITY IS
'城市';

COMMENT ON COLUMN EB_SHIP_ADDR.DISTRICT IS
'地区';

COMMENT ON COLUMN EB_SHIP_ADDR.ZIP_CODE IS
'邮编';

COMMENT ON COLUMN EB_SHIP_ADDR.ADDR IS
'街道地址';

COMMENT ON COLUMN EB_SHIP_ADDR.PHONE IS
'联系电话';

COMMENT ON COLUMN EB_SHIP_ADDR.DEFAULT_ADDR IS
'默认收货地址:若为默认收货地址则为1。';

查询当前用户的收货地址

逆向工程数据库表:

640?wx_fmt=png

dao

/** * 继承SqlSessionDaoSupport能够得到sessionFactory的引用,非常方便! */@Repositorypublic class EbShipAddrDaoImpl extends SqlSessionDaoSupport implements EbShipAddrDao {    String nameSpace = "com.rl.ecps.sqlMap.EbShipAddrMapper.";    public List<EbShipAddr> findUserAddress(Long userId) {        return this.getSqlSession().selectList(nameSpace + "findUserAddress", userId);    }}
@Repository
public class EbShipAddrDaoImpl extends SqlSessionDaoSupport implements EbShipAddrDao {

   String nameSpace = "com.rl.ecps.sqlMap.EbShipAddrMapper.";

   public List<EbShipAddr> findUserAddress(Long userId) {
       return this.getSqlSession().selectList(nameSpace + "findUserAddress", userId);
   }

}

service

@Servicepublic class EbShipAddrServiceImpl implements EbShipAddrService {    @Autowired    private EbShipAddrDao addrDao;    public List<EbShipAddr> findUserAddress(Long userId) {        return addrDao.findUserAddress(userId);    }}
public class EbShipAddrServiceImpl implements EbShipAddrService {


   @Autowired
   private EbShipAddrDao addrDao;

   public List<EbShipAddr> findUserAddress(Long userId) {
       return addrDao.findUserAddress(userId);
   }
}

controller

    /**     * 跳转到收货地址页面     *     * @return     */    @RequestMapping("/login/toDeliverAddress.do")    public String toDeliverAddress(HttpSession session,Model model) {        TsPtlUser user = (TsPtlUser) session.getAttribute("user");        Long ptlUserId = user.getPtlUserId();        List<EbShipAddr> userAddress = addrService.findUserAddress(ptlUserId);        model.addAttribute("userAddress", userAddress);        return "person/deliverAddress";    }
   @RequestMapping("/login/toDeliverAddress.do")
   public String toDeliverAddress(HttpSession session,Model model) {

       TsPtlUser user = (TsPtlUser) session.getAttribute("user");
       Long ptlUserId = user.getPtlUserId();
       List<EbShipAddr> userAddress = addrService.findUserAddress(ptlUserId);
       model.addAttribute("userAddress", userAddress);

       return "person/deliverAddress";
   }

已经把地址查询出来了。

640?wx_fmt=png

新增和修改我们可以使用有无地址的id来进行判断,如果是修改的话,那么是有地址id的,如果是新增的话,是没有地址id的

新增地址

将主键设置为自动增长。

  <insert id="insert" parameterType="com.rl.ecps.model.EbShipAddr" >    insert into EB_SHIP_ADDR (SHIP_ADDR_ID, PTL_USER_ID, SHIP_NAME,       PROVINCE, CITY, DISTRICT,       ZIP_CODE, ADDR, PHONE,       DEFAULT_ADDR, FIXED_PHONE)    values (seqshipaddrid.nextval, #{ptlUserId,jdbcType=DECIMAL}, #{shipName,jdbcType=VARCHAR},      #{province,jdbcType=VARCHAR}, #{city,jdbcType=VARCHAR}, #{district,jdbcType=VARCHAR},       #{zipCode,jdbcType=VARCHAR}, #{addr,jdbcType=VARCHAR}, #{phone,jdbcType=VARCHAR},       #{defaultAddr,jdbcType=DECIMAL}, #{fixedPhone,jdbcType=VARCHAR})  </insert>
   insert into EB_SHIP_ADDR (SHIP_ADDR_ID, PTL_USER_ID, SHIP_NAME,
     PROVINCE, CITY, DISTRICT,
     ZIP_CODE, ADDR, PHONE,
     DEFAULT_ADDR, FIXED_PHONE)
   values (seqshipaddrid.nextval, #{ptlUserId,jdbcType=DECIMAL}, #{shipName,jdbcType=VARCHAR},
     #{province,jdbcType=VARCHAR}, #{city,jdbcType=VARCHAR}, #{district,jdbcType=VARCHAR},
     #{zipCode,jdbcType=VARCHAR}, #{addr,jdbcType=VARCHAR}, #{phone,jdbcType=VARCHAR},
     #{defaultAddr,jdbcType=DECIMAL}, #{fixedPhone,jdbcType=VARCHAR})
 </insert>

dao:

    public void insert(EbShipAddr addr) {        this.getSqlSession().insert(nameSpace + "insert", addr);    }
       this.getSqlSession().insert(nameSpace + "insert", addr);
   }

service:

   public void insert(EbShipAddr addr) {        addrDao.insert(addr);    }
       addrDao.insert(addr);
   }

controller:

    /**     * 添加或修改地址     *     * @return     */    @RequestMapping("/saveOrUpdateAddress.do")    public String saveOrUpdateAddress(EbShipAddr addr, HttpSession session) {        TsPtlUser user = (TsPtlUser) session.getAttribute("user");        addr.setPtlUserId(user.getPtlUserId());        if (addr.getShipAddrId() == null) {            addrService.insert(addr);        }        return "redirect:login/toDeliverAddress.do";    }
   @RequestMapping("/saveOrUpdateAddress.do")
   public String saveOrUpdateAddress(EbShipAddr addr, HttpSession session) {

       TsPtlUser user = (TsPtlUser) session.getAttribute("user");
       addr.setPtlUserId(user.getPtlUserId());

       if (addr.getShipAddrId() == null) {
           addrService.insert(addr);

       }

       return "redirect:login/toDeliverAddress.do";
   }
640?wx_fmt=png

修改地址

修改地址实际上就是点击编辑的时候,将该地址数据写到下面的输入框中:

根据地址id获取得到id的详细信息:

<a href="javascript:void(0);" title="修改" onclick="getAddr(${address.shipAddrId})"                                   class="blue">[修改]</a></a>

dao

    public EbShipAddr selectByPrimaryKey(Long addrId) {        return this.getSqlSession().selectOne(nameSpace + "selectByPrimaryKey", addrId);    }
       return this.getSqlSession().selectOne(nameSpace + "selectByPrimaryKey", addrId);
   }

service:

    public EbShipAddr selectByPrimaryKey(Long addrId) {        return addrDao.selectByPrimaryKey(addrId);    }
       return addrDao.selectByPrimaryKey(addrId);
   }

ajax:

        function getAddr(shipAddrId) {            $.ajax({                url: "${path}/user/getAddr.do",                data: {shipAddrId: shipAddrId},                type: "post",                success:function (responseText) {                    var parseJSON = $.parseJSON(responseText);                    $("#shipAddrId").val(parseJSON.addr.shipAddrId);                    $("#shipName").val(parseJSON.addr.shipName);                    $("#province").val(parseJSON.addr.province);                    $("#mycity").val(parseJSON.addr.city);                    $("#district").val(parseJSON.addr.district);                    $("#addr").val(parseJSON.addr.addr);                    $("#zipCode").val(parseJSON.addr.zipCode);                    $("#phone").val(parseJSON.addr.phone);                },                error:function () {                    alert("系统错误了");                }            });
           $.ajax({
               url: "${path}/user/getAddr.do",
               data: {shipAddrId: shipAddrId},
               type: "post",
               success:function (responseText) {
                   var parseJSON = $.parseJSON(responseText);
                   $("#shipAddrId").val(parseJSON.addr.shipAddrId);
                   $("#shipName").val(parseJSON.addr.shipName);
                   $("#province").val(parseJSON.addr.province);
                   $("#mycity").val(parseJSON.addr.city);
                   $("#district").val(parseJSON.addr.district);
                   $("#addr").val(parseJSON.addr.addr);
                   $("#zipCode").val(parseJSON.addr.zipCode);
                   $("#phone").val(parseJSON.addr.phone);

               },
               error:function () {

                   alert("系统错误了");
               }
           });

controller:

    /**     * 根据id获取收货地址详细信息,返回给浏览器     *     * @return     */    @RequestMapping("/getAddr.do")    public void getAddr(Long shipAddrId,HttpServletResponse response) {        EbShipAddr ebShipAddr = addrService.selectByPrimaryKey(shipAddrId);        //返回JSON数据出去        JSONObject jsonObject = new JSONObject();        jsonObject.accumulate("addr", ebShipAddr);        String result = jsonObject.toString();        //JSON数据带有中文,编码后输出        ResourcesUtils.printJSON(result, response);    }
   @RequestMapping("/getAddr.do")
   public void getAddr(Long shipAddrId,HttpServletResponse response) {
       EbShipAddr ebShipAddr = addrService.selectByPrimaryKey(shipAddrId);

       //返回JSON数据出去
       JSONObject jsonObject = new JSONObject();
       jsonObject.accumulate("addr", ebShipAddr);
       String result = jsonObject.toString();

       //JSON数据带有中文,编码后输出
       ResourcesUtils.printJSON(result, response);

   }

效果:

640?wx_fmt=png

通过隐藏域将id带过去给controller

//ajax在显示数据的时候,已经把id给赋值了。<input type="hidden"  id="shipAddrId" name="shipAddrId">
<input type="hidden"  id="shipAddrId" name="shipAddrId">

dao:

    public void updateByPrimaryKeySelective(EbShipAddr addr) {        this.getSqlSession().update(nameSpace + "updateByPrimaryKeySelective", addr);    }

       this.getSqlSession().update(nameSpace + "updateByPrimaryKeySelective", addr);
   }

service:

    public void updateByPrimaryKeySelective(EbShipAddr addr) {        addrDao.updateByPrimaryKeySelective(addr);    }

       addrDao.updateByPrimaryKeySelective(addr);
   }

controller:

    /**     * 添加或修改地址     *     * @return     */    @RequestMapping("/saveOrUpdateAddress.do")    public String saveOrUpdateAddress(EbShipAddr addr, HttpSession session) {        TsPtlUser user = (TsPtlUser) session.getAttribute("user");        addr.setPtlUserId(user.getPtlUserId());        if (addr.getShipAddrId() == null) {            addrService.insert(addr);        } else {            //如果是有id的,那么就是更新操作!            addrService.updateByPrimaryKeySelective(addr);        }        return "redirect:login/toDeliverAddress.do";    }
   @RequestMapping("/saveOrUpdateAddress.do")
   public String saveOrUpdateAddress(EbShipAddr addr, HttpSession session) {

       TsPtlUser user = (TsPtlUser) session.getAttribute("user");
       addr.setPtlUserId(user.getPtlUserId());

       if (addr.getShipAddrId() == null) {
           addrService.insert(addr);
       } else {
           //如果是有id的,那么就是更新操作!
           addrService.updateByPrimaryKeySelective(addr);
       }
       return "redirect:login/toDeliverAddress.do";
   }
640?wx_fmt=png

设置为默认地址的样式

当地址是默认地址时,才有样式。我们现在是全部都有样式。可以直接判断来进行给出哪个是有样式的

640?wx_fmt=png
    <tr <c:if test="${addr.defaultAddr == 1 }">class='here'</c:if>></c:if>>

当然了,默认的地址只允许有一个,因此我们还需要对其做后台校验

       <td class="def blue"><a href="${path}/user/updateDefault.do?shipAddrId=${address.shipAddrId}">设为默认</a></td><a href="${path}/user/updateDefault.do?shipAddrId=${address.shipAddrId}">设为默认</a></td>

将当前用户下的地址都设置为不是默认地址:

  <update id="deleteDefault" parameterType="long">    update EB_SHIP_ADDR SET DEFAULT_ADDR = 0 WHERE  DEFAULT_ADDR=1 AND PTL_USER_ID = #{userId}  </update>  <update id="updateDefault" parameterType="long">    update EB_SHIP_ADDR SET DEFAULT_ADDR = 1 WHERE SHIP_ADDR_ID = #{addrId}  </update>

   update EB_SHIP_ADDR SET DEFAULT_ADDR = 0 WHERE  DEFAULT_ADDR=1 AND PTL_USER_ID = #{userId}

 </update>

 <update id="updateDefault" parameterType="long">

   update EB_SHIP_ADDR SET DEFAULT_ADDR = 1 WHERE SHIP_ADDR_ID = #{addrId}

 </update>

dao:

    public void updateDefault(Long addrId) {        this.getSqlSession().update(nameSpace + "updateDefault", addrId);    }    public void deleteDefault(Long userId) {        this.getSqlSession().update(nameSpace + "deleteDefault", userId);    }

       this.getSqlSession().update(nameSpace + "updateDefault", addrId);

   }

   public void deleteDefault(Long userId) {
       this.getSqlSession().update(nameSpace + "deleteDefault", userId);

   }

service:

    public void updateDefault(Long addrId) {        addrDao.updateDefault(addrId);    }    public void deleteDefault(Long userId) {        addrDao.deleteDefault(userId);    }
       addrDao.updateDefault(addrId);

   }

   public void deleteDefault(Long userId) {
       addrDao.deleteDefault(userId);

   }

controller:

    /**     * 将地址设置为默认地址     *     * @return     */    @RequestMapping("/updateDefault.do")    public String updateDefault(Long shipAddrId,HttpSession session) {        if (shipAddrId != null) {            //将当前用户数据库中为默认地址的数据设置为0            TsPtlUser user = (TsPtlUser) session.getAttribute("user");            addrService.deleteDefault(user.getPtlUserId());            //将其地址设置为默认地址            addrService.updateDefault(shipAddrId);        }        return "redirect:login/toDeliverAddress.do";    }
   @RequestMapping("/updateDefault.do")
   public String updateDefault(Long shipAddrId,HttpSession session) {

       if (shipAddrId != null) {

           //将当前用户数据库中为默认地址的数据设置为0
           TsPtlUser user = (TsPtlUser) session.getAttribute("user");
           addrService.deleteDefault(user.getPtlUserId());

           //将其地址设置为默认地址
           addrService.updateDefault(shipAddrId);

       }



       return "redirect:login/toDeliverAddress.do";
   }

如果是在修改/新增里边设置地址为默认,那么在新增/修改之前把所有的去除即可:

        if (addr.getDefaultAddr() == 1) {            addrService.deleteDefault(user.getPtlUserId());        }1) {
           addrService.deleteDefault(user.getPtlUserId());
       }

判断收货地址是否大于5

规定收货地址不能多于5个,我们就可以判断集合的长度从而提示客户

    <input type="hidden" id="listCount" value="${fn:length(userAddress)}">
    $("#jvForm").submit(function(){        var listCount = $("#listCount").val();        var shipAddrId = $("#shipAddrId").val();        if(listCount >= '5' && (shipAddrId == null || shipAddrId == "")){            alert("收货地址不能超过5个");            return false;        }else{            return true;        }    })function(){
       var listCount = $("#listCount").val();
       var shipAddrId = $("#shipAddrId").val();

       if(listCount >= '5' && (shipAddrId == null || shipAddrId == "")){
           alert("收货地址不能超过5个");
           return false;
       }else{
           return true;
       }
   })

总结


评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值