三.day9项目

1.构建后台项目

2.前台项目搭建

将前端项目放到IDEA维护的工作目录中

3.前端代码调试

App.vue

4.用户登录业务实现

4.1项目划分

前端项目网址: http://localhost:8080/
后端项目网址: http://localhost:8091/
用户操作项目请求的流程: 用户----前端服务器------后端服务器

4..2用户模块分析

表设计分析

注意事项：

1.密码  加密处理

2.created/updated 每张表中都有该字段

pojo分析

 

4.3用户登录业务实现

 请求路径：/user/login

请求方式：POST

 返回值格式如下：

    {"status":200,"msg":"服务器调用成功!","data":"1e893a97634847b3a8b499b173bea620"}
    
编辑SysResult对象

说明：该对象主要负责前端项目与后端项目的数据交互，几乎所有的后台服务器的返回值都是

SysResult对象

package com.jt.vo;

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

import java.io.Serializable;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult implements Serializable {
    private Integer status; //200业务成功 201业务失败
    private String msg;     //服务器提示信息
    private Object data;    //封装后台返回值

    public static SysResult fail(){
        return new SysResult(201,"业务执行失败",null);
    }

    public static SysResult success(){
        return new SysResult(200,"业务执行成功!", null);
    }

    //服务器返回值业务数据
    public static SysResult success(Object data){
        return new SysResult(200,"业务执行成功!", data);
    }

    public static SysResult success(String msg,Object data){

        return new SysResult(200,msg,data);
    }

}

页面js解析

1.路由跳转的规则

 2.axios全局定义

 使用：

 MD5介绍

MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特（Ronald Linn Rivest）设计，于1992年公开，用以取代MD4算法。这套算法的程序在 RFC 1321 标准中被加以规范。1996年后该算法被证实存在弱点，可以被加以破解，对于需要高度安全性的数据，专家一般建议改用其他算法，如SHA-2。2004年，证实MD5算法无法防止碰撞（collision），因此不适用于安全性认证，如SSL公开密钥认证或是数字签名等用途。
理论: 1.MD5不可以被破解的. 只能由明文加密为密文. 不可以反向编译
为保证安全：加盐值，限定登陆次数

编辑UserController

/**
     * 业务说明: 实现用户登录
     * 思想: 根据参数,查询数据库
     *      有值: 用户名和密码正确
     *      没有值: 用户名和密码错误
     *
     *  URL:/user/login
     *  参数: username/password json
     *  类型: post
     *  返回值: SysResult对象(token)
     */
    @PostMapping("/login")
    public SysResult login(@RequestBody User user){
        //需求:要求登录成功之后,返回值标识符信息
        String token = userService.login(user);
        //如果token为null,说明登录失败
        if(token == null || token.length()==0){
            return SysResult.fail();
        }
        //否则 正确返回
        return SysResult.success(token);
    }

编辑UserService

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }

    @Override
    public String login(User user) {
        String password=user.getPassword();
        String md5= DigestUtils.md5DigestAsHex(password.getBytes());
        user.setPassword(md5);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>(user);
        User userDB = userMapper.selectOne(queryWrapper);
        if(userDB==null){
            return null;
        }
        //使用UUID同台生成token，根据当前时间毫秒数+随机数利用hash算法生成
        //几乎可以保证不重复
        String token= UUID.randomUUID().toString()
                .replace("-", "");
        return token;


    }
}

同源策略

规定: 浏览器要求在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求.则满足同源策略.可以访问服务器.
三个要求:
请求协议://域名:端口号都必须相同!!!

要素:
1.浏览器的请求路径.
2.Ajax请求的网址

同源策略案例
案例1:
1.浏览器地址 http://localhost:8090/findAll
2.Ajax请求地址 http://localhost:8090/aaaa
满足同源策略.服务器可以正常访问.

案例2:
1.浏览器地址 http://localhost:8091/findAll
2.Ajax请求地址 http://localhost:8090/aaaa
不满足同源策略. 端口号不同. 属于跨域请求.

案例3:
1.浏览器地址 http://localhost:8090/findAll
2.Ajax请求地址 https://localhost:8090/aaaa
不满足同源策略. 协议不同. 属于跨域请求.

案例4:
前提: IP与域名映射
1.浏览器地址 http://www.baidu.com/findAll
2.Ajax请求地址 http://10.0.1.1/aaaa
不满足同源策略. 域名不同.

案例5:
1.浏览器地址 http://10.0.1.1:80/findAll
2.Ajax请求地址 http://10.0.1.1/aaaa
满足同源策略. 默认端口号就是80

案例6:
1.浏览器地址 https://10.0.1.1:443/findAll
2.Ajax请求地址 https://10.0.1.1:443/aaaa
满足同源策略
 

什么是跨域

违反了同源策略，就是跨域的请求

解决方法

JSONP(了解)
**JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。**由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

核心用法: 利用
返回值语法固定的: callback(JSON数据)

CORS方式
说明: CORS（Cross-origin resource sharing） “跨域资源共享”,现在的主流的浏览器都支持cors的方式. 如果需要跨域,则需要配置响应头信息.标识是否允许.

 @CrossOrigin可指定地址

CORS调用原理图