Axios 发送请求示例
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。相比 jQuery 的 Ajax，Axios 更加现代和强大。以下是各种 Axios 请求的示例

1. 安装 Axios
bash
npm install axios
# 或通过 CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 基本 GET 请求
// 最简单的形式
axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

// 带参数的 GET 请求
axios.get('/api/user', {
    params: {
      ID: 12345
    }
  })
  .then(response => {
    console.log(response.data);
  });

3. POST 请求
// 发送 JSON 数据
axios.post('/api/user', {
    firstName: '张',
    lastName: '三',
    age: 30
  })
  .then(response => {
    console.log(response.data);
  });

// 发送表单数据 (application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('name', '李四');
params.append('age', '25');
axios.post('/api/user', params);

4. 并发请求
// 同时发起多个请求
function getUserAccount() {
  return axios.get('/api/user/123');
}

function getUserPermissions() {
  return axios.get('/api/user/123/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(results => {
    const account = results[0].data;
    const permissions = results[1].data;
    console.log(account, permissions);
  });

5. 文件上传
// 通过 FormData 上传文件
const formData = new FormData();
const file = document.querySelector('input[type="file"]').files[0];
formData.append('file', file);

axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`${percentCompleted}%`);
    }
  })
  .then(response => {
    console.log('上传成功:', response.data);
  });

6. 自定义配置
// 创建自定义实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例
instance.get('/user')
  .then(response => {
    console.log(response.data);
  });

7. 请求和响应拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data; // 直接返回data部分
}, error => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理未授权情况
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

8. 错误处理
axios.get('/api/user/123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器返回状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.log(error.request);
    } else {
      // 设置请求时发生错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

9. 取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/api/user/123', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('请求已取消:', thrown.message);
  } else {
    // 处理其他错误
  }
});
// 取消请求
source.cancel('用户取消了请求');

10. 全局配置
// 设置全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

11. 使用 async/await
async function getUser() {
  try {
    const response = await axios.get('/api/user/123');
    console.log(response.data);
  } catch (error) {
    console.error('获取用户失败:', error);
  }
}
// 并发请求
async function getData() {
  try {
    const [user, orders] = await Promise.all([
      axios.get('/api/user/123'),
      axios.get('/api/orders?user=123')
    ]);
    console.log(user.data, orders.data);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

jQuery发送Ajax请求示例
  https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js
1. 基本GET请求
$.ajax({
  url: '/api/data',  // 请求地址
  type: 'GET',       // 请求方法
  dataType: 'json',  // 预期返回的数据类型
   beforeSend:function(){
  },
  success: function(data) {
    // 请求成功处理
    console.log('获取数据成功:', data);
  },
  complete:function(){
  },
  error: function(xhr, status, error) {
    // 请求失败处理
    console.error('获取数据失败:', error);
  }
});

2. 带参数的GET请求
$.ajax({
  url: '/api/search',
  type: 'GET',
  data: {           // 发送到服务器的数据
    keyword: 'jQuery',
    page: 1
  },
  dataType: 'json',
  success: function(data) {
    console.log('搜索结果:', data);
  },
  error: function(xhr, status, error) {
    console.error('搜索失败:', error);
  }
});

3. POST请求
$.ajax({
  url: '/api/users',
  type: 'POST',
  contentType: 'application/json',  // 发送JSON数据
  data: JSON.stringify({           // 转换为JSON字符串
    name: ' ',
    age: 25,
    email: ' '
  }),
  dataType: 'json',
  success: function(data) {
    console.log('创建用户成功:', data);
  },
  error: function(xhr, status, error) {
    console.error('创建用户失败:', error);
  }
});

4. 表单数据提交
$('#myForm').submit(function(e) {
  e.preventDefault();  // 阻止表单默认提交行为
  
  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: $(this).serialize(),  // 序列化表单数据
    dataType: 'json',
    success: function(data) {
      alert('表单提交成功!');
    },
    error: function(xhr, status, error) {
      alert('表单提交失败: ' + error);
    }
  });
});

5. 文件上传
$('#fileUpload').change(function() {
  var formData = new FormData();
  formData.append('file', this.files[0]);
  $.ajax({
    url: '/api/upload',
    type: 'POST',
    data: formData,
    processData: false,  // 不处理数据
    contentType: false,  // 不设置内容类型
    dataType: 'json',
    success: function(data) {
      console.log('文件上传成功:', data);
    },
    error: function(xhr, status, error) {
      console.error('文件上传失败:', error);
    },
    xhr: function() {
      // 获取原生XHR对象
      var xhr = $.ajaxSettings.xhr();
      if (xhr.upload) {
        // 添加上传进度事件
        xhr.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {
            var percent = Math.round((e.loaded / e.total) * 100);
            $('#progress').text(percent + '%');
          }
        }, false);
      }
      return xhr;
    }
  });
});

6. 简写方法
jQuery提供了一些Ajax的简写方法：
$.get();
$.get('/api/data', {id: 123}, function(data) {
  console.log('获取数据:', data);
}, 'json');

$.post();
$.post('/api/users', {name: '李四', age: 30}, function(data) {
  console.log('创建用户:', data);
}, 'json');

$.getJSON();
$.getJSON('/api/data.json', function(data) {
  console.log('JSON数据:', data);
});

7. 全局Ajax设置
可以设置全局Ajax默认值：
$.ajaxSetup({
  timeout: 5000,  // 5秒超时
  headers: {      // 设置请求头
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});

8. 使用Promise风格
jQuery Ajax也支持Promise风格调用：
$.ajax({
  url: '/api/data',
  type: 'GET',
  dataType: 'json'
})
.done(function(data) {
  console.log('成功:', data);
})
.fail(function(xhr, status, error) {
  console.error('失败:', error);
})
.always(function() {
  console.log('请求完成');
});

找到\app\index\taglib\HkCms.php,给breadcrumb添加home字段调用

'breadcrumb'  => ['attr'=>'catid,symbol,home,class,currentstyle,isclick', 'close'=>0],

找到tagBreadcrumb函数添加home默认值；

public function tagBreadcrumb($tag)
    {
        $tag['symbol'] = $tag['symbol'] ?? ' > ';
        $tag['class']   = $tag['class'] ?? '';
        $tag['home']   = $tag['home'] ?? '首页';

找到\app\index\model\cms\Category.php里面getBreadcrumb函数调用 $tag['home']；

 public function getBreadcrumb($tag, $cate = [])
    {
        $home_url = '/';
        //$home_title = lang("Home");
        $home_title = $tag['home'];

        $catid = !empty($tag['catid']) ? $tag['catid'] : ($cate['id']??'');
        if (empty($catid)) {
            return '';
        }

模板里面使用

{hkcms:breadcrumb home="这是自定首页字符串" class="active_a" symbol=" / " /}

\app\common\services\config\ConfigService.php找到getAllByApi()函数
在里面添加需要剔除的站点配置字段

找到\app\admin\controller\cms\Archives.php控制器，修改add和push两个函数；