首页 > 其他分享 >商城项目改进分布式缓存下的登录逻辑和页面展示-----商城项目

商城项目改进分布式缓存下的登录逻辑和页面展示-----商城项目

时间:2024-09-22 12:22:50浏览次数:11  
标签:缓存 return register ----- new import alatus com 商城

package com.alatus.mall.auth.app;

import com.alatus.common.constant.AuthServerConstant;
import com.alatus.common.exception.BizCodeEnum;
import com.alatus.common.utils.R;
import com.alatus.common.vo.MemberRespVo;
import com.alatus.mall.auth.feign.MemberFeignService;
import com.alatus.mall.auth.feign.ThirdPartFeignService;
import com.alatus.mall.auth.vo.UserLoginVo;
import com.alatus.mall.auth.vo.UserRegisterVo;
import com.alibaba.fastjson.TypeReference;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpSession;
import javax.validation.Valid;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;
import java.util.stream.Collectors;

@Controller
public class LoginController {
    @Autowired
    private ThirdPartFeignService thirdPartFeignService;
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Autowired
    private MemberFeignService memberFeignService;

    @GetMapping("/login.html")
    public String loginPage(HttpSession session) {
        Object attribute = session.getAttribute(AuthServerConstant.LOGIN_USER);
        if(attribute==null){
            return "login";
        }
        else{
            return "redirect:http://alatusmall.com";
        }
    }

    @GetMapping("/sms/sendCode")
    @ResponseBody
    public R sendCode(@RequestParam("phone") String phone){
        R checkPhone = memberFeignService.checkPhone(phone);
        if(checkPhone.getCode()==0){
//      TODO 接口防刷
            //        防止反复刷验证码
            String value = redisTemplate.opsForValue().get(AuthServerConstant.SMS_CODE_CACHE_PREFIX + phone);
            if(value!=null&&!StringUtils.isEmpty(value)){
                long time = Long.parseLong(value.split("_")[1]);
                if(System.currentTimeMillis() - time < 60000){
//                60秒内不能再发
                    return R.error(BizCodeEnum.SMS_CODE_EXCEPTION.getCode(),BizCodeEnum.SMS_CODE_EXCEPTION.getMsg());
                }
            }
            String code = UUID.randomUUID().toString().substring(0, 5);
            R sendCode = thirdPartFeignService.sendCode(phone, code);
//        缓存验证码
            redisTemplate.opsForValue().set(AuthServerConstant.SMS_CODE_CACHE_PREFIX+phone,code+"_"+System.currentTimeMillis(),10, TimeUnit.MINUTES);
            if(sendCode.getCode()==0){
                return R.ok();
            }
            else{
                return R.error();
            }
        }
        else{
            return checkPhone;
        }
    }
    //RedirectAttributes redirectAttributes模拟重定向携带数据
    // TODO 重定向携带数据,利用session原理,将数据放在session中
//    只要跳到下一个页面取出这个数据后,session的数据就被删掉了
    // TODO 分布式Session问题解决!!!
    @PostMapping("/register")
    public String register(@Valid UserRegisterVo vo, BindingResult result, RedirectAttributes redirectAttributes){
        if(result.hasErrors()){
//            收集错误信息返回
            Map<String, String> collect = result.getFieldErrors().stream().collect(Collectors.toMap(FieldError::getField,FieldError::getDefaultMessage));
            redirectAttributes.addFlashAttribute("errors",collect);
//            原请求是post请求,当我们失败以后,在这里转发,转发是会保持请求方式不变的,但是路径访问默认是get
//            就会出现错误
//            原理是使用了HttpSession的底层实现
            return "redirect:http://auth.alatusmall.com/reg.html";
        }
        else{
//        校验验证码
            String code = vo.getCode();
            String codeValue = redisTemplate.opsForValue().get(AuthServerConstant.SMS_CODE_CACHE_PREFIX + vo.getPhone());
            if(codeValue!=null&&!StringUtils.isEmpty(codeValue)){
//                截串获取验证码信息
                String redisCode = codeValue.split("_")[0];
               if(redisCode.equals(code)){
//                   验证码通过以后,删除验证码,令牌机制,验证码用过就不再可用了
                   redisTemplate.delete(AuthServerConstant.SMS_CODE_CACHE_PREFIX + vo.getPhone());
//                     调用远程服务进行注册
                   R register = memberFeignService.register(vo);
                   if(register.getCode()==0){
                       return "redirect:http://auth.alatusmall.com/login.html";
                   }
                   else{
                       Map<String,String> errors = new HashMap<>();
                       errors.put("msg",register.get("msg",new TypeReference<String>(){}));
                       redirectAttributes.addFlashAttribute("errors",errors);
                       return "redirect:http://auth.alatusmall.com/reg.html";
                   }
               }
               else{
//                   验证码错误
                   Map<String,String> errors = new HashMap<>();
                   errors.put("code","验证码错误");
                   redirectAttributes.addFlashAttribute("errors",errors);
                   return "redirect:http://auth.alatusmall.com/reg.html";
               }
            }
            else{
//               没有验证码
                Map<String,String> errors = new HashMap<>();
                errors.put("code","验证码错误");
                redirectAttributes.addFlashAttribute("errors",errors);
                return "redirect:http://auth.alatusmall.com/reg.html";
            }
        }
    }
    @PostMapping("/login")
    public String login(UserLoginVo userLoginVo, RedirectAttributes redirectAttributes, HttpSession session){
        R login = memberFeignService.login(userLoginVo);
        if (login.getCode()==0) {
//            登陆成功
            MemberRespVo data = login.getData(new TypeReference<MemberRespVo>() {});
            session.setAttribute(AuthServerConstant.LOGIN_USER,data);
            return "redirect:http://alatusmall.com";
        }
        else{
//            登陆失败
            Map<String,String> errors = new HashMap<>();
            errors.put("msg",login.get("msg",new TypeReference<String>(){}));
            redirectAttributes.addFlashAttribute("errors",errors);
            return "redirect:http://auth.alatusmall.com/login.html";
        }
    }
}
package com.alatus.mall.auth.app;

import com.alatus.common.constant.AuthServerConstant;
import com.alatus.common.exception.BizCodeEnum;
import com.alatus.common.utils.R;
import com.alatus.common.vo.MemberRespVo;
import com.alatus.mall.auth.feign.MemberFeignService;
import com.alatus.mall.auth.feign.ThirdPartFeignService;
import com.alatus.mall.auth.vo.UserLoginVo;
import com.alatus.mall.auth.vo.UserRegisterVo;
import com.alibaba.fastjson.TypeReference;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpSession;
import javax.validation.Valid;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;
import java.util.stream.Collectors;

@Controller
public class LoginController {
    @Autowired
    private ThirdPartFeignService thirdPartFeignService;
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Autowired
    private MemberFeignService memberFeignService;

    @GetMapping("/login.html")
    public String loginPage(HttpSession session) {
        Object attribute = session.getAttribute(AuthServerConstant.LOGIN_USER);
        if(attribute==null){
            return "login";
        }
        else{
            return "redirect:http://alatusmall.com";
        }
    }

    @GetMapping("/sms/sendCode")
    @ResponseBody
    public R sendCode(@RequestParam("phone") String phone){
        R checkPhone = memberFeignService.checkPhone(phone);
        if(checkPhone.getCode()==0){
//      TODO 接口防刷
            //        防止反复刷验证码
            String value = redisTemplate.opsForValue().get(AuthServerConstant.SMS_CODE_CACHE_PREFIX + phone);
            if(value!=null&&!StringUtils.isEmpty(value)){
                long time = Long.parseLong(value.split("_")[1]);
                if(System.currentTimeMillis() - time < 60000){
//                60秒内不能再发
                    return R.error(BizCodeEnum.SMS_CODE_EXCEPTION.getCode(),BizCodeEnum.SMS_CODE_EXCEPTION.getMsg());
                }
            }
            String code = UUID.randomUUID().toString().substring(0, 5);
            R sendCode = thirdPartFeignService.sendCode(phone, code);
//        缓存验证码
            redisTemplate.opsForValue().set(AuthServerConstant.SMS_CODE_CACHE_PREFIX+phone,code+"_"+System.currentTimeMillis(),10, TimeUnit.MINUTES);
            if(sendCode.getCode()==0){
                return R.ok();
            }
            else{
                return R.error();
            }
        }
        else{
            return checkPhone;
        }
    }
    //RedirectAttributes redirectAttributes模拟重定向携带数据
    // TODO 重定向携带数据,利用session原理,将数据放在session中
//    只要跳到下一个页面取出这个数据后,session的数据就被删掉了
    // TODO 分布式Session问题解决!!!
    @PostMapping("/register")
    public String register(@Valid UserRegisterVo vo, BindingResult result, RedirectAttributes redirectAttributes){
        if(result.hasErrors()){
//            收集错误信息返回
            Map<String, String> collect = result.getFieldErrors().stream().collect(Collectors.toMap(FieldError::getField,FieldError::getDefaultMessage));
            redirectAttributes.addFlashAttribute("errors",collect);
//            原请求是post请求,当我们失败以后,在这里转发,转发是会保持请求方式不变的,但是路径访问默认是get
//            就会出现错误
//            原理是使用了HttpSession的底层实现
            return "redirect:http://auth.alatusmall.com/reg.html";
        }
        else{
//        校验验证码
            String code = vo.getCode();
            String codeValue = redisTemplate.opsForValue().get(AuthServerConstant.SMS_CODE_CACHE_PREFIX + vo.getPhone());
            if(codeValue!=null&&!StringUtils.isEmpty(codeValue)){
//                截串获取验证码信息
                String redisCode = codeValue.split("_")[0];
               if(redisCode.equals(code)){
//                   验证码通过以后,删除验证码,令牌机制,验证码用过就不再可用了
                   redisTemplate.delete(AuthServerConstant.SMS_CODE_CACHE_PREFIX + vo.getPhone());
//                     调用远程服务进行注册
                   R register = memberFeignService.register(vo);
                   if(register.getCode()==0){
                       return "redirect:http://auth.alatusmall.com/login.html";
                   }
                   else{
                       Map<String,String> errors = new HashMap<>();
                       errors.put("msg",register.get("msg",new TypeReference<String>(){}));
                       redirectAttributes.addFlashAttribute("errors",errors);
                       return "redirect:http://auth.alatusmall.com/reg.html";
                   }
               }
               else{
//                   验证码错误
                   Map<String,String> errors = new HashMap<>();
                   errors.put("code","验证码错误");
                   redirectAttributes.addFlashAttribute("errors",errors);
                   return "redirect:http://auth.alatusmall.com/reg.html";
               }
            }
            else{
//               没有验证码
                Map<String,String> errors = new HashMap<>();
                errors.put("code","验证码错误");
                redirectAttributes.addFlashAttribute("errors",errors);
                return "redirect:http://auth.alatusmall.com/reg.html";
            }
        }
    }
    @PostMapping("/login")
    public String login(UserLoginVo userLoginVo, RedirectAttributes redirectAttributes, HttpSession session){
        R login = memberFeignService.login(userLoginVo);
        if (login.getCode()==0) {
//            登陆成功
            MemberRespVo data = login.getData(new TypeReference<MemberRespVo>() {});
            session.setAttribute(AuthServerConstant.LOGIN_USER,data);
            return "redirect:http://alatusmall.com";
        }
        else{
//            登陆失败
            Map<String,String> errors = new HashMap<>();
            errors.put("msg",login.get("msg",new TypeReference<String>(){}));
            redirectAttributes.addFlashAttribute("errors",errors);
            return "redirect:http://auth.alatusmall.com/login.html";
        }
    }
}
package com.alatus.mall.member.service.impl;

import com.alatus.common.utils.HttpUtils;
import com.alatus.mall.member.entity.OauthInfoEntity;
import com.alatus.mall.member.exception.PhoneExistException;
import com.alatus.mall.member.exception.UsernameExistException;
import com.alatus.mall.member.service.MemberLevelService;
import com.alatus.mall.member.service.OauthInfoService;
import com.alatus.mall.member.vo.GiteeUserInfo;
import com.alatus.mall.member.vo.MemberLoginVo;
import com.alatus.mall.member.vo.MemberRegisterVo;
import com.alatus.common.vo.GiteeSocialUser;
import com.alatus.common.vo.WeiboSocialUser;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.http.HttpResponse;
import org.apache.http.util.EntityUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.alatus.common.utils.PageUtils;
import com.alatus.common.utils.Query;
import com.alatus.mall.member.dao.MemberDao;
import com.alatus.mall.member.entity.MemberEntity;
import com.alatus.mall.member.service.MemberService;

@Service("memberService")
public class MemberServiceImpl extends ServiceImpl<MemberDao, MemberEntity> implements MemberService {
    @Autowired
    private MemberLevelService memberLevelService;
    @Autowired
    private OauthInfoService oauthInfoService;
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        IPage<MemberEntity> page = this.page(
                new Query<MemberEntity>().getPage(params),
                new QueryWrapper<MemberEntity>()
        );
        return new PageUtils(page);
    }

    @Override
    public void register(MemberRegisterVo memberRegisterVo) {
//        检查用户名和手机号是否唯一(为了能让上层感知异常,我们这里抛出去)采用异常机制
        checkPhoneUnique(memberRegisterVo.getPhone());
        checkUsernameUnique(memberRegisterVo.getUsername());
        MemberEntity memberEntity = new MemberEntity();
//        设置默认等级
        memberEntity.setLevelId(memberLevelService.getDefaultLevel().getId());
//        密码绝对不能传递明文,一旦数据库泄露,就会导致所有数据曝光,我们应该存储MD5加密后的数据
//        MD5任何长度大小的数据,算出的值都是固定的,源数据哪怕任何改动,得到的MD5值都会不同
//        百度网盘的秒传功能本质上就是MD5值相同,在这个情况下,不同文件就不需要再次上传,达到了秒传效果
//        MD5的最大特点就说不可逆,无法通过MD5获取源数据的值
//        MD5抗修改性意味着MD5的数据可以通过暴力算或者字典查的穷举法获得,网上有一大堆对应的彩虹表
//        因此MD5不能直接用来加密,必须加盐存储
//        使用Spring原生的加密器实现
        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        memberEntity.setPassword(passwordEncoder.encode(memberRegisterVo.getPassword()));
//        用户名
        memberEntity.setUsername(memberRegisterVo.getUsername());
//        手机号
        memberEntity.setMobile(memberRegisterVo.getPhone());
        memberEntity.setNickname(memberRegisterVo.getUsername());
        memberEntity.setCreateTime(new Date());
        this.baseMapper.insert(memberEntity);
    }

    @Override
    public void checkPhoneUnique(String phone) throws PhoneExistException{
        Integer count = this.baseMapper.selectCount(new QueryWrapper<MemberEntity>().eq("mobile", phone));
        if(count>0){
            throw new PhoneExistException();
        }
    }

    @Override
    public void checkUsernameUnique(String username) throws UsernameExistException{
        Integer count = this.baseMapper.selectCount(new QueryWrapper<MemberEntity>().eq("username", username));
        if(count>0){
            throw new UsernameExistException();
        }
    }

    @Override
    public MemberEntity login(MemberLoginVo memberLoginVo) {
        String loginAccount = memberLoginVo.getLoginAccount();
        String password = memberLoginVo.getPassword();;
//        去数据库查询
        MemberEntity memberEntity = this.baseMapper.selectOne(new QueryWrapper<MemberEntity>().eq("username", loginAccount)
                .or().eq("mobile", loginAccount));
        if(memberEntity==null){
            // 登陆失败
            return null;
        }
        else{
            String memberEntityPassword = memberEntity.getPassword();
            BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
//            进行密码匹配
            boolean matches = passwordEncoder.matches(password, memberEntityPassword);
            if(matches){
                return memberEntity;
            }
            else{
                return null;
            }
        }
    }

//    社交登录需要同时具有注册和登录的逻辑
    @Override
    public MemberEntity login(WeiboSocialUser weiboSocialUser){
        String uid = weiboSocialUser.getUid();
        OauthInfoEntity oauthInfoEntity = oauthInfoService.getOne(new QueryWrapper<OauthInfoEntity>().eq("source", "微博").eq("social_uid", uid));
        if(oauthInfoEntity != null){
            MemberEntity memberEntity = this.getById(oauthInfoEntity.getMemberId());
            redisTemplate.opsForValue().set("user_access_token:"+memberEntity.getId(),weiboSocialUser.getAccess_token());
            redisTemplate.opsForValue().set("user_expires_in:"+memberEntity.getId(), weiboSocialUser.getExpires_in().toString());
            return memberEntity;
        }
        else{
            MemberEntity register = new MemberEntity();
            try{
                HashMap<String, String> query = new HashMap<>();
                query.put("access_token", weiboSocialUser.getAccess_token());
                query.put("uid", weiboSocialUser.getUid());
                HttpResponse response = HttpUtils.doGet("https://api.weibo.com", "/2/users/show.json", "get", new HashMap<>(),query);
                if(response.getStatusLine().getStatusCode()==200){
                    String json = EntityUtils.toString(response.getEntity());
                    JSONObject jsonObject = JSON.parseObject(json);
                    register.setLevelId(memberLevelService.getDefaultLevel().getId());
                    register.setNickname(jsonObject.getString("name"));
                    register.setGender("m".equals(jsonObject.getString("gender"))?1:0);
                    register.setCreateTime(new Date());
                    this.save(register);
                    OauthInfoEntity registerOauthInfo = new OauthInfoEntity();
                    registerOauthInfo.setMemberId(register.getId());
                    registerOauthInfo.setSocialUid(uid.toString());
                    registerOauthInfo.setSource("微博");
                    oauthInfoService.save(registerOauthInfo);
                    redisTemplate.opsForValue().set("user_access_token:"+register.getId(),weiboSocialUser.getAccess_token());
                    redisTemplate.opsForValue().set("user_expires_in:"+register.getId(), weiboSocialUser.getExpires_in().toString());
                }
            }
            catch (Exception e){
                e.printStackTrace();
            }
            return register;
        }
    }

    @Override
    public MemberEntity login(GiteeSocialUser giteeSocialUser) throws Exception {
        GiteeUserInfo giteeUserInfo = null;
        HttpResponse response = HttpUtils.doGet("https://gitee.com", "/api/v5/user?access_token=" + giteeSocialUser.getAccess_token(), "get", new HashMap<>(), new HashMap<>());
        if(response.getStatusLine().getStatusCode()==200){
            String giteeJSON = EntityUtils.toString(response.getEntity());
            giteeUserInfo = JSON.parseObject(giteeJSON, GiteeUserInfo.class);
        }
        Long uid = giteeUserInfo.getId();
        OauthInfoEntity oauthInfoEntity = oauthInfoService.getOne(new QueryWrapper<OauthInfoEntity>().eq("source", "gitee").eq("social_uid", uid));
        if(oauthInfoEntity != null){
            MemberEntity memberEntity = this.getById(oauthInfoEntity.getMemberId());
            redisTemplate.opsForValue().set("user_access_token:"+memberEntity.getId(),giteeSocialUser.getAccess_token());
            redisTemplate.opsForValue().set("user_expires_in:"+memberEntity.getId(), giteeSocialUser.getExpires_in().toString());
            return memberEntity;
        }
        else{
            MemberEntity register = new MemberEntity();
            register.setLevelId(memberLevelService.getDefaultLevel().getId());
            register.setEmail(giteeUserInfo.getEmail());
            register.setNickname(giteeUserInfo.getName());
            register.setCreateTime(new Date());
            this.save(register);
            OauthInfoEntity registerOauthInfo = new OauthInfoEntity();
            registerOauthInfo.setMemberId(register.getId());
            registerOauthInfo.setSocialUid(uid.toString());
            registerOauthInfo.setSource("gitee");
            oauthInfoService.save(registerOauthInfo);
            redisTemplate.opsForValue().set("user_access_token:"+register.getId(),giteeSocialUser.getAccess_token());
            redisTemplate.opsForValue().set("user_expires_in:"+register.getId(), giteeSocialUser.getExpires_in().toString());
            return register;
        }
    }

}

 

package com.alatus.mall.member.service.impl;

import com.alatus.common.utils.HttpUtils;
import com.alatus.mall.member.entity.OauthInfoEntity;
import com.alatus.mall.member.exception.PhoneExistException;
import com.alatus.mall.member.exception.UsernameExistException;
import com.alatus.mall.member.service.MemberLevelService;
import com.alatus.mall.member.service.OauthInfoService;
import com.alatus.mall.member.vo.GiteeUserInfo;
import com.alatus.mall.member.vo.MemberLoginVo;
import com.alatus.mall.member.vo.MemberRegisterVo;
import com.alatus.common.vo.GiteeSocialUser;
import com.alatus.common.vo.WeiboSocialUser;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.http.HttpResponse;
import org.apache.http.util.EntityUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.alatus.common.utils.PageUtils;
import com.alatus.common.utils.Query;
import com.alatus.mall.member.dao.MemberDao;
import com.alatus.mall.member.entity.MemberEntity;
import com.alatus.mall.member.service.MemberService;

@Service("memberService")
public class MemberServiceImpl extends ServiceImpl<MemberDao, MemberEntity> implements MemberService {
    @Autowired
    private MemberLevelService memberLevelService;
    @Autowired
    private OauthInfoService oauthInfoService;
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        IPage<MemberEntity> page = this.page(
                new Query<MemberEntity>().getPage(params),
                new QueryWrapper<MemberEntity>()
        );
        return new PageUtils(page);
    }

    @Override
    public void register(MemberRegisterVo memberRegisterVo) {
//        检查用户名和手机号是否唯一(为了能让上层感知异常,我们这里抛出去)采用异常机制
        checkPhoneUnique(memberRegisterVo.getPhone());
        checkUsernameUnique(memberRegisterVo.getUsername());
        MemberEntity memberEntity = new MemberEntity();
//        设置默认等级
        memberEntity.setLevelId(memberLevelService.getDefaultLevel().getId());
//        密码绝对不能传递明文,一旦数据库泄露,就会导致所有数据曝光,我们应该存储MD5加密后的数据
//        MD5任何长度大小的数据,算出的值都是固定的,源数据哪怕任何改动,得到的MD5值都会不同
//        百度网盘的秒传功能本质上就是MD5值相同,在这个情况下,不同文件就不需要再次上传,达到了秒传效果
//        MD5的最大特点就说不可逆,无法通过MD5获取源数据的值
//        MD5抗修改性意味着MD5的数据可以通过暴力算或者字典查的穷举法获得,网上有一大堆对应的彩虹表
//        因此MD5不能直接用来加密,必须加盐存储
//        使用Spring原生的加密器实现
        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        memberEntity.setPassword(passwordEncoder.encode(memberRegisterVo.getPassword()));
//        用户名
        memberEntity.setUsername(memberRegisterVo.getUsername());
//        手机号
        memberEntity.setMobile(memberRegisterVo.getPhone());
        memberEntity.setNickname(memberRegisterVo.getUsername());
        memberEntity.setCreateTime(new Date());
        this.baseMapper.insert(memberEntity);
    }

    @Override
    public void checkPhoneUnique(String phone) throws PhoneExistException{
        Integer count = this.baseMapper.selectCount(new QueryWrapper<MemberEntity>().eq("mobile", phone));
        if(count>0){
            throw new PhoneExistException();
        }
    }

    @Override
    public void checkUsernameUnique(String username) throws UsernameExistException{
        Integer count = this.baseMapper.selectCount(new QueryWrapper<MemberEntity>().eq("username", username));
        if(count>0){
            throw new UsernameExistException();
        }
    }

    @Override
    public MemberEntity login(MemberLoginVo memberLoginVo) {
        String loginAccount = memberLoginVo.getLoginAccount();
        String password = memberLoginVo.getPassword();;
//        去数据库查询
        MemberEntity memberEntity = this.baseMapper.selectOne(new QueryWrapper<MemberEntity>().eq("username", loginAccount)
                .or().eq("mobile", loginAccount));
        if(memberEntity==null){
            // 登陆失败
            return null;
        }
        else{
            String memberEntityPassword = memberEntity.getPassword();
            BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
//            进行密码匹配
            boolean matches = passwordEncoder.matches(password, memberEntityPassword);
            if(matches){
                return memberEntity;
            }
            else{
                return null;
            }
        }
    }

//    社交登录需要同时具有注册和登录的逻辑
    @Override
    public MemberEntity login(WeiboSocialUser weiboSocialUser){
        String uid = weiboSocialUser.getUid();
        OauthInfoEntity oauthInfoEntity = oauthInfoService.getOne(new QueryWrapper<OauthInfoEntity>().eq("source", "微博").eq("social_uid", uid));
        if(oauthInfoEntity != null){
            MemberEntity memberEntity = this.getById(oauthInfoEntity.getMemberId());
            redisTemplate.opsForValue().set("user_access_token:"+memberEntity.getId(),weiboSocialUser.getAccess_token());
            redisTemplate.opsForValue().set("user_expires_in:"+memberEntity.getId(), weiboSocialUser.getExpires_in().toString());
            return memberEntity;
        }
        else{
            MemberEntity register = new MemberEntity();
            try{
                HashMap<String, String> query = new HashMap<>();
                query.put("access_token", weiboSocialUser.getAccess_token());
                query.put("uid", weiboSocialUser.getUid());
                HttpResponse response = HttpUtils.doGet("https://api.weibo.com", "/2/users/show.json", "get", new HashMap<>(),query);
                if(response.getStatusLine().getStatusCode()==200){
                    String json = EntityUtils.toString(response.getEntity());
                    JSONObject jsonObject = JSON.parseObject(json);
                    register.setLevelId(memberLevelService.getDefaultLevel().getId());
                    register.setNickname(jsonObject.getString("name"));
                    register.setGender("m".equals(jsonObject.getString("gender"))?1:0);
                    register.setCreateTime(new Date());
                    this.save(register);
                    OauthInfoEntity registerOauthInfo = new OauthInfoEntity();
                    registerOauthInfo.setMemberId(register.getId());
                    registerOauthInfo.setSocialUid(uid.toString());
                    registerOauthInfo.setSource("微博");
                    oauthInfoService.save(registerOauthInfo);
                    redisTemplate.opsForValue().set("user_access_token:"+register.getId(),weiboSocialUser.getAccess_token());
                    redisTemplate.opsForValue().set("user_expires_in:"+register.getId(), weiboSocialUser.getExpires_in().toString());
                }
            }
            catch (Exception e){
                e.printStackTrace();
            }
            return register;
        }
    }

    @Override
    public MemberEntity login(GiteeSocialUser giteeSocialUser) throws Exception {
        GiteeUserInfo giteeUserInfo = null;
        HttpResponse response = HttpUtils.doGet("https://gitee.com", "/api/v5/user?access_token=" + giteeSocialUser.getAccess_token(), "get", new HashMap<>(), new HashMap<>());
        if(response.getStatusLine().getStatusCode()==200){
            String giteeJSON = EntityUtils.toString(response.getEntity());
            giteeUserInfo = JSON.parseObject(giteeJSON, GiteeUserInfo.class);
        }
        Long uid = giteeUserInfo.getId();
        OauthInfoEntity oauthInfoEntity = oauthInfoService.getOne(new QueryWrapper<OauthInfoEntity>().eq("source", "gitee").eq("social_uid", uid));
        if(oauthInfoEntity != null){
            MemberEntity memberEntity = this.getById(oauthInfoEntity.getMemberId());
            redisTemplate.opsForValue().set("user_access_token:"+memberEntity.getId(),giteeSocialUser.getAccess_token());
            redisTemplate.opsForValue().set("user_expires_in:"+memberEntity.getId(), giteeSocialUser.getExpires_in().toString());
            return memberEntity;
        }
        else{
            MemberEntity register = new MemberEntity();
            register.setLevelId(memberLevelService.getDefaultLevel().getId());
            register.setEmail(giteeUserInfo.getEmail());
            register.setNickname(giteeUserInfo.getName());
            register.setCreateTime(new Date());
            this.save(register);
            OauthInfoEntity registerOauthInfo = new OauthInfoEntity();
            registerOauthInfo.setMemberId(register.getId());
            registerOauthInfo.setSocialUid(uid.toString());
            registerOauthInfo.setSource("gitee");
            oauthInfoService.save(registerOauthInfo);
            redisTemplate.opsForValue().set("user_access_token:"+register.getId(),giteeSocialUser.getAccess_token());
            redisTemplate.opsForValue().set("user_expires_in:"+register.getId(), giteeSocialUser.getExpires_in().toString());
            return register;
        }
    }

}
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.alatus.mall</groupId>
    <artifactId>mall-gateway</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Mall-gateway</name>
    <description>网关</description>
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud-alibaba.version>2.2.1.RELEASE</spring-cloud-alibaba.version>
        <spring-cloud.version>Hoxton.SR3</spring-cloud.version>
    </properties>
    <dependencies>
        <!--        网关服务-->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alatus</groupId>
            <artifactId>Mall-common</artifactId>
            <version>1.0.0</version>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-web</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>${spring-cloud-alibaba.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>3.2.3</version>
            </plugin>
        </plugins>
    </build>
</project>
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.alatus.mall</groupId>
    <artifactId>mall-gateway</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Mall-gateway</name>
    <description>网关</description>
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud-alibaba.version>2.2.1.RELEASE</spring-cloud-alibaba.version>
        <spring-cloud.version>Hoxton.SR3</spring-cloud.version>
    </properties>
    <dependencies>
        <!--        网关服务-->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alatus</groupId>
            <artifactId>Mall-common</artifactId>
            <version>1.0.0</version>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-web</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>${spring-cloud-alibaba.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>3.2.3</version>
            </plugin>
        </plugins>
    </build>
</project>
package com.alatus.mall.auth.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MallWebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/reg.html").setViewName("reg");
    }
}
package com.alatus.mall.auth.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MallWebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/reg.html").setViewName("reg");
    }
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/search/css/index.css">
    <link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
    <script src="/static/search/js/jquery-3.2.1.min.js"></script>
    <script src="/static/search/js/jquery-1.12.4.js"></script>
    <title>Document</title>
</head>
<body>
<!--头部-->
<div class="header_head">
    <div class="header_head_box">
        <b class="header_head_p">
            <div style="overflow: hidden">
                <a href="http://alatusmall.com" class="header_head_p_a1" style="width:73px;">
                    京东商城首页
                </a>
                <a  class="header_head_p_a">
                    <img src="/static/search/img/img_05.png" style="border-radius: 50%;"/>
                    北京</a>
            </div>
            <div class="header_head_p_cs">
                <a  style="background: #C81623;color: #fff;">北京</a>
                <a >上海</a>
                <a >天津</a>
                <a >重庆</a>
                <a >河北</a>
                <a >山西</a>
                <a >河南</a>
                <a >辽宁</a>
                <a >吉林</a>
                <a >黑龙江</a>
                <a >内蒙古</a>
                <a >江苏</a>
                <a >山东</a>
                <a >安徽</a>
                <a >浙江</a>
                <a >福建</a>
                <a >湖北</a>
                <a >湖南</a>
                <a >广东</a>
                <a >广西</a>
                <a >江西</a>
                <a >四川</a>
                <a >海南</a>
                <a >贵州</a>
                <a >云南</a>
                <a >西藏</a>
                <a >陕西</a>
                <a >甘肃</a>
                <a >青海</a>
                <a >宁夏</a>
                <a >新疆</a>
                <a >港澳</a>
                <a >台湾</a>
                <a >钓鱼岛</a>
                <a >海外</a>
            </div>
        </b>
        <ul>
            <li>
                <a class="li_2" th:if="${session.get('loginUser')==null}" href="http://auth.alatusmall.com/login.html">你好,请登录:</a>
                <a class="li_2" th:if="${session.get('loginUser')!=null}">[[${session.get('loginUser').getNickname()}]]</a>
            </li>
            <li>
                <a th:if="${session.get('loginUser')==null}" href="http://auth.alatusmall.com/reg.html">免费注册</a>
            </li>
            <span>|</span>
            <li>
                <a >我的订单</a>
            </li>
            <span>|</span>
            <li class="header_wdjd" style="width:80px;">
                <a >我的京东商城</a>
                <img src="/static/search/image/[email protected]" />
                <b class="glyphicon glyphicon-menu-down"></b>
                <div class="header_wdjd_txt">
                    <ul>
                        <li>
                            <a >待处理订单</a>
                        </li>
                        <li>
                            <a >消息</a>
                        </li>
                        <li>
                            <a >返修退换货</a>
                        </li>
                        <li>
                            <a >我的回答</a>
                        </li>
                        <li>
                            <a >降价商品</a>
                        </li>
                        <li>
                            <a >我的关注</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a >我的京豆</a>
                        </li>
                        <li>
                            <a >我的优惠券</a>
                        </li>
                        <li>
                            <a >我的白条</a>
                        </li>
                        <li>
                            <a >我的理财</a>
                        </li>
                    </ul>
                </div>
            </li>
            <span>|</span>
            <li>
                <a >京东商城会员</a>
            </li>
            <span>|</span>
            <li>
                <a >企业采购</a>
            </li>
            <span>|</span>
            <li class="header_wdjd1">
                <a >客户服务</a>
                <img src="/static/search/image/[email protected]" />
                <b class="glyphicon glyphicon-menu-down"></b>
                <div class="header_wdjd_txt">
                    <ul>
                        <p style="width:100%;">客户</p>
                        <li>
                            <a >帮助中心</a>
                        </li>
                        <li>
                            <a >售后服务</a>
                        </li>
                        <li>
                            <a >在线客服</a>
                        </li>
                        <li>
                            <a >意见建议</a>
                        </li>
                        <li>
                            <a >电话客服</a>
                        </li>
                        <li>
                            <a >客服邮箱</a>
                        </li>
                        <li>
                            <a >金融资讯</a>
                        </li>
                        <li>
                            <a >售全球客服</a>
                        </li>
                    </ul>
                    <ul>
                        <p style="width:100%;">商户</p>
                        <li>
                            <a >合作招商</a>
                        </li>
                        <li>
                            <a >学习中心</a>
                        </li>
                        <li>
                            <a >商家后台</a>
                        </li>
                        <li>
                            <a >京麦工作台</a>
                        </li>
                        <li>
                            <a >商家帮助</a>
                        </li>
                        <li>
                            <a >规则平台</a>
                        </li>
                    </ul>
                </div>
            </li>
            <span>|</span>
            <li class="header_wzdh">
                <a >网站导航</a>
                <img src="/static/search/image/[email protected]" />
                <b class="glyphicon glyphicon-menu-down"></b>
                <div class="header_wzdh_txt">
                    <ul style="width: 25%;">
                        <p style="width:100%;">特色主题</p>
                        <li>
                            <a >京东商城试用</a>
                        </li>
                        <li>
                            <a >京东商城金融</a>
                        </li>
                        <li>
                            <a >全球售</a>
                        </li>
                        <li>
                            <a >国际站</a>
                        </li>
                        <li>
                            <a >京东商城会员</a>
                        </li>
                        <li>
                            <a >京东商城预售</a>
                        </li>
                        <li>
                            <a >买什么</a>
                        </li>
                        <li>
                            <a >俄语站</a>
                        </li>
                        <li>
                            <a >装机大师</a>
                        </li>
                        <li>
                            <a >0元评测</a>
                        </li>
                        <li>
                            <a >定期送</a>
                        </li>
                        <li>
                            <a >港澳售</a>
                        </li>
                        <li>
                            <a >优惠券</a>
                        </li>
                        <li>
                            <a >秒杀</a>
                        </li>
                        <li>
                            <a >闪购</a>
                        </li>
                        <li>
                            <a >印尼站</a>
                        </li>
                        <li>
                            <a >京东商城金融科技</a>
                        </li>
                        <li>
                            <a >In货推荐</a>
                        </li>
                        <li>
                            <a >陪伴计划</a>
                        </li>
                        <li>
                            <a >出海招商</a>
                        </li>
                    </ul>
                    <ul style="width: 20%;">
                        <p style="width:100%;">行业频道</p>
                        <li>
                            <a >手机</a>
                        </li>
                        <li>
                            <a >智能数码</a>
                        </li>
                        <li>
                            <a >玩3c</a>
                        </li>
                        <li>
                            <a >电脑办公</a>
                        </li>
                        <li>
                            <a >家用电器</a>
                        </li>
                        <li>
                            <a >京东商城智能</a>
                        </li>
                        <li>
                            <a >服装城</a>
                        </li>
                        <li>
                            <a >美妆馆</a>
                        </li>
                        <li>
                            <a >家装城</a>
                        </li>
                        <li>
                            <a >母婴</a>
                        </li>
                        <li>
                            <a >食品</a>
                        </li>
                        <li>
                            <a >运动户外</a>
                        </li>
                        <li>
                            <a >农资频道</a>
                        </li>
                        <li>
                            <a >整车</a>
                        </li>
                        <li>
                            <a >图书</a>
                        </li>
                    </ul>
                    <ul style="width: 21%;">
                        <p style="width:100%;">生活服务</p>
                        <li>
                            <a >白条</a>
                        </li>
                        <li>
                            <a >京东商城金融App</a>
                        </li>
                        <li>
                            <a >京东商城小金库</a>
                        </li>
                        <li>
                            <a >理财</a>
                        </li>
                        <li>
                            <a >智能家电</a>
                        </li>
                        <li>
                            <a >话费</a>
                        </li>
                        <li>
                            <a >水电煤</a>
                        </li>
                        <li>
                            <a >彩票</a>
                        </li>
                        <li>
                            <a >旅行</a>
                        </li>
                        <li>
                            <a >机票酒店</a>
                        </li>
                        <li>
                            <a >电影票</a>
                        </li>
                        <li>
                            <a >京东商城到家</a>
                        </li>
                        <li>
                            <a >京东商城众测</a>
                        </li>
                        <li>
                            <a >游戏</a>
                        </li>
                    </ul>
                    <ul style="width: 23%; border-right: 0;">
                        <p style="width:100%;">更多精选</p>
                        <li>
                            <a >合作招商</a>
                        </li>
                        <li>
                            <a >京东商城通信</a>
                        </li>
                        <li>
                            <a >京东商城E卡</a>
                        </li>
                        <li>
                            <a >企业采购</a>
                        </li>
                        <li>
                            <a >服务市场</a>
                        </li>
                        <li>
                            <a >办公生活馆</a>
                        </li>
                        <li>
                            <a >乡村招募</a>
                        </li>
                        <li>
                            <a >校园加盟</a>
                        </li>
                        <li>
                            <a >京友帮</a>
                        </li>
                        <li>
                            <a >京东商城社区</a>
                        </li>
                        <li>
                            <a >智能社区</a>
                        </li>
                        <li>
                            <a >游戏社区</a>
                        </li>
                        <li>
                            <a >知识产权维权</a>
                        </li>
                    </ul>
                </div>
            </li>
            <span>|</span>
            <li class="header_sjjd">
                <a >手机京东商城</a>
                <div class="header_sjjd_div">
                    <img src="/static/search/img/01.png" />
                </div>
            </li>
        </ul>
    </div>
</div>

<!--搜索导航-->
<div class="header_sous">
    <div class="logo">
        <a href="http://alatusmall.com"><img src="/static/item/img/111.png" alt=""></a>
    </div>
    <div class="header_form">
        <input type="text" placeholder="手机" id="keywordInput" th:value="${param.keyword}" onkeydown="if(event.key === 'Enter') { searchByKeyword(); }"/>
        <a href="javascript:searchByKeyword()">搜索</a>
    </div>
    <div class="header_ico">
        <div class="header_gw">
            <span><a >我的购物车</a></span>
            <img src="/static/search/image/[email protected]" />
            <span>0</span>
        </div>
        <div class="header_ko">
            <p>购物车中还没有商品,赶紧选购吧!</p>
        </div>
    </div>
    <div class="header_form_nav">
        <ul>
            <li>
                <a >京东商城之家</a>
            </li>
            <li>
                <a >京东商城专卖店</a>
            </li>
            <li>
                <a >平板</a>
            </li>
            <li>
                <a >电脑</a>
            </li>
            <li>
                <a >ipad</a>
            </li>
        </ul>
    </div>
    <nav>
        <ul>
            <li class="nav_li1">
                <a >全部商品分类</a>
            </li>
            <li class="nav_li">
                <a >服装城</a>
            </li>
            <li class="nav_li">
                <a >没装馆</a>
            </li>
            <li class="nav_li">
                <a >超市</a>
            </li>
            <li class="nav_li">
                <a >生鲜</a>
            </li>
        </ul>
        <div class="spacer">|</div>
        <ul>
            <li class="nav_li">
                <a >全球购</a>
            </li>
            <li class="nav_li">
                <a >闪购</a>
            </li>
            <li class="nav_li">
                <a >拍卖</a>
            </li>
        </ul>
        <div class="spacer">|</div>
        <ul>
            <li class="nav_li">
                <a >金融</a>
            </li>
        </ul>

    </nav>
    <div class="header_main_left">
        <ul>
            <li>
                <a  class="header_main_left_a"><b>家用电器</b></a>
            </li>
            <li class="header_li2">
                <a  class="header_main_left_a"><b>手机</b> / <b>运营商</b> / <b>数码</b></a>
                <div class="header_main_left_main">
                    <div class="header_sj">
                        <a  class="header_sj_a">玩3c</a>
                        <a  class="header_sj_a">手机频道</a>
                        <a  class="header_sj_a">网上营业厅</a>
                        <a  class="header_sj_a">配件选购中心</a>
                        <a  class="header_sj_a">企业购</a>
                        <a  class="header_sj_a">以旧换新</a>
                    </div>
                    <ol class="header_ol">
                        <a  style="color: #111;" class="aaa">手机通讯 ></a>
                        <li>
                            <a  style="color: #999;">手机</a>
                            <a  style="color: #999;">对讲机</a>
                            <a  style="color: #999;">手机维修</a>
                            <a  style="color: #999;">以旧换新</a>
                        </li>
                        <a  style="color: #111;" class="aaa">运营商 ></a>
                        <li>
                            <a  style="color: #999;">合约机</a>
                            <a  style="color: #999;">固话宽带</a>
                            <a  style="color: #999;">办套餐</a>
                            <a  style="color: #999;">从话费/流量</a>
                            <a  style="color: #999;">中国电信</a>
                            <a  style="color: #999;">中国移动</a>
                            <a  style="color: #999;">中国联通</a>
                            <a  style="color: #999;">京东商城通信</a>
                            <a  style="color: #999;">170选号</a>
                        </li>
                        <a  style="color: #111;" class="aaa">手机配件 ></a>
                        <li style="height: 60px;">

                            <a  style="color: #999;">手机壳</a>
                            <a  style="color: #999;">贴膜</a>
                            <a  style="color: #999;">手机储存卡</a>
                            <a  style="color: #999;">数据线</a>
                            <a  style="color: #999;">存电器</a>
                            <a  style="color: #999;">手机耳机</a>
                            <a  style="color: #999;">创业配件</a>
                            <a  style="color: #999;">手机饰品</a>
                            <a  style="color: #999;">手机电池</a>
                            <a  style="color: #999;">苹果周边</a>
                            <a  style="color: #999;">移动电源</a>
                            <a  style="color: #999;">蓝牙耳机</a>
                            <a  style="color: #999;">手机支架</a>
                            <a  style="color: #999;">车载配件</a>
                            <a  style="color: #999;">拍照配件</a>

                        </li>
                        <a  style="color: #111;" class="aaa">摄影摄像 ></a>
                        <li style="height: 60px;">

                            <a  style="color: #999;">数码相机</a>
                            <a  style="color: #999;">单电/微单相机</a>
                            <a  style="color: #999;">单反相机</a>
                            <a  style="color: #999;">拍立得</a>
                            <a  style="color: #999;">运动相机</a>
                            <a  style="color: #999;">摄像机</a>
                            <a  style="color: #999;">镜头</a>
                            <a  style="color: #999;">户外器材</a>
                            <a  style="color: #999;">影棚器材</a>
                            <a  style="color: #999;">冲印服务</a>
                            <a  style="color: #999;">数码相框</a>
                        </li>
                        <a  style="color: #111;" class="aaa">数码配件 ></a>
                        <li style="height: 60px;">

                            <a  style="color: #999;">三脚架/云台</a>
                            <a  style="color: #999;">相机包</a>
                            <a  style="color: #999;">滤镜</a>
                            <a  style="color: #999;">散光灯/手柄</a>
                            <a  style="color: #999;">相机清洁</a>
                            <a  style="color: #999;">机身附件</a>
                            <a  style="color: #999;">镜头附件</a>
                            <a  style="color: #999;">读卡器</a>
                            <a  style="color: #999;">支架</a>
                            <a  style="color: #999;">电池/存电器</a>

                        </li>
                        <a  style="color: #111;" class="aaa">影音娱乐 ></a>
                        <li>

                            <a  style="color: #999;">耳机/耳麦</a>
                            <a  style="color: #999;">音箱/音响</a>
                            <a  style="color: #999;">智能音箱</a>
                            <a  style="color: #999;">便携/无线音箱</a>
                            <a  style="color: #999;">收音机</a>
                            <a  style="color: #999;">麦克风</a>
                            <a  style="color: #999;">MP3/MP4</a>
                            <a  style="color: #999;">专业音频</a>
                        </li>
                        <a  style="color: #111;" class="aaa">智能设备 ></a>
                        <li style="height: 60px;">

                            <a  style="color: #999;">智能手环</a>
                            <a  style="color: #999;">智能手表</a>
                            <a  style="color: #999;">智能眼镜</a>
                            <a  style="color: #999;">智能机器人</a>
                            <a  style="color: #999;">运动跟踪器</a>
                            <a  style="color: #999;">健康监测</a>
                            <a  style="color: #999;">智能配饰</a>
                            <a  style="color: #999;">智能家居</a>
                            <a  style="color: #999;">体感车</a>
                            <a  style="color: #999;">无人机</a>
                            <a  style="color: #999;">其他配件</a>
                        </li>
                        <a  style="color: #111;" class="aaa">电子教育 ></a>
                        <li>
                            <a  style="color: #999;">学生平板</a>
                            <a  style="color: #999;">点读机</a>
                            <a  style="color: #999;">早教益智</a>
                            <a  style="color: #999;">录音笔</a>
                            <a  style="color: #999;">电纸书</a>
                            <a  style="color: #999;">电子词典</a>
                            <a  style="color: #999;">复读机</a>
                        </li>
                    </ol>
                    <div class="header_r">
                        <div class="header_r_tu">
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                            <a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
                        </div>
                        <div class="header_r_tu1">
                            <a ><img src="/static/search/img/JD_ash7.png" /></a>
                            <a ><img src="/static/search/img/JD_ash6.png" /></a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a  class="header_main_left_a"><b>电脑</b> / <b>办公</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>家居</b> / <b>家具</b> / <b>家装</b> / <b>厨具</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>男装</b> / <b>女装</b> / <b>童装</b> / <b>内衣</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>美妆个护 </b>/ <b>宠物</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>女鞋</b> / <b>箱包</b> / <b>钟表</b> / <b>珠宝</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>男鞋</b> / <b>运动</b> / <b>户外</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>汽车</b> / <b>汽车用品</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>母婴</b> / <b>玩具乐器</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>食品</b> / <b>酒类</b> / <b>生鲜</b> / <b>特产</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>礼品鲜花</b> / <b>农资绿植</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>医药保健</b> / <b>计生情趣</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>图书</b> / <b>音箱</b>/ <b>电子书</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>机票</b> / <b>酒店</b> / <b>旅游</b> / <b>生活</b></a>
            </li>
            <li>
                <a  class="header_main_left_a"><b>理财</b> / <b>众筹</b> / <b>白条</b> / <b>保险</b></a>
            </li>
        </ul>

    </div>
</div>

<hr style="border: 1px solid red;margin-top: -7px;">

<!--热卖促销-->
<div class="JD_temai">
    <div class="JD_main">
        <div class="JD_left">
            <div class="hd">
                热卖推荐
            </div>
            <div class="bd mc">
                <ul class="mc">
                    <li>
                        <a  class="mc_a"><img src="/static/search/img/5a28b5a1n8a5c095f.jpg" alt=""></a>
                        <div class="mc_div">
                            <a  class="mc_div_a1">
                                <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                            </a>
                            <p>
                                <strong>
                                    <em class="number J-p-5963064">¥2999.00</em>
                                </strong>
                            </p>
                            <a  class="mc_div_a2">立即抢购</a>
                        </div>
                    </li>
                    <li>
                        <a  class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
                        <div class="mc_div">
                            <a  class="mc_div_a1">
                                <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                            </a>
                            <p>
                                <strong>
                                    <em class="number J-p-5963064">¥1699.00</em>
                                </strong>
                            </p>
                            <a  class="mc_div_a2">立即抢购</a>
                        </div>
                    </li>
                    <li style="margin-right: 0">
                        <a  class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
                        <div class="mc_div">
                            <a  class="mc_div_a1">
                                <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                            </a>
                            <p>
                                <strong>
                                    <em class="number J-p-5963064">¥2999.00</em>
                                </strong>
                            </p>
                            <a  class="mc_div_a2">立即抢购</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="JD_right">
            <div class="hd"> 促销活动</div>
            <div class="bd">
                <ul>
                    <li> . <a >红米千元全面屏手机上市</a></li>
                    <li> . <a >锤子坚果Pro2火爆预约中</a></li>
                    <li> . <a >大牌新品 疯狂抢购</a></li>
                    <li> . <a >X20 vivo蓝新色上市</a></li>
                    <li> . <a >荣耀畅玩7X新品上市</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--手机-->
<div class="JD_ipone">
    <div class="JD_ipone_bar">
        <div class="JD_ipone_one a">
            <a >手机</a>
        </div>
        <i><img src="/static/search/image/[email protected]" alt=""></i>
        <div class="JD_ipone_one b">
            <a  class="qqq">手机通讯录 <img src="/static/search/image/[email protected]" alt=""></a>
            <div>
                <a >手机通讯</a>
                <a >运营商</a>
                <a >手机配件</a>
                <a >手机服务</a>
            </div>
        </div>
        <i><img src="/static/search/image/[email protected]" alt=""></i>
        <div class="JD_ipone_one c">
            <a  class="qqq">手机 <img src="/static/search/image/[email protected]" alt=""></a>
            <div>
                <a >手机</a>
                <a >老人机</a>
                <a >对讲机</a>
                <a >女性手机</a>
                <a >超续航手机</a>
                <a >全面屏手机</a>
                <a >拍照手机</a>
                <a >游戏手机</a>
            </div>
        </div>
        <div class="JD_ipone_one c" th:each="nav:${result.getNavs()}">
<!--            遍历面包屑导航-->
            <a class="qqq" th:href="${nav.getLink()}">
                <span th:text="${nav.getNavName()}"></span>:
                <span th:text="${nav.getNavValue()}"></span>&nbsp;&nbsp;x
            </a>
            <i><img src="/static/search/image/[email protected]" alt=""></i>
        </div>
    </div>
</div>

<!--商品筛选和排序-->
<div class="JD_banner w">
    <div class="JD_nav">
        <div class="JD_selector">
            <!--手机商品筛选-->
            <div class="title">
                <h3><b>手机</b><em>商品筛选</em></h3>
                <div class="st-ext">共&nbsp;<span th:text="${result.getTotal()}"></span>个商品 </div>
            </div>
            <div class="JD_nav_logo" th:with="brandId=${param.brandId},catelogId=${param.catalog3Id}">
                <!--品牌-->
                <div th:if="${#strings.isEmpty(brandId)}" class="JD_nav_wrap">
                    <div class="sl_key">
                        <span><b>品牌:</b></span>
                    </div>
                    <div class="sl_value">
                        <div class="sl_value_logo">
                            <ul>
                                <li th:each="brand:${result.getBrands()}">
                                    <a th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.getBrandId()+')'}">
                                        <img th:src="${brand.getBrandImg()}" alt="">
                                        <div th:text="${brand.getBrandName()}">
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="sl_ext">
                        <a >
                            更多
                            <i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
                            <b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
                        </a>
                        <a >
                            多选
                            <i>+</i>
                            <span>+</span>
                        </a>
                    </div>
                </div>
                <!--分类-->
                <div th:if="${#strings.isEmpty(catelogId)}" class="JD_pre">
                    <div class="sl_key">
                        <span><b>分类:</b></span>
                    </div>
                    <div class="sl_value">
                        <ul>
                            <li th:each="catalog:${result.getCatalogs()}"><a th:href="${'javascript:searchProducts(&quot;catalog3Id&quot;,'+catalog.getCatalogId()+')'}" th:text="${catalog.getCatalogName()}"></a></li>
                        </ul>
                    </div>
                    <div class="sl_ext">
                        <a >
                            更多
                            <i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
                            <b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
                        </a>
                        <a >
                            多选
                            <i>+</i>
                            <span>+</span>
                        </a>
                    </div>
                </div>
                <!--属性-->
                <div class="JD_pre" th:if="${!#lists.contains(result.getAttrIds(),attr.getAttrId())}" th:each="attr:${result.getAttrs()}">
                    <div class="sl_key">
                        <span th:text="${attr.getAttrName()+':'}"></span>
                    </div>
                    <div class="sl_value">
                        <ul>
                            <li th:each="value:${attr.getAttrValue()}"><a th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot;'+attr.getAttrId()+'_'+value+'&quot;)'}" th:text="${value}"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="JD_show">
                <a >
                    <span>
                        更多选项( CPU核数、网络、机身颜色 等)
                    </span>
                </a>
            </div>
        </div>
        <!--排序-->
        <div class="JD_banner_main">
            <!--商品精选-->
            <div class="JD_con_left">
                <div class="JD_con_left_bar">
                    <div class="JD_con_one">
                        <div class="mt">
                            <h3>商品精选</h3>
                            <span>广告</span>
                        </div>
                        <div class="mc">
                            <ul>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
                                    <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥2999.00</span>
                                        </strong>
                                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                                    </div>
                                    <div class="mc_rev">
                                        已有
                                        <a  class="number">12466</a>
                                        人评价
                                    </div>
                                </li>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
                                    <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥2999.00</span>
                                        </strong>
                                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                                    </div>
                                    <div class="mc_rev">
                                        已有
                                        <a  class="number">12466</a>
                                        人评价
                                    </div>
                                </li>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
                                    <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                        <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥1799.00</span>
                                        </strong>
                                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                                    </div>
                                    <div class="mc_rev">
                                        已有
                                        <a  class="number">15600</a>
                                        人评价
                                    </div>
                                </li>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
                                    <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                        <em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥3498.00</span>
                                        </strong>
                                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                                    </div>
                                    <div class="mc_rev">
                                        已有
                                        <a  class="number">5369</a>
                                        人评价
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="JD_con_one">
                        <div class="mt">
                            <h3>达人选购</h3>
                        </div>
                        <div class="mc">
                            <ul>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
                                    <a >
                                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥2999.00</span>
                                        </strong>
                                    </div>
                                </li>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
                                    <a >
                                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥2999.00</span>
                                        </strong>
                                    </div>
                                </li>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
                                    <a >
                                        <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥1799.00</span>
                                        </strong>
                                    </div>
                                </li>
                                <li>
                                    <a  title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
                                    <a >
                                        <em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
                                    </a>
                                    <div class="mc_price">
                                        <strong class="price">
                                            <span class="J-p-5963064">¥3498.00</span>
                                        </strong>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="JD_con_one" style="border:none;">
                        <div class="mt">
                            <h3>商品精选</h3>
                            <span>广告</span>
                        </div>
                        <div class="mc">
                            <ul>
                                <li>
                                    <a ><img src="/static/search/img/599a806bn9d829c1c.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a ><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--综合排序-->
            <div class="JD_con_right">
                <div class="filter">
                    <!--综合排序-->
                    <div class="filter_top">
                        <div class="filter_top_left" th:with="sort=${param.sort},skuRange=${param.skuPrice}">
                            <a sort="hotScore"
                               th:attr="style=${(#strings.isEmpty(sort)||#strings.startsWith(sort,'hotScore'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
                               th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'hotScore')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
                                综合排序[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'hotScore'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
                            </a>
                            <a sort="saleCount"
                               th:attr="style=${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'saleCount'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
                               th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'saleCount')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
                                销量[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'saleCount'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
                            </a>
                            <a sort="skuPrice"
                               th:attr="style=${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'skuPrice'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
                               th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'skuPrice')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
                                价格[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'skuPrice'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
                            </a>
                            <a>评论分</a>
                            <a>上架时间</a>
                            <input style="width: 100px;margin-left: 30px;" id="skuPriceFrom" type="number" th:value="${#strings.isEmpty(skuRange)?'':(#strings.substringBefore(skuRange,'_'))}"> -
                            <input style="width: 100px;" id="skuPriceTo" type="number" th:value="${#strings.isEmpty(skuRange)?'':(#strings.substringAfter(skuRange,'_'))}">
                            <button id="skuPriceSearchBtn">确定</button>
                        </div>
                        <div class="filter_top_right">
                            <span class="fp-text">
                               <b>1</b><em>/</em><i>169</i>
                           </span>
                            <a  class="prev"><</a>
                            <a  class="next"> > </a>
                        </div>
                    </div>
                    <!--收货地址-->
                    <div class="filter_bottom">
                        <div class="filter_bottom_left">
                            <div class="fs-cell">收货地</div>
                            <div class="dizhi">
                                <div class="dizhi_show">
                                    <em>北京朝阳区三环以内</em>
                                    <b></b>
                                </div>
                            </div>
                            <div class="dizhi_con">
                                <ul id="tab">
                                    <li id="tab1" value="1">北京 <img src="/static/search/image/[email protected]" alt=""></li>
                                    <li id="tab2" value="2">朝阳 <img src="/static/search/image/[email protected]" alt=""></li>
                                    <li id="tab3" value="3">三环以内 <img src="/static/search/image/[email protected]" alt=""></li>
                                </ul>
                                <div id="container">
                                    <div id="content1" style="z-index: 1;">
                                        <a >北京</a>
                                        <a >上海</a>
                                        <a >天津</a>
                                        <a >重庆</a>
                                        <a >河北</a>
                                        <a >山西</a>
                                        <a >河南</a>
                                        <a >辽宁</a>
                                        <a >吉林</a>
                                        <a >黑龙江</a>
                                        <a >内蒙古</a>
                                        <a >江苏</a>
                                        <a >山东</a>
                                        <a >安徽</a>
                                        <a >浙江</a>
                                        <a >福建</a>
                                        <a >湖北</a>
                                        <a >湖南</a>
                                        <a >广东</a>
                                        <a >广西</a>
                                        <a >江西</a>
                                        <a >四川</a>
                                        <a >海南</a>
                                        <a >贵州</a>
                                        <a >云南</a>
                                        <a >西藏</a>
                                        <a >陕西</a>
                                        <a >甘肃</a>
                                        <a >青海</a>
                                        <a >宁夏</a>
                                        <a >新疆</a>
                                        <a >港澳</a>
                                        <a >台湾</a>
                                        <a >钓鱼岛</a>
                                        <a >海外</a>

                                    </div>
                                    <div id="content2">
                                        <a >朝阳区</a>
                                        <a >海淀区</a>
                                        <a >西城区</a>
                                        <a >东城区</a>
                                        <a >大兴区</a>
                                        <a >丰台区</a>
                                        <a >昌平区</a>
                                        <a >顺义区</a>

                                    </div>
                                    <div id="content3">
                                        <a >三环以内</a>
                                        <a >管庄</a>
                                        <a >北苑</a>
                                        <a >定福庄</a>
                                        <a >三环到四环之间</a>
                                        <a >四环到五环之间</a>
                                        <a >五环到六环之间</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter_bottom_right">
                            <ul>
                                <li>
                                    <a >
                                        <i></i>
                                        京东商城配送
                                    </a>
                                </li>
                                <li>
                                    <a >
                                        <i></i>
                                        京尊达                                    </a>
                                </li>
                                <li>
                                    <a >
                                        <i></i>
                                        货到付款
                                    </a>
                                </li>
                                <li>
                                    <a class="hasStock" th:with="checked=${param.hasStock}">
                                        <input th:checked="${#strings.equals(checked,'1')}" type="checkbox" class="hasStock" id="hasStockChecked">
                                        仅显示有货
                                    </a>
                                </li>
                                <li>
                                    <a >
                                        <i></i>
                                        可配送全球
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--排序内容;每四个一组-->
                    <div class="rig_tab">
                        <div th:each="product:${result.getProducts()}">
                            <div class="ico">
                                <i class="iconfont icon-weiguanzhu"></i>
                                <a >关注</a>
                            </div>
                            <p class="da">
                                <a th:href="|http://item.alatusmall.com/${product.getSkuId()}.html|" th:title="${product.getSkuTitle()}">
                                    <img th:src="${product.getSkuImg()}" class="dim">
                                </a>
                            </p>
                            <ul class="tab_im">
                                <li><a  title="黑色">
                                    <img th:src="${product.getSkuImg()}" c></a></li>
                            </ul>
                            <p class="tab_R">
                                <span th:text="'¥'+${product.getSkuPrice()}"></span>
                            </p>
                            <p class="tab_JE">
                                <a  th:utext="${product.getSkuTitle()}">
                                </a>
                            </p>
                            <p class="tab_PI">已有<span>11万+</span>热门评价
                                <a >二手有售</a>
                            </p>
                            <p class="tab_CP"><a th:title="${'京东商城'+product.getBrandName()+'产品专营店'}" th:text="${'京东商城'+product.getBrandName()+'产品...'}"></a>
                                <a href='#' title="联系供应商进行咨询">
                                    <img src="/static/search/img/xcxc.png">
                                </a>
                            </p>
                            <div class="tab_FO">
                                <div class="FO_one">
                                    <p>自营
                                        <span>京东商城自营,品质保证</span>
                                    </p>
                                    <p>满赠
                                        <span>该商品参加满赠活动</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--分页-->
                    <div class="filter_page">
                        <div class="page_wrap">
                            <span class="page_span1">
                                <a class="page_a" th:attr="pn=${(result.getPageNum())-1}" th:if="${result.getPageNum()>1}">
                                    < 上一页
                                </a>
                                <a class="page_a" th:attr="pn=${i},style=${i==result.getPageNum()?'border: 0;color:#ee2222;background: #fff':''}"
                                   th:each="i:${#numbers.sequence(1, result.totalPages)}" th:text="${i}">
                                    [[${i}]]
                                </a>
                                <a  th:if="${(result.getTotalPages()-result.getPageNum())>10}" style="border: 0;font-size: 20px;color: #999;background: #fff">...</a>
                                <a class="page_a" th:attr="pn=${(result.getPageNum())+1}" th:if="${result.getPageNum()<result.getTotalPages()}">
                                    下一页 >
                                </a>
                            </span>
                            <span class="page_span2">
                                <em>共<b>[[${result.getTotalPages()}]]</b>页&nbsp;&nbsp;到第</em>
                                <input type="number" th:value="${result.getPageNum()}" id="inputPage">
                                <em>页</em>
                                <a id="choosePage">确定</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--商品精选-->
<div class="JD_jx">
    <div class="JD_jx_title">
        <div class="mt">
            <strong class="mt-title">商品精选</strong>
            <img src="/static/search/image/u-ad.gif" alt="">
        </div>
        <div class="mc">
            <ul>
                <li>
                    <div class="mc_img">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_name">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                        <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                    </div>
                    <div class="mc_rev">
                        <a >15930</a>
                        <span>人好评</span>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_name">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                        <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                    </div>
                    <div class="mc_rev">
                        <a >15930</a>
                        <span>人好评</span>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_name">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                        <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                    </div>
                    <div class="mc_rev">
                        <a >15930</a>
                        <span>人好评</span>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_name">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                        <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                    </div>
                    <div class="mc_rev">
                        <a >15930</a>
                        <span>人好评</span>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_name">
                        <a  title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                            <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                        <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                    </div>
                    <div class="mc_rev">
                        <a >15930</a>
                        <span>人好评</span>
                    </div>
                </li>
            </ul>


        </div>
    </div>
</div>

<!--猜你喜欢-->
<div class="JD_cnxh">
    <div class="JD_jx_title">
        <div class="mt">
            <strong class="mt-title">猜你喜欢</strong>
            <a >
                <img src="/static/search/image/update.png" alt="">
                换一批
            </a>
        </div>
        <div class="mc">
            <ul>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/59bf3c.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_name">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                        </a>
                    </div>
                    <div class="mc_rev">
                        <a >已有80万+人评价</a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                    </div>

                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/5a28b5c6Ndec5088f.jpg" alt=""></a>
                    </div>
                    <div class="mc_name">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                        </a>
                    </div>
                    <div class="mc_rev">
                        <a >已有80万+人评价</a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                    </div>

                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
                    </div>
                    <div class="mc_name">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                        </a>
                    </div>
                    <div class="mc_rev">
                        <a >已有80万+人评价</a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                    </div>

                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
                    </div>
                    <div class="mc_name">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                        </a>
                    </div>
                    <div class="mc_rev">
                        <a >已有80万+人评价</a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                    </div>

                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/59c493a7N3f9b9c86.jpg" alt=""></a>
                    </div>
                    <div class="mc_name">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                        </a>
                    </div>
                    <div class="mc_rev">
                        <a >已有80万+人评价</a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                    </div>

                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/59c493a7N3f9b9c86.jpg" alt=""></a>
                    </div>
                    <div class="mc_name">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                        </a>
                    </div>
                    <div class="mc_rev">
                        <a >已有80万+人评价</a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥1999.00</span>
                        </strong>
                    </div>

                </li>
            </ul>


        </div>
    </div>
</div>

<!--我的足迹-->
<div class="JD_zuji">
    <div class="JD_jx_title">
        <div class="mt">
            <strong class="mt-title">我的足迹</strong>
            <a >
                更多浏览记录
            </a>
        </div>
        <div class="mc">
            <ul>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/59e58a11Nc38676d5.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥2998.00</span>
                        </strong>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/5a28acccN73689386.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥88.00</span>
                        </strong>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/5a1690ddN441b5dce.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥199.00</span>
                        </strong>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/5a02bde7N7d4453b1.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥799.00</span>
                        </strong>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/5a122dbeN044ebf19.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥599.00</span>
                        </strong>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/59c493a7N3f9b9c85.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥699.00</span>
                        </strong>
                    </div>
                </li>
                <li>
                    <div class="mc_img">
                        <a  title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                            <img src="/static/search/img/5a08f6f6N5bab2c1c.jpg" alt="">
                        </a>
                    </div>
                    <div class="mc_price">
                        <strong>
                            <span>¥715.00</span>
                        </strong>
                    </div>
                </li>
            </ul>


        </div>
    </div>
</div>

<div style="width: 1210px;margin: 0 auto;margin-bottom: 10px"><img src="/static/search/img/5a33a2e0N9a04b4af.jpg" alt=""></div>
<!--底部-->
<footer class="footer">
    <div class="footer_top">
        <ul>
            <li>
                <span></span>
                <h3>品类齐全,轻松购物</h3>
            </li>
            <li>
                <span></span>
                <h3>多仓直发,极速配发</h3>
            </li>
            <li>
                <span></span>
                <h3>正品行货,精致服务</h3>
            </li>
            <li>
                <span></span>
                <h3>天天低价,畅选无忧</h3>
            </li>
        </ul>
    </div>
    <div class="footer_center">
        <ol>
            <li>购物指南</li>
            <li><a  style="color: rgb(114, 114, 114);">购物流程</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">会员介绍</a>
            </li>
            <li><a >生活旅行</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">常见问题</a>
            </li>
            <li><a >大家电</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">联系客服</a>
            </li>
        </ol>
        <ol>
            <li>配送方式</li>
            <li><a  style="color: rgb(114, 114, 114);">上门自提</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">211限时达</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">配送服务查询</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">配送费收取标准</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">海外配送</a>
            </li>
        </ol>
        <ol>
            <li>支付方式</li>
            <li><a  style="color: rgb(114, 114, 114);">货到付款</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">在线支付</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">分期付款</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">邮局汇款</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">公司转账</a>

            </li>
        </ol>
        <ol>
            <li>售后服务</li>
            <li><a  style="color: rgb(114, 114, 114);">售后政策</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">价格保护</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">退款说明</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">返修/退换货</a>
            </li>
            <li><a >取消订单</a>
            </li>
        </ol>
        <ol>
            <li>特色服务</li>
            <li><a  style="color: rgb(114, 114, 114);">夺宝岛</a>
            </li>
            <li><a >DIY装机</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">延保服务</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">京东商城E卡</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">京东商城通信</a>
            </li>
            <li><a  style="color: rgb(114, 114, 114);">京东商城gulimall+</a>
            </li>
        </ol>
        <ol>
            <li>京东商城自营覆盖区域</li>
            <li>
                京东商城已向全国2661个区县提供自<br> 营配送服务,支持货到付款、
                <br> POS机刷卡和售后上门服务。
            </li>
            <li><a  style="color: rgb(114, 114, 114);">查看详情&gt;</a>
            </li>
        </ol>
    </div>
    <div class="footer_foot">
        <p class="footer_p p1">
            <a >关于我们</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">联系我们</a>
            <span></span>
            <a >联系客服</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">合作招商</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">商家帮助</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">营销中心</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">手机京东商城</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">友情链接</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">销售联盟</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">京东商城社区</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">风险监测</a>
            <span></span>
            <a >隐私政策</a>
            <span></span>
            <a >京东商城公益</a>
            <span></span>
            <a  style="color: rgb(114, 114, 114);">English Site</a>
            <span></span>
            <a >media &amp; IR</a>
        </p>
        <p class="footer_p">
            <a >京公网安备 11000002000088号</a>
            <span></span>
            <a >京ICP证070359号</a>
            <span></span>
            <a >互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
            <span></span>
            <a >新出发京零 字第大120007号</a>
        </p>
        <p class="footer_p">
            <a >互联网出版许可证编号新出网证(京)字150号</a>
            <span></span>
            <a >出版物经营许可证</a>
            <span></span>
            <a >网络文化经营许可证京网文[2014]2148-348号</a>
            <span></span>
            <a >违法和不良信息举报电话:4006561155</a>
        </p>
        <p class="footer_p">
            <a >Copyright © 2004 - 2017  京东商城JD.com 版权所有</a>
            <span></span>
            <a >消费者维权热线:4006067733</a>
            <a >经营证照</a>
        </p>
        <p class="footer_p">
            <a >京东商城旗下网站:</a>
            <a >京东商城支付</a>
            <span></span>
            <a >京东商城云</a>
        </p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</footer>

<!--右侧侧边栏-->
<div class="header_bar">
    <div class="header_bar_box">
        <ul>
            <li>
                <a ><img src="/static/search/img/wo.png" /></a>
                <div class="div">
                    <a >京东商城会员</a>
                </div>
            </li>
            <li>
                <a ><img src="/static/search/img/gouwuche.png" /></a>
                <div class="div">
                    <a >购物车</a>
                </div>
            </li>
            <li>
                <a ><img src="/static/search/img/taoxin.png" /></a>
                <div class="div">
                    <a >我的关注</a>
                </div>
            </li>

            <li>
                <a ><img src="/static/search/img/shi.png" /></a>
                <div class="div">
                    <a >我的足迹</a>
                </div>
            </li>
            <li>
                <a ><img src="/static/search/img/xinxi.png" /></a>
                <div class="div">
                    <a >我的消息</a>
                </div>
            </li>
            <li>
                <a ><img src="/static/search/img/qianbao.png" /></a>
                <div class="div">
                    <a >资讯JIMI</a>
                </div>
            </li>
        </ul>
        <ul>
            <li>
                <a ><img src="/static/search/img/fa3f24a70d38bd439261cb7439e517a5.png" /></a>
                <div class="div">
                    <a >顶部</a>
                </div>
            </li>
            <li>
                <a ><img src="/static/search/img/xinxi.png" /></a>
                <div class="div">
                    <a >反馈</a>
                </div>
            </li>
        </ul>
    </div>
</div>

<script>
    $(".sl_ext a:nth-child(1)").hover(function(){
        $(this).children("b").stop(true).animate({top:"3px"},50);
        $(this).children("i").stop(true).animate({top:"-23px"},50)
    },function(){
        $(this).children("b").stop(true).animate({top:"24px"},50);
        $(this).children("i").stop(true).animate({top:"3px"},50)
    });
    $(".sl_ext a:nth-child(2)").hover(function(){
        $(this).children("span").stop(true).animate({top:"-1px"},100);
        $(this).children("i").stop(true).animate({top:"-14px"},100).css({display:"none"})
    },function(){
        $(this).children("span").stop(true).animate({top:"14px"},100);
        $(this).children("i").stop(true).animate({top:"-1px"},100).css({display:"block"})
    });
    $('.tab_im img').hover(function(){
        var a=$(this).prop('src');
        var index=$(this).parents('li').index();
        $(this).parents('li').css('border','2px solid red').siblings('li').css('border','1px solid #ccc');
        $(this).parents('ul').prev().find('img').prop('src',a);
        $(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display','block').siblings('a').css('display','none');
        $(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display','block').siblings('span').css('display','none')
    });

    $(".JD_ipone_one").hover(function(){
        $(this).children("div").css({display:"block"})
    },function(){
        $(this).children("div").css({display:"none"})
    });

    $("#tab>li").click(function() {
        let i = $(this).index();
        $("#container>div").hide().eq(i).show()
    });
    $(".dizhi_show").hover(function(){
        $(".dizhi_con").css({display:"block"})
    },function(){
        $(".dizhi_con").css({display:"none"})
    });
    $(".dizhi_con").hover(function(){
        $(this).css({display:"block"})
    },function(){
        $(this).css({display:"none"})
    });
    //显示隐藏
    let $li = $(".JD_nav_logo>div:gt(3)").hide();
      $('.JD_show span').click(function(){
          if($li.is(':hidden')){
              $li.show();
              $(this).css({width:"86px"}).text('收起 ^');
          }else{
              $li.hide();
              $('.JD_show span').css({width:"291px"}).text('更多选项( CPU核数、网络、机身颜色 等)');
          }
          return false;
      });



    $(".rig_tab>div").hover(function(){
        var i = $(this).index();
        $(this).find('.ico').css({display:'block'}).stop(true).animate({top:"190px"},300)
    },function(){
        var i = $(this).index();
        $(this).find('.ico').css({display:'none'}).stop(true).animate({top:"230px"})
    });

    $('.header_main_left>ul>li').hover(function() {
        $(this).css({
            background: "#f0f0f0"
        }).find('.header_main_left_main').stop(true).fadeIn(300)
    }, function() {
        $(this).css({
            background: "#fff"
        }).find(".header_main_left_a").css({
            color: "#000"
        });
        $(this).find('.header_main_left_main').stop(true).fadeOut(100)
    });
    $(".header_sj a").hover(function() {
        $(this).css({
            background: "#444"
        })
    }, function() {
        $(this).css({
            background: "#6e6568"
        })
    });


    $(".nav_li1 a").hover(function(){
        $(".header_main_left").stop(true).fadeIn()
    },function(){
        $(".header_main_left").stop(true).fadeOut()
    });
    $(".header_main_left").hover(function(){
        $(this).stop(true).fadeIn()
    },function(){
        $(this).stop(true).fadeOut()
    });


    //右侧侧边栏
    $(".header_bar_box ul li").hover(function() {
        $(this).css({
            background: "#7A6E6E"
        }).children(".div").css({
            display: "block"
        }).stop(true).animate({
            left: "-60px"
        }, 300)
    }, function() {
        $(this).css({
            background: "#7A6E6E"
        }).children(".div").css({
            display: "none"
        }).stop(true).animate({
            left: "0"
        }, 300)
    });


    //底部
    $(".footer_foot .p1 a").hover(function(){
        $(this).css("color","#D70B1C")
    },function(){
        $(this).css("color","#727272")
    });

    $(".footer .footer_center ol li a").hover(function(){
        $(this).css("color","#D70B1C")
    },function(){
        $(this).css("color","#727272")
    })
    function searchProducts(name,value){
        let href = location.href + "";
        if(href.indexOf("?")===-1){
            location.href = location.href + "?" + name + "=" + value;
        }
        else{
            location.href = location.href+"&"+name+"="+value;
        }
    }
    function replaceParamVal(url, paramName, replaceVal) {
        let oUrl = url.toString();
        let re = eval('/('+paramName+'=)([^&]*)/gi');
        let nUrl = oUrl.replace(re,paramName+'='+replaceVal);
        return nUrl;
    }
    function hrefChange(key,value){
        let href = location.href + "";
        if(href.indexOf(key)===-1){
            searchProducts(key,value);
        }
        else{
            location.href = replaceParamVal(href,key,value);
        }
    }
    $(".page_a").click(function(){
        let pn = $(this).attr("pn");
        hrefChange("pageNum",pn);
    });
    document.getElementById("choosePage").onclick = function(){
        let inputPage = document.getElementById("inputPage").value;
        hrefChange("pageNum",inputPage);
    }
    $(".sort_a").click(function(){
        $(this).toggleClass("desc");
        // 获取排序字段
        let sort = $(this).attr("sort");
        // 获取升降序
        let value = $(this).hasClass("desc")?"_desc":"_asc";
        // 跳转到指定位置
        let sortWay = sort + value;
        hrefChange("sort",sortWay);
    });
    $("#skuPriceSearchBtn").click(function(){
        // 拼上价格区间的值
        let from = $("#skuPriceFrom").val();
        let to = $("#skuPriceTo").val();
        let query = from + "_" + to;
        let href = location.href+"";
        if(href.indexOf("skuPrice=")===-1){
            searchProducts("skuPrice",query);
        }
        else{
            location.href = replaceParamVal(href,"skuPrice",query);
        }
    });
    $(".hasStock").change(function(){
        if($("#hasStockChecked").prop('checked')){
            hrefChange("hasStock",1);
        }
        else{
            hrefChange("hasStock",0);
        }
    });
    function searchByKeyword(){
        hrefChange("keyword",$("#keywordInput").val());
    }
</script>
</body>
</html>

 

标签:缓存,return,register,-----,new,import,alatus,com,商城
From: https://blog.csdn.net/2201_75960169/article/details/142425420

相关文章

  • 关于`django-auth-ldap` 和 `ldap3`如何处理与 LDAP 服务器的连接和身份验证的问题
    在使用Django进行ActiveDirectory(AD)身份验证时,django-auth-ldap和ldap3都涉及到与LDAP服务器的交互。一个关键的差异在于如何处理与LDAP服务器的连接和身份验证。具体来说,django-auth-ldap通常使用一个绑定用户(BindDN)来执行搜索和验证操作,而使用ldap3时,你......
  • SpringBoot集成Sa-Token权限认证的学习
    一、前言Sa-Token是一个轻量级Java权限认证框架,主要解决登录认证、权限认证、Session会话、单点登录、OAuth2.0、微服务网关鉴权等一系列权限相关问题。它的API设计简单,易于上手,同时功能强大,能够满足多种复杂的权限认证需求。二、基本使用1.引入依赖<dependency> <groupId>cn.dev3......
  • [大语言模型-论文精读] 以《黑神话:悟空》为研究案例探讨VLMs能否玩动作角色扮演游戏?
    1.论文简介论文《CanVLMsPlayActionRole-PlayingGames?TakeBlackMythWukongasaStudyCase》是阿里巴巴集团的PengChen、PiBu、JunSong和YuanGao,在2024.09.19提交到arXiv上的研究论文。论文:https://arxiv.org/abs/2409.12889代码和数据:https://varp-......
  • 技术名称通解 --- 什么是 Iaas、Paas 和 Saas?
    IaaS、PaaS 和 SaaS 是三种最受欢迎的云服务。     它们有时被称为云服务模式或云计算服务模式。    IaaS 即基础架构即服务,通俗将就是将一堆服务器资源,网络资源,存储资源集中到一个资源池池,向上可以通过配置文件重新定义自己的服务器资源,网络资源,存储资......
  • 毕业设计|springboot产业园区智慧公寓管理系统-|免费|代码讲解
    收藏点赞不迷路 关注作者有好处编号:springboot547springboot产业园区智慧公寓管理系统-开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis工具:IDEA/Ecilpse、Navicat、Maven1.万字文档展示(部分)2.系统图片展示第5章系统详细设计这个环节需要使用前面的设......
  • 毕业设计|springboot人事管理系统论文-|免费|代码讲解
    收藏点赞不迷路 关注作者有好处编号:springboot350springboot人事管理系统论文-开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis工具:IDEA/Ecilpse、Navicat、Maven1.万字文档展示(部分)2.系统图片展示......
  • JAVA毕业设计|(免费)springbootJAVA流浪动物救助平台-包含文档代码讲解
    收藏点赞不迷路 关注作者有好处编号:springboot530springbootJAVA流浪动物救助平台-开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis工具:IDEA/Ecilpse、Navicat、Maven1.万字文档展示(部分)2.系统图片展示第5章系统详细设计系统实现部分就是将系统分析,系......
  • 前端常见面试-首页性能提升、项目优化
     首页性能提升Vue首页性能提升是Vue应用开发中非常重要的一环,它直接影响用户体验和应用的加载速度。以下是一些关键的Vue首页性能提升策略:1.代码分割与懒加载路由懒加载:利用Webpack的动态导入(import())特性,实现路由级别的代码分割。这样,只有当用户访问某个路由时,其对应的组件代码......
  • JAVA课程设计|(免费)springboot社区防疫物资申报系统-包含文档代码讲解
    收藏点赞不迷路 关注作者有好处编号:springboot414springboot社区防疫物资申报系统-开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis工具:IDEA/Ecilpse、Navicat、Maven1.万字文档展示(部分)2.系统图片展示第5章系统详细设计这个环节需要使用前面的设计方......
  • JAVA课程设计|(免费)springboot足球俱乐部管理系统-包含文档代码讲解
    收藏点赞不迷路 关注作者有好处编号:springboot354springboot足球俱乐部管理系统-开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis工具:IDEA/Ecilpse、Navicat、Maven1.万字文档展示(部分)2.系统图片展示第5章系统详细设计   5.2.1训练计划5.2.2球......