4b1a42fb by sunnie

api

1 parent 3e329f74
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
53 ##### 配置介绍 53 ##### 配置介绍
54 54
55   `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 55   `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。
56   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 56   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问    除了 `VUE_APP_*` 变量之外
57    除了 `VUE_APP_*` 变量之外,在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV``BASE_URL` 57 ,在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV``BASE_URL`
58 58
59 在项目根目录中新建.env 59 在项目根目录中新建.env
60 60
...@@ -84,7 +84,10 @@ VUE_APP_ENV = 'production' ...@@ -84,7 +84,10 @@ VUE_APP_ENV = 'production'
84 ``` 84 ```
85 85
86 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production` 86 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production`
87 变量我们统一在 src/config/env.\*.js 里进行管理。修改起来方便,不需要重启项目,符合开发习惯。 87 变量我们统一在 `src/config/env.*.js` 里进行管理。
88
89 这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢? **修改起来方便,不需
90 要重启项目,符合开发习惯。**
88 91
89 config/index.js 92 config/index.js
90 93
...@@ -151,15 +154,16 @@ module.exports = { ...@@ -151,15 +154,16 @@ module.exports = {
151 154
152 很多小伙伴会问我,适配的问题。 155 很多小伙伴会问我,适配的问题。
153 156
154 我们知道 `1rem` 等于`html` 根元素设定的 `font-size``px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 看到 (`1rem 等于 37.5px`): 157 我们知道 `1rem` 等于`html` 根元素设定的 `font-size``px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下
158 看到 (`1rem 等于 37.5px`):
155 159
156 ```html 160 ```html
157 <html data-dpr="1" style="font-size: 37.5px;"></html> 161 <html data-dpr="1" style="font-size: 37.5px;"></html>
158 ``` 162 ```
159 切换不同的机型,根元素可能会有不同的`font-size`。当你写css px 样式时,会被程序换算成 `rem` 达到适配。
160 163
164 切换不同的机型,根元素可能会有不同的`font-size`。当你写 css px 样式时,会被程序换算成 `rem` 达到适配。
161 165
162 因为我们用了Vant的组件,需要按照 `rootValue: 37.5` 来写样式。 166 因为我们用了 Vant 的组件,需要按照 `rootValue: 37.5` 来写样式。
163 167
164 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。 168 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。
165 169
...@@ -167,7 +171,7 @@ module.exports = { ...@@ -167,7 +171,7 @@ module.exports = {
167 满。 171 满。
168 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 172 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
169 173
170 也就是iphone 6 下 375px宽度写CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。 174 也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。
171 175
172 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。 176 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。
173 177
...@@ -392,13 +396,15 @@ service.interceptors.response.use( ...@@ -392,13 +396,15 @@ service.interceptors.response.use(
392 export default service 396 export default service
393 ``` 397 ```
394 398
399 #### 接口管理
400
395 `src/api` 文件夹下统一管理接口 401 `src/api` 文件夹下统一管理接口
396 402
397 - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js` 403 - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
398 - `url` 接口地址,请求的时候会拼接上 `config` 下的 `baseApi` 404 - `url` 接口地址,请求的时候会拼接上 `config` 下的 `baseApi`
399 - `method` 请求方法 405 - `method` 请求方法
400 - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作 406 - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
401 - `hideloading` 默认 `false`,设置为 `true` 后,不显示loading ui 交互中有些接口不需要样用户感知 407 - `hideloading` 默认 `false`,设置为 `true` 后,不显示 loading ui 交互中有些接口不需要样用户感知
402 408
403 ```javascript 409 ```javascript
404 import qs from 'qs' 410 import qs from 'qs'
...@@ -417,6 +423,18 @@ export function login(params) { ...@@ -417,6 +423,18 @@ export function login(params) {
417 } 423 }
418 ``` 424 ```
419 425
426 #### 如何调用
427
428 ```javascript
429 // 请求接口
430 import {getUserInfo} from '@/api/user.js'
431
432 const params = {user: 'sunnie'}
433 getUserInfo()
434 .then(() => {})
435 .catch(() => {})
436 ```
437
420 [▲ 回顶部](#top) 438 [▲ 回顶部](#top)
421 439
422 ### <span id="base">✅ vue.config.js 基础配置 </span> 440 ### <span id="base">✅ vue.config.js 基础配置 </span>
...@@ -486,7 +504,6 @@ module.exports = { ...@@ -486,7 +504,6 @@ module.exports = {
486 使用 例如: `src/api/home.js` 504 使用 例如: `src/api/home.js`
487 505
488 ```javascript 506 ```javascript
489
490 export function getUserInfo(params) { 507 export function getUserInfo(params) {
491 return request({ 508 return request({
492 url: '/api/userinfo', 509 url: '/api/userinfo',
...@@ -494,14 +511,12 @@ export function getUserInfo(params) { ...@@ -494,14 +511,12 @@ export function getUserInfo(params) {
494 data: qs.stringify(params) 511 data: qs.stringify(params)
495 }) 512 })
496 } 513 }
497
498 ``` 514 ```
499 515
500 [▲ 回顶部](#top) 516 [▲ 回顶部](#top)
501 517
502 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> 518 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
503 519
504
505 [▲ 回顶部](#top) 520 [▲ 回顶部](#top)
506 521
507 #### 总结 522 #### 总结
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 17
18 <script> 18 <script>
19 // 请求接口 19 // 请求接口
20 import {getUserInfo} from '@/api/user.js' 20 import { getUserInfo } from '@/api/user.js'
21 export default { 21 export default {
22 components: {}, 22 components: {},
23 23
...@@ -51,9 +51,10 @@ export default { ...@@ -51,9 +51,10 @@ export default {
51 // 请求数据案例 51 // 请求数据案例
52 initData() { 52 initData() {
53 // 请求接口数据,仅作为展示,需要配置src->config下环境文件 53 // 请求接口数据,仅作为展示,需要配置src->config下环境文件
54 const params = {user:'sunnie'}
54 getUserInfo() 55 getUserInfo()
55 .then(() => {}) 56 .then(() => { })
56 .catch(() => {}) 57 .catch(() => { })
57 }, 58 },
58 onChange(index) { 59 onChange(index) {
59 if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template' 60 if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template'
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!