前端页面带值跳转

前端页面带值跳转

  1. querry=>url searchParamers,url后附加参数,传递的值长度与有限
  2. vuex(全局状态管理),搜索页面将关键词塞到状态中,所搜结果页从状态取值。

使用axios整合前后端

axios官网:axios

  1. 在前端框架中整合axios

    json 复制代码
     npm install axios
  2. 新建plugins目录,新建myAxios

    js 复制代码
    import axios from "axios";
    // Set config defaults when creating the instance
    //自己创建一个axios实例,自己定义发送请求的url(像哪个地址发送请求)
    //如果不自己定义的话每个请求前都要自己添加完整的域名,如果域名换了所有的url都要改变
    //可以把myAsios理解为axios的一个实例
    const myAxios = axios.create({
        baseURL: 'https://localhost:8080/api'//后端的统一请求地址
    });
    //自定义健全的请求头
    // Alter defaults after instance has been created
    //instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    
    //可以在每个请求前或请求结束后做一些事情,比如说判断请求参数是否符合要求,如果不可以不让像后端发送请求
    // 添加请求拦截器
    myAxios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        console.log('我要发送请求了',config)
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 全局响应拦截器
    myAxios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        console.log('已经收到你的响应值了',response)
        return response;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    
    
    export default myAxios;
  3. 页面挂载完毕,加载请求

    js 复制代码
    const route = useRoute();
    //取到搜索的标签
    const { tags } = route.query;
    
    //页面初始化好以后,执行从远程获取数据的方法
    onMounted(()=>{
      myAxios.get('/user/search/tags', {
      params: {
        tagNameList: tags
      }
      })
          .then(function (response){
        console.log('user/search/tags succeed',response);
        showSuccessToast('请求成功!');
      })
          .catch(function (error){
      console.log('user/search/tags succeed',error);
            showFailToast('请求失败!');
    
      })
    })
  4. 测试出现跨域问题

    • 什么是跨域问题
      • 前端要发送请求的地址和后端发送给的服务器地址域名端口号协议不一致,浏览器会判断为不安全判定为跨域
    • 如何解决
      • 在后端spring框架的userController类中加@CrossOrigin注解,例如@CrossOrigin(origins="http://loclahost:5173")origins参数为前端域名
    java 复制代码
    @CrossOrigin(origins = "http://localhost:5173/")
  5. 结果展示

相关推荐
gqkmiss23 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃29 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰33 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye40 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm42 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互