分类前端技术下的文章

web学习之js写计算器

2024-08-11

所有,javascript

以下是一个简单的网页版计算器示例，使用JavaScript实现。这个计算器具有基本的加减乘除功能。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<script>
function calculate() {
    var num1 = parseFloat(document.getElementById('num1').value);
    var num2 = parseFloat(document.getElementById('num2').value);
    var operator = document.getElementById('operators').value;
    var result;
 
    switch (operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 === 0) {
                result = "Cannot divide by zero";
            } else {
                result = num1 / num2;
            }
            break;
        default:
            result = "Invalid operator";
            break;
    }
 
    document.getElementById('result').value = result;
}
</script>
</head>
<body>
 
<input type="text" id="num1" placeholder="Enter first number">
<select id="operators">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="num2" placeholder="Enter second number">
<button onclick="calculate()">Calculate</button>
<input type="text" id="result" placeholder="Result will be displayed here">
 
</body>
</html>

在这个例子中，我们定义了一个calculate函数，它会根据用户输入的运算符进行计算，并将结果显示在结果框中。这个计算器不包括高级功能，如括号、指数或根运算，但它提供了一个简单的起点来理解基本的JavaScript编程和计算逻辑。

npm包管理 -- nrm源管理及nvm Nodejs版本管理

2024-08-11

所有,javascript




# 安装nrm
npm install -g nrm
 
# 查看可用的源
nrm ls
 
# 切换到淘宝npm源
nrm use taobao
 
# 安装nvm，用于管理Node.js版本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# 或者使用wget（如果已安装wget）
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# 列出所有已安装的Node.js版本
nvm ls
 
# 安装一个新的Node.js版本
nvm install 14.17.0
 
# 切换到特定版本的Node.js
nvm use 14.17.0

以上代码提供了nrm和nvm的基本使用方法，包括安装、列出可用源、切换源、安装和切换Node.js版本。这些操作对于管理前端项目中的依赖和环境非常有帮助。

【WebJs 爬虫】逆向进阶技术必知必会

2024-08-11

所有,javascript

逆向进阶技术是指在网络爬虫开发中，对于处理JavaScript加密、逆向工程、高级加密解码等技术的掌握。以下是一些常用的逆向进阶技术及其简要解决方案：

JavaScript 加密解密：
- 解析和分析JavaScript加密算法。
- 使用Node.js环境中的Crypto库或第三方加密库进行解密。
逆向工程和动态分析：
- 使用浏览器开发者工具进行源代码跟踪和性能分析。
- 利用Node.js环境下的puppeteer或cheerio库进行动态页面的静态分析。
处理异步加载和Ajax请求：
- 使用Node.js的http库模拟请求获取数据或使用像axios、request等库进行数据抓取。
- 对于异步加载的内容，可能需要结合Node.js的事件循环和异步函数。
解决JavaScript混淆和混淆保护：
- 对混淆的代码进行重新格式化和清理，以便于阅读和分析。
- 使用专业的反混淆工具进行代码还原。
处理CAPTCHA和验证码：
- 使用第三方服务或库自动识别CAPTCHA和验证码。
- 对于复杂的验证流程，可能需要编写自定义的模拟或机器学习算法。
应对反爬策略：
- 使用代理、随机化请求头、设置适当的请求间隔等方式绕过简单的反爬机制。
- 对于复杂的反爬机制，可能需要结合多种技术和策略。

示例代码：




// 使用axios发送请求，处理动态加载的内容
const axios = require('axios');
 
axios.get('https://example.com/api/data', {
  params: {
    // 请求参数
  },
  headers: {
    // 自定义请求头
  }
})
.then(response => {
  // 处理响应数据
})
.catch(error => {
  // 错误处理
});

以上提供的是逆向进阶技术的概览和示例代码，具体应用时需要根据目标网站的实际加密方法、反爬策略和网站架构进行调整和优化。

2024-08-11




<template>
  <div>
    <div ref="pieChart" style="width: 400px; height: 400px;"></div>
    <div ref="barChart" style="width: 400px; height: 400px;"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChartPie = echarts.init(this.$refs.pieChart);
      let myChartBar = echarts.init(this.$refs.barChart);
 
      let optionPie = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c} ({d}%)'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            }
          }
        ]
      };
 
      let optionBar = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2011年', '2012年', '2013年', '2014年', '2015年'],
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['直接访问', '邮件营销', '搜索引擎', '联盟广告', '视频广告'],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            stack: '总访问量',
            label: {
              show: true,
              formatter: '{c}'
            },
            data: [320, 302, 30

2024-08-11




<template>
  <div>
    <h1>Vue 3的生命周期与方法</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivated, onErrorCaptured, onRenderTracked, onRenderTriggered } from 'vue';
 
export default defineComponent({
  name: 'LifecycleMethods',
 
  setup() {
    const count = ref(0);
 
    // 组件挂载之后执行的操作
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    // 组件卸载之前执行的操作
    onUnmounted(() => {
      console.log('组件已卸载');
    });
 
    // 可以访问setup中的响应式数据
    function increment() {
      count.value++;
    }
 
    // 返回响应式数据和方法，供模板使用
    return {
      count,
      increment
    };
  }
});
</script>

这个代码示例展示了如何在Vue 3中使用Composition API的setup函数来管理组件的生命周期。它使用了Vue 3提供的生命周期钩子，如onMounted, onUnmounted以及响应式变量和函数的定义方式。这个例子简单直观地展示了如何在setup函数中使用生命周期和响应式机制。

vscode中如何对vue文件代码进行格式化

2024-08-11

在VSCode中，要对Vue文件代码进行格式化，你需要安装并配置两个扩展：Vetur 和 Prettier - Code formatter。

安装Vetur扩展：
打开VSCode的扩展市场，搜索并安装Vetur扩展。Vetur扩展提供了Vue文件的语法高亮、片段、Emmet等功能。
安装Prettier - Code formatter扩展：
同样在扩展市场搜索并安装Prettier - Code formatter扩展。Prettier是一个代码格式化工具，可以格式化JavaScript/TypeScript/CSS/Sass/HTML等多种文件。

安装完成后，你需要在VSCode的设置中配置Vetur和Prettier的相关选项。

在VSCode中打开设置（快捷键Ctrl + ,），搜索并设置以下选项：




{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "singleQuote": true
      // 在这里可以添加更多的Prettier配置
    },
    "vscode-typescript": {
      "compilerOptions": {
        "jsx": "preserve"
        // 如果你在使用TypeScript并需要特定的编译器选项，可以在这里添加
      }
    }
  }
}

在上述配置中，editor.defaultFormatter 设置为 esbenp.prettier-vscode 表示默认使用Prettier进行格式化。vetur.format.defaultFormatter.html 和 vetur.format.defaultFormatter.js 设置为 prettier 表示Vetur将Vue文件中的HTML和JavaScript部分交给Prettier处理。

配置完成后，你可以通过以下几种方式来格式化Vue文件代码：

使用快捷键格式化当前文件：Shift + Alt + F（Windows/Linux）或 Shift + Option + F（MacOS）。
通过右键菜单格式化选定文件。
使用命令面板（Ctrl + Shift + P）搜索并运行Format Document命令。

确保你的VSCode用户设置（settings.json）中包含了上述配置，这样VSCode就会使用Prettier来格式化Vue文件。

Java开发的审批流系统，前端使用vue，支持常态化工作审批流程

2024-08-11

为了创建一个简单的Java后端和Vue前端的审批流系统，我们可以使用Spring Boot来开发后端API，使用Vue.js来创建前端界面，并使用Axios在两者之间进行通信。

以下是一个简化的示例，仅包含核心代码和概念。

后端（Java, Spring Boot）:




// OwnerController.java
@RestController
@RequestMapping("/owners")
public class OwnerController {
 
    @GetMapping("/{ownerId}/approvals")
    public ResponseEntity<?> getOwnerApprovals(@PathVariable Long ownerId) {
        // 获取owner的审批信息
        // ...
        return ResponseEntity.ok(approvals);
    }
 
    @PostMapping("/{ownerId}/approvals")
    public ResponseEntity<?> submitApproval(@PathVariable Long ownerId, @RequestBody Approval approval) {
        // 提交owner的审批信息
        // ...
        return ResponseEntity.ok(submittedApproval);
    }
}

前端（Vue.js）:




<!-- ApprovalList.vue -->
<template>
  <div>
    <ul>
      <li v-for="approval in approvals" :key="approval.id">
        {{ approval.description }}
        <button @click="submitApproval(approval)">提交审批</button>
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      approvals: []
    };
  },
  methods: {
    fetchApprovals() {
      axios.get('/owners/123/approvals')
        .then(response => {
          this.approvals = response.data;
        })
        .catch(error => {
          console.error('Error fetching approvals:', error);
        });
    },
    submitApproval(approval) {
      axios.post('/owners/123/approvals', approval)
        .then(response => {
          console.log('Approval submitted:', response.data);
        })
        .catch(error => {
          console.error('Error submitting approval:', error);
        });
    }
  },
  created() {
    this.fetchApprovals();
  }
};
</script>

在这个例子中，我们定义了一个简单的Vue组件ApprovalList，它使用Axios从后端API获取审批项，并允许用户提交审批。这个例子展示了前后端如何通信以及如何在Vue组件中处理HTTP请求。

vue2项目vue-qrcode-reader 扫一扫二维码插件

2024-08-11

在Vue 2项目中使用vue-qrcode-reader插件来实现扫一扫二维码的功能，你需要按照以下步骤操作：

安装vue-qrcode-reader插件：




npm install vue-qrcode-reader --save

在你的Vue组件中引入并注册该插件：




<template>
  <div>
    <qrcode-reader @decode="onDecode"></qrcode-reader>
  </div>
</template>
 
<script>
import { QrcodeReader } from 'vue-qrcode-reader'
 
export default {
  components: {
    QrcodeReader
  },
  methods: {
    onDecode(decodedString) {
      console.log(decodedString)
      // 处理扫描结果
    }
  }
}
</script>

确保你的应用有访问摄像头的权限，并在你的main.js或App.vue中添加必要的样式：




<style>
.qrcode-reader {
  width: 100%; /* 根据需要自定义宽高 */
}
</style>

确保你的Vue项目能够访问用户的摄像头，这通常需要在HTTPS环境下工作，并且需要用户授予相应的权限。

以上代码提供了一个基本的实现，你可以根据自己的需求进行扩展和修改。例如，可以添加扫描按钮、处理错误、控制扫描区域大小等。

Vue 监听store数据变化

2024-08-11

在Vue中，可以使用watch来监听Vuex store中数据的变化。以下是一个简单的例子：




<template>
  <div>{{ count }}</div>
</template>
 
<script>
import { mapState } from 'vuex';
 
export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  },
  watch: {
    count(newVal, oldVal) {
      // 当store中的count发生变化时，这个函数会被调用
      console.log(`count changed from ${oldVal} to ${newVal}`);
    }
  }
};
</script>

在这个例子中，我们使用了mapState辅助函数来将store中的count状态映射到局部计算属性。然后我们使用watch来监听这个计算属性的变化。当count变化时，watcher函数会被触发，并执行相应的逻辑。