19: vue项目使用整理
1.1 axios 基本用法
安装：npm install axios -S # 也可直接下载axios.min.js文件
1、axios借助Qs对提交数据进行序列化
axios参考博客：https://www.jianshu.com/p/68d81da4e1ad
https://www.cnblogs.com/yiyi17/p/9409249.html
axios官网：https://www.npmjs.com/package/axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
<button @click="sendGet">GET方式发送AJAX请求</button>
</div> <script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendGet(){
// 1、发送get请求
axios({
url: 'http://127.0.0.1:8000/data/', //1、请求地址
method: 'get', //2、请求方法
params: {ids: [1,2,3],type: 'admin'}, //3、get请求参数 paramsSerializer: params => { //4、可选函数、序列化`params`
return Qs.stringify(params, { indices: false })
},
responseType: 'json', //5、返回默认格式json
headers: {'authorization': 'xxxtokenidxxxxx'}, //6、认证token
})
// 2、回调函数
.then(resp => {
console.log(resp.data);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
} }
});
}
</script>
</body>
</html>
get：axios发送get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
<button @click="sendPost">POST方式发送AJAX请求</button>
</div> <script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendPost(){
// 1、发送post请求
axios({
url: 'http://127.0.0.1:8000/data/', //1、请求地址
method: 'post', // 2、请求方法
data: Qs.stringify( //3、可选函数、序列化`data`
{ids: [1,2,3],type: 'admin'}, //4、提交数据
{ indices: false } // indices: false
),
responseType: 'json', //5、返回默认格式json
headers: {'authorization': 'xxxtokenidxxxxx'},//6、身份验证token
})
// 2、回调函数
.then(resp => {
console.log(resp.data);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
post: axios发送post请求
def data(request):
if request.method == 'GET':
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
print(request.GET.getlist('ids')) # 获取get请求中列表
data = {
'id':1,
'name': 'zhangsan'
}
return HttpResponse(json.dumps(data))
elif request.method == 'POST':
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
print(request.POST.getlist('ids')) # 获取post请求中的列表
data = {
'id':1,
'name': 'zhangsan',
'method': 'POST'
}
return HttpResponse(json.dumps(data))
views.py后端测试接口
#1、qs用途： 在 axios中，利用QS包装data数据
#2、安 装: npm install qs -S
#3、常见用法：
'''
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''
2、axios上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送axios请求</title>
</head>
<body>
<div id="itany">
<input type="file" name="fileUpload" id="fileUp" @change="change($event)" ref="inputFile" > <button @click="sendPost">POST方式发送axios请求</button>
</div> <script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendPost(){
// 1、发送post请求
var data = new FormData();
data.append("fafafa",this.file) // 图片对象
data.append("username","zhangsan") // 其他key-value值
axios({
url: 'http://127.0.0.1:8000/data/', //1、请求地址
method: 'post', //2、请求方法
data: data, //3、提交的数据
responseType: 'json', //4、返回默认格式json
headers: {'authorization': 'xxxtokenidxxxxx'},//5、身份验证token
})
// 2、回调函数
.then(resp => {
console.log(resp.data);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
change:function(event){
this.file = event.target.files[0]
},
},
});
}
</script>
</body>
</html>
test.html
def data(request):
if request.method == 'GET':
data = {
'id':1,
'name': 'zhangsan'
}
return HttpResponse(json.dumps(data))
elif request.method == 'POST':
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa')
print(username, fafafa) with open(fafafa.name, 'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code': True, 'data': request.POST.get('username')}
data = {
'id':1,
'name': 'zhangsan',
'method': 'POST'
}
return HttpResponse(json.dumps(data))
views.py
1.2 封装axios发送请求 & 添加拦截器
参考：https://blog.csdn.net/qq_40128367/article/details/82735310
1、初始化vue项目
# vue init webpack deaxios
# npm install axios -S
# cnpm install vuex -S
# cnpm install vant -S
# cnpm install nprogress -S
2、封装axios（创建 src/api 文件夹）
export default {
// api请求地址
API_URL: 'http://127.0.0.1:8000/'
}
config\urls.js 配置全局url变量
import Qs from 'qs'
import instance from './axiosinstance' // 导入自定义 axios 实例
// import instance from 'axios' // 也可以直接使用原生 axios 实例，但无法添加拦截器 /* 1. 发送GET请求 */
export function get(url, params){
return new Promise((resolve, reject) =>{
// 1、发送get请求
instance({
url: url, //1、请求地址
method: 'get', //2、请求方法
params: params, //3、get请求参数
headers: {
'Content-Type': 'application/json'
},
paramsSerializer: params => { //4、可选函数、序列化`params`
return Qs.stringify(params, { indices: false })
},
})
// 2、回调函数
.then(res => {
resolve(res.data);
})
// 3、捕获异常
.catch(err => {
reject(err.data)
}); });
} /* 2. 发送POST请求 */
export function post(url, params) {
return new Promise((resolve, reject) => {
instance({
url: url, //1、请求地址
method: 'post', // 2、请求方法
data: Qs.stringify( //3、可选函数、序列化`data`
params, //4、提交数据
{ indices: false } // indices: false
),
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
})
// 2、回调函数
.then(res => {
resolve(res.data);
})
// 3、捕获异常
.catch(err => {
reject(err.data)
})
});
}
src\api\ajax.js 封装axios请求
import Axios from 'axios'
import { Toast } from 'vant';
import URLS from '../../config/urls' //1、使用自定义配置新建一个 axios 实例
const instance = Axios.create({
baseURL: URLS.API_URL,
responseType: 'json',
}); //2、添加请求拦截器：每次发送请求就会调用此拦截器，添加认证token
instance.interceptors.request.use(
config => {
//发送请求前添加认证token，
config.headers.Authorization = sessionStorage.getItem('token')
return config
},
err => {
return Promise.reject(err)
}); // 3、响应拦截器
instance.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
); export default instance
src\api\axiosinstance.js 自定义axios 实例
import * as api from './api' export default api
src\api\index.js 导出api模块
import Vue from 'vue'
import Vuex from 'vuex'
import * as api from '../api/api' Vue.use(Vuex); export default new Vuex.Store({
modules:{
api
}
});
src\store\index.js 全局导出路由方法变量
import Vue from 'vue'
import App from './App'
import router from './router'
import NProgress from 'nprogress'
import store from './store/index' Vue.config.productionTip = false /* 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数 */
router.afterEach(transition => {
setTimeout(() => {
NProgress.done()
})
}) window.APP_INFO = process.env.APP_INFO router.beforeEach((to, from, next) => {
/*
* to: router即将进入的路由对象
* from: 当前导航即将离开的路由
* next: 进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
* */
NProgress.start()
// 使用假数据模拟张三已经登录
localStorage.setItem('user', JSON.stringify({'username':'zhangsan'}) )
if (to.path === '/login') {
localStorage.removeItem('user')
}
let user = JSON.parse(localStorage.getItem('user'))
if (!user && to.path !== '/login') { // 如果用户没有登录，且访问url不是 '/login' 调整到登录页
next({ path: '/login' })
} else {
next()
}
})
/* 拦截器介绍位置 */ /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
main.js 使用钩子函数进行路由控制
3、使用封装的axios发送请求
import URLS from '../../config/urls'
import { get, post } from './ajax'
let base = URLS.API_URL // 用户相关
export const postLogin = p => post(`${base}/login/`, p);
export const getLogin = p => get(`${base}/login/`, p);
src\api\api.js 定义请求路由方法
<template>
<div id="app">
<router-view/>
</div>
</template> <script>
import { postLogin,getLogin } from './api/api' // 导入路由请求方法
export default {
name: 'App',
created () {
this.testGet();
this.testPost();
},
methods: {
// 获取数据
testPost() {
// 调用api接口，并且提供了两个参数
postLogin({
type: 0,
sort: 1,
lst:[1,2,3,4,5]
}).then(res => {
// 获取数据成功后的其他操作
console.log(res,1111111)
}).catch(
)
}, testGet() {
// 调用api接口，并且提供了两个参数
getLogin({
type: 0,
sort: 1,
lst:[1,2,3,4,5]
}).then(res => {
// 获取数据成功后的其他操作
console.log(res,22222222222222)
}).catch(
)
},
}
}
</script>
App.vue 导入路由请求方法测试请求数据
4、如果需要上传图片或文件 src\api\ajax.js 中传入的 params参数不可使用Qs序列化
import Qs from 'qs'
import instance from './axiosinstance' // 导入自定义 axios 实例
// import instance from 'axios' // 也可以直接使用原生 axios 实例，但无法添加拦截器 /* 1. 发送GET请求 */
export function get(url, params){
return new Promise((resolve, reject) =>{
// 1、发送get请求
instance({
url: url, //1、请求地址
method: 'get', //2、请求方法
params: params, //3、get请求参数
headers: {
'Content-Type': 'application/json'
},
paramsSerializer: params => { //4、可选函数、序列化`params`
return Qs.stringify(params, { indices: false })
},
})
// 2、回调函数
.then(res => {
resolve(res.data);
})
// 3、捕获异常
.catch(err => {
reject(err.data)
}); });
} /* 2. 发送POST请求 */
export function post(url, params) {
var isFormData = Object.prototype.toString.call(params) === '[object FormData]'
var data = ''; // 如果是上传文件传入的 params是一个 FormData对象，不要用Qs序列化
if(isFormData){
data = params
}else {
data = Qs.stringify( //3、可选函数、序列化`data`
params, //4、提交数据
{ indices: false } // indices: false
)
}
return new Promise((resolve, reject) => {
instance({
url: url, //1、请求地址
method: 'post', // 2、请求方法
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
})
// 2、回调函数
.then(res => {
resolve(res.data);
})
// 3、捕获异常
.catch(err => {
reject(err.data)
})
});
}
src\api\ajax.js 封装axios请求(需要上传图片)
<template>
<div id="itany">
<input type="file" name="fileUpload" id="fileUp" @change="change($event)" ref="inputFile" > <button @click="sendPost">POST方式发送axios请求</button>
</div>
</template> <script>
import { createGoods } from '../../api/api'
export default {
data() {
return {}
},
methods: {
sendPost(){
// 1、发送post请求
var data = new FormData();
data.append("fafafa",this.file) // 图片对象
data.append("username","zhangsan") // 其他key-value值
createGoods(data)
// 2、回调函数
.then(resp => {
console.log(resp);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
change:function(event){
this.file = event.target.files[0]
},
}
}
</script> <style scoped> </style>
Goods.vue 上传图片测试
def data(request):
if request.method == 'GET':
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
data = {'id':1,'name': 'zhangsan'}
return HttpResponse(json.dumps(data))
elif request.method == 'POST':
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa')
with open(fafafa.name, 'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code': True, 'data': request.POST.get('username')}
data = {'id':1,'name': 'zhangsan','method': 'POST'}
return HttpResponse(json.dumps(data))
views.py
1.3 vue配置前端跨域
参考博客：https://www.cnblogs.com/qqing/p/8980199.html
1、初始化vue项目
vue init webpack my-project # 初始化项目
cd my-project # 进入项目路径
cnpm install # 安装依赖
cnpm install axios -S # 安装axios
2、在 src/main.js 中如下声明使用
import axios from 'axios';
Vue.prototype.$axios=axios;
3、在 config/index.js 中的 的dev 添加以下代码，设置一下proxyTable
//加入以下
proxyTable:{
'/api': {
target : 'http://127.0.0.1:8000', //设置你调用的接口域名和端口号.别忘了加http
changeOrigin : true, //允许跨域
pathRewrite : {
'^/api':''
// ''这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替。
// 比如我要调用'http://127.0.0.1:8000/index/'，直接写‘/api/index/’即可
}
}
},
4、在 config/dev.env.js 中设置以下代码
module.exports = merge(prodEnv, {
NODE_ENV: '"development"', //开发环境
API_HOST:"/api/"
})
5、在 config/prod.env.js 中设置以下代码
module.exports = {
NODE_ENV: '"production"',//生产环境
API_HOST:'"127.0.0.1:8000"'
}
6、修改src\App.vue文件
<template>
<div id="app">
<button @click="testAxios()">测试axios</button>
</div>
</template> <script>
import axios from 'axios';
export default {
data () {
return { }
},
methods:{
testAxios () {
this.$axios.get('/api/index/')
.then((response) => {
console.log(response.data)
})
}
}
}
</script>
7、说明
1. vue前端结局跨域主要思想是代理功能，比如：
vue项目：http://localhost:8080/
后端项目：http://127.0.0.1:8000/
2. 在浏览器端访问 http://localhost:8080/api/index/ 路径时，vue会匹配到以 /api/ 开头的请求
3. 此时 vue会使用代理功能 自动转发到 http://127.0.0.1:8000/index/ 此时就是同一个域，就不会触发跨域问题
11111111111111
19: vue项目使用整理的更多相关文章
- Vue项目打包常见问题整理
Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘. 1.js 路径问题 脚手架默认打包的路径为绝对路径,改为相对路径.修改 config/index.js 中 b ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 简单vue项目脚手架（vue+webpack2.0+vuex+vue-router）
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 利用 vue-cli 构建一个 Vue 项目
一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...
- Vue项目需求实现记录(永久更新)
1.表单校验功能: 在el-form标签中定义:rules="rules";ref="reference" 在el-form-item定义prop=" ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 转：如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- vue前端知识点整理
1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter, ...
随机推荐
- 【leetcode】1217. Play with Chips
题目如下: There are some chips, and the i-th chip is at position chips[i]. You can perform any of the tw ...
- 编译依赖ndt_gpu库的包，遇到Eigen报错
背景: 使用NDT建图,帧率比较慢,打算使用gpu加速计算. ndt_gpu是一个使用gpu加速ndt计算的库,首先在工作空间编译这个包. 然后在ndtMap包中链接这个库,其CMakelists.t ...
- Spring Boot教程（二十三）使用Swagger2构建强大的RESTful API文档（2）
添加文档内容 在完成了上述配置后,其实已经可以生产文档内容,但是这样的文档主要针对请求本身,而描述主要来源于函数等命名产生,对用户并不友好,我们通常需要自己增加一些说明来丰富文档内容.如下所示,我们通 ...
- eclipse导出java项目jar包（依赖第三方jar包）
一.在项目根目录下建一个文件:MANIFEST.MF 内容: Manifest-Version: 1.0 Class-Path: lib/commons-compress-1.9.jar lib/co ...
- MUI注
1.调试模式: 边改边看:左侧显示代码,右侧实时观看修改效果.可以调出“浏览器控制台”观测数据变化效果. 真机运行:电脑和手机都安装“360手机助手”,手机安装“F:\Program Files\HB ...
- （转）C#进阶之WebAPI
转:https://www.cnblogs.com/yuchenghao/p/10598825.html 首先第一点:什么是WebAPI? 首先我们了解一下.net framework 的框架构成, ...
- mysql数据库修改一行数据格式不成功问题
举个例子: mysql数据库中有两个字段publication_time.storage_time,我尝试着一个一个的修改字段的状态 #alter table books modify column ...
- iptables添加、删除端口
简洁才是王道, 下面是添加一个udp端口,端口号8566,即接收到8566端口的所有udp包 /sbin/iptables -I INPUT -p udp --dport -j ACCEPT 要删除这 ...
- 一、基础篇--1.1Java基础-反射的用途和实现
https://blog.csdn.net/SongYuxinIT/article/details/81872066 反射的核心是JVM在运行时才动态加载类或调用方法/访问属性,它不需要事先(写代码的 ...
- -----------------解决天天模拟器不能连接adb命令
cmd------输入adb connect 127.0.0.1:6555即可 查询日志:adb shell "logcat |grep OkHttp"