Skip to content

Commit 78afd2b

Browse files
author
alistar
committed
完成登录 axios默认不发送cookie
1 parent 407b001 commit 78afd2b

File tree

12 files changed

+452
-128
lines changed

12 files changed

+452
-128
lines changed

‎src/NOTE.txt

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,15 @@ style.less 文件是入口文件, 负责引入其他各个子样式文件, 最
1818
暂无
1919

2020
####关于路由懒加载
21-
解释：当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
22-
1结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/lazy-loading
21+
解释：当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，
22+
然后当路由被访问的时候才加载对应组件，这样就更加高效了
23+
1结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载
24+
https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/lazy-loading
2325
区分开发环境和生产环境的话 通过环境变量，分别是用require和import
2426
副作用：https://github.com/PanJiaChen/vue-element-admin/issues/292
2527
1（加强版）使用babel 的 plugins babel-plugin-dynamic-import-node
26-
2使用require.ensure 不区别开发和生产，基本被1代替 webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中
28+
2使用require.ensure 不区别开发和生产，基本被1代替 webpack 在编译时，会静态地解析代码中的 require.ensure()，
29+
同时将模块添加到一个分开的 chunk 当中
2730
这个新的 chunk 会被 webpack 通过 jsonp 来按需加载
2831
建议使用1的加强版
2932

‎src/components/common/alertTip.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
</template>
1313

1414
<script>
15-
export default {
16-
props: ['alertText'],
17-
methods: {
18-
closeTip () {
19-
this.$emit('closeTip')
20-
}
15+
export default {
16+
props: ['alertText'],
17+
methods: {
18+
closeTip () {
19+
this.$emit('closeTip')
2120
}
2221
}
22+
}
2323
</script>
2424
<style lang="scss">
2525
@import '../../style/alertTip.scss';

‎src/components/common/loading.vue

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,40 @@ export default {
2727
}
2828
</script>
2929
<style lang="scss">
30-
@import '../../style/loading.scss';
30+
// @import '~@/style/loading.scss';
31+
@import '../../style/mixin.scss';
32+
@keyframes load {
33+
0% {transform: translateY(0px);}
34+
50% {transform: translateY(-50px);}
35+
100% {transform: translateY(0px);}
36+
};
37+
@keyframes ellipse {
38+
0% {transform: scale(1)}
39+
50% {transform: scale(0.3)}
40+
100% {transform: scale(1)}
41+
}
42+
.loading_container {
43+
position: fixed;
44+
left: 50%;
45+
top: 50%;
46+
transform: translate(-50%, -50%);
47+
@include wh(2.5rem, 2.5rem);
48+
.load_img {
49+
position: relative;
50+
z-index: 11;
51+
@include wh(100%, 100%);
52+
background: url('../../images/icon_loading.png') no-repeat 0 0;
53+
background-size: 2.5rem auto;
54+
animation: load .6s infinite ease-in-out;
55+
transform: translateY(0px);
56+
}
57+
.load_ellipse {
58+
position: absolute;
59+
left: 0;
60+
top: 2.2rem;
61+
z-index: 10;
62+
@include wh(2.6rem, 2rem);
63+
animation: ellipse .6s infinite ease-in-out;
64+
}
65+
}
3166
</style>

‎src/components/common/shoplist.vue

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<div class="shoplist_container">
3-
<ul v-load-more="loadmore" v-if="shopListArr.length" type="1">
3+
<ul v-load-more="loadmoreMethod" v-if="shopListArr.length" type="1">
44
<router-link v-for="item in shopListArr" tag="li" :key="item.id" class="shop_li" :to="{path: 'shop', query: {geohash: geohash, id: item.id}}">
55
<section>
6-
<img :src="imageBaseUrl + item.image_path" class="shop_img">
6+
<img :src="imgBaseUrl + item.image_path" class="shop_img">
77
</section>
88
<hgroup class="shop_right">
9-
<headedr class="shop_detail_header"><!--preminum额外费用-->
10-
<h4 :class="item.is_premium ? 'preminum' : ''" class="shop_title ellipsis">{{item.name}}</h4>
11-
<ul class="shop_detal_ul">
9+
<header class="shop_detail_header"><!--preminum额外费用-->
10+
<h4 :class="item.is_premium ? 'premium' : ''" class="shop_title ellipsis">{{item.name}}</h4>
11+
<ul class="shop_detail_ul">
1212
<li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
1313
</ul>
14-
</headedr>
14+
</header>
1515
<h5 class="rating_order_num">
1616
<section class="rating_order_num_left">
1717
<section class="rating_section">
@@ -29,23 +29,24 @@
2929
</h5>
3030
<h5 class="fee_distance">
3131
<p class="fee">
32-
￥{{item.minimum_order_amount}}起送<span class="segmentation">/</span>{{item.piecewise_agent_fee.tips}}
32+
<!-- ￥{{item.minimum_order_amount}}起送<span class="segmentation">/</span>{{item.piecewise_agent_fee.tips}} -->
33+
￥{{item.float_minimum_order_amount}}起送<span class="segmentation">/</span>{{item.piecewise_agent_fee.tips}}
3334
</p>
3435
<p class="distance_time">
3536
<span v-if="Number(item.distance)">{{item.distance > 1000 ? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
3637
<span class="segemtation">/</span>
3738
</span>
3839
<span v-else>{{item.distance}}</span>
3940
<span class="segemtation">/</span>
40-
<span class="order_time">{{item.order_load_time}}</span>
41+
<span class="order_time">{{item.order_lead_time}}</span>
4142
</p>
4243
</h5>
4344
</hgroup>
4445
</router-link>
4546
</ul>
4647
<ul v-else class="animation_opacity">
4748
<li class="list_back_li" v-for="item in 10" :key="item">
48-
<img :src="imageUrl" class="list_back_svg">
49+
<img src="../../images/shopback.svg" class="list_back_svg">
4950
</li>
5051
</ul>
5152
<p class="empty_data" v-if="touched">没有更多了</p>
@@ -71,15 +72,15 @@ import urls from '../../config/urls'
7172
export default {
7273
data () {
7374
return {
74-
imageUrl: '../images/shopback.svg',
75+
imagePath: '../images/shopback.svg',
7576
offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
7677
shopListArr: [], // 店铺列表数据
7778
preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
7879
showBackStatus: false, // 显示返回顶部按钮
7980
showLoading: true, // 显示加载动画
8081
touchend: false, // 没有更多数据
81-
imgBaseUrl: imgBaseUrl,
82-
touched: false
82+
touched: false,
83+
imgBaseUrl
8384
}
8485
},
8586
mounted () {
@@ -97,19 +98,10 @@ export default {
9798
])
9899
},
99100
methods: {
100-
async initData () {
101-
let res = await this.getShopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId)
102-
this.shopListArr = [...res]
103-
if (res.length < 20) {
104-
this.touchend = true
105-
}
106-
this.hideLoading()
107-
// 开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
108-
showBack(callbackStatus => {
109-
this.showBackStatus = callbackStatus
110-
})
101+
initData () {
102+
this.getShopList('init', this.latitude, this.longitude, this.offset, this.restaurantCategoryId)
111103
},
112-
getShopList (latitude, longitude, offset = 0, restaurantCategoryId = '', restaurantCategoryIds = '', orderBy = '', deliveryMode = '', supportIds = []) {
104+
getShopList (flag, latitude, longitude, offset = 0, restaurantCategoryId = '', restaurantCategoryIds = '', orderBy = '', deliveryMode = '', supportIds = []) {
113105
let supportStr = ''
114106
supportIds.forEach(item => {
115107
if (item.status) {
@@ -119,10 +111,38 @@ export default {
119111
let query = '?latitude=' + latitude + '&longitude=' + longitude + '&offset=' + offset + '&limit=20' + '&restaurant_category_id=' + restaurantCategoryId + '&restaurant_category_ids[]' + restaurantCategoryIds
120112
query += '&order_by=' + orderBy + '&delivery_mode[]=' + deliveryMode + supportStr
121113
this.$axios.get(urls.shopList + query).then((res) => {
122-
return res
114+
let length = res.data.length
115+
if (length > 0) {
116+
this.hideLoading()
117+
switch (flag) {
118+
case 'init':
119+
this.shopListArr = [...res.data]
120+
if (length < 20) {
121+
this.touchend = true
122+
}
123+
// 开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
124+
showBack(callbackStatus => {
125+
this.showBackStatus = callbackStatus
126+
})
127+
break
128+
case 'load':
129+
this.shopListArr = [...this.shopListArr, ...res.data]
130+
// 当获取数据小于20，说明没有更多数据，不需要再次请求数据
131+
if (length < 20) {
132+
this.touchend = true
133+
return
134+
}
135+
this.preventRepeatReuqest = false
136+
break
137+
case 'listenPropChange':
138+
// 考虑到本地模拟数据是引用类型，所以返回一个新的数组
139+
this.shopListArr = [...res.data]
140+
break
141+
}
142+
}
123143
})
124144
},
125-
async loadMore () {
145+
loadmoreMethod () {
126146
if (this.touchend) {
127147
return
128148
}
@@ -134,28 +154,17 @@ export default {
134154
this.preventRepeatReuqest = true
135155
// 数据的定位加20位
136156
this.offset += 20
137-
let res = await this.getShopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId)
138-
this.hideLoading()
139-
this.shopListArr = [...this.shopListArr, ...res]
140-
// 当获取数据小于20，说明没有更多数据，不需要再次请求数据
141-
if (res.length < 20) {
142-
this.touchend = true
143-
return
144-
}
145-
this.preventRepeatReuqest = false
157+
this.getShopList('load', this.latitude, this.longitude, this.offset, this.restaurantCategoryId)
146158
},
147159
// 返回顶部
148160
backTop () {
149161
animate(document.body, {scrollTop: '0'}, 400, 'ease-out')
150162
},
151163
// 监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
152-
async listenPropChange () {
164+
listenPropChange () {
153165
this.showLoading = true
154166
this.offset = 0
155-
let res = await this.getShopList(this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds)
156-
this.hideLoading()
157-
// 考虑到本地模拟数据是引用类型，所以返回一个新的数组
158-
this.shopListArr = [...res]
167+
this.getShopList('listenPropChange', this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds)
159168
},
160169
// 开发环境与编译环境loading隐藏方式不同
161170
hideLoading () {

‎src/config/env.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ let baseUrl = ''
88
let routerMode = 'hash'
99
let imgBaseUrl = ''
1010
if (process.env.NODE_ENV === 'development') {
11-
imgBaseUrl = '/img/'
11+
imgBaseUrl = '//localhost:8001'
1212
baseUrl = '//localhost:8001'
13+
// baseUrl = '//192.168.5.192:8001'
1314
} else if (process.env.NODE_ENV === 'production') {
1415
baseUrl = '//elm.cangdu.org'
1516
imgBaseUrl = '//elm.cangdu.org/img/'

‎src/config/urls.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,9 @@ export default {
44
searchplace: '/v1/pois/',
55
msiteAddress: '/v2/pois/',
66
shopList: '/shopping/restaurants/',
7-
misteFoodType: '/v2/index_entry/'
7+
misteFoodType: '/v2/index_entry/',
8+
getMobileCode: '/v4/mobile/verify_code/send',
9+
getCaptchas: '/v1/captchas',
10+
checkExist: '/v1/users/exists',
11+
accountLogin: '/v2/login'
812
}

‎src/main.js

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ axiosIns.defaults.retry = 4
2121
axiosIns.defaults.retryDelay = 1000
2222
axiosIns.defaults.timeout = 40000
2323
axiosIns.defaults.baseURL = baseUrl
24+
axiosIns.defaults.withCredentials = true
2425
// 添加请求拦截器
2526
axiosIns.interceptors.request.use(function (config) {
2627
return config
@@ -36,29 +37,30 @@ axiosIns.interceptors.response.use(function (response) {
3637
}, function (error) {
3738
// 请求错误时做些事
3839
// 请求超时的之后，抛出 error.code = ECONNABORTED的错误..错误信息是 timeout of xxx ms exceeded
39-
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
40-
var config = error.config
41-
config.__retryCount = config.__retryCount || 0
42-
if (config.__retryCount >= config.retry) {
43-
// Reject with the error
44-
// window.location.reload()
45-
return Promise.reject(error)
46-
}
47-
// Increase the retry count
48-
config.__retryCount += 1
49-
// Create new promise to handle exponential backoff
50-
var backoff = new Promise(function (resolve) {
51-
setTimeout(function () {
52-
// console.log('resolve')
53-
resolve()
54-
}, config.retryDelay || 1)
55-
})
56-
return backoff.then(function () {
57-
return axiosIns(config)
58-
})
59-
} else {
60-
return Promise.reject(error)
61-
}
40+
// if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
41+
// var config = error.config
42+
// config.__retryCount = config.__retryCount || 0
43+
// if (config.__retryCount >= config.retry) {
44+
// // Reject with the error
45+
// // window.location.reload()
46+
// return Promise.reject(error)
47+
// }
48+
// // Increase the retry count
49+
// config.__retryCount += 1
50+
// // Create new promise to handle exponential backoff
51+
// var backoff = new Promise(function (resolve) {
52+
// setTimeout(function () {
53+
// // console.log('resolve')
54+
// resolve()
55+
// }, config.retryDelay || 1)
56+
// })
57+
// return backoff.then(function () {
58+
// return axiosIns(config)
59+
// })
60+
// } else {
61+
// return Promise.reject(error)
62+
// }
63+
return Promise.reject(error)
6264
})
6365
const ajaxMethod = ['get', 'post']
6466
const api = {}
@@ -69,7 +71,7 @@ ajaxMethod.forEach((method) => {
6971
if (response.data.status === 401) {
7072
instance.$router.replace('/login')
7173
} else if (response.data.status === 200) {
72-
resolve(response.data.data)
74+
resolve(response.data)
7375
}
7476
}).catch(function (error) {
7577
console.log(error)

0 commit comments

Comments
 (0)