1、创建新项目,
就正常创建vite+vue3项目,引入DataV
npm install @kjgl77/datav-vue3
全局引入
// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'
const app = createApp(App)
app.use(DataVVue3)
app.mount('#app')
引入Element-Plus
这里只是使用Container 布局
npm install element-plus --save
完整引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
2、关联管理端项目
管理端项目 具体页面
// 在需要跳转的页面带token跳转;
mounted() {
window.open("http://localhost:5173?token=" + String(getToken()),'_blank')
},
在大屏项目发起请求时读取token;
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const getToken=()=>{
let url = window.location.href
let urlStr = url.split('?')[1].split("=")[1];
return urlStr;
}
const DEV_BASE_API = "http://localhost:8088";
const PRO_BASE_API = "https://...";
// create an axios instance
const service = axios.create({
baseURL: DEV_BASE_API, // api 的 base_url
timeout: 60000, // request timeout
withCredentials: true
})
// request interceptor
service.interceptors.request.use(
config => {
// Do something before request is sent
config.headers['tenantId'] = "10001"
// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['uni-token'] = getToken()
config.headers['x-client-type'] = 'admin'
config.withCredentials = true
return config
},
error => {
// Do something with request error
console.warn(error) // for debug
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* 下面的注释为通过在response里,自定义code来标示请求状态
* 当code返回如下情况则说明权限有问题,登出并返回到登录页
* 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
* 以下代码均为样例,请结合自生需求加以修改,若不需要,则可删除
*/
response => {
const res = response.data
if (response.status == 200 && response.config.responseType == 'blob') {
return response
}
if (res.code !== 200 || response.status != 200) {
ElMessage({
message: res.message,
type: 'error',
duration: 5 * 1000
})
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 1001 || res.code === 1002 || res.code === 1003 || res.code === 1000) {
// 请自行在引入 MessageBox
// import { Message, MessageBox } from 'element-ui'
ElMessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log(error)
ElMessage({
message: '服务端异常',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export const post =(url, data) =>{
return service({
url: url,
method: 'post',
data: {
...data
}
})
}
export const get = (url) =>{
return service({
url: url,
method: 'get'
})
}
3、大屏数据请求
在需要使用的页面中引入
import { post } from "~/api/api";
export default {
async initData(){
// 第一个参数写后端接口路径;payload 是需要上传的参数;这里为空对象{}
const res = await post("/api/...", payload);
if(res.state){
//处理数据
}
}
}
图片违规了,就不让你们看了