From 1165f22890ba28815e96ff013f818de16074d3eb Mon Sep 17 00:00:00 2001 From: huzhushan Date: Wed, 24 Mar 2021 16:32:56 +0800 Subject: [PATCH] update --- vite.config.js | 8 ++ 项目开发手册.md | 296 +++++++++++++++++++++++++----------------------- 2 files changed, 162 insertions(+), 142 deletions(-) diff --git a/vite.config.js b/vite.config.js index 01b0693..e005cf5 100644 --- a/vite.config.js +++ b/vite.config.js @@ -21,5 +21,13 @@ export default env => { "@": path.resolve(__dirname, "src"), }, }, + server: { + proxy: { + "/api": { + target: "http://dev.erp.com", + changeOrigin: true, + }, + }, + }, }); }; \ No newline at end of file diff --git a/项目开发手册.md b/项目开发手册.md index 0783676..8b6a8cf 100644 --- a/项目开发手册.md +++ b/项目开发手册.md @@ -100,21 +100,21 @@ npm run dev > 我们使用模块化的方式来管理页面，比如用户管理、权限管理等模块，每个模块下可能有多个页面，所以每个模块都要创建一个目录 - - 在views目录中创建home目录（代表home模块），home目录中创建index.vue，index.vue代表home模块的主页面 + 在views目录中创建home目录（代表home模块），home目录中创建index.vue，index.vue代表home模块的主页面 - ```vue - - ``` + ```vue + + ``` - - 同样的方式创建一个login模块 + 同样的方式创建一个login模块 - ```vue - - ``` + ```vue + + ``` - 安装路由vue-router @@ -127,56 +127,56 @@ npm run dev > 路由配置就是配置views模块中的页面通过什么地址来访问，路由我们也使用模块化管理，views中有多少模块就创建多少路由配置文件，此外还需要一个index.js来统一分配路由模块 - - router目录中创建modules目录， modules目录中创建home.js和login.js + router目录中创建modules目录， modules目录中创建home.js和login.js - ```js - // home.js - const Home = () => import("../../views/home/index.vue"); - - export default [ + ```js + // home.js + const Home = () => import("../../views/home/index.vue"); + + export default [ + { + path: "/home", + name: "home", + component: Home, + } + ] + ``` + + ```js + // login.js + const Login = () => import("../../views/login/index.vue"); + + export default [ + { + path: "/login", + name: "login", + component: Login, + } + ] + ``` + + router目录中创建index.js + + ```js + // index.js + import { createRouter, createWebHistory } from "vue-router" + import home from './modules/home' + import login from './modules/login' + + const router = createRouter({ + history: createWebHistory(), + routes: [ { - path: "/home", - name: "home", - component: Home, - } - ] - ``` - - ```js - // login.js - const Login = () => import("../../views/login/index.vue"); - - export default [ - { - path: "/login", - name: "login", - component: Login, - } - ] - ``` - - - router目录中创建index.js - - ```js - // index.js - import { createRouter, createWebHistory } from "vue-router" - import home from './modules/home' - import login from './modules/login' - - const router = createRouter({ - history: createWebHistory(), - routes: [ - { - path: '/', - redirect: '/home' - }, - ...home, - ...login - ], - }); - - export default router; - ``` + path: '/', + redirect: '/home' + }, + ...home, + ...login + ], + }); + + export default router; + ``` - 挂载路由 @@ -242,32 +242,32 @@ npm run dev > 状态管理也使用模块化的方式 - - 在store目录中创建modules目录，modules中创建一个模块，比如叫user.js + 在store目录中创建modules目录，modules中创建一个模块，比如叫user.js - ```js - // user.js - export default { - namespaced: true, - state: {}, - mutations: {}, - actions: {}, - }; - ``` + ```js + // user.js + export default { + namespaced: true, + state: {}, + mutations: {}, + actions: {}, + }; + ``` - - 在store目录中创建index.js + 在store目录中创建index.js - ```js - //index.js - import { createStore } from "vuex"; - import user from "./modules/user"; - - export default createStore({ - modules: { - user, - }, - }); - - ``` + ```js + //index.js + import { createStore } from "vuex"; + import user from "./modules/user"; + + export default createStore({ + modules: { + user, + }, + }); + + ``` - 挂载store @@ -334,63 +334,76 @@ npm run dev > 项目中我们调用接口的时候，有可能有很多页面都会调用同一个接口，所以我们把所有的接口统一进行模块化管理 - - 在src目录中创建api目录，用来存放所有的接口 + 在src目录中创建api目录，用来存放所有的接口 - - 在api目录中创建一个模块login.js，该文件包括跟登录注册相关的所有接口 + 在api目录中创建一个模块login.js，该文件包括跟登录注册相关的所有接口 - ```js - // login.js - import axios from 'axios' - - // 登录接口 - export const Login = data => { - return axios.request({ - url: "/api/login", - method: "post", - data, - }); - }; - - // 其它接口... - ``` + ```js + // login.js + import axios from 'axios' + + // 登录接口 + export const Login = data => { + return axios.request({ + url: "/api/login", + method: "post", + data, + }); + }; + + // 其它接口... + ``` - - 在页面中调用登录接口 + 在页面中调用登录接口 - > 在views/login/index.vue中： + > 在views/login/index.vue中： - ```html - - - - ``` - + + return { + login + } + } + }) + + ``` + +### 跨域管理 + +当前端调用后端接口的时候，假设后端接口的域名是`http://dev.erp.com`，那`http://localhost`访问`http://dev.erp.com`是会跨域的，这时候我们就要在vite.config.js中设置代理 + +```js +// vite.config.js增加如下配置 +server: { + proxy: { + "/api": { + target: "http://dev.erp.com", + changeOrigin: true, + }, + }, +}, +``` ### mock管理 -> 上面调用登录接口，其实是404，因为现在还没有后端接口 -> > 当后端接口没有开发完成的时候，前端就需要根据接口文档mock数据进行开发 > > vite中可以使用vite-plugin-mock插件创建mock服务 @@ -467,12 +480,11 @@ npm run dev }, ] ``` -``` - -这个时候我们访问`http://localhost:3000/api/get`，可以看到返回的mock数据了 - -#### 封装axios + +这个时候我们访问`http://localhost:3000/api/get`，可以看到返回的mock数据了 + +### 封装axios > 当我们登录成功之后，后端其实会返回一个token（token就是用来做登录认证的），后续所有请求都需要带上这个token，后端校验token是否有效 > @@ -499,7 +511,7 @@ npm run dev }, }, ] -``` + ``` - 登录之后，把token保存在localStorage和vuex中 @@ -670,11 +682,11 @@ npm run dev // 登录接口 export const Login = data => { - return request({ - url: "/api/login", - method: "post", - data, - }); + return request({ + url: "/api/login", + method: "post", + data, + }); }; ```