A页面设置值：

function(res){
	  console.log(res);
	  if(res.code==1000){
// 获取前端传过来的数据 data
		var userInfo=res.data;
		// cookie和localstorage可以进行前端的页面之间的传值
	setCookieValue("username",userInfo.username);
	setCookieValue("userImg",userInfo.userImg);

		window.location.href="index.html";
	  }else{

		$("#tips").html(""+ res.msg +"");




	  }

B页面取值：

var name=getCookieValue("username");
 var userImg=getCookieValue("userImg");
 console.log(name+userImg);

4.2localStorage

A页面:

	localStorage.setItem("user",JSON.stringify(userInfo));

B页面：

var jsonStr=localStorage.getItem("user");

// 把json串转换为对象
var userInfo=eval("("+jsonStr+")");


// 把取到的值消失
localStorage.removeItem("user");
console.log(userInfo);

4.3Vue实现登录

data:{
		username:"",
		password:"",	
		tips:" ",
		colorStyle:"",
		isRight:false,
	


	},
	methods:{
		doSubmit:function() {
			// 校验成功

			if(vm.isRight){
				var url=baseUrl+"/user/login";
				axios.get(url,{	
					params:{
						username:vm.username,password:vm.password

					} }
				
					).then((res)=>{

				console.log(res);

					var vo=res.data;
					if(vo.code==1){
						window.location.href="index.html";
					}else{
						vm.tips="账号或者密码错误";
					}



				});

			}else{
				vm.tips="请输入正确的用户名和密码";
				vm.colorStyle="color:red"
			}

            //  1.进行数据的校验

            if(vm.username==" "){
                vm.tips="请输入用户名";
                vm.colorStyle="color:red";


            }
             
         },
         checkInfo:function(){
            if(vm.username==""){
                vm.tips="请输入用户名";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.username.length<6 ||vm.username.length>20){
                vm.tips="账号长度必须为6-20";
                vm.colorStyle="color:red";
				vm.isRight=false;





            }else{
// 校验密码
				if(vm.password==" "){
                vm.tips="请输入密码";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.password.length<6 ||vm.password.length>16){
				vm.tips="密码长度为6-16";
                this.colorStyle="color:red";

			}else{
				vm.tips=" ";
				vm.isRight=true;
			}



			}





         }







	}

from表单(用@keyup进行表单的输入的绑定)：

五、前后端分离开发用户认证的问题

5.1单体项目中：

可以知道每台服务器中存在多个Session,只是id不相同，Cookie中可以存放sessionId,然后判断是是不是同一个session

在单体项目中用户怎么认证的？

在单体项目中视图资源和控制器都在同一台服务器，用户的多次请求老师基于同一个会话，可以基于session进行会话的验证：

1. 用户登录将信息存放在session中
2. 根据session中是否有用户信息来判断用户是否可以进行登录。

5.2前后端分离项目中

可以知道使用token实现用户验证，token存在于cookie中（同一台服务器可以访问cookie),然后验证token是否正确

基于token认证的用户代码实现

在commons模块中引入

package com.qfedu.fmmall.utils;

import java.util.Base64;

//base64 加密 解密 激活邮件的时候 为 邮箱地址 code验证码 进行加密
//当 回传回来后 进行邮箱地址 和 code 的解密
public class Base64Utils {
	//加密
	public static String encode(String msg){
		return Base64.getEncoder().encodeToString(msg.getBytes());
	}
	//解密
	public static String decode(String msg){
		return new String(Base64.getDecoder().decode(msg));
	}
}

登录成功生成token:UserController

package com.qfedu.fmmall.controller;


import com.qfedu.fmmall.entity.Users;
import com.qfedu.fmmall.service.UserService;
import com.qfedu.fmmall.vo.ResultVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/*@Controller
@ResponseBody*/

@RestController
@RequestMapping("/user")
@CrossOrigin
@Api(value = "提供用户的登录和注册的接口",tags = "用户管理")
public class UserController {

    @Autowired
    private UserService userService;

//    @ApiIgnore加上这个注解会swagger忽略这个方法
    @ApiOperation("用户登录的接口")
    @ApiImplicitParams({
            @ApiImplicitParam(dataType = "string",name = "username",value = "用户登录的账号",required = true),
            @ApiImplicitParam(dataType = "string",name = "password",value = "用户登录的密码",required = true)
    })
    @RequestMapping("/login")
//    @RequestParam可以有默认的参数
    public ResultVO login(@RequestParam("username") String name,@RequestParam(value = "password") String pwd){

        return userService.checkLogin(name,pwd);


    }

    @ApiOperation(value = "用户注册")
    @PostMapping("/regist")
    @ApiImplicitParams({
            @ApiImplicitParam(dataType = "string",name = "username",value = "用户注册的账号",required = true),
            @ApiImplicitParam(dataType = "string",name = "password",value = "用户注册的密码",required = true)
    })
//    前端用user传值，后端可以用users 接收
     public ResultVO register(@RequestBody Users users){

        return userService.insert(users.getUsername(),users.getPassword());

    }


}

然后在UserServiceimpl中进行token的加密：

// 如果登录成功，则需要生成令牌token(token就是按照规则生成的字符串)
String token= Base64Util.encode(username+"roothouzhicong");

package com.qfedu.fmmall.service.impl;

import com.qfedu.fmmall.dao.UsersMapper;
import com.qfedu.fmmall.entity.Users;
import com.qfedu.fmmall.service.UserService;
import com.qfedu.fmmall.utils.MD5Utils;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;
import org.apache.logging.log4j.util.Base64Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import java.util.Date;
import java.util.List;

@Service
@Transactional
//使所有的线程都用这个对象,单例模式默认是开启的
@Scope("singleton")
public class UserServiceimpl implements UserService {
    @Autowired
    private UsersMapper userDao;//可以在UserDao上面加上userDao,这个不会报红，但是没有什么意义
    @Override
    public ResultVO checkLogin(String username, String pwd) {
//        查询用户名

        Example example = new Example(Users.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username",username);
        List users = userDao.selectByExample(example);

//
        if(users.size()==0){
//            用户名不正确

            return new ResultVO(10001,"用户名不正确",null);



        }else {
            //密码使用MD5进行加密
            String md5Pwd = MD5Utils.md5(pwd);
            System.out.println(users.get(0).getPassword());

            if(md5Pwd.equals(users.get(0).getPassword())){

//                如果登录成功，则需要生成令牌token(token就是按照规则生成的字符串)
                String token= Base64Util.encode(username+"roothouzhicong");

                //          验证成功
                return  new ResultVO(ResultStatus.OK,token,users.get(0));
            }else {
                //密码不正确
                return  new ResultVO(ResultStatus.NO,"密码错误",null);

            }


        }



    }
    @Transactional
    @Override
    public ResultVO insert(String username, String pwd) {
//        判断这个用户是否被注册

//        加上这个锁可以使用所有的注册都用这个userServiceimpl
        synchronized (this){
//            把密码进行MD5的加密
            String password = MD5Utils.md5(pwd);

            //        查询用户名

            Example example = new Example(Users.class);
            Example.Criteria criteria = example.createCriteria();
            criteria.andEqualTo("username",username);
            List users = userDao.selectByExample(example);
//表示用户名没有被注册过，可以进行注册
            if (users.size()==0){
//一个是注册时间，regtime,一个是修改时间modtime
                Users user=new Users(username,password,new Date(),new Date());
                int i = userDao.insert(user);
                if(i>0){
                    return new ResultVO(ResultStatus.OK,"注册成功",null);
                }else {

                    return new ResultVO(ResultStatus.NO,"注册失败",null);

                }


            }
//            判断一下用户名是否已经被注册，然后把数据返回前端，goodjob,Noone can influence you
            else {

                return new ResultVO(ResultStatus.NO,"用户名已经被注册",null);
            }



        }


    }
}

前端设置token:

	doSubmit:function() {
			// 校验成功

			if(vm.isRight){
				var url=baseUrl+"/user/login";
				axios.get(url,{	
					params:{
						username:vm.username,password:vm.password

					} }
				
					).then((res)=>{

				console.log(res);

					var vo=res.data;

					console.log(vo);
					if(vo.code==1){
					
 // 如果登录成功就把token存储到时cookie中
						setCookieValue("token",vo.msg);

						 window.location.href="index.html";
					}else{
						vm.tips="账号或者密码错误";
					}



				});

前端的购物车获取token:

登录进行来可以把购物车获取token,前端的token用CookieUtils.js封装的包进行相关的获取，

package com.qfedu.fmmall.controller;


import com.qfedu.fmmall.utils.Base64Utils;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
@Api(value = "提供购物车业务相关的接口",tags = "购物车管理接口")
@RequestMapping("/shopcart")
public class ShopCartController {

    @RequestMapping("/list")
    @ApiImplicitParam(dataType = "string",name = "token",value = "登录的一个标志",required = true)
    public ResultVO shopcartList(String token){
//        校验输入的token看看是否是用户自己登录的token
       //解密 
        String decode = Base64Utils.decode(token);
        if(token==null){
            return new ResultVO(ResultStatus.NO, "请先登录", null);


        }else if(decode.endsWith("roothouzhicong")) {


            System.out.println("购物车列表相关的接口------------");
            return new ResultVO(ResultStatus.OK, "success", null);


        }else {

            return new ResultVO(ResultStatus.NO, "登录已经过期，请重新登录！！", null);

        }


    }
}

六、JWT(json Web Token)一个别人封装好的工具类生成相关的token

1. 用自定义的token生成的时效性不可以进行定义
2. 安全性较差

JWT结构：

6.1生成JWT

• 添加依赖：

  
          
              com.auth0
              java-jwt
              3.10.3
          
  
          
          io.jsonwebtoken
          jjwt
          0.9.1
      
  
  

UserServiceimpl(登录成功)生成token:

 HashMap map=new HashMap<>();

                JwtBuilder builder= Jwts.builder();
                String token = builder.setSubject(username)   //主题就是token中携带的数据
                        .setIssuedAt(new Date()) //设置token的生成时间
                        .setId(users.get(0).getUserId() + "") //设置用户的id为tokenid
                        .setClaims(map)                         //map中可以存放用户的角色权限信息
                        .setExpiration(new Date(System.currentTimeMillis() + 24 * 60 * 60 * 1000)) //设置token的过期时间
                        .signWith(SignatureAlgorithm.HS256, "houzhicong") //设置加密的方式
                        .compact();

                //          验证成功

前端ShopCart.html通过Cookie获取生成的token:

后端ShopController进行解析Token:

package com.qfedu.fmmall.controller;


import com.qfedu.fmmall.utils.Base64Utils;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jws;
import io.jsonwebtoken.JwtParser;
import io.jsonwebtoken.Jwts;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
@Api(value = "提供购物车业务相关的接口",tags = "购物车管理接口")
@RequestMapping("/shopcart")
public class ShopCartController {

    @RequestMapping("/list")
    @ApiImplicitParam(dataType = "string",name = "token",value = "登录的一个标志",required = true)
    public ResultVO shopcartList(String token){
//        校验输入的token看看是否是用户自己登录的token
//        String decode = Base64Utils.decode(token);
        if(token==null){
            return new ResultVO(ResultStatus.NO, "请先登录", null);


        }else {
            JwtParser parser= Jwts.parser();
            parser.setSigningKey("houzhicong");//解析token 必须和生成token时候生成的密码一致

//            如果token正确（密码正确，有效期内） 则正常执行，否则抛出异常
            try{


                Jws claimsJws=parser.parseClaimsJws(token);

                Claims body=claimsJws.getBody();//获取token中的用户数据
                String subject=body.getSubject();//获取生成token设置subject
               String v1=body.get("key1",String.class);//获取生成token时存储的Claims的map中的值
                return new ResultVO(ResultStatus.OK, "success", null);

            }catch (Exception e){
                return new ResultVO(ResultStatus.NO, "登录已经过期，请重新登录！！", null);


            }



        }


    }
}

6.2使用拦截器进行拦截

1. 创建一个CheckTokenInterceptor
2. 创建一个拦截器的类 InterceptorConfig

6.3.1有

package com.qfedu.fmmall.config;

import com.qfedu.fmmall.interceptor.CheckTokenInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
    @Autowired
    private CheckTokenInterceptor checkTokenInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new CheckTokenInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/user/**"
                ,"/doc.html"
                ,"/swagger-ui/**");
    }
}

6.3使用请求头进行传递token

前端但凡访问受限资源，都必须携带token请求，token可以通过请求行(params)，请求头(header)，以及请求体（data)传递，但习惯使用header传递

axios通过请求头传值 里面的参数用Headers 不用Params

axios({
					method:"get",
					url:baseUrl+"shopcart/list",
					Headers:{
						token:this.token,
					}

				}).then(function (res) {
					console.log(res);
				});
			},
			

6.3.1 CheckTokenInterceptor类 前端会发送预险性请求（只有它通过以后才可以进行第二次请求），需要拦截器进行放行

package com.qfedu.fmmall.interceptor;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;
import io.jsonwebtoken.*;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@Configuration
public class CheckTokenInterceptor implements HandlerInterceptor {
//   打ov 可以看到它的方法


    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getParameter("token");

//        System.out.println("token----------");

//        前端会发送预险性请求
        String method = request.getMethod();

        if("options".equalsIgnoreCase(method)){

            return true;
        }

        if(token==null){
//            提示用户进行登录

            PrintWriter out = response.getWriter();
            ResultVO resultVO= new ResultVO(ResultStatus.NO, "请先登录", null);
//         抽出一个方法进行
            doResponse(response,resultVO);


//            拦截
            return  false;

        }else {
//            验证token

            try{

                JwtParser parser= Jwts.parser();
                parser.setSigningKey("houzhicong");
                Jws claimsJws=parser.parseClaimsJws(token);
                return true;
            }catch (ExpiredJwtException e){
                ResultVO resultVO= new ResultVO(ResultStatus.NO, "登录过期，请重新登录", null);
                doResponse(response,resultVO);


                return false;
            }
            catch (UnsupportedJwtException e){
                ResultVO resultVO= new ResultVO(ResultStatus.NO, "Token不合法，请自重", null);
                doResponse(response,resultVO);


                return false;
            }

            catch (Exception e){
                ResultVO resultVO= new ResultVO(ResultStatus.NO, "请先登录", null);
                doResponse(response,resultVO);


                return false;
            }





        }

    }

    private void doResponse(HttpServletResponse response,  ResultVO resultVO) throws IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
//        写上Json格式的resultVO
        String s = new ObjectMapper().writeValueAsString(resultVO);
        out.println(s);
        out.flush();
        out.close();


    }
}

七首页的分类列表的的实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQm4qlh3-1633446686637)(C:\Users\CourageAndLove\AppData\Roaming\Typora\typora-user-images\image-20210823182623779.png)]

得出结论：数据量较少的情况，使用一次性查询，数据量较多使用多次查询

方案一：一次性查询三级分类

• 优点只需一查询
• 缺点：数据库查询效率较低，页面首次加载的速度较慢

方案二：

• 先只查询一级分类，用户点击/鼠标移动到一级分类，动态加载二级分类
• 缺点：需要多次连接数据库

7.1接口实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFClkTnv-1633446686638)(C:\Users\CourageAndLove\AppData\Roaming\Typora\typora-user-images\image-20210823204928346.png)]

一次性查询出来的sql语句：inner join 和left join 的区别 left join 左边没有关联的数据也会全部显示

select 

c1.category_id 'category_id1',
c1.category_name 'category_name',
c1.category_level 'category_level',
c1.parent_id 'parent_id',
c1.category_icon 'category_icon',
c1.category_slogan 'category_slogan',
c1.category_pic 'category_pic',
c1.category_bg_color 'category_bg_color',

c2.category_id 'category_id2',
c2.category_name 'category_name2',
c2.category_level 'category_leve2',
c2.parent_id 'parent_id2',




c3.category_id 'category_id3',
c3.category_name 'category_name3',
c3.category_level 'category_leve3',
c3.parent_id 'parent_id3'

from category c1
left join category c2 on c2.parent_id=c1.category_id
left join category c3 on c3.parent_id=c2.category_id
where c1.category_level=1

select *from category c1
  inner join category c2 on c2.parent_id=c1.category_id
  left join category c3 on c3.parent_id=c2.category_id
   where c1.category_level=1
 

--根据父级分类的parent_id进行查询 1 级 parent_id=0
select *from category where parent_id=0,

• 创建用于封装查询的类别信息CategoryVO

  在Beans模块中entity包下面创建一个CategoryVO实体类用于封装Category和前端 进行数据的响应，相对于Category多了这个属性

  //实体类中实现当前分类的子分类
  private List categories;
  
          public List getCategories() {
              return categories;
          }
  
          public void setCategories(List categories) {
              this.categories = categories;
          } 
  

• 在CategoryMapper中定义一个函数

  package com.qfedu.fmmall.dao;
  
  import com.qfedu.fmmall.entity.Category;
  import com.qfedu.fmmall.entity.CategoryVO;
  import com.qfedu.fmmall.general.GeneralDao;
  
  import java.util.List;
  
  public interface CategoryMapper extends GeneralDao {
  //使用连接查询实现分类列表查询
      public List selectAllCategories();
      
      
      //    子查询
      public List selectAllCategories2(int parentId);
  }
  

• 映射文件配置

  <?xml version="1.0" encoding="UTF-8"?>
  
  
    
      
      
      
      
      
      
      
      
    
  
  
  
    
      
      
      
      
      
      
      
      
      
        
        
        
        
  
       
  
         
         
         
         
  
  
       
      
  
    
  
  
  
  
  
  
  
  
  
    
  
  select
  
  c1.category_id 'category_id1',
  c1.category_name 'category_name',
  c1.category_level 'category_level',
  c1.parent_id 'parent_id',
  c1.category_icon 'category_icon',
  c1.category_slogan 'category_slogan',
  c1.category_pic 'category_pic',
  c1.category_bg_color 'category_bg_color',
  
  c2.category_id 'category_id2',
  c2.category_name 'category_name2',
  c2.category_level 'category_leve2',
  c2.parent_id 'parent_id2',
  
  
  
  
  c3.category_id 'category_id3',
  c3.category_name 'category_name3',
  c3.category_level 'category_leve3',
  c3.parent_id 'parent_id3'
  
  from category c1
  left join category c2 on c2.parent_id=c1.category_id
  left join category c3 on c3.parent_id=c2.category_id
  where c1.category_level=1
  
  
    
      
      
     
  
  

使用子查询实现分类列表的查询：

```xml
    

  
    
    
    
    
    
    
    
    
    



  






  
  
    select

     category_id,
category_name,
category_level,
parent_id,
category_icon,
category_slogan,
category_pic,
category_bg_color


from category where parent_id=#{parentId};
  

7.2业务层实现

CategoryService

package com.qfedu.fmmall.service;

import com.qfedu.fmmall.vo.ResultVO;

public interface CategoryService {

    public ResultVO queryAllCategory();
}

CategoryServiceimpl:

package com.qfedu.fmmall.service.impl;

import com.qfedu.fmmall.dao.CategoryMapper;
import com.qfedu.fmmall.entity.CategoryVO;
import com.qfedu.fmmall.service.CategoryService;
import com.qfedu.fmmall.vo.ResultStatus;
import com.qfedu.fmmall.vo.ResultVO;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class CategoryServiceimpl implements CategoryService {
    @Resource
    private CategoryMapper categoryMapper;

    @Override
    public ResultVO queryAllCategory() {
        List categoryVOS = categoryMapper.selectAllCategories2(0);

        return new ResultVO(ResultStatus.OK,"success",categoryVOS);


    }
}

控制层实现

indexController实现：

@Autowired
    private CategoryService categoryService;


    @RequestMapping("category-list")
    @ApiOperation("商品分类查询接口")
    public ResultVO queryAllCategory(){

        return categoryService.queryAllCategory();
    }

八、商品的推荐功能实现

8.1 流程分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yol4wuqR-1633446686638)(C:\Users\CourageAndLove\AppData\Roaming\Typora\typora-user-images\image-20210828192719883.png)]

推荐最新上架的商品

8.2接口开发

8.2.1数据库的实现

• sql语句实现

  -- 商品推荐查询最新上架信息
  select *from product order by create_time desc limit 0,3;
  -- 商品图片查询 根据商品id查询商品图片
  select *from product_img where item_id=2;
  
  

  在子工程beans工程下面创建ProductVO (加上了这个属性 private List imgs;因为一个商品包含多张表)

  package com.qfedu.fmmall.entity;
  
  import javax.persistence.Column;
  import javax.persistence.Id;
  import java.util.Date;
  import java.util.List;
  
  public class ProductVO {
      /**
       * 商品id
       */
      @Id
      @Column(name = "product_id")
      private Integer productId;
  
      /**
       * 商品名称
       */
      @Column(name = "product_name")
      private String productName;
  
      /**
       * 商品分类id
       */
      @Column(name = "category_id")
      private Integer categoryId;
  
      /**
       * 一级分类外键id
       */
      @Column(name = "root_category_id")
      private Integer rootCategoryId;
  
      /**
       * 销量
       */
      @Column(name = "sold_num")
      private Integer soldNum;
  
      /**
       * 商品状态
       */
      @Column(name = "product_status")
      private Integer productStatus;
  
      /**
       * 商品内容
       */
      private String content;
  
      /**
       * 创建时间
       */
      @Column(name = "create_time")
      private Date createTime;
  
      /**
       * 更新时间
       */
      @Column(name = "update_time")
      private Date updateTime;
  
  
      private List imgs;
  
      public List getImgs() {
          return imgs;
      }
  
      public void setImgs(List imgs) {
          this.imgs = imgs;
      }
  
      @Override
      public String toString() {
          return "ProductVO{" +
                  "imgs=" + imgs +
                  '}';
      }
  
      /**
       * 获取商品id
       *
       * @return product_id - 商品id
       */
      public Integer getProductId() {
          return productId;
      }
  
      /**
       * 设置商品id
       *
       * @param productId 商品id
       */
      public void setProductId(Integer productId) {
          this.productId = productId;
      }
  
      /**
       * 获取商品名称
       *
       * @return product_name - 商品名称
       */
      public String getProductName() {
          return productName;
      }
  
      /**
       * 设置商品名称
       *
       * @param productName 商品名称
       */
      public void setProductName(String productName) {
          this.productName = productName == null ? null : productName.trim();
      }
  
      /**
       * 获取商品分类id
       *
       * @return category_id - 商品分类id
       */
      public Integer getCategoryId() {
          return categoryId;
      }
  
      /**
       * 设置商品分类id
       *
       * @param categoryId 商品分类id
       */
      public void setCategoryId(Integer categoryId) {
          this.categoryId = categoryId;
      }
  
      /**
       * 获取一级分类外键id
       *
       * @return root_category_id - 一级分类外键id
       */
      public Integer getRootCategoryId() {
          return rootCategoryId;
      }
  
      /**
       * 设置一级分类外键id
       *
       * @param rootCategoryId 一级分类外键id
       */
      public void setRootCategoryId(Integer rootCategoryId) {
          this.rootCategoryId = rootCategoryId;
      }
  
      /**
       * 获取销量
       *
       * @return sold_num - 销量
       */
      public Integer getSoldNum() {
          return soldNum;
      }
  
      /**
       * 设置销量
       *
       * @param soldNum 销量
       */
      public void setSoldNum(Integer soldNum) {
          this.soldNum = soldNum;
      }
  
      /**
       * 获取商品状态
       *
       * @return product_status - 商品状态
       */
      public Integer getProductStatus() {
          return productStatus;
      }
  
      /**
       * 设置商品状态
       *
       * @param productStatus 商品状态
       */
      public void setProductStatus(Integer productStatus) {
          this.productStatus = productStatus;
      }
  
      /**
       * 获取商品内容
       *
       * @return content - 商品内容
       */
      public String getContent() {
          return content;
      }
  
      /**
       * 设置商品内容
       *
       * @param content 商品内容
       */
      public void setContent(String content) {
          this.content = content == null ? null : content.trim();
      }
  
      /**
       * 获取创建时间
       *
       * @return create_time - 创建时间
       */
      public Date getCreateTime() {
          return createTime;
      }
  
      /**
       * 设置创建时间
       *
       * @param createTime 创建时间
       */
      public void setCreateTime(Date createTime) {
          this.createTime = createTime;
      }
  
      /**
       * 获取更新时间
       *
       * @return update_time - 更新时间
       */
      public Date getUpdateTime() {
          return updateTime;
      }
  
      /**
       * 设置更新时间
       *
       * @param updateTime 更新时间
       */
      public void setUpdateTime(Date updateTime) {
          this.updateTime = updateTime;
      }
  }
  

  ProductMapper文件：

  package com.qfedu.fmmall.dao;
  
  import com.qfedu.fmmall.entity.Product;
  import com.qfedu.fmmall.entity.ProductVO;
  import com.qfedu.fmmall.general.GeneralDao;
  
  import java.util.List;
  
  public interface ProductMapper extends GeneralDao {
  //    查询推荐商品信息
      public List selectRecommendProducts();
  }
  

  ProductImgMapper文件：

  package com.qfedu.fmmall.dao;
  
  import com.qfedu.fmmall.entity.ProductImg;
  import com.qfedu.fmmall.general.GeneralDao;
  
  import java.util.List;
  
  public interface ProductImgMapper extends GeneralDao {
      public List selectProductImgByProductId(int productId);
  }
  

  ProductMapper.xml文件实现

  注意一下子查询 的语句:

  <?xml version="1.0" encoding="UTF-8"?>
  
  
    
      
      
      
      
      
      
      
      
      
      
    
  
    
      
      
      
      
      
      
      
      
      
      
      
    
  
  
    
  
  
  select
  product_id,
  product_name,
  category_id,
  root_category_id,
  sold_num,
  product_status,
  content,
  create_time,
  update_time
  
  
  from product order by create_time desc limit 0,3;
  
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  8.2.2业务层实现

  package com.qfedu.fmmall.service;
  
  import com.qfedu.fmmall.entity.ProductVO;
  import com.qfedu.fmmall.vo.ResultVO;
  
  import java.util.List;
  
  public interface ProductService {
      public ResultVO selectRecommendProducts();
  
  }
  
  

  8.2.3控制层实现

   @ApiOperation("商品推荐查询信息接口")
      @RequestMapping(value = "/list-recommends",method = RequestMethod.GET)
      public ResultVO selectProductRecommend(){
          ResultVO resultVO = productService.selectRecommendProducts();
          return resultVO;
  
  
      }
  
  

九、商品详情显示（在Introduction.html进行相关的显示）

点击商品推荐，商品轮播图，商品的列表页面点击商品，就会进入到商品的详情页面。

1. 获取商品id
2. 可以查询商品的详情信息（商品的基本信息，商品套餐，商品图片信息。）
3. 将商品参数返回给前端

9.1接口实现

9.1.1 商品详情接口

商品基本信息（product），商品套餐(sku)，商品图片(product_img)

• SQL

  -- 根据商品id查询商品详情
  select *from product where product_id=3;
  -- 根据商品id查询商品图片详情
  select *from product_img where item_id=3;
  -- 根据商品id查询当前商品的套餐
  select *from product_sku where product_id=3;
  

• 可以用子查询实现这个相关的操作

• dao接口实现(通过product,product_img,product_sku三张表获取商品的详情信息)

  @Repository
  public interface ProductMapper extends GeneralDao {
  //    查询推荐商品信息
      public List selectRecommendProducts();
  }
  
  
  package com.qfedu.fmmall.dao;
  
  import com.qfedu.fmmall.entity.ProductImg;
  import com.qfedu.fmmall.general.GeneralDao;
  import org.springframework.stereotype.Repository;
  
  import java.util.List;
  @Repository
  public interface ProductImgMapper extends GeneralDao {
      public List selectProductImgByProductId(int productId);
  }
  
  package com.qfedu.fmmall.dao;
  
  import com.qfedu.fmmall.entity.ProductSku;
  import com.qfedu.fmmall.general.GeneralDao;
  import org.springframework.stereotype.Repository;
  
  @Repository
  public interface ProductSkuMapper extends GeneralDao {
  }
  
  

• 业务层实现

//这里为不需要事务，但是如果某些事务如果调用了我也加入到事务中来
//    事务默认的隔离级别是可重复读 repeateable read
    @Transactional(propagation = Propagation.SUPPORTS)
    public ResultVO selectProductBasicInfo(String productId) {
//      1.查询商品的基本信息



        Example example = new Example(Product.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("productId",productId);
        criteria.andEqualTo("productStatus",1);

        List products = productMapper.selectByExample(example);
//        System.out.println(products);


        if(products.size()>0){
            //      2.查询商品的图片信息
           Example example1 = new Example(ProductImg.class);
            Example.Criteria criteria1 = example1.createCriteria();
            criteria1.andEqualTo("itmeId",productId);
            List productImgs = productImgMapperMapper.selectByExample(example1);
//            System.out.println(productImgs);


            //        3.查询商品的套餐信息

            Example example2 = new Example(ProductSku.class);
            Example.Criteria criteria2 = example2.createCriteria();
            criteria2.andEqualTo("productId",productId);
            criteria2.andEqualTo("status",1);
            List productSkus = productSkuMapper.selectByExample(example2);
//            System.out.println(productSkus);


//            把所有的商品的详情信息放入HashMap当中进行使用
            HashMap basicInfo=new HashMap<>();
            basicInfo.put("product",products.get(0));
            basicInfo.put("productImgs",productImgs);
            basicInfo.put("productSkus",productSkus);

            return new ResultVO(ResultStatus.OK,"success",basicInfo);





        }else {

            new ResultVO(ResultStatus.NO,"查询商品基本信息失败",null);
        }
        return null;
    }

• 控制层实现（这边把商品的详情的信息放到了ResultVO的Object中）

//    商品详情查询

    @RequestMapping(value = "/detail/{pid}",method = RequestMethod.GET)
    public ResultVO getProductBasicInfo(@PathVariable("pid") String productId){

        ResultVO resultVO = productService.selectProductBasicInfo(productId);
//        System.out.println(resultVO);

        return resultVO;

    }

十、显示商品评价的信息（通过用户和商品评论表进行相关的连表查询）

-- 根据评论的id查询评论信息，关联用户表查询用户信息
select u.username,u.user_img,c.* from product_comments c
inner join users u 
on c.user_id=u.user_id
where c.product_id=3

10.1 新建的VO，ProductCommentsVO （一对一的连表查询可以不用在实体类中声明另一个实体类）

package com.qfedu.fmmall.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import javax.persistence.Column;
import javax.persistence.Table;
import java.util.Date;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ProductCommentsVO {


    private Integer productId;
    private String productName;
    private Integer orderItemId;

    private String isannonymouns;
    private Integer commType;
    private Integer commLevel;
    private String commImgs;
    private String sepcName;
    private Integer replyStatus;
    private String replyContent;
    private Date replyTime;
    private Integer isShow;


//用于封装评论对应的用户数据
    private Integer userId;
    private String username;
    private String nickname;
    private String userImg;


}

在Mapper定义相应的接口：

package com.qfedu.fmmall.dao;

import com.qfedu.fmmall.entity.ProductComments;
import com.qfedu.fmmall.entity.ProductCommentsVO;
import com.qfedu.fmmall.general.GeneralDao;
import org.springframework.stereotype.Repository;

import java.util.List;


@Repository
public interface ProductCommentsMapper extends GeneralDao {

    public List selectCommentsByProductId(int productId);
}

十一、添加购物车的功能实现

10.1流程分析：

点击添加购物车---------商品、选择套餐id,套餐属性，数量，token-------------进行token的校验

10.2数据库的相关的操作

1. 增加字段sku_props

   表生成之后 用逆向工程重新生成shopping_cart表的相关的结构。修改generalConfig.xml，把%修改成shopping_cart

   注意一下%表示生成所有的表

10.2.1 购买的数量的前端实现在vue的methods中添加+和-的点击事件

	changeNum:function(m){
						if(m==-1 && this.num>1){
						this.num=this.num-1;

						}else if(m==1 && this.num

															
															
															
															库存{{productSkus[currentSkuIndex].stock}}件
														

								

									加入购物车
								
							

					addShopCart(){
					var uid=getCookieValue("userId");


						var propStr="";
						// 套餐属性转换成字符串
						for(var key in this.chooseskuProps){
							propStr+=key+":"+this.chooseskuProps[key]+";";
}


						var cart={
									
									"cartNum": this.num,
									"cartTime": "",
									"productId": this.productId,
									"productPrice": this.productSkus[this.currentSkuIndex].sellPrice,
									"skuId": this.productSkus.skuId,
									"skuProps":propStr,
									"userId": uid
								};

						//从cookie中获取token

						var token=getCookieValue("token");
						console.log("---token-------");
						console.log(token);

						// 把购物车的信息放入数据库中
						var url5=baesUrl+"shopcart/add";
						axios.post(
							{
								url:url5,
								methods:"post",
								headers:{
									token:token
								},
								data:cart
}


						).then( res=>{

							console.log("------res-----"+res);



						}

						);
					 


					}