React使用笔记（持续更新中）

文件结构：

根目录（项目名）

|-config

|-config.jsx

|-src

|-taskpane

|-components

|-Login.jsx

|-taskpane.html

|-taskpane.jsx

|-index.jsx

|-until

|-common.jsx

until/common.jsx代码：

bash 复制代码

// utils/request.js
import { API_BASE_URL } from "@config/config";
// 封装 fetch
export async function request(url,options = {},token="") {
  const finalUrl = API_BASE_URL + url;
  let defaultOptions=false;
  if(token){
    defaultOptions = {
      headers: {
        "Content-Type": "application/json",
        'Authorization': `Bearer ${token}`,
      },
      mode: 'cors',  // 确保是 CORS 模式
      ...options,
    };
  }else{
    defaultOptions = {
      headers: {
        "Content-Type": "application/json",
      },
      mode: 'cors',  // 确保是 CORS 模式
      ...options,
    };
  }
  

  try {
    const res = await fetch(finalUrl, defaultOptions);

    if (!res.ok) {
      throw new Error(`请求失败: ${res.status} ${res.statusText}`);
    }

    // 自动解析 JSON
    const data = await res.json();
    return data;
  } catch (err) {
    console.error("请求错误:", err);
    throw err;
  }
}

// 便捷方法：GET
export function get(url,params=false,token="") {
  let queryString = "";
  if (params) {
    const searchParams = new URLSearchParams();
    params.forEach((item, index) => {
      searchParams.append(index, item);
    });
    queryString = `?${searchParams.toString()}`;
  }
  return request(url + queryString, { method: "GET" },token);
}

// 便捷方法：POST
export async function post(url, params,token="") {
  return request(url, {
    method: "POST",
    body: JSON.stringify(params),
  },token);
}

config/config.jsx代码：

bash 复制代码

export const API_BASE_URL = "http://localhost";
export const API_URL = {
    Edit_Url:"/index/meal/dataupdate",
    Login_Url:"/index/meal/mlwlogin",
}

一、如果要在对应文件中引用非同级的文件

例如：index.jsx中需要应用Login.jsx、until/common.jsx和config/config.jsx。引用Login.jsx文件可以直接./components/Logins.jsx。但是使用until/common.jsx和config/config.jsx就有两种方式。

bash 复制代码

import * as React from "react";
import Login from "./components/Login";
import { API_URL } from "@config/config";
import {post} from "@utils/common";

const rootElementLogin = document.getElementById("container");
const rootLogin = rootElementLogin ? createRoot(rootElementLogin) : undefined;

async function greetUser() {
    let params={
        userid:123
    };
    const result = await post(API_URL.Edit_Url, params);
    return <div>
                <div>123</div>
                <Login></Login>
            </div>;
}

第一种：无需作配置，直接使用

bash 复制代码

import {API_URL} from "../../config/config.jsx";
import {post} from "../../until/commont.jsx";

第二种：需要做配置，可以直接使用定义的内容应用

bash 复制代码

import { API_URL } from "@config/config";
import {post} from "@utils/common";

配置内容：

bash 复制代码

//在tsconfig.json中加入配置
{
  "compilerOptions": {
    //配置根目录
    "baseUrl": ".",
    "paths": {
      "@config/*": ["config/*"],
      "@utils/*": ["utils/*"]
    }
},
  //配置根目录
  "include": ["config", "utils"]
}
//项目类型，配置构建工具。一般就两种vite.config.ts或者webpack.config.js
//webpack.config.js：
const path = require("path");
module.exports = async (env, options) => {
    resolve: {
      alias: {
        "@config": path.resolve(__dirname, "config"),
        "@utils": path.resolve(__dirname, "utils")
      },
    },
});


//vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@config': path.resolve(__dirname, './config'),
      '@utils': path.resolve(__dirname, './utils')
    }
  }
})