as the title
part of the code that implements the this.$Notice of Iview (some information is not convenient to display, sorry)
Notice,
because the this at this time does not point to the vue instance, so you can not find this method, you can directly
import { Notice } from 'iview'
Notice.warning()
personally, you are not recommended to send a request in this way. I hope you can read on, a relatively simple
you should be like this.
A method axios.js that separately encapsulates an axios request contains the post,get,fromdate request method.
// axios.js
import axios from 'axios';
import Cookies from 'js-cookie';
axios.defaults.timeout = 9999999;
axios.defaults.baseURL ='';
//http request
axios.interceptors.request.use(
config => {
let token = Cookies.get('token'); //cookiejs-cookie
if(config.method=='post'){ // post token
config.data = config.data;
if(token){
config.data.token = token
}
// else {
// console.log('token')
// }
config.headers = {
'Content-Type':'application/x-www-form-urlencoded',
}
} else if(config.method=='get'){ // get url
config.params.token = token
config.headers = {
'Content-Type':'application/x-www-form-urlencoded',
}
}
return config;
},
error => {
return Promise.reject(err);
}
);
//http response
axios.interceptors.response.use(
// token
response => {
if(response.data.errCode ==2){
router.push({
path:"/login",
querry:{redirect:router.currentRoute.fullPath}//
})
}
return response;
},
error => {
return Promise.reject(error)
}
)
/**
* get
* @param url
* @param data
* @returns {Promise}
*/
export function get(url,params={}){
return new Promise((resolve,reject) => {
axios({
url: url,
method: 'GET',
params: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
})
.then(res => {
if(res.data.code == 1001){
this.$Message.warning(',' + res.data.message);
this.$router.push({path:'/'})
return
}
resolve(res.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* post
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios({
url: url,
method: 'POST',
data: data,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
})
.then(res => {
if(res.data.code == 1001){
this.$Message.warning('' + res.data.message);
this.$router.push({path:'/'})
return
}
resolve(res.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* from
*/
export function get_from(URL, PARAMS) {
var p = new Promise((resolve, reject) =>{ //
var temp = document.createElement("form");
temp.action = URL;
temp.method = "get";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
this.$Loading.finish();
resolve(temp)
});
return p;
}
/**
* excel
*/
export function up_excel(URL, PARAMS) {
return new Promise((resolve,reject) => {
let token = this.$Cookies.get('token')
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
PARAMS.append('token', token)
axios.post(URL, PARAMS, config)
.then( res => {
resolve(res.data)
})
.catch(err=>{
reject(err)
})
})
}
then expose the methods in axios.js in main.vue. Then register globally for use (as below)
import {post,get,get_from,up_excel} from './api/axios'
Vue.prototype.$get=get;
Vue.prototype.$get_from = get_from;
Vue.prototype.$up_excel = up_excel;
at this point, you can use it again in the component. The methods used are
// url: data:
this.$post(url,data)
.then(res=>{
if(res.code == 200){
//
} else {
//
}
})
this.$get(url,data)
.then(res=>{
if(res.code == 200){
//
} else {
//
}
})
ps: I personally like to put the whole interface in a file like this linkUrl.js
let main = ''
const linkurl = {
login : main + '/login/login',
}
export default linkurl
then register globally
import linkurl from './api/LinkUrl'
Vue.prototype.$linkurl = linkurl
at this time, you can use this directly in the encapsulated request
this.$post(this.$linkurl.login, data) // this.$linkurl.loginjs
.then(res=>{
if(res.code == 200){
//
} else {
//
}
})
1, quote import {Notice} from 'iview';
, then Notice.warning ()
2, Vue.prototype.$Notice
try.
the this does not point to the vue instance at this time in main.js, so an error will be reported if you write it this way.
if you use the entire iView. You can use Vue.$Notice.warning ()
Previous: How to make up the number of arrays with empty arrays
Next: How does the echars pie chart bind click events to label?
as shown in the figure, I used the menu bar component of ivew in vue figure 1. I selected the content on the right side of the login log to display the contents of the login log, which is normal . then I set up a @ click route on the account profile d...
as shown in figure 1, the on-select event of iview s navigation menu is useful only if the drop-down suboption is selected. but what I need now is to trigger my custom click event when I click on the title "my assets ", such as @ click= "capital " ...
have you ever used the date-picker element of iview that can be displayed, but when you click to select a date, you report an error and the date does not come out? this is why ...
...
how to show hide rows without push,splice the bound data of table? Do you use v-show or v-if or do you implement it directly in render? ...
I use the iview component library (2.11.0) and follow the instructions on the official website https: www.iviewui.com docs . to use the date component, but in the local project, the font icon is not loaded, as shown in figure this is how I introduc...
daterange type of DatePiker in iView <DatePicker type="daterange" confirm placement="bottom-end" placeholder="Select date" style="width: 200px">< DatePicker> what type of data is stored in the sel...
is it true that all props of a child component must be passed : with a colon at the time of the parent component? in subcomponents: props: { a: { xxx }, b: { xxx } } when using subcomponents: <sub-comp :a="xxx" :b=&qu...
buttonproject-details.vue organization-project button iviewbutton after changing the warning for a long time, it is still . ...
write a route management page, click add Route pop-up modal, to fill out the form and verify it automatically. but the button cannot be rendered correctly with < div slot= "footer " > . Code: html fragment: <Modal v-model="addRouteModal&...
after the tree component in iview uses render custom content, clicking on the tree node no longer displays the background. How to add background color to the currently selected node in render rendering? 1, the default tree component, click 2render w...
I want to make a table with iview. The first column should look like this: :This study establishes the first mutational report of the TGFBR3 gene in correlation with ovarian failure. iviewapi : : ivew : render https: www.iviewui.com compo... i...
after using iview scaffolding for run build packaging, part of the route is 404, and there is no 404 pages after refreshing, only the home page does not have 404, it is no problem to run with run dev. PS: opens a new window (multiple pages) by adding ta...
...
< FormItem label= "responsible person: " prop= "chargeUserId " > <Select v-model="cubForm.chargeUserId" filterable clearable remote :remote-method="remoteMethod2" :loading="loading2...
the select component of iview has no effect on list styles and clicks after loading this component on demand, but there is no problem with using this select component after the global introduction of iview in main.js. Only style files are introduced in ...
title: itemDate, key: itemDate, type: html , align: center , render:(h,params)=>{ return h( div , { props: { type...
upload an image using the upload component of the iview component library, and the backend will verify the width and height of the image. If it is incorrect, the following error will be thrown: code:"failure" result:"upload.invalid.size&...
1. Use the upload component in iview. After selecting the file, click the upload button to start uploading the upload api document of 2.iview. the hook before before-upload uploads the file. The parameter is the uploaded file. If false or Promise is ...
columns2: [{title: other mobile phone numbers bound by this person , key: mobile }, {title: ,key: nameCount }, {title: ,key: queryOrgCount }, {title: ,key: mno }, ...