分类所有下的文章

2024-08-15




<template>
  <div class="chart-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-wrapper">
          <h3>多系列柱状图</h3>
          <chart :options="barMultipleSeriesOptions" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper">
          <h3>堆叠柱状图</h3>
          <chart :options="barStackedSeriesOptions" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-wrapper">
          <h3>水球图</h3>
          <chart :options="liquidSeriesOptions" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/liquidFill'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
 
export default {
  components: {
    'chart': ECharts
  },
  data() {
    return {
      barMultipleSeriesOptions: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '系列1',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
          },
          {
            name: '系列2',
            type: 'bar',
            data: [60, 150, 80, 70, 110, 130, 100]
          }
        ]
      },
      barStackedSeriesOptions: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 200, 150, 80, 70, 110, 130]
          },
          {
            name: '系列2',
            type

- 阅读更多 -

vue之pinia存储和读取数据

System

2024-08-15

所有,vue.js

在Vue中使用Pinia来存储和读取数据，首先需要安装Pinia并在Vue应用中设置。

安装Pinia:




npm install pinia
# 或者
yarn add pinia

设置Pinia并插入到Vue实例中:




// store.js
import { createPinia } from 'pinia'
 
const pinia = createPinia()
 
export default pinia




// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'
 
const app = createApp(App)
app.use(store)
app.mount('#app')

创建一个Pinia Store来管理状态:




// stores/counterStore.js
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

在组件中使用Pinia Store读取和修改数据:




<template>
  <div>
    <p>{{ counterStore.count }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>
 
<script setup>
import { useCounterStore } from './stores/counterStore'
 
const counterStore = useCounterStore()
</script>

以上代码展示了如何在Vue应用中使用Pinia来定义一个简单的状态存储，并在组件中读取和修改这个状态。

- 阅读更多 -

深入理解element-plus table二次封装：从理论到实践的全面指南

System

2024-08-15

所有,vue.js




<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :sortable="column.sortable"
    >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  name: 'EnhancedTable',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true,
      validator: columns => columns.every(column => 'prop' in column && 'label' in column)
    }
  }
}
</script>

这个简单的Vue组件展示了如何使用Element Plus的el-table和el-table-column组件来创建一个可以接收外部数据和列定义的表格。组件通过props接收tableData（表格数据）和columns（列定义），确保了数据的有效性，并且在模板中遍历columns以动态创建每一列。这个例子展示了如何进行表格的二次封装，使其更加灵活和易于复用。

System

2024-08-15

所有,vue.js

在Vue中使用vue-i18n实现多语言支持，并运行JS脚本自动生成多语言文件，可以按照以下步骤进行：

安装vue-i18n:




npm install vue-i18n

在Vue项目中设置vue-i18n:




// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
 
Vue.use(VueI18n);
 
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
};
 
const i18n = new VueI18n({
  locale: 'en', // set default locale
  messages, // set locale messages
});
 
export default i18n;

在main.js中引入i18n实例:




// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n';
 
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app');

在组件中使用多语言:




<template>
  <p>{{ $t("message.hello") }}</p>
</template>

运行JS脚本自动生成多语言文件:




// generate-language-files.js
const fs = require('fs');
const path = require('path');
 
const languages = ['en', 'zh'];
const basePath = './src/i18n/';
 
languages.forEach(lang => {
  const jsonContent = {
    message: {
      hello: `${lang} Hello, World`
    }
  };
 
  const jsonPath = path.join(basePath, `${lang}.json`);
  fs.writeFileSync(jsonPath, JSON.stringify(jsonContent, null, 2));
});

在generate-language-files.js脚本中，我们创建了一个简单的函数，用于生成两种语言的JSON文件。你可以根据实际需求扩展这个脚本，比如从外部源拉取语言数据。

确保在项目中运行这个脚本，它会在./src/i18n/目录下生成en.json和zh.json文件，里面包含了示例的多语言数据。

这样，你就完成了Vue项目中自定义设置多语言以及运行JS脚本自动生成多语言文件的所有步骤。

- 阅读更多 -

Vue 离线地图实现

System

2024-08-15

所有,vue.js

在Vue中实现离线地图，可以使用开源库如vue-offline-map或vue-amap（针对高德地图）。以下是使用vue-offline-map的一个基本示例：

首先安装vue-offline-map：




npm install vue-offline-map --save

在Vue组件中引入并使用：




<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
import Vue from 'vue';
import VueOfflineMap from 'vue-offline-map';
 
export default {
  components: {
    'offline-map': VueOfflineMap
  },
  data() {
    return {
      mapConfig: {
        // 地图配置
        center: [116.397428, 39.90923], // 中心点坐标
        zoom: 10, // 缩放级别
        // 其他地图配置...
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 初始化地图
      this.$refs.map.init(this.mapConfig);
    });
  }
};
</script>

请确保您有相应的离线地图资源，并且在vue-offline-map的配置中指定资源路径。这个库需要您根据自己的需求进行相应配置和调整。如果您需要使用其他地图服务，如Google Maps或OpenStreetMap，您可能需要找到对应的Vue插件或者自行封装相应的服务。

- 阅读更多 -

el-form组件使用resetFields重置失效问题解决，有效避坑

System

2024-08-15

所有,vue.js




<template>
  <el-form ref="formRef" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 提交表单逻辑
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    }
  }
};
</script>

这个代码示例展示了如何在Vue.js中使用Element UI的el-form组件和resetFields方法来重置表单。通过在重置方法中使用this.$nextTick确保DOM已经更新完成，避免了重置失效的问题。

- 阅读更多 -

vue实现图片上传至阿里云OSS，返回前端页面展示

System

2024-08-15

所有,vue.js

在Vue中实现图片上传至阿里云OSS并在前端页面上显示，你需要按以下步骤操作：

引入阿里云OSS的JavaScript SDK。
创建OSS实例并配置。
使用Vue组件来封装上传逻辑。
上传完成后，获取图片URL并在前端显示。

以下是一个简化的示例代码：

首先，安装阿里云OSS SDK：




npm install ali-oss

然后，在你的Vue组件中实现上传功能：




<template>
  <div>
    <input type="file" @change="uploadImage" />
    <img v-if="imageUrl" :src="imageUrl" alt="Uploaded Image" />
  </div>
</template>
 
<script>
import OSS from 'ali-oss';
 
export default {
  data() {
    return {
      imageUrl: null,
      client: null,
    };
  },
  created() {
    this.client = new OSS({
      region: '<Your region>',
      accessKeyId: '<Your accessKeyId>',
      accessKeySecret: '<Your accessKeySecret>',
      bucket: '<Your bucket>',
    });
  },
  methods: {
    async uploadImage(event) {
      const file = event.target.files[0];
      if (!file) return;
 
      try {
        const fileName = `${Date.now()}-${file.name}`;
        const result = await this.client.put(fileName, file);
        this.imageUrl = result.url;
      } catch (error) {
        console.error('Upload failed:', error);
      }
    },
  },
};
</script>

确保替换 <Your region>, <Your accessKeyId>, <Your accessKeySecret>, 和 <Your bucket> 为你的阿里云OSS配置信息。

这段代码中，创建了一个Vue组件，其中包含了一个文件输入元素和一个图片元素。当用户选择文件后，会触发uploadImage方法进行上传。上传成功后，图片URL会被赋值给imageUrl数据属性，图片会显示在页面上。

System

2024-08-15

所有,vue.js




<template>
  <el-dialog
    :visible="visible"
    :append-to-body="true"
    :lock-scroll="true"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 内容 -->
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleOpen() {
      // 防止页面滚动
      this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      document.body.style.position = 'fixed';
      document.body.style.top = `-${this.scrollTop}px`;
      document.body.classList.add('dialog-open');
    },
    handleClose() {
      // 恢复页面滚动
      document.body.style.position = '';
      document.body.style.top = '';
      document.body.classList.remove('dialog-open');
      document.body.scrollTop = document.documentElement.scrollTop = this.scrollTop;
    }
  }
};
</script>
 
<style>
.dialog-open {
  overflow: hidden;
}
</style>

这个代码实例展示了如何在Vue中使用Element UI的el-dialog组件时处理双滚动条和页面抖动的问题。通过监听对话框的打开和关闭事件，我们在handleOpen和handleClose方法中分别实现了禁用页面滚动和恢复页面滚动的逻辑，从而避免了这些问题。

- 阅读更多 -

Vue中监听路由参数变化的几种方式

System

2024-08-15

所有,vue.js

在Vue中，可以通过watch来监听路由参数的变化。以下是几种常见的方法：

使用watch监听$route对象:




export default {
  watch: {
    '$route.params': {
      immediate: true,
      handler(newVal, oldVal) {
        console.log('路由参数变化了', newVal, oldVal);
      }
    }
  }
}

使用beforeRouteUpdate导航守卫:




export default {
  beforeRouteUpdate(to, from, next) {
    console.log('路由参数变化了', to.params, from.params);
    next();
  }
}

使用watch结合$route对象的路由参数:




export default {
  watch: {
    '$route': function(to, from) {
      if (to.params.yourParamName !== from.params.yourParamName) {
        console.log('路由参数yourParamName变化了', to.params.yourParamName, from.params.yourParamName);
      }
    }
  }
}

以上代码可以在Vue组件中使用，用以监听路由参数的变化。

- 阅读更多 -

基于Spring Boot+区块链技术的农产品溯源平台设计与实现（前端VUE）

System

2024-08-15

所有,vue.js

由于提出的查询涉及到的内容较多，我将提供一个简化的例子，展示如何使用Vue.js和Spring Boot创建一个简单的前后端分离的应用程序。

后端(Spring Boot)部分:

创建一个简单的Spring Boot Controller:




@RestController
@RequestMapping("/api/products")
public class ProductController {
 
    @GetMapping
    public ResponseEntity<List<Product>> getAllProducts() {
        // 假设有一个服务来获取所有产品
        List<Product> products = productService.findAll();
        return ResponseEntity.ok(products);
    }
}

实体类和服务层代码略。

前端(Vue.js)部分:

安装Vue CLI并创建新项目:




npm install -g @vue/cli
vue create frontend
cd frontend

添加必要的依赖项，例如Axios用于HTTP请求:




npm install axios

创建Vue组件发送HTTP请求到后端API:




<template>
  <div>
    <h1>产品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await axios.get('http://localhost:8080/api/products');
        this.products = response.data;
      } catch (error) {
        console.error('Error fetching products:', error);
      }
    }
  }
};
</script>

配置Vue项目以连接到后端API服务器:




// Vue配置修改
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

启动前端和后端服务，确保前端代理配置正确，并在浏览器中查看Vue.js应用。

这个例子展示了如何使用Vue.js创建一个简单的前端应用，并使用Axios从后端的Spring Boot应用获取数据。同时，这个例子也展示了前后端如何通过REST API进行交互。在实际应用中，还需要考虑更多安全性和可用性的问题，例如使用JWT进行身份验证，使用负载均衡等。

- 阅读更多 -