分类前端技术下的文章

2024-08-17

在Node.js中，您可以使用ws模块来实现WebSocket的实时通信。以下是一个简单的例子，展示了如何使用ws模块来创建一个简单的WebSocket服务器。

首先，您需要安装ws模块：




npm install ws

然后，您可以使用以下代码创建一个WebSocket服务器：




const WebSocket = require('ws');
 
// 创建WebSocket服务器实例
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
  // 当客户端连接时触发
 
  ws.on('message', function incoming(message) {
    // 当服务器接收到客户端发来的消息时触发
    console.log('received: %s', message);
  });
 
  // 发送消息到客户端
  ws.send('something');
});
 
console.log('WebSocket server is running on ws://localhost:8080');

这段代码创建了一个监听8080端口的WebSocket服务器。每当有客户端连接时，它都会打印出收到的消息，并向客户端发送一条消息。这个简单的例子展示了如何使用ws模块来处理WebSocket连接和消息。

System

2024-08-17

所有,vue.js

这个错误表明你尝试在命令行中运行Vue.js相关的命令，但是你的系统无法识别vue这个命令。这通常是因为Vue CLI没有正确安装或者没有配置在系统的环境变量中。

解决方法：

确认Vue CLI是否已安装：
打开命令行工具，输入vue --version。如果返回版本号，则说明已安装。
如果没有安装，可以通过npm安装Vue CLI：
打开命令行工具，输入npm install -g @vue/cli来全局安装Vue CLI。
如果已经安装但是仍然出现错误，可能是环境变量配置问题。确保Vue CLI的安装目录已经添加到了系统的PATH环境变量中。
对于Windows系统，你可以通过以下步骤来配置环境变量：
- 找到Vue CLI的安装路径（通常是C:\Users\<你的用户名>\AppData\Roaming\npm）。
- 打开系统的“环境变量”设置。
- 在“系统变量”中找到“Path”变量，选择“编辑”。
- 点击“新建”，添加Vue CLI的安装路径。
- 确认更改并重启命令行工具。
完成以上步骤后，重新尝试运行Vue命令。

如果问题依然存在，请确保你的命令行工具已经关闭并重新打开，或者重启你的电脑。如果你正在使用某种IDE，确保IDE中的终端也是最新配置的。

- 阅读更多 -

layui-vue: 一个基于 Vue.js 的前端 UI 框架

System

2024-08-17

所有,vue.js

layui-vue 是一个基于 Vue.js 的 UI 框架，它提供了一套经过优化的组件库，用于快速开发 Web 界面。以下是如何在 Vue 项目中使用 layui-vue 的基本步骤：

安装 layui-vue：




npm install layui-vue --save

在 Vue 项目中全局引入 layui-vue：




import Vue from 'vue'
import App from './App.vue'
import layui from 'layui-vue'
 
Vue.use(layui)
 
new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用 layui-vue 组件：




<template>
  <div>
    <LayButton type="primary">按钮</LayButton>
  </div>
</template>
 
<script>
export default {
  components: {
    'LayButton': () => import('layui-vue/src/base/button/button.vue')
  }
}
</script>

确保在使用组件时，已正确引入所需的组件。以上代码展示了如何在 Vue 应用中安装和使用 layui-vue 组件库。

- 阅读更多 -

分享一个用HTML、CSS和jQuery构建的漂亮的登录注册界面

System

2024-08-17

所有,jquery

以下是一个简单的示例代码，展示了如何使用HTML、CSS和jQuery创建一个登录注册界面：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
  }
  .login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  }
  input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background: #555;
  }
</style>
</head>
<body>
 
<div class="login-container">
  <form id="login-form">
    <h2>Login</h2>
    <input type="text" placeholder="Username" name="username" required>
    <input type="password" placeholder="Password" name="password" required>
    <input type="submit" value="Login">
  </form>
  <form id="register-form" style="display: none;">
    <h2>Register</h2>
    <input type="text" placeholder="Username" name="username" required>
    <input type="password" placeholder="Password" name="password" required>
    <input type="password" placeholder="Confirm Password" name="confirm_password" required>
    <input type="submit" value="Register">
  </form>
  <div style="text-align: center; margin-top: 10px;">
    Not a member? <a href="#" id="to-register">Register Now</a>
  </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#to-register').click(function(e) {
      e.preventDefault();
      $('#login-form').hide();
      $('#register-form').show();
    });
 
    $('#login-form, #register-form').submit(function(e) {
      e.preventDefault();
      var formData = $(this).serialize();
      // 这里可以添加Ajax请求来处理登录或注册
      console.log('Form data:', formData);
    });
  });
</script>
 
</body>
</html>

这个示例提供了一个简单的

- 阅读更多 -

WEB文件上传之JQuery ajaxfileupload插件使用

System

2024-08-17

所有,ajax




$(function () {
    $('#fileupload').change(function () {
        // 当文件选择框的值改变时，启动上传
        $('#loading').show(); // 显示加载动画
        // 使用ajaxfileupload上传文件
        $.ajaxFileUpload({
            url: '/upload/', // 服务器端上传文件的URL
            secureuri: false,
            fileElementId: 'fileupload', // 文件选择框的id属性
            dataType: 'json', // 服务器返回的格式
            success: function (data, status) {
                // 上传成功后的回调函数
                if (typeof (data.error) != 'undefined') {
                    // 如果服务器返回了错误信息
                    if (data.error != '') {
                        // 输出错误信息
                        alert(data.error);
                    } else {
                        // 没有错误，输出上传后的文件路径
                        alert(data.msg);
                    }
                }
                $('#loading').hide(); // 隐藏加载动画
            },
            error: function (data, status, e) {
                // 上传失败后的回调函数
                alert(e);
                $('#loading').hide(); // 隐藏加载动画
            }
        });
        return false;
    });
});

这段代码使用了$.ajaxFileUpload方法来处理文件上传，它在用户选择文件后触发，并在后台向/upload/发送文件，期望从服务器接收JSON格式的响应。成功上传后，会根据服务器返回的信息显示相应的消息，上传失败则显示错误信息。

System

2024-08-17

所有,typescript

在JavaScript中，当你使用console.log()打印一个对象时，如果对象的属性太多，控制台通常会显示省略号（...）来表示属性被省略了。这是为了节省空间，避免打印大量无关紧要的信息。

如果你想查看对象的所有属性和值，可以使用console.dir()代替console.log()。console.dir()会列出对象的所有可枚举属性，并且不会使用省略号。




const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  // 更多属性...
};
 
// 使用console.log()时可能会看到省略号
console.log(myObject);
 
// 使用console.dir()可以看到所有属性
console.dir(myObject);

另外，如果你想要格式化输出对象，使其更易读，可以使用console.log(JSON.stringify(myObject, null, 2))，这会将对象转换为格式化的JSON字符串打印出来，2表示缩进级别。




console.log(JSON.stringify(myObject, null, 2));

以上方法可以帮助你在控制台中更全面地查看对象的内容。

- 阅读更多 -

使用webpack中的externals配置项如何配置

System

2024-08-17

所有,jquery

在webpack中，externals配置项用于告诉webpack哪些模块不通过webpack打包，而是通过在应用程序的HTML文件中直接引入的方式来加载。这通常用于引入一些库，比如jQuery、React或者Angular等，因为这些库通常是通过script标签在全局范围内提供的。

下面是一个简单的externals配置示例：




// webpack.config.js
module.exports = {
  // ...
  externals: {
    react: 'React',
    lodash: '_'
  },
  // ...
};

在这个配置中，react和lodash是外部依赖，它们在全局范围内通过它们的名字（这里是'React'和'_'）可用。在你的代码中，你不需要使用import或require来引入这些库，而是可以直接使用它们。

确保在你的HTML文件中，你需要通过script标签来引入这些库：




<!-- index.html -->
<script src="path/to/react.js"></script>
<script src="path/to/lodash.js"></script>

这样，当webpack构建你的应用代码时，它会忽略这些库，不会将它们包含在最终的bundle中。这样可以帮助减少最终bundle的大小，并且通常提升构建速度。

- 阅读更多 -

一文详解Vue中实现路由跳转传参的4种方式（十分详尽）

System

2024-08-17

所有,vue.js

在Vue中实现路由跳转并传递参数有多种方式，下面是四种常见的方法：

使用query参数




// 定义路由
const routes = [
  { path: '/user', component: User }
]
 
// 在组件中
this.$router.push({ path: '/user', query: { id: 123 }})
 
// 在目标组件中获取参数
this.$route.query.id

使用params参数（需要在路由配置中指定props: true）




// 定义路由
const routes = [
  { path: '/user/:id', component: User, props: true }
]
 
// 在组件中
this.$router.push({ name: 'user', params: { id: 123 }})
 
// 在目标组件中获取参数
this.$route.params.id

使用props直接传递一个固定值




// 定义路由
const routes = [
  { path: '/user', component: User, props: { id: 123 } }
]
 
// 在目标组件中获取参数
this.$route.props.id

使用$emit事件传递参数




// 在父组件中
this.$router.push('/user/' + userId)
 
// 在子组件中
created() {
  this.$emit('update:userId', this.$route.params.userId)
}

以上四种方法可以满足大多数路由传参的需求，开发者可以根据实际场景选择合适的方法。

- 阅读更多 -

千峰Ajax【fetch和promise】

System

2024-08-17

所有,ajax

在JavaScript中，使用fetch和Promise可以进行异步的HTTP请求。以下是一个简单的例子，展示如何使用fetch和Promise来进行GET请求。




// 使用fetch发送GET请求
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (response.ok) {
    return response.json(); // 解析JSON数据
  }
  throw new Error('Network response was not ok.'); // 如果网络响应不正确，抛出错误
})
.then(data => {
  console.log('Data received:', data); // 处理解析后的数据
})
.catch(error => {
  console.error('Fetch error:', error); // 处理错误情况
});

这段代码首先使用fetch函数向https://api.example.com/data发送一个GET请求。然后，它通过then方法处理响应，如果响应状态为ok，它会解析JSON数据。如果出现网络错误或其他问题，它会进入catch块，在这里可以处理错误。这是一个基本的例子，实际使用时可能需要根据具体情况添加额外的逻辑。

- 阅读更多 -

spring-mvc之ajax

System

2024-08-17

所有,ajax

在Spring MVC中，你可以使用Ajax与服务器交互而无需刷新页面。以下是一个简单的例子，展示了如何使用jQuery发送Ajax请求到Spring MVC控制器，并处理响应。

添加jQuery库到你的项目中。




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

创建一个Spring MVC控制器来处理Ajax请求。




@Controller
public class AjaxController {
 
    @RequestMapping(value = "/greeting", method = RequestMethod.GET)
    @ResponseBody
    public String greeting(@RequestParam("name") String name) {
        return "Hello, " + name + "!";
    }
}

使用jQuery发送Ajax GET请求。




<script>
$(document).ready(function() {
    $("#greetingButton").click(function() {
        var name = $("#nameInput").val();
        $.ajax({
            url: '/greeting',
            data: { name: name },
            success: function(response) {
                $("#greetingMessage").text(response);
            }
        });
    });
});
</script>

创建HTML页面来使用这些JavaScript代码。




<input type="text" id="nameInput" placeholder="Enter your name">
<button id="greetingButton">Greet</button>
<div id="greetingMessage"></div>

在这个例子中，当用户点击"Greet"按钮时，jQuery会发送一个Ajax GET请求到/greeting路径，并带上输入框中的名字。服务器响应后，会更新页面上的问候语消息。这个过程不会导致整个页面刷新。

- 阅读更多 -