Skip to content

Commit 6f37a2e

Browse files
author
alistar
committed
引入store 改写了请求方式 完成首页和headtop
1 parent d5c6d2b commit 6f37a2e

File tree

11 files changed

+228
-18
lines changed

11 files changed

+228
-18
lines changed

‎src/commitDetail.txt

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
## commit详情
2-
***vue项目初始化 32b85057ab3eeaee10446d4727f165c9da1d5f46
3-
***css初始化 结构目录创建 03d02d43f7825424569c1b1b638255565026ca4e
4-
***移动端适配 路由懒加载 css书写方案 2498ba9725608131d7cc2eadea09daba108ce104
5-
***安装依赖 完成首页
2+
*** vue项目初始化 32b85057ab3eeaee10446d4727f165c9da1d5f46
3+
*** css初始化 结构目录创建 03d02d43f7825424569c1b1b638255565026ca4e
4+
*** 移动端适配 路由懒加载 css书写方案 2498ba9725608131d7cc2eadea09daba108ce104
5+
*** 安装依赖 完成首页
66
npm i vuex showdown iscroll fastclick better-scroll axios -S
77
npm i node-sass sass-loader http-proxy-middleware -D
88
5f18534dcb413eb2714da0f95e8ea4869ef489c4
9-
***引入mint-ui vue-light-swiper vue-awesome-swiper 写一个test页（mint-ui暂时放在生产依赖）
9+
*** 引入mint-ui vue-light-swiper vue-awesome-swiper 写一个test页（mint-ui暂时放在生产依赖）
1010
8e4ab7f5efaf0ad116d614a9ec71a4e6d9b09e87
11-
***封装axios 超时重新请求 添加svg的icon
11+
*** 封装axios 超时重新请求 添加svg的icon
1212
note: https://github.com/KokoTa/Vue2-transition 路由切换动画
13+
d5c6d2bf873068e96234181d1afc507fce71a19a
14+
*** 引入store 改写了请求方式 完成首页和登录页

‎src/components/header/head.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<header id='head_top'>
3+
<slot name='logo'></slot>
4+
<slot name='search'></slot>
5+
<section class="head_goback" v-if="goBack" @click="$router.go(-1)">
6+
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
7+
<polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/>
8+
</svg>
9+
</section>
10+
<router-link :to="userInfo? '/profile':'/login'" v-if='signinUp' class="head_login">
11+
<svg class="user_avatar" v-if="userInfo">
12+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
13+
</svg>
14+
<span class="login_span" v-else>登录|注册</span>
15+
</router-link>
16+
<section class="title_head ellipsis" v-if="headTitle">
17+
<span class="title_text">{{headTitle}}</span>
18+
</section>
19+
<slot name="edit"></slot>
20+
<slot name="msite-title"></slot>
21+
<slot name="changecity"></slot>
22+
<slot name="changeLogin"></slot>
23+
</header>
24+
</template>
25+
26+
<script>
27+
import {mapState, mapActions} from 'vuex'
28+
import {getStore} from '../../config/mUtils'
29+
import urls from '../../config/urls'
30+
export default {
31+
data () {
32+
return {}
33+
},
34+
mounted () {
35+
// 获取用户信息
36+
this.$axios.get(urls.user + '?user_id=' + getStore('user_id')).then((res) => {
37+
this.$store.commit('GET_USERINFO', res)
38+
})
39+
},
40+
props: ['signinUp', 'headTitle', 'goBack'],
41+
computed: {
42+
...mapState([
43+
'userInfo'
44+
])
45+
},
46+
methods: {
47+
...mapActions([
48+
// 'getUserInfo' 外部可以通过this.getUserInfo()调用这个action
49+
])
50+
}
51+
}
52+
</script>
53+
54+
<style lang="scss" scoped>
55+
@import '../../style/mixin';
56+
#head_top{
57+
background-color: $blue;
58+
position: fixed;
59+
z-index: 100;
60+
left: 0;
61+
top: 0;
62+
@include wh(100%, 1.95rem);
63+
}
64+
.head_goback{
65+
left: 0.4rem;
66+
@include wh(0.6rem, 1rem);
67+
line-height: 2.2rem;
68+
margin-left: .4rem;
69+
}
70+
.head_login{
71+
right: 0.55rem;
72+
@include sc(0.65rem, #fff);
73+
@include ct;
74+
.login_span{
75+
color: #fff;
76+
}
77+
.user_avatar{
78+
fill: #fff;
79+
@include wh(.8rem, .8rem);
80+
}
81+
}
82+
.title_head{
83+
@include center;
84+
width: 50%;
85+
color: #fff;
86+
text-align: center;
87+
.title_text{
88+
@include sc(0.8rem, #fff);
89+
text-align: center;
90+
font-weight: bold;
91+
}
92+
}
93+
</style>

‎src/config/env.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ let routerMode = 'hash'
99
let imgBaseUrl = ''
1010
if (process.env.NODE_ENV === 'development') {
1111
imgBaseUrl = '/img/'
12+
baseUrl = '//elm.cangdu.org'
1213
} else if (process.env.NODE_ENV === 'production') {
1314
baseUrl = '//elm.cangdu.org'
1415
imgBaseUrl = '//elm.cangdu.org/img/'

‎src/config/mUtils.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* eslint-disable */
2+
/**
3+
* 存储localStorage
4+
*/
5+
export const setStore = (name, content) => {
6+
if (!name) return
7+
if (typeof content !== 'string') {
8+
content = JSON.stringify(content)
9+
}
10+
window.localStorage.setItem(name, content)
11+
}
12+
13+
/**
14+
* 获取localStorage
15+
*/
16+
export const getStore = name => {
17+
if (!name) return
18+
return window.localStorage.getItem(name)
19+
}
20+
21+
/**
22+
* 删除localStorage
23+
*/
24+
export const removeStore = name => {
25+
if (!name) return
26+
window.localStorage.removeItem(name)
27+
}

‎src/config/urls.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
city: '/v1/cities',
3+
user: '/v1/user'
4+
}

‎src/main.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
import Vue from 'vue'
44
import App from './App'
55
import router from './router'
6+
import store from './store/'
67
import MintUI from 'mint-ui'
78
import 'mint-ui/lib/style.css'
89
import VueAwesomeSwiper from 'vue-awesome-swiper'
910
import 'swiper/dist/css/swiper.css'
1011
import './config/rem'
12+
import {baseUrl} from './config/env'
1113
import axios from 'axios'
1214
import FastClick from 'fastclick'
1315
if ('addEventListener' in document) {
@@ -23,12 +25,8 @@ const axiosIns = axios.create()
2325
// 在main.js设置全局的请求次数，请求的间隙
2426
axiosIns.defaults.retry = 4
2527
axiosIns.defaults.retryDelay = 1000
26-
if (process.env.NODE_ENV === 'development') {
27-
axiosIns.defaults.baseURL = 'http://192.168.***:8080'
28-
}
29-
axiosIns.defaults.retry = 4
30-
axiosIns.defaults.retryDelay = 1000
3128
axiosIns.defaults.timeout = 5000
29+
axiosIns.defaults.baseURL = baseUrl
3230
// 添加请求拦截器
3331
axiosIns.interceptors.request.use(function (config) {
3432
// 在发送请求之前做些什么
@@ -105,6 +103,7 @@ ajaxMethod.forEach((method) => {
105103
Vue.prototype.$axios = api
106104
const instance = new Vue({
107105
el: '#app',
106+
store,
108107
router,
109108
components: { App },
110109
template: '<App/>'

‎src/page/home/home.vue

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,58 @@
11
<template>
2-
<div>home
3-
<div>
4-
<button @click="goTest">效果测试页</button>
5-
</div>
2+
<div>
3+
<head-top signin-up='home'>
4+
<span slot='logo' class="head_logo" @click="reload">ele.me</span>
5+
</head-top>
66
</div>
77
</template>
88
<script>
9+
import headTop from '../../components/header/head'
10+
import urls from '../../config/urls'
911
export default {
1012
data () {
11-
return {}
13+
return {
14+
guessCity: '', // 当前城市
15+
guessCityid: '', // 当前城市id
16+
hotcity: [], // 热门城市列表
17+
groupcity: {} // 所有城市列表
18+
}
19+
},
20+
mounted () {
21+
// 获取当前城市
22+
// 获取热门城市
23+
let guessCityObj = this.getCity('guess')
24+
this.hotcity = this.getCity('hot')
25+
// 获取所有城市
26+
this.groupcity = this.getCity('group')
27+
if (this.guessCity) {
28+
this.guessCity = guessCityObj.name
29+
this.guessCityid = guessCityObj.id
30+
}
31+
},
32+
components: {
33+
headTop
34+
},
35+
computed: {
36+
// 将获取的数据按照A-Z字母开头排序
37+
sortgroupcity () {
38+
let sortobj = {}
39+
for (let i = 65; i <= 90; i++) {
40+
if (this.groupcity[String.fromCharCode(i)]) {
41+
sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)]
42+
}
43+
}
44+
return sortobj
45+
}
1246
},
1347
methods: {
14-
goTest () {
15-
this.$router.push('./test')
48+
getCity (typeValue) {
49+
this.$axios.get(urls.city + '?type=' + typeValue).then((res) => {
50+
return res
51+
})
52+
},
53+
// 点击图标刷新页面
54+
reload () {
55+
window.location.reload()
1656
}
1757
}
1858
}

‎src/store/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* eslint-disable */
2+
import Vue from 'vue'
3+
import Vuex from 'vuex'
4+
import mutations from './mutations'
5+
import actions from './actions'
6+
import getters from './getters'
7+
8+
Vue.use(Vuex)
9+
const state = {
10+
userInfo: null // 用户信息
11+
}
12+
export default new Vuex.Store({
13+
state,
14+
getters,
15+
actions,
16+
mutations
17+
})

‎src/store/mutations-types.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const RECORD_USERINFO = 'RECORD_USERINFO'
2+
export const GET_USERINFO = 'GET_USERINFO'

‎src/store/mutations.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* eslint-disable */
2+
import * as types from './mutations-types'
3+
import {setStore, getStore} from '../config/mUtils'
4+
export default {
5+
// 记录用户信息
6+
[types.RECORD_USERINFO] (state, info) {
7+
state.userInfo = info
8+
state.login = true
9+
setStore('user_id', info.user_id)
10+
},
11+
//获取用户信息存入vuex
12+
[types.GET_USERINFO] (state, info) {
13+
if (state.userInfo && (state.userInfo.username !== info.username)) {
14+
return
15+
}
16+
if (!state.login) {
17+
return
18+
}
19+
if (!info.message) {
20+
state.userInfo = {...info}
21+
} else {
22+
state.userInfo = null
23+
}
24+
}
25+
}

‎src/store/types.js

Whitespace-only changes.

0 commit comments

Comments
 (0)