分类前端技术下的文章

2024-08-11

以下是一个使用PHP、AJAX和Layui实现的简单的删除列表功能的示例代码：

首先，我们需要HTML部分，创建一个用于显示列表的容器和一个删除按钮：




<!DOCTYPE html>
<html>
<head>
    <title>删除列表示例</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
 
<div class="layui-container">
    <table id="item-list" class="layui-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 这里将动态插入列表项 -->
        </tbody>
    </table>
</div>
 
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
// JavaScript代码将放在这里
</script>
</body>
</html>

然后是PHP代码，假设我们有一个数据库连接和一个获取数据的函数：




<?php
// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=example_db', 'username', 'password');
 
// 获取列表数据的函数
function getListData() {
    global $db;
    $stmt = $db->query('SELECT id, name FROM items');
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
 
// 调用函数并输出JSON
$listData = getListData();
header('Content-Type: application/json');
echo json_encode($listData);
?>

最后是AJAX和Layui的JavaScript代码：




layui.use(['table', 'jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;
 
  // 获取数据并填充表格
  $.getJSON("get_list_data.php", function(data){
    var rows = '';
    $.each(data, function(index, item) {
      rows += '<tr>' +
              '<td>' + item.id + '</td>' +
              '<td>' + item.name + '</td>' +
              '<td><button class="layui-btn layui-btn-danger layui-btn-xs delete-btn" data-id="' + item.id + '">删除</button></td>' +
              '</tr>';
    });
    $('#item-list tbody').html(rows);
    table.init('table', {
      height: 315
    });
  });
 
  // 删除操作的AJAX请求
  $('#item-list').on('click', '.delete-btn', function(){
    var id = $(this).data('id');
    if(confirm("确定要删除吗？")){
      $.post('delete_item.php', { id: id }, function(data){
        if(data.status){
          layer.msg(data.msg, {icon: 6});
          // 删除成功后刷新列表
          location.reload();
        } else {
          layer.msg(data.msg, {icon: 5});
        }
      }, 'json');
    }
  });
});

在这段代码中，我们使用了Layui的table和layer模块，以及jQuery来处理AJAX请求。当删除按钮被点击时，会弹出确认框询问用户是否确定删除。如果确认，则向delete_item.php发送一个POST请求，并在成功删除后刷新页面。

delete_item.php的PHP代码可能如下所示：




<?php
// 连接数据库
$

- 阅读更多 -

Ajax 技术学习（JavaEE）—— 实现二级下拉联动

System

2024-08-11

所有,ajax

以下是一个简化的示例，展示了如何使用jQuery和Java后端来实现二级下拉联动的一部分。前端使用jQuery来处理Ajax请求，后端使用Servlet处理请求并返回数据。

前端代码（HTML + jQuery）:




<!DOCTYPE html>
<html>
<head>
    <title>二级下拉联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#firstSelect').change(function() {
                var firstValue = $(this).val();
                if (firstValue != '') {
                    $.ajax({
                        url: 'GetSecondLevelItems',
                        type: 'POST',
                        data: {firstValue: firstValue},
                        success: function(data) {
                            var secondSelect = $('#secondSelect');
                            secondSelect.find('option').remove();
                            $.each(data, function(key, value) {
                                secondSelect.append($('<option></option>').attr('value', key).text(value));
                            });
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <select id="firstSelect">
        <option value="">请选择第一级分类</option>
        <option value="category1">第一级分类1</option>
        <option value="category2">第一级分类2</option>
    </select>
    <select id="secondSelect">
        <option value="">请选择第二级分类</option>
    </select>
</body>
</html>

后端代码（Java Servlet）:




import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
 
public class GetSecondLevelItems extends HttpServlet {
    private Map<String, Map<String, String>> categories = new HashMap<>();
 
    @Override
    public void init() {
        // 初始化分类数据
        Map<String, String> category1Items = new HashMap<>();
        category1Items.put("1", "第二级分类1-1");
        category1Items.put("2", "第二级分类1-2");
        categories.put("category1", category1Items);
 
        Map<String, String> category2Items = new HashMap<>();
        category2Items.put("3", "第二级分类2-1");
        category2Items.put("4", "第二级分类2-2");
        categories.put("category2", category2Items);
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String firstValue = request.getParameter("firstValue");
        response.s

- 阅读更多 -

AJAX总结

System

2024-08-11

所有,ajax

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以使网页的部分内容能够异步更新，而不需要重新加载整个页面。

以下是使用AJAX的基本步骤：

创建一个新的XMLHttpRequest对象。
设置请求的参数，包括请求的方法（GET或POST）、URL以及响应处理函数。
发送请求。
服务器响应时，执行步骤2中设置的响应处理函数。

示例代码：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 设置请求参数
// URL - 想要请求的服务器的URL
// 响应处理函数
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 请求成功，处理响应数据
        var response = xhr.responseText;
        console.log(response);
    }
};
 
// 发送GET请求
xhr.open("GET", "your-url", true);
xhr.send();
 
// 如果需要发送POST请求，可以这样做：
// xhr.open("POST", "your-url", true);
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头
// xhr.send("param1=value1&param2=value2"); // 发送数据

以上代码演示了如何使用AJAX发送GET和POST请求，并在收到服务器响应时处理数据。

System

2024-08-11

所有,ajax

在Vue中，你可以使用axios库来上传文件和提交表单数据。以下是一个简单的例子：

安装axios（如果你还没有安装）：




npm install axios

在你的Vue组件中使用axios上传文件和表单数据：




<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="formData.name" placeholder="Name">
      <input type="file" @change="selectFile">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      formData: {
        name: '',
        file: null
      }
    };
  },
  methods: {
    selectFile(event) {
      this.formData.file = event.target.files[0];
    },
    submitForm() {
      const formData = new FormData();
      formData.append('name', this.formData.name);
      formData.append('file', this.formData.file);
 
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // Handle response
        console.log(response);
      })
      .catch(error => {
        // Handle error
        console.log(error);
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个简单的表单，包含一个文本输入和一个文件输入。我们使用FormData来存储表单数据，并在用户提交表单时调用submitForm方法。在submitForm方法中，我们将文件和表单数据通过axios发送到服务器的/upload路径。

请注意，你需要根据你的服务器端点和API要求调整URL和headers。

- 阅读更多 -

PHP+ajax+layui实现双重列表的动态绑定

System

2024-08-11

所有,ajax

以下是一个简化的PHP+Ajax+Layui实现双重列表动态绑定的示例代码：

PHP端代码（get\_right\_options.php）：




<?php
// 假设这是从数据库获取选项的逻辑
$leftOptions = [
    ['id' => 1, 'name' => '选项A'],
    ['id' => 2, 'name' => '选项B'],
    // ...
];
$rightOptions = [
    // 根据左边选中的选项动态获取
];
 
// 返回JSON数据
echo json_encode([
    'leftOptions' => $leftOptions,
    'rightOptions' => $rightOptions
]);
?>

HTML和JavaScript代码：




<!DOCTYPE html>
<html>
<head>
    <title>双重列表示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"  media="all">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
 
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">左边列表</label>
        <div class="layui-input-block">
            <select name="left" xm-select="left" xm-select-skin="normal" xm-select-search="" xm-select-search-select="">
                <!-- 左边选项将被动态插入 -->
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">右边列表</label>
        <div class="layui-input-block">
            <select name="right" xm-select="right" xm-select-skin="normal" xm-select-search="" xm-select-search-select="">
                <!-- 右边选项将被动态插入 -->
            </select>
        </div>
    </div>
</form>
 
<script>
layui.use('form', function(){
    var form = layui.form;
});
 
$(document).ready(function(){
    // 初始化左边列表
    $.ajax({
        url: 'get_right_options.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var leftSelect = $('[xm-select=left]');
            leftSelect.html(''); // 清空原有选项
            $.each(data.leftOptions, function(index, item) {
                leftSelect.append($('<option>').text(item.name).attr('value', item.id));
            });
            form.render('select'); // 更新左边列表的Layui样式
            
            // 初始化右边列表，这里应根据实际逻辑获取
            var rightSelect = $('[xm-select=right]');
            rightSelect.html(''); // 清空原有选项
            $.each(data.rightOptions, function(index, item) {
                rightSelect.append($('<option>').text(item.name).attr('value', item.id));
            });
            form.render('select'); // 更新右边列表的Layui样式
        }
    });
 
    // 监听左边列表选择变化，动态更新

- 阅读更多 -

【JavaEE网络】用Form与Ajax构建HTTP请求

System

2024-08-11

所有,ajax

在Java EE环境中，可以使用javax.ws.rs.client包中的API来发送HTTP请求。以下是一个使用Form和Ajax发送POST请求的简单示例：

首先，创建一个Servlet来处理Ajax请求：




@WebServlet("/ajax-submit")
public class AjaxSubmitServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 使用Form提交的数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
 
        // 假设这里是验证用户名密码的逻辑
        boolean isValid = authenticate(username, password);
 
        // 设置响应内容类型
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
 
        // 返回JSON结果
        if (isValid) {
            out.print("{\"status\":\"success\", \"message\":\"登录成功\"}");
        } else {
            out.print("{\"status\":\"error\", \"message\":\"用户名或密码错误\"}");
        }
 
        out.flush();
    }
 
    private boolean authenticate(String username, String password) {
        // 这里是模拟验证，实际应用中需要查询数据库等操作
        return "user1".equals(username) && "pass123".equals(password);
    }
}

然后，创建一个HTML页面，使用Ajax发送请求：




<!DOCTYPE html>
<html>
<head>
    <title>Ajax 登录示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#loginForm').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    type: 'POST',
                    url: '/your-app/ajax-submit',
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        // 处理响应，例如更新UI
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + status + "\nError: " + error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="loginForm">
        <label for="username">用户名:</label><br>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码:</label><br>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

在这个例子中，我们使用了j

- 阅读更多 -

Next.js 学习笔记——缓存

System

2024-08-11

所有,javascript

在Next.js中，可以通过几种方式来利用缓存来提高应用的性能。

静态内容缓存

Next.js会自动缓存每个页面的HTML，这意味着在页面首次加载后，相同页面的HTML将被自动缓存。

数据缓存

可以使用getStaticProps和getServerSideProps来缓存数据，这两个函数可以接收一个revalidate参数，该参数可以是一个布尔值或者一个时间戳。设置为布尔值时，表示该页面在每次请求时都会去服务器上重新获取数据。设置为时间戳时，表示在该时间戳之后，自动重新获取数据。




export async function getStaticProps({ params, revalidate = 10 }) {
  // ...
}

服务端组件缓存

服务端组件（SSR）也可以缓存数据，使用方式与getStaticProps类似。




export async function getServerSideProps({ params, revalidate = 10 }) {
  // ...
}

路由缓存

可以通过next.config.js来配置路由的缓存行为。




module.exports = {
  revalidate: 60, // 表示每60秒重新验证一次
}

全页面缓存

如果需要对整个网站进行缓存，可以考虑使用服务端渲染（SSR）或静态生成（SSG）。

在Next.js中，可以通过在页面级别指定getServerSideProps或getStaticProps来实现SSR或SSG，这两个函数都可以接收一个revalidate参数，用于设置缓存重新验证的频率。

自定义缓存

Next.js提供了next/cache来实现自定义缓存。




import { cache } from 'next/cache'
 
// 设置缓存
cache.set('key', 'value')
 
// 获取缓存
const value = cache.get('key')

以上是Next.js中关于缓存的一些基本概念和使用方法，具体应用时需要根据实际需求来选择合适的缓存策略。

- 阅读更多 -

【华为OD机试】叠积木（贪心算法—Java&Python&C++&JS实现）

System

2024-08-11

所有,javascript

以下是使用Java、Python、C++和JavaScript实现的栈式算法解决方案。

Java实现:




import java.util.Arrays;
 
public class StackBlocks {
    public static int[] stackBlocks(int[] blocks) {
        Arrays.sort(blocks); // 对块进行排序
        int stacks = 1; // 初始化栈数为1
        int top = blocks[0]; // 栈顶块的高度初始化为数组中的第一个元素
 
        for (int i = 1; i < blocks.length; i++) {
            if (blocks[i] > top) { // 如果当前块比栈顶块高
                top = blocks[i]; // 更新栈顶块的高度
                stacks++; // 栈数增加
            }
        }
        return new int[]{stacks, top}; // 返回栈数和最高的块高
    }
 
    public static void main(String[] args) {
        int[] blocks = {5, 2, 3, 4, 1};
        int[] result = stackBlocks(blocks);
        System.out.println("栈的数量: " + result[0]);
        System.out.println("最高的块高: " + result[1]);
    }
}

Python实现:




def stack_blocks(blocks):
    blocks.sort()  # 对块进行排序
    stacks = 1     # 初始化栈数为1
    top = blocks[0]  # 栈顶块的高度初始化为数组中的第一个元素
 
    for block in blocks[1:]:
        if block > top:  # 如果当前块比栈顶块高
            top = block  # 更新栈顶块的高度
            stacks += 1  # 栈数增加
    return stacks, top  # 返回栈数和最高的块高
 
blocks = [5, 2, 3, 4, 1]
stacks, top = stack_blocks(blocks)
print("栈的数量:", stacks)
print("最高的块高:", top)

C++实现:




#include <iostream>
#include <vector>
#include <algorithm>
 
using namespace std;
 
vector<int> stackBlocks(vector<int>& blocks) {
    sort(blocks.begin(), blocks.end()); // 对块进行排序
    int stacks = 1; // 初始化栈数为1
    int top = blocks[0]; // 栈顶块的高度初始化为数组中的第一个元素
 
    for (int i = 1; i < blocks.size(); i++) {
        if (blocks[i] > top) { // 如果当前块比栈顶块高
            top = blocks[i]; // 更新栈顶块的高度
            stacks++; // 栈数增加
        }
    }
    return {stacks, top}; // 返回栈数和最高的块高
}
 
int main() {
    vector<int> blocks = {5, 2, 3, 4, 1};
    vector<int> result = stackBlocks(blocks);
    cout << "栈的数量: " << result[0] << endl;
    cout << "最高的块高: " << result[1] << endl;
    return 0;
}

JavaScript实现:




function stackBlocks(blocks) {
    blocks.sort((a, b) => a - b); // 对块进行排序
    let stacks = 1; // 初始化栈数为1
    let top = blocks[0]; // 栈顶块的高度初始化为数组中的第一个元素
 
    for (let i = 1; i < blocks.length; i++) {
        if (blocks[i] > top) { // 如果当前块比栈顶块高
            top = blocks[i]; // 更新栈顶块的高度

- 阅读更多 -

利用抽象语法树还原Uglify打包的js混淆代码

System

2024-08-11

所有,javascript

要还原UglifyJS打包后的JavaScript混淆代码，你可以使用uglify-js的命令行工具配合astor库将AST转换回源代码。以下是一个使用uglify-js的命令行工具的例子：

首先，你需要安装uglify-js和astor：




npm install uglify-js astor --save-dev

然后，使用uglify-js将AST转换回源代码：




const uglify = require('uglify-js');
const astor = require('astor');
 
// 假设这是你的混淆代码 (minified.js)
const minifiedCode = 'function anonymous(e,t){...}; anonymous;';
 
// 解析为AST
const codeAST = uglify.parse(minifiedCode);
 
// 还原为源代码
const originalCode = astor.dump(codeAST);
 
console.log(originalCode);

请注意，这个代码只是一个示例，实际上你需要有一个已经被UglifyJS处理过的JavaScript文件。这个过程不能完全还原所有可能的原始代码，因为一些名称可能会丢失，但它会尽可能还原结构和逻辑。

- 阅读更多 -

前端pdf.js将pdf转为图片，尤其适合电子发票打印

System

2024-08-11

所有,javascript

要使用pdf.js将PDF转换为图片，你可以使用pdf.js的rendering功能来渲染PDF页面为canvas，然后将canvas转换为图片。以下是一个简化的代码示例：




// 引入PDF.js库
import pdfjsLib from 'pdfjs-dist/webpack';
 
// 渲染PDF页面为图片的函数
async function renderPDFPageAsImage(pdfUrl, pageNumber, scale = 1.5) {
  // 加载PDF文档
  const loadingTask = pdfjsLib.getDocument(pdfUrl);
  const pdf = await loadingTask.promise;
  const page = await pdf.getPage(pageNumber);
 
  // 获取视口尺寸
  const viewport = page.getViewport({ scale: scale });
 
  // 创建canvas元素
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  
  // 渲染页面
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  
  await page.render(renderContext).promise;
  
  // 转换canvas为图片
  return canvas.toDataURL('image/png');
}
 
// 使用示例
const pdfUrl = 'path/to/your/document.pdf';
const pageNumber = 1;
 
renderPDFPageAsImage(pdfUrl, pageNumber).then(imageData => {
  // 使用imageData，例如将其设置为img元素的src
  const img = document.createElement('img');
  img.src = imageData;
  document.body.appendChild(img);
});

确保在你的项目中已经安装了pdfjs-dist包，并且正确地引入了pdfjsLib。

这段代码首先加载PDF文档，然后获取指定页面的视口尺寸，并创建一个对应大小的canvas。接着，它使用page.render方法将PDF页面渲染到canvas上。最后，使用canvas.toDataURL方法将canvas转换成图片格式的字符串（例如PNG格式的base64编码数据）。

请注意，这个示例代码是简化版的，并且没有包含错误处理和其他额外的配置选项。在实际应用中，你可能需要添加对不同PDF尺寸和分辨率的支持，以及处理可能出现的网络请求错误和安全限制等问题。

- 阅读更多 -