前后端分离项目总结

一、前端遇到的问题

前端框架使用的是vue3

使用到了vant的移动端ui库

使用到了mitt消息订阅和发布

使用到了路由

使用axios发送请求

问题：使用pubsub-js遇到

1、mitt

(1)安装

npm install --save mitt

下载成功后可以查看package.json查看文件是否安装成功。

(2)创建

在src下创建plugins/mybus.js文件，编写如下配置

import mitt from 'mitt'

export default mitt();

(3)使用 

        不用在main.js中引入，想使用直接导入配置即可

        组件中引入

import mitt from '@/plugins/mybus'

        

  发送消息(只能发送一个参数)

 mitt.emit("details",details);//  key-value只能发送一个消息

订阅消息(会时刻订阅消息，尽管当前所在的方法没有被调用)

   mitt.on('details',(data)=>{
        console.log("接到消息传输的数据：",data)
        //使用 Object.assign(details,data);拷贝数据
        Object.assign(details,data);
     

      })

 (4) 遇到的问题

        不要使用在路由之间传递消息，会出现问题，在路由组件没有被激活的情况下无法接收到消息(目标路由组件打开一次后，再发送的消息才能被接收到)

2、路由

(1)安装

npm i vue-router

(2)、配置

在src 中创建router/index.js文件

在index.js中配置路由

//创建路由规则‘
//创建路由实例'


import AppNR from "@/components/AppNR";
import AppVc from "@/components/AppVc";
import AppSw from "@/components/AppSw";
import AppLs from "@/components/AppLs";
import {createRouter,createWebHashHistory} from "vue-router";


const routes=[
    {
        path:'/NR',
        name:'WER',

        component:AppNR
    },
    {
        path:'/VC',

        component:AppVc
    },
    {
        path: '/Sw',
        component: AppSw
    },
    {
        path: '/Ls',
        component: AppLs
    }

]

let route =createRouter({
    history:createWebHashHistory(),
    routes
})
export default route;

在main.js中引入路由

import route from './router/index'


createApp(App).use(Vant).use(route) .mount('#app')

(3)自定义跳转

组件中引入配置

import route from "@/router";

路由占位

<!--    阻止路由组件在切换时候被销毁-->
    <keep-alive>
      
      <router-view></router-view>
    </keep-alive>

路由跳转

组件引入路由后直接使用就可

  onMounted(()=>{
      route.push('/Vc') ;//路由跳转
    })

(4)路由传递参数

传递参数

   route.push({
        path:'/NR', //跳转路径
        query:{
          url,  //传递参数key:value  这样key和value名字一样就直接简写
          img  

        }
      })

接收参数

onMounted(()=>{
  console.log("接收到的路由参数url：",route.currentRoute.value.query.url);
  console.log("接收到的路由参数img：",route.currentRoute.value.query.img);

})

3、axios

(1)安装

npm i axios

(2)解决跨域问题，在vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,//关闭严格检查模式
  devServer:{
    //后端服务端地址
    proxy:'http://localhost:8080/'
  }
})

(3)使用

组件引入后直接使用即可

import axios from "axios";

向后端发送请求

  axios.get(`http://localhost:8081/getHome`)
          .then((response) => {

            Object.assign(home,response.data)

            console.log("请求传递成功",home)
          })
          .catch((error) => {
            console.log("数据传输失败:", error);
          })

向后端发送json数据参数(即使是带 斜杠/ 的参数也能发送)

    axios({
        url: "http://localhost:8081/getImgs/",  //前端地址+后端请求  配置了跨域直接使用前端地址即可
        method: "post",  //发送json数据 使用post方式
        contentType: "application/json",  //发送json数据
        data: {
            //发送的参数（这里url只是参数名字）
          url:route.currentRoute.value.query.url 
        }

      })
         .then((response) => {
            //   console.log("详情页面接收到数据：", response.data);
            Object.assign(Imgs, response.data)//拷贝数据
            console.log("收到后端传输的数据",Imgs);
            //  provide('details',details); 不行
            // console.log("封装好的数据:",details)

          })
          .catch((error) => {
            console.log("数据传输失败:", error);
          })

二、后端遇到的问题

1、接收前端的数据

接收前端端传来的json数据

对应前端axios发送json数据

需要引入

      <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.3</version>
        </dependency>

接收数据

使用@RequestBody注解

  @RequestMapping(value = "/getDetails/",method = RequestMethod.POST)
    public String getDetails(@RequestBody String url){
        System.out.println("收到前端消息"+url);
        //临时接收存储 UrlQt类 ，如果前端参数有多个，就添加对应UrlQt成员变量即可
        //对收到收到的json数据进行解析成对应的类对象
        UrlQt urlQt=JSON.parseObject(url,UrlQt.class);



        //业务数据
        Details details=homerServer.getDatalis(urlQt.getUrl());
       // System.out.println();


        System.out.println(details);
        //返回json数据
        return JSON.toJSONString(details);
    }

临时存储的UrlQt类

@Getter
@Setter
@EqualsAndHashCode
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class UrlQt {
    private String url;
}

2、解析json

(1)数据转成Json数据

JSON.toJSONString(obj);

对象转成Json (结果是js对象类型)
         toJSONString(OBJ);
         String jsonString= JSON.toJSONString(sutent);
         {"age":0,"id":14,"name":"你好0"}

 List集合转换成json (结果是js数组类型)
         [{"age":0,"id":14,"name":"你好0"},{"age":4,"id":14,"name":"你好4"}，{"age":5,"id":14,"name":"你好5"}]

 Map集合转成JSON  (结果是js对象类型)
  String json=  JSON.toJSONString(map);
  {0:{"age":0,"id":14,"name":"你好0"},1:{"age":1,"id":14,"name":"你好1"}}

(2)json数据转成java类型

Json-->对象
   JSON.parseObject(Json,XX.class)
   String Json="{\"age\":0,\"id\":14,\"name\":\"你好0\"}";
    Sutent da= JSON.parseObject(Json,Sutent.class);

Json-->list集合
 List<Sutent> list= JSON.parseArray(Json,Sutent.class);

Json-->map集合
    Map<Integer,Sutent> map=JSON.parseObject(Json,new TypeReference<Map<Integer,Sutent>>(){});

(3)、定制化json

用于自定义当前java转换json数据后的数据属性

需要序列化的类中
    属性
    设置属性序列化后的名字 @JSONField(name="XXX")
        @JSONField(name="MyAge")
        private Integer age;

     日期格式的序列化  @JSONField( format="YYYY-MM-dd")
        @JSONField( format="YYYY-MM-dd")
         private Date data

    是否序列化该字段 @JSONField(serialize=false)  默认为true
        @JSONField(serialize=false)
        private Integer age;