System 发布的文章

2024-08-12

以下是一个简单的HTML代码示例，展示了如何使用HTML和CSS创建一个动态的爱心标志，并附有特效：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态爱心</title>
<style>
  .heart {
    position: relative;
    width: 100px;
    height: 100px;
    background: #f00;
    animation: beat 0.8s infinite;
  }
  .heart::before,
  .heart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    width: 50px;
    height: 80px;
    background: #f00;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  .heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
  @keyframes beat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>

这段代码使用了CSS3的动画特性，通过@keyframes定义了一个心跳的动画效果，当页面加载时，爱心会不停地放大缩小，给人一种生动活泼的感觉。这是一个简单的示例，但是可以通过调整CSS样式和动画来创造出各种不同的特效。

- 阅读更多 -

【Node.js】初识 Node.js

System

2024-08-12

所有,nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它使得 JavaScript 代码能够在服务器端运行。Node.js 的事件驱动、非阻塞 I/O 模型使其适合于高并发和低延迟的 Real-Time Web 应用程序。

以下是一个简单的 Node.js 应用程序示例，它创建了一个 HTTP 服务器，并在浏览器访问这个服务器时，返回 "Hello World" 消息。




// 引入 Node.js 的 http 模块
const http = require('http');
 
// 创建 HTTP 服务器并定义响应逻辑
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' }); // 设置 HTTP 响应头
  res.end('Hello World\n'); // 发送响应内容
});
 
// 设置服务器监听端口
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}/`);
});

要运行这段代码，你需要有 Node.js 环境。如果你还没有安装 Node.js，可以从 Node.js 官网下载并安装。安装完成后，保存上述代码到一个文件中，例如 app.js，然后在命令行中运行 node app.js，你的 HTTP 服务器将会启动，并且在浏览器中访问 http://localhost:3000 时，你会看到 "Hello World" 的输出。

- 阅读更多 -

【入门级】HTML的超链接分类和属性及常用的特殊符号转义

System

2024-08-12

所有,html

在HTML中，超链接（Hyperlink）是用于从一个页面跳转到另一个页面的功能。超链接可以通过<a>标签来创建，其基本语法如下：




<a href="链接地址" target="目标窗口的位置" class="链接样式" title="鼠标悬停时显示的文本">链接文本或图像</a>

其中，href属性指定了链接的目标地址，target属性定义了链接打开的位置（_blank为新窗口，_self为当前窗口），class和title属性分别用于设置链接的CSS样式和鼠标悬停时显示的文本。

例子：




<a href="http://www.example.com" target="_blank" class="external-link" title="点击访问示例网站">访问示例网站</a>

在HTML中，特殊符号需要使用字符实体（Character Entities）来转义，以避免浏览器误认为它们是HTML代码的一部分。常见的特殊符号和它们的转义字符如下：

空格： 
引号："（双引号）或'（单引号）
大于号：>
小于号：<
版权符号：©
注册商标符号：®

例子：




<p>这是一个包含空格的句子&nbsp;对吧？</p>
<p>年龄超过18岁的用户应该知道这是一个引号：&quot;重要通知&quot;</p>
<p>小于100&lt;大于100&gt;的数字</p>
<p>版权所有&copy; 2023 公司名</p>
<p>注册商标&reg; 2023 公司名</p>

以上是HTML超链接的基本使用方法和特殊符号的转义。

- 阅读更多 -

【CSS应用篇】——CSS如何实现圆角边框

System

2024-08-12

所有,css3

CSS提供了border-radius属性，可以用来创建圆角边框。




/* 创建一个圆角矩形 */
.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border: 2px solid black;
  border-radius: 15px; /* 设置圆角的半径为15px */
}
 
/* 创建一个圆角圆形 */
.rounded-circle {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 2px solid black;
  border-radius: 50%; /* 设置border-radius为50%，形成圆形 */
}

HTML部分：




<div class="rounded-rectangle"></div>
<div class="rounded-circle"></div>

border-radius属性可以接受不同的值：

单一值：如15px，将创建四个相等的圆角。
两个值：第一个值是水平半径，第二个值是垂直半径（例如15px 5px）。
三个值：第一个和第二个值是水平半径，第三个值是垂直半径（例如15px 5px 10px）。
四个值：分别指定左上角、右上角、右下角、左下角的圆角（例如15px 5px 10px 20px）。
百分比值：可以用百分比指定圆角的大小，相对于元素的宽度或高度（例如20% 40% 60% 80%）。

- 阅读更多 -

Django框架之Ajax基础

System

2024-08-12

所有,ajax

在Django中使用Ajax进行前后端分离交互是一种常见的做法。以下是一个简单的示例，展示了如何在Django视图中使用Ajax发送GET请求并接收JSON响应。

首先，在HTML中，我们可以使用JavaScript或者JQuery发送Ajax请求：




<button id="ajaxButton">点击发送Ajax请求</button>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#ajaxButton").click(function(){
        $.ajax({
            url: '/your-django-view-url/',  // Django视图的URL
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                console.log(data);  // 这里的data是后端返回的JSON数据
            },
            error: function() {
                console.log('Error occurred');
            }
        });
    });
});
</script>

然后，在Django的views.py中，我们创建一个视图来处理Ajax请求并返回JSON响应：




from django.http import JsonResponse
 
def your_django_view(request):
    # 这里可以根据需要处理请求，例如从数据库获取数据
    response_data = {'key': 'value'}  # 示例数据
    return JsonResponse(response_data)

最后，在urls.py中配置URL：




from django.urls import path
from .views import your_django_view
 
urlpatterns = [
    path('your-django-view-url/', your_django_view, name='your_django_view'),
]

这样就完成了一个简单的Ajax请求示例。当用户点击按钮时，JavaScript会通过Ajax向Django后端发送请求，后端处理后返回JSON格式的响应，然后JavaScript可以在成功回调函数中处理这个响应。

System

2024-08-12

所有,ajax

由于Thymeleaf和Vue.js是两个不同的模板引擎，并且它们各自处理的是不同的视图层面（Vue.js主要用于前端动态内容渲染，而Thymeleaf主要用于服务端的静态HTML模板渲染），因此，将它们混合使用可能会导致一些混淆。

如果你想要创建一个注册登录页面，并希望使用Vue.js来提升用户体验，那么你可以选择仅使用Vue.js来处理前端的视图渲染，并通过Ajax向后端发送请求。

以下是一个简单的例子，展示如何使用Vue.js和Ajax来实现注册和登录功能：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registration and Login</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- Registration Form -->
        <form v-if="!loggedIn">
            <input type="text" v-model="user.username" placeholder="Username">
            <input type="password" v-model="user.password" placeholder="Password">
            <button @click="register">Register</button>
        </form>
 
        <!-- Login Form -->
        <form v-if="!loggedIn">
            <input type="text" v-model="user.username" placeholder="Username">
            <input type="password" v-model="user.password" placeholder="Password">
            <button @click="login">Login</button>
        </form>
 
        <!-- Logout Button -->
        <button v-if="loggedIn" @click="logout">Logout</button>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {
                    username: '',
                    password: ''
                },
                loggedIn: false
            },
            methods: {
                register() {
                    // Send a POST request to the server to register the user
                    fetch('/register', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(this.user)
                    }).then(response => response.json())
                    .then(data => {
                        if (data.loggedIn) {
                            this.loggedIn = true;
                        }
                    });
                },
                login() {
                    // Send a POST request to the server to login the user
                    fetch('/login', {
                        method: 'POST',
                        headers:

- 阅读更多 -

【js】js多线程解决方案Web Worker简单说明与实例演示：

System

2024-08-12

所有,javascript




// 主线程文件 main.js
// 创建并使用 Web Worker
 
// 检查浏览器是否支持 Web Worker
if (typeof Worker !== 'undefined') {
  // 创建一个新的 Web Worker
  const worker = new Worker('worker.js'); // 'worker.js' 是 Web Worker 脚本文件
 
  // 向 Web Worker 发送数据
  worker.postMessage({ msg: 'Hello, Web Worker!' });
 
  // 接收 Web Worker 发送回来的数据
  worker.onmessage = function(event) {
    console.log('Received message from worker:', event.data);
  };
 
  // 监听 Web Worker 的错误
  worker.onerror = function(error) {
    console.error('Error from worker:', error);
  };
 
  // 当 Web Worker 处理完毕后，会自动关闭。
  // 如果需要提前关闭 Web Worker，可以使用 worker.terminate() 方法。
} else {
  console.log('Your browser doesn\'t support Web Workers.');
}




// Web Worker 文件 worker.js
// 这是 Web Worker 的代码，它在一个单独的线程中运行
 
// 处理消息
onmessage = function(event) {
  // 在这里处理接收到的消息
  console.log('Message from main script:', event.data.msg);
 
  // 执行一些计算任务...
 
  // 发送消息回主线程
  postMessage({ result: 'Processed data in Web Worker' });
};
 
// 当 Web Worker 处理完毕后，会自动关闭。
// 如果需要提前关闭 Web Worker，可以在主线程使用 worker.terminate() 方法。

以上代码演示了如何在主线程中创建并使用一个 Web Worker。主线程发送消息给 Worker，Worker 处理完毕后再将结果发送回主线程。这样可以在不阻塞用户界面的前提下执行耗时任务。

- 阅读更多 -

Vue3 Element Plus表单自定义校验实现步骤

System

2024-08-12

所有,vue.js




<template>
  <el-form :model="formData" :rules="rules" ref="myForm">
    <el-form-item prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const formData = reactive({
  username: '',
  password: ''
});
 
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
  ]
};
 
const myForm = ref(null);
 
const submitForm = () => {
  myForm.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功');
    } else {
      ElMessage.error('表单验证失败');
      return false;
    }
  });
};
</script>

这段代码展示了如何在Vue 3和Element Plus中创建一个带有自定义验证规则的表单。它定义了一个带有用户名和密码字段的表单，并且每个字段都有其对应的验证规则。当用户点击提交按钮时，会触发表单的验证，如果验证通过，会显示成功消息；如果验证失败，会显示错误消息，并阻止表单的提交。

- 阅读更多 -

Vue利用vue-print-nb实现打印功能

System

2024-08-12

所有,vue.js

要在Vue中利用vue-print-nb插件实现打印功能，你需要按照以下步骤操作：

安装vue-print-nb插件：




npm install vue-print-nb --save

在Vue组件中引入并使用vue-print-nb：




<template>
  <div>
    <div id="printMe">
      <!-- 需要打印的内容 -->
      <h1>这是要打印的内容</h1>
    </div>
    <button @click="print">打印</button>
  </div>
</template>
 
<script>
import Vue from 'vue'
import printNB from 'vue-print-nb'
 
export default {
  methods: {
    print() {
      // 使用vue-print-nb插件的print方法
      printNB.print(this.$refs.printMe);
    }
  }
}
</script>

在上述代码中，printNB.print(this.$refs.printMe)会触发打印当前引用为printMe的DOM元素内容。

确保你的Vue项目已经正确安装并引入了vue-print-nb插件。在实际使用时，你可能需要根据自己的需求对打印样式进行调整。

- 阅读更多 -

vue中使用moment插件详解

System

2024-08-12

所有,vue.js

在Vue中使用moment.js插件，首先需要安装moment：




npm install moment --save

然后在Vue组件中引入并使用moment：




<template>
  <div>
    <!-- 显示格式化的日期时间 -->
    <p>{{ formattedDateTime }}</p>
  </div>
</template>
 
<script>
import moment from 'moment';
 
export default {
  data() {
    return {
      // 假设这是从服务器获取的日期时间字符串
      serverDateTime: '2023-04-01T12:00:00Z'
    };
  },
  computed: {
    // 使用moment格式化日期时间
    formattedDateTime() {
      return moment(this.serverDateTime).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
};
</script>

在这个例子中，我们从服务器获取了一个日期时间字符串，并使用计算属性formattedDateTime来使用moment.js对日期时间进行格式化。计算属性会基于它们的依赖进行缓存，只在相关依赖发生改变时才会重新计算。

- 阅读更多 -