Axios 发起POST请求后端收不到数据
解决方法:
在引入Axios的文件定义一个默认请求转换方法即可,Qs
是Axios自带的不用另外安装
import Qs from 'qs';
Axios.defaults.transformRequest = function (data) {
return Qs.stringify(data)
};
后端打印$_GET
与$_POST
:
解决方法:
在引入Axios的文件定义一个默认请求转换方法即可,Qs
是Axios自带的不用另外安装
import Qs from 'qs';
Axios.defaults.transformRequest = function (data) {
return Qs.stringify(data)
};
后端打印$_GET
与$_POST
:
首先安装Mock.js
:
npm install mockjs --save-dev
参考官方文档创建配置文件:
const Mock = require('mockjs');
Mock.mock('/admin/worker/login', function () {
return {
res: 1,
msg: '登录成功'
}
})
export default Mock
在main.js中引入上一步创建的配置文件:
//判断仅在开发环境引入
if (process.env.NODE_ENV == 'development') {
require('./config/mock')
}
之后使用axios发起请求,地址匹配将会触发对应的规则,获取到配置文件中设置的数据
使用Axios时遇到的问题,在每个组件import
一次太麻烦,所以百度查怎么进行全局注册,但是百度查到的都是Vue2的注册方法,照着改会在import Vue from 'vue'
处报错,而Vue3更改了引入Vue
的方法与全局注册的方法,以Axios举例:
Vue2 main.js
:
import Vue from 'vue'
import Axios from 'axios'
Vue.prototype.$axios = Axios
Vue3 main.js
:
import { createApp } from 'vue'
import App from './App'
import Axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$axios = Axios
之后在组件中使用this.$axios
即可调用
Vue3接口文档:https://staging-cn.vuejs.org/api/application.html#app-config-globalproperties
先前写过小程序,语法比较接近Vue2,最近开始学Vue3,在组件语法上有些区别
Vue2 的组件语法:
<template>
HTML部分
</template>
<script>
export default {
data() {
return {
is_loading: true
//在此定义组件的变量
}
},
methods: {
getData: function () {}
//在此定义组件的方法
}
};
</script>
使用回调函数操作页面数据或做路由跳转时不可直接使用this
,回调函数中的this
关键字并不是被执行方法中的this
,所以会出错,可以定义一个that
来保存被执行方法的this
,在回调函数中使用that
即可
const that = this
axios
.get("/api/index.php")
.then(function (res) {
//直接使用that访问
that.spinning = false
that.$router.push({name: 'Index'})
})
在BrowserWindow.webPreferences
中加入webSecurity: false
即可
我使用了vue,配置文件为src/background.js
生产环境可以通过Nginx反向代理等设置来解决,本地开发环境可以不指定接口地址,设置本地虚拟代理服务器来解决。
1、首先设置仅在生产环境生效的接口地址,在入口文件main.js
加入:
import axios from 'axios';
if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://text.com/'; //生产环境接口地址
}
添加以下css代码
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
如果没有生效修改<!DOCTYPE HTML>标签与标签即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
方法非常简单,首先引入 jquery.js 和 jquery.pjax.js
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
然后在body内放一个div作为容器,并设置一个id,我设置的id是pjax-container
。
<div id="pjax-container">
//在此处放置跳转页面时要更新的部分
</div>
然后在容器外添加以下代码
<script type="text/javascript">
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[no-pjax])', {
container: '#pjax-container',
fragment: '#pjax-container',
timeout: 8000
}).on('pjax:send', function() { //Pjax加载中执行
$("#pjax_loading").show(); //显示遮罩层与加载动画
}).on('pjax:complete', function() { //Pjax加载完成执行
$("#pjax_loading").hide(); //隐藏遮罩层与加载动画
});;
</script>
正常应该绑定事件,试了会没成功,就换了定时检查当前位置的方法
//定时执行,更改按钮状态
setInterval(function(){
//判断当前位置是否处于顶部,是则显示按钮,否则隐藏
if($(window).scrollTop() == 0){
$('#back-top').hide();
}else{
$('#back-top').show();
}
}, 100);
//点击按钮返回顶部
$('#back-top-btn').click(function() {
$('body,html').animate({
scrollTop: 0
},1000);
return false;
});