lizongxi/ai-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
huzhushan 2021-03-24 16:32:56 +08:00
parent 5592d9905b
commit 1165f22890
2 changed files with 162 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
vite.config.js
View File

@ -21,5 +21,13 @@ export default env => {
"@": path.resolve(__dirname, "src"), "@": path.resolve(__dirname, "src"),
}, },
}, },
server: {
proxy: {
"/api": {
target: "http://dev.erp.com",
changeOrigin: true,
},
},
},
}); });
}; };

274
项目开发手册.md
View File

@ -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
<template> <template>
home home
</template> </template>
``` ```
- 同样的方式创建一个login模块 同样的方式创建一个login模块
```vue ```vue
<template> <template>
login login
</template> </template>
``` ```
- 安装路由vue-router - 安装路由vue-router
@ -127,56 +127,56 @@ npm run dev
> 路由配置就是配置views模块中的页面通过什么地址来访问，路由我们也使用模块化管理，views中有多少模块就创建多少路由配置文件，此外还需要一个index.js来统一分配路由模块 > 路由配置就是配置views模块中的页面通过什么地址来访问，路由我们也使用模块化管理，views中有多少模块就创建多少路由配置文件，此外还需要一个index.js来统一分配路由模块
- router目录中创建modules目录， modules目录中创建home.js和login.js router目录中创建modules目录， modules目录中创建home.js和login.js
```js ```js
// home.js // home.js
const Home = () => import("../../views/home/index.vue"); const Home = () => import("../../views/home/index.vue");
export default [ 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", path: '/',
name: "home", redirect: '/home'
component: Home, },
} ...home,
] ...login
``` ],
});
```js export default router;
// 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;
```
- 挂载路由 - 挂载路由
@ -242,32 +242,32 @@ npm run dev
> 状态管理也使用模块化的方式 > 状态管理也使用模块化的方式
- 在store目录中创建modules目录，modules中创建一个模块，比如叫user.js 在store目录中创建modules目录，modules中创建一个模块，比如叫user.js
```js ```js
// user.js // user.js
export default { export default {
namespaced: true, namespaced: true,
state: {}, state: {},
mutations: {}, mutations: {},
actions: {}, actions: {},
}; };
``` ```
- 在store目录中创建index.js 在store目录中创建index.js
```js ```js
//index.js //index.js
import { createStore } from "vuex"; import { createStore } from "vuex";
import user from "./modules/user"; import user from "./modules/user";
export default createStore({ export default createStore({
modules: { modules: {
user, user,
}, },
}); });
``` ```
- 挂载store - 挂载store
@ -334,63 +334,76 @@ npm run dev
> 项目中我们调用接口的时候，有可能有很多页面都会调用同一个接口，所以我们把所有的接口统一进行模块化管理 > 项目中我们调用接口的时候，有可能有很多页面都会调用同一个接口，所以我们把所有的接口统一进行模块化管理
- 在src目录中创建api目录，用来存放所有的接口 在src目录中创建api目录，用来存放所有的接口
- 在api目录中创建一个模块login.js，该文件包括跟登录注册相关的所有接口 在api目录中创建一个模块login.js，该文件包括跟登录注册相关的所有接口
```js ```js
// login.js // login.js
import axios from 'axios' import axios from 'axios'
// 登录接口 // 登录接口
export const Login = data => { export const Login = data => {
return axios.request({ return axios.request({
url: "/api/login", url: "/api/login",
method: "post", method: "post",
data, data,
}); });
}; };
// 其它接口... // 其它接口...
``` ```
- 在页面中调用登录接口 在页面中调用登录接口
> 在views/login/index.vue中： > 在views/login/index.vue中：
```html ```html
<template> <template>
login login
<el-button type="primary" @click="login">登录</el-button> <el-button type="primary" @click="login">登录</el-button>
</template> </template>
<script> <script>
import { defineComponent, onMounted } from "vue"; import { defineComponent, onMounted } from "vue";
import { Login } from "@/api/login"; import { Login } from "@/api/login";
export default defineComponent({ export default defineComponent({
name: "Login", name: "Login",
setup() { setup() {
const login = async () => { const login = async () => {
const res = await Login({ const res = await Login({
userName: 'admin', userName: 'admin',
password: '123456' password: '123456'
}) })
}
return {
login
}
} }
})
</script>
```
return {
login
}
}
})
</script>
```
### 跨域管理
当前端调用后端接口的时候，假设后端接口的域名是`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管理 ### mock管理
> 上面调用登录接口，其实是404，因为现在还没有后端接口
>
> 当后端接口没有开发完成的时候，前端就需要根据接口文档mock数据进行开发 > 当后端接口没有开发完成的时候，前端就需要根据接口文档mock数据进行开发
> >
> vite中可以使用vite-plugin-mock插件创建mock服务 > vite中可以使用vite-plugin-mock插件创建mock服务
@ -467,12 +480,11 @@ npm run dev
}, },
] ]
``` ```
```
这个时候我们访问`http://localhost:3000/api/get`，可以看到返回的mock数据了 这个时候我们访问`http://localhost:3000/api/get`，可以看到返回的mock数据了
### 封装axios
#### 封装axios
> 当我们登录成功之后，后端其实会返回一个token（token就是用来做登录认证的），后续所有请求都需要带上这个token，后端校验token是否有效 > 当我们登录成功之后，后端其实会返回一个token（token就是用来做登录认证的），后续所有请求都需要带上这个token，后端校验token是否有效
> >
@ -499,7 +511,7 @@ npm run dev
}, },
}, },
] ]
``` ```
- 登录之后，把token保存在localStorage和vuex中 - 登录之后，把token保存在localStorage和vuex中
@ -670,11 +682,11 @@ npm run dev
// 登录接口 // 登录接口
export const Login = data => { export const Login = data => {
return request({ return request({
url: "/api/login", url: "/api/login",
method: "post", method: "post",
data, data,
}); });
}; };
``` ```