<template>
  <div class="music-player">
    <audio ref="audio" :src="currentSong.url" @ended="nextSong"></audio>
    <div class="song-list">
      <div
        class="song-item"
        v-for="(song, index) in songList"
        :key="song.id"
        @click="play(index)"
      >
        {{ song.name }}
      </div>
    </div>
    <div class="player-controls">
      <button @click="playPrev">上一曲</button>
      <button @click="togglePlay">
        {{ isPlaying ? '暂停' : '播放' }}
      </button>
      <button @click="playNext">下一曲</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songList: [
        // ... 填充音乐列表
      ],
      currentIndex: 0,
      isPlaying: false,
    };
  },
  computed: {
    currentSong() {
      return this.songList[this.currentIndex] || {};
    },
  },
  methods: {
    play(index) {
      this.currentIndex = index;
      this.$refs.audio.play();
      this.isPlaying = true;
    },
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.audio.pause();
      } else {
        this.$refs.audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    playPrev() {
      this.currentIndex = (this.currentIndex - 1 + this.songList.length) % this.songList.length;
      this.$refs.audio.play();
    },
    playNext() {
      this.currentIndex = (this.currentIndex + 1) % this.songList.length;
      this.$refs.audio.play();
    },
    ended() {
      this.playNext();
    }
  },
};
</script>

<style>
.song-list {
  /* 样式定义 */
}
.song-item {
  /* 样式定义 */
}
.player-controls {
  /* 样式定义 */
}
</style>

// .env 文件
ENV_VAR=value

// vite.config.ts 或 vue 文件中
console.log(import.meta.env.ENV_VAR); // 输出：value

if (process.env.NODE_ENV === 'development') {
  // 只在 Node.js 环境下执行的代码
}

node -v
npm -v

npm install -g @vue/cli

vue --version

vue create my-project

npm install crypto-js

import CryptoJS from 'crypto-js'

export default {
  methods: {
    encryptPassword(password) {
      const secretKey = "your-secret-key" // 密钥应该是安全的，不应该在前端暴露
      return CryptoJS.AES.encrypt(password, secretKey).toString()
    }
  }
}

<!-- Add this if you don't have it already -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;

@RestController
public class UserController {

    private static final String SECRET_KEY = "your-secret-key"; // 与前端使用的密钥必须一致

    @PostMapping("/login")
    public String login(@RequestParam String encryptedPassword) {
        String password = decryptPassword(encryptedPassword);
        // 在这里进行密码验证等逻辑
        return "Login successful";
    }

    private String decryptPassword(String encryptedPassword) {
        try {
            byte[] keyBytes = SECRET_KEY.getBytes("UTF-8");
            SecretKeySpec secretKey = new SecretKeySpec(keyBytes, "AES");
            Cipher cipher = Cipher.getInstance("AES");
            cipher.init(Cipher.DECRYPT_MODE, secretKey);
            byte[] original = cipher.doFinal(Base64.decodeBase64(encryptedPassword));
            return new String(original);
        } catch (Exception e) {
            throw new RuntimeException("Error decrypting password", e);
        }
    }
}

const express = require('express');
const app = express();
const port = 3000;

// 假设我们有一个简单的商品列表
const items = [
  { id: 1, name: '旧手机', price: 50 },
  { id: 2, name: '旧笔记本电脑', price: 100 }
];

app.get('/items', (req, res) => {
  res.json(items); // 返回JSON格式的商品列表
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

<template>
  <div>
    <h1>二手商品列表</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - 价格: {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      try {
        const response = await fetch('http://localhost:3000/items');
        this.items = await response.json();
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    }
  }
};
</script>

<!DOCTYPE html>
<html>
<head>
    <title>Eruda Mobile Debugger</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        // 动态检测是否需要引入eruda
        if (location.search.indexOf('eruda=true') !== -1) {
            // 引入eruda库
            (function () {
                var src = 'https://cdn.jsdelivr.net/npm/eruda';
                if (process.env.NODE_ENV === 'development') {
                    src += '/eruda.min.js'; // 开发环境
                } else {
                    src += '/eruda.min.js'; // 生产环境
                }
                // 创建一个script元素
                var script = document.createElement('script');
                script.async = true;
                script.src = src;
                script.onload = function () {
                    // 脚本加载完成后初始化eruda
                    eruda.init();
                };
                document.head.appendChild(script);
            })();
        }
    </script>
</head>
<body>
    <h1>移动端控制台调试示例</h1>
    <p>打开手机浏览器，访问此页面，并打开开发者工具，或者通过地址栏输入 eruda=true 来启动eruda控制台。</p>
</body>
</html>

<template>
  <div>
    <h1 v-text="message"></h1>
    <button @click="updateMessage">Update Message</button>
    <div v-if="isEditing">
      <input v-model="message">
    </div>
    <div v-else>
      <p>{{ message }}</p>
    </div>
    <button @click="toggleEdit">{{ isEditing ? 'Save' : 'Edit' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      isEditing: false
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message!';
    },
    toggleEdit() {
      this.isEditing = !this.isEditing;
    }
  },
  beforeCreate() {
    console.log('beforeCreate: Data and events are not available.');
  },
  created() {
    console.log('created: Data and events are

npm install html2canvas

<template>
  <div>
    <div id="chartContainer">
      <!-- 图表内容 -->
    </div>
    <button @click="exportToHtml">导出为HTML</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async exportToHtml() {
      try {
        const element = document.getElementById('chartContainer');
        const canvas = await html2canvas(element);
        const img = canvas.toDataURL('image/png');

        const htmlContent = `
          <html>
            <head><title>图表</title></head>
            <body>
              <img src="${img}" alt="图表" style="max-width: 100%;" />
            </body>
          </html>
        `;

        const blob = new Blob([htmlContent], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'chart.html';
        a.click();
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error('导出失败:', error);
      }
    }
  }
};
</script>

<template>
  <el-breadcrumb class="custom-breadcrumb">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped>
::v-deep .custom-breadcrumb .el-breadcrumb__inner {
  color: blue !important;
}
</style>