标签 Javascript 下的文章

2024-08-21




<template>
  <div>
    <!-- 插入文本 -->
    <p>{{ message }}</p>
 
    <!-- 插入HTML -->
    <!-- 使用v-html指令插入HTML，但是内容应该是可控的，避免XSS攻击 -->
    <div v-html="rawHtml"></div>
 
    <!-- 插入JavaScript表达式 -->
    <button @click="sayHello">Click me</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      // 不推荐直接插入未经过滤的用户输入作为HTML
      // 如果需要插入HTML，请确保内容是安全的
      rawHtml: '<span style="color: red">This should be red.</span>'
    }
  },
  methods: {
    sayHello() {
      alert(this.message);
    }
  }
}
</script>

在这个例子中，我们使用Vue的模板语法来插入文本、HTML和事件处理器。{{ message }}插入文本，v-html="rawHtml"插入HTML（注意：不建议直接插入用户输入的HTML以避免XSS攻击），@click="sayHello"绑定了一个点击事件，当按钮被点击时会触发sayHello方法。

- 阅读更多 -

前端随笔：HTML/CSS/JavaScript和Vue

System

2024-08-21

所有,vue.js

以下是一个简单的Vue应用示例，它展示了如何使用Vue的模板语法、计算属性和方法来处理用户输入，并动态更新DOM。




<!DOCTYPE html>
<html>
<head>
  <title>Vue 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
  <style>
    #app { text-align: center; }
    .input-group { margin-bottom: 10px; }
    .input-group input { margin: 0 10px; }
  </style>
</head>
<body>
  <div id="app">
    <div class="input-group">
      <input type="text" v-model="firstName" placeholder="First Name">
      <input type="text" v-model="lastName" placeholder="Last Name">
    </div>
    <div>
      <button @click="greet">Greet</button>
    </div>
    <div v-if="greeting">
      <p>{{ fullName }}</p>
    </div>
  </div>
 
  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: '',
        lastName: '',
        greeting: ''
      },
      computed: {
        fullName: function() {
          return this.firstName + ' ' + this.lastName;
        }
      },
      methods: {
        greet: function() {
          this.greeting = 'Hello, ' + this.fullName + '!';
        }
      }
    });
  </script>
</body>
</html>

这段代码创建了一个简单的Vue应用，其中包含两个文本输入框和一个按钮。用户可以输入他们的名字，点击按钮后，会显示一个欢迎消息。这里使用了Vue的v-model指令来实现数据的双向绑定，计算属性fullName来根据firstName和lastName动态计算全名，以及方法greet来更新greeting数据属性。

- 阅读更多 -

Vue.js 中的 Extends 继承机制与组件复用实践

System

2024-08-21

所有,vue.js




<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="onClick">点击我</button>
  </div>
</template>
 
<script>
export default {
  extends: BaseComponent,
  data() {
    return {
      title: '子组件标题',
      description: '这是子组件的描述。'
    };
  },
  methods: {
    onClick() {
      alert('按钮被点击。');
    }
  }
}
</script>

这个例子中，我们定义了一个BaseComponent基类组件，它包含了一个可复用的onClick方法。然后我们创建了一个子组件，它通过extends: BaseComponent继承了基类的功能，并添加了特定的数据和模板内容。这样做可以极大地减少代码冗余和提高开发效率。

- 阅读更多 -

Vue.js实战 | 使用Vue开发扫雷游戏，包含完整代码

System

2024-08-21

所有,vue.js




<template>
  <div id="app">
    <h1>扫雷游戏</h1>123</s>
    <div id="minefield">
      <button
        v-for="(tile, index) in tiles"
        :key="index"
        :data-mine="tile.isMine"
        :disabled="tile.isRevealed"
        @click="revealTile(index)"
      >
        {{ tile.adjacentMines }}
      </button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      tiles: [],
    };
  },
  methods: {
    // 初始化游戏
    initGame() {
      const numberOfTiles = 100;
      const numberOfMines = 10;
      this.tiles = Array.from({ length: numberOfTiles }, (_, i) => ({
        id: i,
        isRevealed: false,
        isMine: false,
        adjacentMines: 0,
      }));
      this.placeMines(numberOfMines);
      this.calculateAdjacentMines();
    },
    // 布置雷
    placeMines(count) {
      for (let i = 0; i < count; ) {
        const index = Math.floor(Math.random() * this.tiles.length);
        if (!this.tiles[index].isMine) {
          this.tiles[index].isMine = true;
          i++;
        }
      }
    },
    // 计算每个格子周围雷的数量
    calculateAdjacentMines() {
      this.tiles.forEach((tile) => {
        if (!tile.isMine) {
          const adjacentTiles = this.getAdjacentTiles(tile.id);
          tile.adjacentMines = adjacentTiles.filter((t) => t.isMine).length;
        }
      });
    },
    // 获取一个格子周围的其他格子
    getAdjacentTiles(tileId) {
      const tileIndex = tileId;
      const tileRow = Math.floor(tileIndex / 10);
      const tileColumn = tileIndex % 10;
      return [
        this.tiles[tileIndex - 11], // Top-left
        this.tiles[tileIndex - 10], // Top-middle
        this.tiles[tileIndex - 9],  // Top-right
        this.tiles[tileIndex - 1],  // Left
        this.tiles[tileIndex + 1],  // Right
        this.tiles[tileIndex + 9],  // Bottom-left
        this.tiles[tileIndex + 10], // Bottom-middle
        this.tiles[tileIndex + 11], // Bottom-right
      ].filter((t) => t); // Ensure tiles are within the bounds of the array
    },
    // 显示格子
    revealTile(tileId) {
      const tile = this.tiles[tileId];
      if (!tile.isRevealed && !tile.isMine) {

- 阅读更多 -

Vue.js 和 Node.js 全栈项目的运行与部署指南

System

2024-08-21

所有,vue.js




# 安装项目依赖
cd your-project-directory
npm install
 
# 开发模式运行（前端和后端）
npm run dev
 
# 构建生产版本
npm run build
 
# 运行构建版本（注意：需要先构建才能运行）
npm start
 
# 部署时，确保安装了pm2
npm install pm2 -g
 
# 启动后端服务（确保构建完成）
pm2 start ecosystem.config.js
 
# 查看后端服务状态
pm2 list
 
# 保存当前进程状态
pm2 save
 
# 重新加载进程状态
pm2 resurrect
 
# 更新代码后重启后端服务
pm2 restart ecosystem.config.js

这个示例展示了如何在本地开发环境中启动和构建一个Vue.js和Node.js全栈项目，以及如何使用pm2进行生产环境的进程管理。这是一个典型的开发和部署流程，对于学习全栈开发的开发者来说非常有帮助。

- 阅读更多 -

vue的package.json文件的详细说明

System

2024-08-21

所有,vue.js

package.json 文件是每个 Node.js 项目中都必须要有的一个文件，Vue 项目也不例外。这个文件定义了项目的配置信息，包括项目的名称、版本、依赖项、脚本命令等。

以下是一个基本的 Vue 项目的 package.json 文件示例：




{
  "name": "vue-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "keywords": [
    "vue"
  ],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2"
  }
}

解释各字段的含义：

name 和 version: 定义了项目的名称和版本号。
scripts: 定义了可以用 npm run 命令来执行的脚本，比如 npm run serve 会启动开发服务器。
dependencies 和 devDependencies: 分别列出了项目运行时的依赖和开发时的依赖。
description, keywords, author, license: 描述了项目的信息，关键词，作者和许可证，这些可以帮助其他开发者找到你的项目。

注意：具体的字段可能会根据 Vue 项目的创建时使用的 Vue CLI 版本和配置的不同而有所变化。

System

2024-08-21

所有,vue.js

报错解释：

这个错误表明Vue编译器在尝试从src/main.js文件中导入@/router时失败了。@通常在Vue项目中用于代指src目录，而router通常指的是Vue Router实例。这个报错通常意味着编译器无法找到对应的文件或模块。

解决方法：

确认src目录下是否有router文件夹或router/index.js文件。
如果你的Vue Router安装在src/router目录下，检查src/router目录是否存在，并且包含一个可被导入的index.js文件。
检查src/router/index.js文件内是否有导出语句（例如export default routerInstance）。
如果以上都正确，检查项目的路径别名配置，确保在vue.config.js或jsconfig.json中正确配置了路径别名@指向src目录。
如果你使用的是相对路径导入，请确保路径正确无误。

如果以上步骤都无法解决问题，可能需要检查项目的依赖是否正确安装，或者检查IDE或编辑器的配置是否有误。

- 阅读更多 -

JS+CSS实现CodePen首页多行打字机动画，最通俗易懂版本

System

2024-08-20

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodePen Home Page Typography Animation</title>
<style>
  .typewrite {
    font-size: 40px;
    color: #fff;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid orange;
    letter-spacing: .15em;
    animation: typing 3.5s steps(20, end), blink-caret .75s step-end infinite;
  }
  @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }
  @keyframes blink-caret {
    from, to { opacity: 0; }
    50% { opacity: 1; }
  }
</style>
</head>
<body>
<div class="typewrite">
  Welcome to CodePen!
</div>
</body>
</html>

这段代码使用了CSS的@keyframes规则来创建打字机动画，通过改变元素的宽度从0到100%来模拟文本的输出，同时提供了一个闪烁的光标动画，提升了用户体验。这个例子简洁易懂，适合作为初学者理解和实践CSS动画的教学材料。

System

2024-08-20

所有,ajax

由于原代码较为复杂且不包含具体的学生管理功能实现，我们将提供一个简化版的学生管理功能的核心代码。




// StudentServlet.java
@WebServlet("/student")
public class StudentServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");
        if ("add".equals(action)) {
            addStudent(request, response);
        } else if ("delete".equals(action)) {
            deleteStudent(request, response);
        }
        // 其他操作...
    }
 
    private void addStudent(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String grade = request.getParameter("grade");
        // 添加学生逻辑...
        response.getWriter().write("添加成功");
    }
 
    private void deleteStudent(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String id = request.getParameter("id");
        // 删除学生逻辑...
        response.getWriter().write("删除成功");
    }
    // 其他操作的处理方法...
}




<!-- add_student.html -->
<form id="addStudentForm">
    姓名: <input type="text" name="name" />
    年级: <input type="text" name="grade" />
    <button type="button" onclick="addStudent()">添加学生</button>
</form>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function addStudent() {
    var formData = $("#addStudentForm").serialize();
    $.ajax({
        url: "/student?action=add",
        type: "GET",
        data: formData,
        success: function(response) {
            alert(response);
        },
        error: function() {
            alert("添加失败");
        }
    });
}
</script>

在这个简化版的代码中，我们定义了一个StudentServlet，它处理学生的添加和删除操作。HTML页面中使用JavaScript和jQuery通过Ajax向Servlet发送请求。Servlet处理完请求后，通过响应体返回操作结果。这个例子展示了Servlet与Ajax交互的基本方式，适用于学习和教学目的。

- 阅读更多 -

JS和CSS实现的原生轮播图

System

2024-08-20

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生轮播图</title>
<style>
  .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    overflow: hidden;
  }
  .carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: transform 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="carousel">
  <img src="image1.jpg" alt="Image 1" class="current">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
<script>
  const images = document.querySelectorAll('.carousel img');
  let currentIndex = 0;
 
  function goToNextImage() {
    images[currentIndex].classList.remove('current');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('current');
  }
 
  setInterval(goToNextImage, 3000);
</script>
 
</body>
</html>

这个简单的代码实例展示了如何使用原生的HTML、CSS和JavaScript来创建一个基本的轮播图效果。轮播图中的图片通过class="current"来控制显示，并且使用setInterval函数每3秒钟切换到下一张图片。这个例子教会开发者如何用最基本的代码实现一个轮播效果，而无需依赖外部库。

- 阅读更多 -