1.查看node-npm-vue环境
node -v
npm -v
vue -v
2.如果未安装则进行安装,否则跳过该步骤
注;正常来讲,安装完node后,npm则会安装到本机
https://nodejs.org/en/
3.再次查看环境,没有问题则进行创建项目
vue create test_vue
4.自动安装,完成后cd到刚刚创建的vue项目中
5.安装npm / cnpm依赖, 建议使用npm
npm i
npm install
6. 安装依赖
npm install element-plus --save
npm i vant@next -S
npm install vue-router@4
npm install axios
7.在src目录下新建api文件夹,在api文件夹创建api.js和http.js
结构如下
api
app.js
http.js
8.api.js文件中代码
//引入刚才的http.js文件
import https from './http.js';
//设置个对象,就不用一个个暴露了,直接暴露对象
let apiFun = {};
/* 获取列表 */
//查询列表,详情就是get
/* /api/getlist是请求接口地址,有http.js里面的Ip加上,如:api:192.168.0.1:9090//api/getlist */
apiFun.getlist = function(params) {
return https.get('getlist', params)
}
/* 新增保存检查计划 */
//保存都是post
apiFun.saveJcInfo = function(params) {
return https.post('saveJcInfo', params)
}
//暴露出这个对象
export default apiFun;
http.js代码
import axios from 'axios' //引入
import { Toast } from 'vant';
// 请求url
let baseURL = 'http://127.0.0.1:8000/api/v1/'
//这一步的目的是判断出当前是开发环境还是生成环境,方法不止一种,达到目的就行
// if(process.env.NODE_ENV=="development"){
// baseURL=''
// }else{
// baseURL=''
// }
let config = {
baseURL: baseURL,
timeout: 30000 //设置最大请求时间
}
const _axios = axios.create(config)
/* 请求拦截器(请求之前的操作) */
_axios.interceptors.request.use(
config => {
//如果有需要在这里开启请求时的loading动画效果
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); //添加token,需要结合自己的实际情况添加,
return config;
},
err => Promise.reject(err)
);
/* 请求之后的操作 */
_axios.interceptors.response.use(
res => {
//在这里关闭请求时的loading动画效果
//这里用于处理返回的结果,比如如果是返回401无权限,可能会是跳回到登录页的操作,结合自己的业务逻辑写
if (res.data.code === 401 ) {
Toast("无权限操作")
}
if (res.data.code === 400 ) {
Toast("请求网络失败")
}
if (res.data.code === 404 ) {
Toast("请求网络失败")
}
return res;
},
err => {
if (err) {
//在这里关闭请求时的loading动画效果
Toast("请求网络失败")
}
return Promise.reject(err);
}
);
//封装post,get方法
const http = {
get(url='',params={}){
return new Promise((resolve, reject) => {
_axios({
url,
params,
headers:{'Content-Type': 'application/json;charset=UTF-8'},
method: 'GET'
}).then(res => {
resolve(res.data)
return res
}).catch(error => {
reject(error)
})
})
},
post(url='',params={}){
return new Promise((resolve, reject) => {
_axios({
url,
data:params,
headers:{'Content-Type': 'application/json;charset=UTF-8'},
method: 'POST'
}).then(res => {
resolve(res.data)
return res
}).catch(error => {
reject(error)
})
})
}
}
export default http
mai.js导入
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import apiFun from "@/api/api.js";
Vue.prototype.$apiFun = apiFun;//请求接口api
//全局引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
//全局引入element ui
// import 'element-plus/dist/index.css'
// import ElementPlus from 'element-plus'
// Vue.use(ElementPlus)
new Vue({
render: h => h(App),
}).$mount('#app')
9.vue组件中使用语法
<template>
<div>
<button @click="aaa">
点击我
</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods:{
bbb(){
this.$apiFun.getlist({'itemCode':'SXZA'}).then((res) => {
console.log(res)
})
},
aaa(){
let info = {
'name':'张三',
'tel':'1938483484',
'id':'1'
}
this.$apiFun.saveJcInfo(info).then((res) => {
console.log(res)
})
}
},
}