分享我在 vue 项目中关于 api 请求的一些实现及项目框架

本文主要简单分享以下四点

本文主要目的为以下三点

我只是把我觉得有用的东西分享出来罢了

使用 axios 请求接口

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

安装 axios

npm install axios --save

创建 axios 实例 (api/fetch.js)

axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-urlencoded 通过设置 transformRequest 属性 data => qs.stringify(data) 可以正常表单形式提交

import axios from 'axios'

const instance = axios.create({
  baseURL: 'apiBaseUrl', // api的base_url
  timeout: 10000 // 请求超时时间
  // transformRequest: data => qs.stringify(data) //
})
// request拦截器
instance.interceptors.request.use(
  e => {
    e.params = e.params || {}
    e.headers = e.headers || {}
    //set 默认值
    return e
  },
  error => ({ status: 0, msg: error.message })
)
// respone拦截器
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (response.status === 200) {
      return resp
    }
    return resp
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default instance

使用封装的fetch.js

在 api 文件中新建接口模块并使用 axios 实例(api/fetch.js) src/api/api_test.js

import request from '@/utils/fetch'

export function test(data) {
  return request({
    url: '/test',
    method: 'post',
    data: data
  })
}

使用的时候,可通过引入 api/模块.js 调用方法,也可以通过安装插件的形式将 api 接口扩展到 vue 实例中,使其可以更方便的在项目中使用

以 test 模块为例创建一个$api 扩展

src/api/index.js

import * as api_test from './test'

const apiObj = {
  api_test
}

const install = function(Vue) {
  if (install.installed) return
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return apiObj
      }
    }
  })
}
export default {
  install
}

在 main.js 安装 $api 扩展:

import api from './api'
Vue.use(api)

在项目中调用:this.$api.api_test.test().then(resp=>{...}).catch(()=>{...}) 在后端项目中我二次封装了下拉框,通过参数接收Function,传递$api.api_test.test省了可以少写很多代码。

关于开发环境和生成环境的配置读取

看到很多中做法,分享下我在项目中使怎么做的。

目前项目中的做法是在config文件夹中根据环境新建不同的配置,然后通过index.js暴露对应环境的配置。

目录结构及index.js

   config
        - _development.js
        - _production.js
        - _testing.js

config/index.js

module.exports = require('./_' + process.env.NODE_ENV).default

实际项目中的目录结构如下所示

关于在项目中使用 mock

看到好多项目把mock混在项目中使用,就感觉很难受,所以想办法独立出来了,功能不强大,只是足够用在一些小Demo上,简单模拟一下数据就可以让我们的Demo不用担心api接口失效导致vue项目跑不起来的问题。

下面是我的解决方案

express-mockjs 的使用

express-mockjs 是大佬结合 express+mock-lite 构建的一个 api 服务中间件,用它可以快速的帮助我们在本地搭建一个 mock 服务器

相关资料:

安装 express-mockjs: npm install express-mockjs --save-dev

安装 nodemon 到项目 以监听 mock 代码修改

安装 nodemon: npm install nodemon --save-dev

新建 mock-server/index.js 编写启动服务器代码

var path = require('path')
var express = require('express')
var mockjs = require('express-mockjs')

var app = express()

// 自定义路径 前缀: '/api'
var config = {
  port: 3000
}
//以/api为前缀,寻找api目录下的所有接口
app.use('/api', mockjs(path.join(__dirname, 'api')))

// 获取port参数 可通过 --port自 定义启动端口
var args = process.argv
for (let i = 0; i < args.length; i++) {
  if (args[i] === '--port' && i < args.length - 1 && args[i + 1] > 0) {
    config.port = args[i + 1]
    break
  }
}

console.log('mock-server[mockjs-lite]:http://localhost:' + config.port)
// console.log('mockjs-lite定义:http://mockjs-lite.js.org/docs/examples.html')
app.listen(config.port)

编写接口文件

在 mock-server 文件夹创建 api 文件夹,并按照 expess-mockjs 的文档编写 json/js json

/**
 * Interface function description
 *
 * @url /api-access-path
 */

{
  "code": 0,
  "result|5": [
    {
      "uid|+1": 1,
      "name": "@name",
      "email": "@email"
    }
  ]
}

js

/**
 * home page links
 *
 * @url /home-links
 *
 * Here you can write a detailed description
 * of the parameters of the information.
 */

module.exports = {
  code: function() {
    // simulation error code, 1/10 probability of error code 1.
    return Math.random() < 0.1 ? 1 : 0
  },
  'list|5-10': [{ title: '@title', link: '@url' }]
}

运行 mock 服务器

在项目的 package.json 中添加 mock 命令并运行:npm run mock

"scripts": {
    //...
    "mock": "nodemon --watch mock-server node mock-server/index.js --port 6543"
  },

目录结构

开发环境根据上面的配置运行起来没问题了,但是如果自己的小Demo发布后要怎么才能使用呢?我的方法是将js文件生成json然后打包到dist目录 如果有兴趣可以参考mock-server/build.js

分享自己的项目框架

奉上一个以上实现都有的模板框架(UI使用Element-UI,为了好看),仓库中docs中有一些独立的一些说明有兴趣可以查看。

项目地址:https://github.com/yimogit/me-admin-template 预览地址:https://vue-admin.yimo.link/ 效果图示:整容前 整容后

结语

感觉文章东西太多,什么都没讲清楚,不过,重要的是思路嘛,具体实现可以看框架代码~

如果文中有错误,欢迎指出。 如果有更好的实现方式,也希望有大佬指点一二。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

Linux系统里让vim支持markdown格式的语法高亮

下面就来介绍如何设置使得markdown格式的文件在vim里也能享有语法高亮的待遇。

1191
来自专栏JackeyGao的博客

Django url 反解析

Django 是个python中web-framework MTV框架能够快速的开发网站, 刚开始学习django时候, 对于模版里面经常根据自己项目的urls...

1173
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(三):Django基础知识回顾

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

2822
来自专栏Puppeteer学习

超越Ctrl+S保存页面所有资源

页面所有资源包含本页面所在域资源以及第三方域资源,同主域的资源也认为第三方域资源,这种资源一般是以绝对路径的方式标识,同域下资源主要有三种表现方式 (以ht...

5813
来自专栏容器云生态

Docker监控方案(TIG)的研究与实践之Grafana

Grafana研究和实践: 介绍: Grafana 是 Graphite 和 InfluxDB 仪表盘和图形编辑器。Grafana 是开源的,功能齐全的度量仪表...

2605
来自专栏macOS 开发学习

Mac开发基础练习:制作一个状态栏(NSStatusBar)上的App(二)

1.1 选中ViewController.m文件,添加鼠标左键点击事件监听,实现代码如下图:

903
来自专栏生信技能树

生信菜鸟团博客2周年精选文章集(2)wordpress的代码高亮

能做到代码高亮的插件实在是太多了,我这里随便选择一个。首先在wordpress的插件里面查找SyntaxHighlighter Evolved这个插件。 ? 下...

2757
来自专栏大数据挖掘DT机器学习

python模拟新浪微博登陆功能(新浪微博爬虫)

有些网站设置了权限,只有在登录了之后才能爬取网站的内容,如何模拟登录,目前的方法主要是利用浏览器cookie模拟登录。 浏览器访问服务器的过程 在用户访问网页时...

8505
来自专栏别先生

github协作开发遇到的问题

1、十一来了,帝都不好买票,30号就调休一天回去了,项目还没搞完,紧张的不行,就自己和同事搞了一个github协作开发,由于是功能和公司项目不是很沾边,但是是自...

1054
来自专栏开源优测

AutoMagic设计思路简介及新增自定义关键字实例

目录 简介 AutoMagic介绍 SeleniumKey介绍 自定义关键字 简介 AutoMagic 是一个基于WebUI的自...

2987

扫码关注云+社区