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, ...
随机推荐
- Ajax请求参数到一个URL包含下划线或者v（_、v）
Ajax请求参数到一个URL包含下划线或者v 初学者的我,在F12时,看到这个地址就会很奇怪,不理解什么东西 经过查找了解到浏览器默认开启缓存,该参数不是其他请求所必须的,把它去掉不影响数据的获取 h ...
- IDEA mapping箭头要怎么样设置哈(Free MyBatis插件)
效果如下图: 当我们点击箭头的时候,会快速切换到我们相关联的类位置,就不用再像以前一样还要去找 而 Free MyBatis是一款让我们操作更加方便的插件,你值得拥有哦~~~ idea 选择 File ...
- linux-系统启动流程-7
1,BIOS开机自检,检查cpu硬件及开机启动顺序,查找第一个磁盘磁头的MBR信息并加载BOOtloader,然后将控制权交与bootloader 2, GRUB GRUB(Grand Unified ...
- 泛型（三）模拟commons-dbutils
最近在复习泛型的知识,想起以前使用commons-dbutils的时候,觉得这个工具太厉害了.所以,试着自己瞎写看能不能模拟commons-dbutils的功能. 1.commons-dbutils的 ...
- wannafly 练习赛11 F 求子树（树上莫队+换根）
链接:https://www.nowcoder.com/acm/contest/59/F 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K 64b ...
- Linux shell - cut命令用法(转载)
cut [-bn] [file] 或 cut [-c] [file] 或 cut [-df] [file] 使用说明 cut 命令从文件的每一行剪切字节.字符和字段并将这些字节.字符和字段写至标 ...
- wxs 及 获取节点 和 网络请求
wxs:微信小程序脚本语言,结合 wxml 可以构建页面的结构 在 wxml 中使用 wxs wxs 中的注释 : 单行注释:// 多行注释:/* */ wxs 在页面中的用法 在页面中引用 wxs ...
- Redis cluster Specification 笔记
ref: http://redis.io/topics/cluster-spec 1. 设计目标: 高性能:线性扩展:不支持合并操作:写操作安全:小概率丢弃:(对于每个key)只要有一个slave工作 ...
- hibernate缓存机制与N+1问题
在项目中遇到的趣事 本文基于hibernate缓存机制与N+1问题展开思考, 先介绍何为N+1问题 再hibernate中用list()获得对象: /** * 此时会发出一条sql,将30个学生全部查 ...
- 【洛谷T89353 【BIO】RGB三角形】
题目链接 这个题我一开始显然直接暴力 然后30分(但是应用数据分治的我通过复杂度判断并且其余输出0的能力硬生生的拿下了60分) 主要还是讲正解 这里有一个结论 这样一个图,红点的值可以通过两个黄点来判 ...