分享我在 vue 项目中关于 api 请求的一些实现及项目框架
本文主要简单分享以下四点
本文主要目的为以下三点
- 希望能够帮到一些人
- 希望能够得到一些建议
- 奉上一个使用Vue的模板框架
我只是把我觉得有用的东西分享出来罢了
使用 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/
效果图示:整容前 整容后
结语
感觉文章东西太多,什么都没讲清楚,不过,重要的是思路嘛,具体实现可以看框架代码~
如果文中有错误,欢迎指出。
如果有更好的实现方式,也希望有大佬指点一二。
分享我在 vue 项目中关于 api 请求的一些实现及项目框架的更多相关文章
- Fiddler无法抓取web项目中的http请求解决方案
问题:webform项目中对接API使用Fiddler无法获取该API的请求,该webform比较老的一个项目, 同一个API写在控制台可以抓取到请求,用web项目放在本地IIS却不行,使用IIS E ...
- Vue项目中的http请求统一管理
module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...
- 如何在项目中封装api
一般在项目中,会有很多的api请求,无论在vue,angular,还是react中都应该把接口封装起来,方便后期的维护. 1.新建一个api文件 我们可以在项目的分目录下创建一个api文件夹,在这里面 ...
- Vue实例中封装api接口的思路 在页面中用async,await调用方法请求
一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时 接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- vue2整个项目中,数据请求显示loading图
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...
- vue2整个项目中,数据请求显示loading图----------未完成阅读,码
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...
- 在.NET项目中使用PostSharp,使用CacheManager实现多种缓存框架的处理
在前面几篇随笔中,介绍了PostSharp的使用,以及整合MemoryCache,<在.NET项目中使用PostSharp,实现AOP面向切面编程处理>.<在.NET项目中使用Pos ...
- SpringMVC,MyBatis项目中兼容Oracle和MySql的解决方案及其项目环境搭建配置、web项目中的单元测试写法、HttpClient调用post请求等案例
要搭建的项目的项目结构如下(使用的框架为:Spring.SpingMVC.MyBatis): 2.pom.xml中的配置如下(注意,本工程分为几个小的子工程,另外两个工程最终是jar包): 其中 ...
随机推荐
- oracle INS-13001 环境不满足最低要求
使用windows10等系统安装oracle 11g等版本的数据库时,经常会发现开始安装时弹出[INS-13001 环境不满足最低要求]的提示,此时可以点击[是]继续安装. 也可以点击[否]结束安装, ...
- Day05(fianl、抽象类、接口)
final关键字修饰的类不能被继承.修改,修饰的方法不能被子类覆盖,修饰的变量(是常量)不能被修改. 抽象类:abstract关键字定义的类 继承树中越是在上方的类越抽象,在解决实际问题时,通常将父类 ...
- c程序内存模型
这篇文章主要记录一下c程序运行时内存空间如何使用.(摘抄自网络) 在一个多任务操作系统中的每个进程都运行在它自己的内存“沙箱”中.这个沙箱是一个虚拟地址空间(virtual address space ...
- listagg within group
oracle 多行合并成一行: listagg within group 可以和递归方法一起使用查询路径: 例如: SELECT LISTAGG(t.FOLDER_NAME, '/') WITHIN ...
- 网络流24题——骑士共存问题 luogu 3355
题目描述:这里 从这里开始,我们涉及到了一个新的问题:最小割问题 首先给出一些定义(本人根据定义自己口胡的): 一个流网络中的一个割是一个边集,使得割掉这些边集后源点与汇点不连通 而最小割问题就是一个 ...
- 在servlet中使用spring注解
@Autowired IAgreementPayService agreementPayService; /** * 支付参数 */ @Value("B{agreementPay.publi ...
- 设计模式 — 简单工厂模式(staticFactory)
这篇博文介绍简单工厂模式,设计模式并不是固定的二十三种,不同的书介绍的可能有出入,这篇介绍的简单工厂模式在有些书上就忽略不介绍了.设计模式是一套被反复使用的.多数人知晓的.经过分类编目的.代码设计经验 ...
- springboot 错误求解决
最近再学习springboot这个好东西,结果给当成白老鼠了,我使用的是idea 2018 来测试 一个简单的界面跳转 ,结果报错了,在网上搜了好半天没搜到相应的解决方案,很头疼,希望哪位大神能 ...
- menuStrip1动态添加菜单及快捷键
public partial class FormMkTest : Form { public FormMkTest() { InitializeComponent(); } private void ...
- 将一个整数M分成N个整数 要求每个都在区间【minV, maxV】之间
将一个整数M分成N个整数 要求每个都在区间[minV, maxV]之间,怎么分比较快捷???? 说明: N是>=1且<=9的数,分割的数据只要符合[minV, maxV]区间即可,可以是等 ...