目录
一、后端接收前端请求的方式
1、接收前端传递的单个参数
直接加在url后
通过?拼接
2、接收Json对象
3、一次传递多个数据不使用实例对象的方式
二、实现数据加密方式
三、vue中使用动态数字 使展示的数字从0动态增长到指定数字
动态数字常见异常
四、在Vue中使用动态数据
五、使用插槽获取表格中的一行数据
六、获取当前用户的位置信息
1、导入pom依赖
2、创建根据Http获取IP的工具类
3、创建请求接口
前端发送方式
请求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){}
前端发送数据的方式
封装成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){}
前端发送请求的方式
将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);
使用countTo 组件
1、安装组件 npm install vue-count-to
2、在页面中引入 组件 import countTo from 'vue-count-to';
3、注册组件
4、在需要的地方调用
原因:endval的初始值必须是一个整数而不能是字符串形式,startval也同样不能是字符串
在指定属性前增加 :号实现数据动态绑定
使用{{ }} 插值 引入实例中的数据值
template插槽
超级管理员
net.dreamlu
mica-ip2region
2.5.4
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;
}
}
@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;
}
}