首先 我们先创建一个vue项目 使用 vue init webpack ”项目名称“ 命令 创建完后
该项目基于element来构建的所以需要npm i element-ui -S
然后在main.js里写一下内容
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);new Vue({
el: '#app',
render: h=> h(App)
});
然后我们配置一个发送请求的公共方法，在js里创建request.js 这里需要 npm install axios 和 npm install qs
import axios from 'axios'
import qs from 'qs'
const httpService = axios.create({
baseURL:'http://127.0.0.1:8000',
// timeout:3000
})
httpService.interceptors.request.use(
config => {
if (true) {
// config.headers['User-Token'] = ''
}
return config
},
error => {
Promise.reject(error)
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
// 统一处理状态
return response.data;
}
)
/*网络请求部分*/
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'GET',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'POST',
data: qs.stringify(params),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(response => {
console.log(response)
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload
}
文件创建好以后再main.js中配置
import axios from './js/request'
Vue.prototype.$ajax = axios
配置好后 我们以后发送请求就可以直接使用
this.$ajax.post("',{}).then((res) => {
if (res.status == 1) {
} else {
}
})
接下来就是我们的页面的设计和路由配置了
我们在components文件夹下创建home.vue
