PC端开发指南
功能说明
service ::: tip 服务接口 api 以及调用后台的服务直接写在该文件目录下 :::
举例: services/user.js
import http from "@/utils/http";
const api = {
login: "/user/login",
logout: "/user/logout",
getUserInfo: "/user/info",
};
// 登录
export function login(data) {
return http.post(api.login, data);
}
// 登出
export function logout() {
return http.post(api.logout);
}
// 获取登录用户信息
export function getUserInfo() {
return http.get(api.getUserInfo);
}
store
::: tip 状态存储 对于需要跨组件使用数据，则可以将数据存储在 store，非必要的无需存储 :::
举例: store/user.js
import { login, logout } from "@/services/user";
export default {
namespaced: true,
state: {
loginUser: null,
},
mutations: {
SET_USER(state, data) {
state.loginUser = data;
},
REMOVE_USER(state) {
state.loginUser = null;
},
},
actions: {
// 登录，将登录成功后返回的用户信息放入state中
login({ commit }, data) {
return login(data).then(({ data }) => {
commit("SET_USER", data);
return data;
});
},
// 登出，登出成功后移除state中的用户信息
logout({ commit }) {
return logout().then((result) => {
commit("SET_USER");
return result;
});
},
},
getters: {},
};
vue
::: tip 说明 vue 中可以直接使用 service，也可以使用 store :::
举例: views/Home.vue
<template>
<div>
<!-- 用户信息获取是调用service的方法 -->
<p>用户信息：{{ loginUser }}</p>
<!-- 登录登出调用的是store中的方法 -->
<a-button @click="login">登录</a-button>
<a-button @click="logout">登出</a-button>
</div>
</template>
<script>
// 获取用户信息直接调用 service
import { getUserInfo } from "@/services/user";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("user");
export default {
data() {
return {
loginUser: {},
};
},
methods: {
...mapActions(["login", "logout"]),
},
mounted() {
this.$nextTick(() => {
// 获取当前登录用户信息
getUserInfo().then(({ data }) => {
this.loginUser = data;
});
});
},
};
</script>
路由的配置
{
"path": "/admin/org/detail/:id", // 路由地址，单词之间以“_”拼接，如果是子页面，前面的路径必须是父页面的路径（例如：/admin/org页面打开该页面，则定义为/admin/org/detail）
"name": "org_detail",
"component": OrgDetail,
"meta": {
"title": "机构明细", // 如果是后台管理的页面，必须加上title，以方便面包屑使用
"anonymous": true // 如果是匿名可访问的页面，必须加上改属性且值为true，子路也可以单独配置
}
}
为了提高访问效率，必须使用动态路由
// 语法：const 变量名 = () => import("组件路径");
const AdminHome = () => import("@/views/layout/AdminHome");
环境变量配置
::: tip 提示
所有的自定义环境变量必须以VUE_APP_开头
:::
定义：.env.production
NODE_ENV='production'
VUE_APP_URL=''
VUE_APP_CK_NAME='xs_ck_p'
使用：Demo.vue
<template>
<!-- ... -->
</template>
<script>
// ...
const url = process.env.VUE_APP_URL;
// ...
</script>