修改了api集中化 搞定了vuex

This commit is contained in:
luyuan 2020-10-10 10:19:38 +08:00
parent 8bf7b662d5
commit a67333be23
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
7 changed files with 112 additions and 61 deletions

View File

@ -5,6 +5,18 @@
</div> -->
<router-view/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import store from './store';
export default defineComponent({
setup(){
if(store.state.islogin){
store.dispatch("setUserInfo");
}
}
})
</script>
<style lang="scss">
.one-line-hide {

View File

@ -1,20 +1,35 @@
import axios from '../config/axiosConfig'
import { AxiosRequestConfig, CustomSuccessData } from 'axios';
import { getValue } from '@/utils/common';
// 泛型接口
export interface Get {
<T>(url: string, params?: object, config?: AxiosRequestConfig): Promise<CustomSuccessData<T>>;
}
axios.interceptors.response.use((response)=>{
return response.data;
return response;
},(error)=>{
return error;
})
function get(url: string,data?: object) {
return axios.get(url,{params:data})
const get: Get = async function (url: string,data?: object) {
const res = await axios.get(url,{params:data});
return res.data;
}
function post(url: string,data?: object) {
return axios.post(url,data)
const post: Get = async function (url: string,data?: object) {
const res = await axios.post(url,data)
return res.data;
}
function setToken(){
axios.defaults.headers.common['Authorization'] = "Bearer " + getValue("token");
}
export {
get,
post
post,
setToken
}

View File

@ -1,14 +1,10 @@
import { get, post } from './base'
import router from '@/router';
import store from '@/store';
import { LoginData, UserInfo } from '@/types';
import { saveValue } from '@/utils/common';
import { message } from 'ant-design-vue';
import { get, post, setToken } from './base'
/**
*
* @param phone
* @param type 0 1
*/
export function sendsms(phone: string, type?: number){
return post('SendSms',{phone, type})
}
/**
*
@ -16,13 +12,31 @@ export function sendsms(phone: string, type?: number){
* @param password
*/
export function loginpass(phone: string, password: string){
return post("login",{type: 2,username: phone, password: password})
export async function loginpass(phone: string, password: string){
const res = await post<LoginData>("login",{type: 2,username: phone, password: password});
console.log(res.code)
if(res.code == 1){
message.error(res.msg)
}else{
console.log(res.data)
if(!saveValue("token", res.data?.api_token) && !saveValue("memberid", res.data?.memberid) ){
message.error("存储错误, 请允许网页使用本地存储!")
}else{
setToken();
store.commit("login");
router.push("/mine/archives")
}
}
}
/**
*
*
*/
export function userinfo(){
return get('personalInfo')
}
export async function userinfo(){
const user = await get<UserInfo>('personalInfo');
console.log(user.data?.img)
return {
head: user.data?.img,
username: user.data?.name
}
}

View File

@ -2,8 +2,8 @@
<div class="menu">
<div class="user" style="overflow: hidden;">
<div class="user" :class="{'seltop': selnum == 0}">
<img src="" alt="" class="head">
<div class="name">name</div>
<img :src="userinfo.head" alt="" class="head">
<div class="name">{{userinfo.username}}</div>
</div>
</div>
@ -50,7 +50,6 @@
.head{
width: 57px;
height: 57px;
background-color: #0f0;
margin-bottom: 15px;
border-radius: 50%;
}
@ -117,9 +116,9 @@
}
</style>
<script lang="ts">
import { userinfo } from '@/api';
import router from '@/router';
import { defineComponent, ref } from 'vue';
import store from '@/store';
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
setup(){
@ -170,6 +169,9 @@ export default defineComponent({
]
// index
const selnum = ref(0);
const userinfo = computed(() => store.state.userinfo)
console.log(userinfo.value)
/**
* 跳转路由与赋值对应的下标
* @param index 选中的下标 方便赋值与跳转
@ -183,13 +185,12 @@ export default defineComponent({
}
userinfo().then((res)=>{
console.log(res)
})
return{
list,
routeto,
selnum
selnum,
userinfo
}
}
})

View File

@ -1,18 +1,27 @@
import { userinfo } from '@/api';
import { createStore } from 'vuex'
export default createStore({
state: {
userinfo:{
name: "",
img: ""
}
username: "username",
head: ""
},
islogin: false
},
mutations: {
setUserInfo(state, userinfo){
state.userinfo = userinfo
},
login(state){
state.islogin = true;
}
},
actions: {
async setUserInfo({ commit }){
const user = await userinfo();
commit('setUserInfo', user);
}
},
modules: {
}

27
src/types/index.d.ts vendored
View File

@ -2,6 +2,19 @@
*
*/
// 定义axios
import * as axios from 'axios';
declare module 'axios' {
export interface CustomSuccessData<T> {
code: number;
msg?: string;
data?: T;
[keys: string]: any;
}
}
// 图片选择
export interface ImgInfo {
@ -20,10 +33,14 @@ export interface VideoInfo {
uid: string;
}
// 返回数据
export interface ResData<T = any>{
code?: number;
msg?: string;
data?: T;
// 登录返回数据
export interface LoginData{
api_token: string;
memberid: number;
}
// 用户信息
export interface UserInfo {
name: string;
img: string;
}

View File

@ -149,11 +149,8 @@
import { defineComponent, reactive, ref } from "vue";
import LoginTab from "@/components/login/LoginTab.vue";
import NavTop from "@/components/NavTop.vue"
import { loginpass, sendsms } from '@/api';
import { message } from 'ant-design-vue';
import { ResData } from '@/types';
import { saveValue } from '@/utils/common';
import router from '@/router';
import { loginpass } from '@/api';
import store from '@/store';
export default defineComponent({
name: "Login",
@ -188,9 +185,6 @@ export default defineComponent({
*/
const getcode: () => void = () => {
console.log(phone.value);
sendsms("86" + phone.value, 0).then((res)=>{
console.log(res)
})
const timestep = setInterval(() => {
console.log(11112);
time.value = time.value - 1;
@ -202,23 +196,12 @@ export default defineComponent({
}
}, 1000);
};
function login(): void {
console.log(userinfo.phone,userinfo.password)
loginpass(userinfo.phone,userinfo.password).then((res: ResData) =>{
console.log(res.code)
if(res.code == 1){
message.error(res.msg)
}else{
console.log(res.data)
if(!saveValue("token", res.data.api_token)){
message.error("存储错误, 请允许网页使用本地存储!")
}else{
router.push("/mine/archives")
}
}
loginpass(userinfo.phone,userinfo.password).then(()=>{
store.dispatch("setUserInfo");
})
}
return {
formLayout,