目录
一、后端接收前端请求的方式
1、接收前端传递的单个参数
直接加在url后
通过？拼接
2、接收Json对象
3、一次传递多个数据不使用实例对象的方式
二、vue中使用动态数字 使展示的数字从0动态增长到指定数字
三、在Vue中使用动态数据
四、使用插槽获取表格中的一行数据
五、获取当前用户的位置信息
1、导入pom依赖
2、创建Http请求的config
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、在需要的地方调用
三、在Vue中使用动态数据
在指定属性前增加 ：号实现数据动态绑定
使用{{ }} 插值 引入实例中的数据值
四、使用插槽获取表格中的一行数据
template插槽
<el-table-column prop="admin" label="设为管理员" align="center">
<template slot-scope="scope">
<el-switch v-if="scope.row.account != 'admin2'" v-model="scope.row.admin" active-color="#13ce66"
inactive-color="#ff4949" active-value="1" inactive-value="0" @change="change(scope.row)">
</el-switch>
<div class="admin" v-else>超级管理员</div>
</template>
</el-table-column>
五、获取当前用户的位置信息
使用百度地图API进行调用获取当前的位置信息
1、导入pom依赖
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
</dependency>2、创建Http请求的config
@Configuration
public class OkHttpConfig {
@Bean
public RestTemplate restTemplate() {
return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
}
}3、创建请求接口
申请百度地图的ak，获取当前请求这个接口的用户地址
@RestController
public class MapController {//有百度开放平对生成private String ak = "自己的ak";
@Resource
private RestTemplate restTemplate;
@Value("${baidu-ak}")
private String ak;
@GetMapping("/getaddr")
public Object getAddrByUserIP(HttpServletRequest request) throws URISyntaxException {
String ip = request.getRemoteHost();
System.out.println(ip); //如果是内网访问，可以自己手动填写IP地址
//ip = "0.0.0.0/0";
// 百度地图API调用
String url = "https://api.map.baidu.com/location/ip?ak="+ak;
// 发送请求
ResponseEntity<Map> forEntity = restTemplate.getForEntity(new URI(url), Map.class);
Map result = forEntity.getBody();
return result;
}
}
