update
This commit is contained in:
huzhushan
parent
5592d9905b
commit
1165f22890
@ -21,5 +21,13 @@ export default env => {
|
||||
"@": path.resolve(__dirname, "src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://dev.erp.com",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
296
项目开发手册.md
296
项目开发手册.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
|
||||
<template>
|
||||
home
|
||||
</template>
|
||||
```
|
||||
```vue
|
||||
<template>
|
||||
home
|
||||
</template>
|
||||
```
|
||||
|
||||
- 同样的方式创建一个login模块
|
||||
同样的方式创建一个login模块
|
||||
|
||||
```vue
|
||||
<template>
|
||||
login
|
||||
</template>
|
||||
```
|
||||
```vue
|
||||
<template>
|
||||
login
|
||||
</template>
|
||||
```
|
||||
|
||||
- 安装路由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
|
||||
<template>
|
||||
login
|
||||
<el-button type="primary" @click="login">登录</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { Login } from "@/api/login";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Login",
|
||||
setup() {
|
||||
const login = async () => {
|
||||
const res = await Login({
|
||||
userName: 'admin',
|
||||
password: '123456'
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
login
|
||||
}
|
||||
```html
|
||||
<template>
|
||||
login
|
||||
<el-button type="primary" @click="login">登录</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { Login } from "@/api/login";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Login",
|
||||
setup() {
|
||||
const login = async () => {
|
||||
const res = await Login({
|
||||
userName: 'admin',
|
||||
password: '123456'
|
||||
})
|
||||
}
|
||||
})
|
||||
</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管理
|
||||
|
||||
> 上面调用登录接口，其实是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,
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user