feat: 跨域代理

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'arrow-body-style': ['off'],
     'no-return-assign': 'off',
     'func-call-spacing': 'off',
-    '@typescript-eslint/ban-types': 'off'
+    '@typescript-eslint/ban-types': 'off',
+    'vue/on-parsing-error': 'off'
   }
 }

config/proxy.ts

@@ -3,10 +3,10 @@
  * @description 项目代理配置
  */
 
-export default {
+module.exports = {
   dev: {
     '/api': {
-      target: 'your target network address',
+      target: 'http://124.222.113.37:8888',
       changeOrigin: true,
       pathRewrite: { '^/api': '' }
     }

src/api/iot/model.ts

@@ -3,10 +3,10 @@ import request from '@/service/request'
 /**
  * model api
  */
-export const opraModel = <T>(data: T) => {
+export const opraModel = <T>(params: T) => {
   return request<IOT.API.Model[]>({
     url: '/model/page',
     method: 'GET',
-    data
+    params
   })
 }

src/components/ColPro/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <a-col
+    v-bind="{
+      ...defaultColProps,
+      ...props
+    }"
+  >
+    <slot></slot>
+  </a-col>
+</template>
+
+<script lang="ts" setup >
+import { ColProps } from 'ant-design-vue'
+import { onMounted } from 'vue'
+interface IProps extends ColProps {
+  [key: string]: any
+}
+
+const props = defineProps<IProps>()
+
+const defaultColProps = {
+  xs: 24,
+  sm: 24,
+  md: 12,
+  lg: 12,
+  xl: 10
+}
+
+onMounted(() => {
+
+})
+
+</script>

src/components/Row/index.vue

@@ -1,4 +0,0 @@
-<template>
-  <a-row>
-  </a-row>
-</template>

src/components/RowPro/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <a-row
+    v-bind="{
+      ...defaultRowProps,
+      ...props
+    }"
+  >
+    <slot></slot>
+  </a-row>
+</template>
+
+<script lang="ts"  setup >
+import { RowProps } from 'ant-design-vue'
+interface IProps extends RowProps {
+  [key: string]: any
+}
+
+const props = defineProps<IProps>()
+
+const defaultRowProps = {
+  gutter: [8, 8],
+  justify: 'space-between'
+}
+</script>

src/controller/iot/model.ts

@@ -1,23 +1,25 @@
 import { opraModel } from '@/api/iot/model'
-export default class Model {
-  list () {
+class Model {
+  static list () {
 
   }
 
-  async page () {
-    const { data } = await opraModel({})
+  static async page () {
+    const { data } = await opraModel({ page: 1, modelLabel: 1, pageSize: 10 })
     return data
   }
 
-  post () {
+  static post () {
 
   }
 
-  put () {
+  static put () {
 
   }
 
-  del () {
+  static del () {
 
   }
 }
+
+export default Model

src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -1,25 +1,29 @@
 <template>
-  <!-- <a-row> -->
     <a-card
       title="功能介绍"
     >
-      <a-row>
-        <a-col>
+      <a-row :gutter="[8, 8]" justify="space-between" >
+        <a-col :xs='24' :sm="24" :md='16' :lg="16" :xl="14" >
           在物联网平台中，某一类具有相同能力或特征的设备的合集被称为一款产品。
           如果您希望使用平台查看设备上报的数据信息，并对设备进行管理控制，就需要开发产品模型(Profile)。定义Profile，使平台理解该款设备支持的属性、命令等信息。根据产品的接入协议、数据格式等可能还需要您定义其他相关的内容 了解更多
         </a-col>
-        <a-col>
-
+        <a-col :xs='24' :sm="24" :md='8' :lg="8" :xl="8" >
+          <img style="width: 100%" :src="staticImg.productIntroduction" alt="">
         </a-col>
-
       </a-row>
     </a-card>
-  <!-- </a-row> -->
 </template>
 
 <script setup lang="ts" >
+import ModelController from '@/controller/iot/model'
 import { useStaticImg } from '@/utils/static'
-useStaticImg()
+
+const staticImg = useStaticImg()
+
+ModelController.page().then(r => {
+  console.log(r)
+})
+
 </script>
 
 <style>

src/service/request.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosInstance } from 'axios'
 
 const instance = axios.create({
-  baseURL: '',
+  baseURL: '/api',
   timeout: 10000
 })
 

src/utils/UsePro.ts

@@ -1,10 +1,14 @@
 import ModalPro from '@/components/ModalPro/index.vue'
 import SiderPro from '@/components/SiderPro/index.vue'
 import TablePro from '@/components/TablePro/index.vue'
+import RowPro from '@/components/RowPro/index.vue'
+import ColPro from '@/components/ColPro/index.vue'
 import { App } from 'vue'
 
 export default function (app: App) {
   app.component('modal-pro', ModalPro)
   app.component('sider-pro', SiderPro)
   app.component('table-pro', TablePro)
+  app.component('l-row', RowPro)
+  app.component('l-col', ColPro)
 }

src/utils/static.ts

@@ -1,3 +1,4 @@
+
 import { inject } from 'vue'
 export const assets: Record<string, string> = {}
 const requireAsset = require.context('@/assets', true, /\.(png|jpe?g|gif|svg)$/)
@@ -7,6 +8,8 @@ requireAsset.keys().forEach(key => {
   assets[name] = requireAsset(key)
 })
 
-console.log(assets)
+interface UseStaticImgExport {
+  productIntroduction: string
+}
 
-export const useStaticImg = () => inject('useStaticImg')
+export const useStaticImg = (): UseStaticImgExport => inject('useStaticImg')!

vue.config.js

@@ -1,5 +1,14 @@
+const fs = require('fs')
+
+const path = require('path')
+
 const { defineConfig } = require('@vue/cli-service')
+const proxy = require('./config/proxy.ts')
 
+console.log(proxy.dev)
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer: {
+    proxy: proxy.dev
+  }
 })