项目实用方式总结

飞翔的企鹅i

已于 2023-04-18 12:47:37 修改

阅读量951

点赞数

分类专栏： Vue项目总结文章标签：前端 java servlet

于 2023-01-07 09:51:42 首次发布

本文链接：https://blog.csdn.net/m0_56044262/article/details/128552450

版权

Vue项目总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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相关

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

使用countTo 组件

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

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

3、注册组件

4、在需要的地方调用

动态数字常见异常

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

2、在Vue中使用动态数据

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

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

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

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>

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

1、导入pom依赖

 <dependency>
      <groupId>net.dreamlu</groupId>
      <artifactId>mica-ip2region</artifactId>
      <version>2.5.4</version>
</dependency>

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;
    }
}

五、拦截器和过滤器问题

1、拦截器和过滤器的跨域解决

在拦截器和过滤器的方法中添加如下代码

//表示接受任意域名的请求,也可以指定域名
response.setHeader("Access-Control-Allow-Origin",request.getHeader("origin"));
//该字段可选，是个布尔值，表示是否可以携带cookie
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT,PATCH, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "*");
if (HttpMethod.OPTIONS.toString().equals(request.getMethod())){
    return  true;
}

2、重写Response响应体

当在拦截器和过滤器中对指定类型捕获时，希望返回一个状态信息，但是不能直接return，此时采用fastJSon依赖来自定义一个Response响应，写入response中

先导入fastJson依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.76</version>
</dependency>

在拦截器或过滤器中添加一个自定义response的方法

 public void response(Result fail,HttpServletResponse response) throws IOException {
     response.setCharacterEncoding("UTF-8");
     response.setContentType("application/json;charset=utf-8");
     PrintWriter writer = response.getWriter();
     //将返回信息写入response响应体中
     writer.write(JSON.toJSONString(fail));
     writer.close();
 }

此时在对应的拦截器或过滤器的方法判断中返回指定状态码只需要创建一个Result响应类，传入到该方法中，就能通过json格式响应给前端

例如

if (o == null || o == ""){
    //登录过期
    Result fail = Result.fail(StatusCode.LOGIN_OVER_TIME.code, StatusCode.LOGIN_OVER_TIME.msg);
    response(fail,response);
    return false;  //结束拦截方法
}