京淘项目(SSM+VUE)

1.环境搭建

1.创建项目

京淘项目(SSM+VUE)_第1张图片

 京淘项目(SSM+VUE)_第2张图片

2.编辑pom.xml文件


        1.8
        UTF-8
        UTF-8
        2.4.1
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.0
        

        
        
            mysql
            mysql-connector-java
        
        
        
            org.springframework.boot
            spring-boot-devtools
        
        
        
            org.projectlombok
            lombok
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-dependencies
                ${spring-boot.version}
                pom
                import
            
        
    

    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                3.8.1
                
                    1.8
                    1.8
                    UTF-8
                
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                2.4.1
                
                    com.jt.SpringbootDemo3mybatisApplication
                
                
                    
                        repackage
                        
                            repackage
                        
                    
                
            
        
    

 3.复制之前项目src目录

京淘项目(SSM+VUE)_第3张图片

 4.统一端口号

京淘项目(SSM+VUE)_第4张图片

 5.导入前端项目

京淘项目(SSM+VUE)_第5张图片

京淘项目(SSM+VUE)_第6张图片

 京淘项目(SSM+VUE)_第7张图片

6.如何访问的登录页面

京淘项目(SSM+VUE)_第8张图片

京淘项目(SSM+VUE)_第9张图片

如何实现的??? 用户发起请求http://localhost:8080(根路径) 

京淘项目(SSM+VUE)_第10张图片

 最终看到html登录页面(已被Vue渲染完成的页面)

7.关于axios

 

 京淘项目(SSM+VUE)_第11张图片

 子组件使用的格式:this.$http

2.完成用户登录

 业务接口文档

2.1编辑SysResult对象(VO层)

vo:前后端进行数据交互的媒介

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {
    private Integer status;//200表示正常 201表示失败
    private String msg;    //服务器返回的提示信息
    private Object data;   //服务器返回的业务数据

    /*重载规则:参数不要耦合,否则会产生歧义*/
    public static SysResult fail(){
        return new SysResult(201,"服务调用失败",null);
    }
    public static SysResult sucess(Object data){
        return new SysResult(200,"服务调用成功",data);
    }
    public static SysResult sucess(String msg,Object data){
        return new SysResult(200,msg,data);
    }
}

2.2业务流程

2.2.1用户输入用户名与密码

2.2.2通过Vue的axios发起post请求

2.2.3Controller接收请求 需要将密码进行加密处理

2.2.4查询成功则输入正确

登陆成功,返回token密钥,利用SysResult对象返回

2.2.5查询失败则输入有误

2.3 MD5

特点:只能由明文加密为密文,不可逆,不可破解

升级版本:MD5Hash=明文+盐值  几乎不可破解

Controller层

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("user")
public class UserController {


    @Autowired
    private UserService userService;

    @GetMapping("/findAll")
    public List findAll(){

        return userService.findAll();
    }
    /*根据userName与password查询数据库
    * 类型post
    * 返回值SysResult
    * */
    @PostMapping("login")
    public SysResult login(@RequestBody User user){
        String token=userService.findUserByUP(user);
        //表示用户名和密码错误
        if(token==null||"".equals(token)){
            return SysResult.fail();
        }
        //表示用户名与密码正确,返回密钥信息
        return SysResult.sucess(token);
    }
}

Service层

package com.jt.service;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;

import java.nio.charset.StandardCharsets;
import java.util.List;
import java.util.UUID;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;


    @Override
    public List findAll() {
        return userMapper.findAll();
    }

    //根据u/p查询数据库
    @Override
    public String findUserByUP(User user) {
//        1.将密码加密
        byte[] bytes = user.getPassword().getBytes();
        String md5Pass = DigestUtils.md5DigestAsHex(bytes);
        user.setPassword(md5Pass);
        //2.根据用户名和密文查询数据库
        User userDB = userMapper.findUserByUP(user);
        //3.判断userDB是否有值
        if(userDB == null){
            //查询没有数据.返回null
            return null;
        }
        //密钥特点:唯一性、迷惑性  UUID几乎可以保证唯一性
        return UUID.randomUUID().toString().replace("-","");
    }
}

你可能感兴趣的:(京淘项目,html,css,vue)