项目实用方式总结

目录

一、后端接收前端请求的方式

1、接收前端传递的单个参数

直接加在url后

通过？拼接

2、接收Json对象

3、一次传递多个数据不使用实例对象的方式

二、实现数据加密方式

三、vue中使用动态数字  使展示的数字从0动态增长到指定数字

动态数字常见异常

四、在Vue中使用动态数据

五、使用插槽获取表格中的一行数据

六、获取当前用户的位置信息

1、导入pom依赖

2、创建根据Http获取IP的工具类

3、创建请求接口

---

一、后端接收前端请求的方式

1、接收前端传递的单个参数

直接加在url后

前端发送方式

请求url：

method:"get"

url:"localhost:8989/api/" + id

后端接收的方式

@GetMapping("/api/{id}")

//根据数据类型进行接收并且 参数的名称要一致  一般使用String接收

public Result getMethod(Long id){}

或者添加注解  获取

public Result getMethod(@PathVariable Long id){}

通过？拼接

前端发送请求的方式

method:"get"

url:"http:localhsot:8989/api?id=" + id

后端接收请求的方式

@GetMapping("/api")

//只要问号后面的参数与方法参数相同就能够接收到

public Result getMethod(Long id){}

2、接收Json对象

前端发送数据的方式

封装成js实例对象在post请求中的data 进行传参，后端使用vo对象进行接收，要求js对象与vo对象的方法属性名称一致，才能进行自动转换

let param = {

        name: "888",

        pass:"uuu",

}

axios({

method:"post"

url:"http:localhost:8989/api",

data: param

})

 后端接收数据的方式

使用vo实体类进行接收

@PostMapping("/api")

//自动将json对象转为java对象

public Result getMethod(@RequestBody ParamVo paramVo){}

3、一次传递多个数据不使用实例对象的方式

前端发送请求的方式

将id放入url中，再将实体数据放入data中发送给后端

method:"post"

url:"http:localhost:8989/api/" + id

data: param

后端接收请求的方式

@PostMapping("/api/{id}")

public Result getMethod(@RequestBody ParamVo paramVo,@PathVariable Long id){}

二、实现数据加密方式

使用md5加密，对注册的用户密码进行加密，此操作是不可逆，无法直接解密

sal是加密盐，增强安全性的字符串 可自定义，
DigestUtils.md5Hex(val+slat);

三、vue中使用动态数字  使展示的数字从0动态增长到指定数字

使用countTo 组件

1、安装组件  npm install vue-count-to

2、在页面中引入 组件 import countTo from 'vue-count-to';

3、注册组件

4、在需要的地方调用

动态数字常见异常

 原因：endval的初始值必须是一个整数而不能是字符串形式，startval也同样不能是字符串

四、在Vue中使用动态数据

在指定属性前增加 ：号实现数据动态绑定

使用{{  }}  插值 引入实例中的数据值

五、使用插槽获取表格中的一行数据

template插槽

六、获取当前用户的位置信息

1、导入pom依赖

 
      net.dreamlu
      mica-ip2region
      2.5.4

2、创建根据Http获取IP的工具类

import javax.servlet.http.HttpServletRequest;
import java.net.InetAddress;
import java.net.UnknownHostException;

public class IpUtils {
    public static String getIpAddr(HttpServletRequest request) {
        String ip = request.getHeader("x-forwarded-for");
        if (ip == null || ip.length() == 0 || "unknow".equalsIgnoreCase(ip)) {
            ip = request.getHeader("Proxy-Client-IP");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("WL-Proxy-Client-IP");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getRemoteAddr();
            if (ip.equals("127.0.0.1")) {
                //根据网卡取本机配置的IP
                InetAddress inet = null;
                try {
                    inet = InetAddress.getLocalHost();
                } catch (Exception e) {
                    e.printStackTrace();
                }
                ip = inet.getHostAddress();
            }
        }
        // 多个代理的情况，第一个IP为客户端真实IP,多个IP按照','分割
        if (ip != null && ip.length() > 15) {
            if (ip.indexOf(",") > 0) {
                ip = ip.substring(0, ip.indexOf(","));
            }
        }
        return ip;
    }
}

3、创建请求接口

@RestController
public class MapController {
    @Autowired
    private Ip2regionSearcher ip2regionSearcher;

    @GetMapping("/getaddr")
    public Object getAddrByUserIP(HttpServletRequest request) throws URISyntaxException {
        String ip = IpUtils.getIpAddr(request);
        //根据ip获取位置信息
        String address = ip2regionSearcher.getAddress(ip);
        return address;
    }
}