Tech Blog

2024-08-12

在jQuery中，可以使用prepend()方法在元素内部的前面添加新元素，或者使用append()方法在元素内部的后面添加新元素。

以下是实例代码：




// 创建新元素
var newElement = $("<p>这是新添加的段落。</p>");
 
// 在目标元素内部最前面添加新元素
$("#targetElement").prepend(newElement);
 
// 在目标元素内部最后面添加新元素
$("#targetElement").append(newElement);

在原生JavaScript中，可以使用insertBefore()在选定元素之前添加新元素，或者使用appendChild()在选定元素之后添加新元素。

以下是实例代码：




// 创建新元素
var newElement = document.createElement("p");
newElement.textContent = "这是新添加的段落。";
 
// 获取目标元素
var targetElement = document.getElementById("targetElement");
 
// 在目标元素之前添加新元素
targetElement.parentNode.insertBefore(newElement, targetElement);
 
// 在目标元素之后添加新元素
targetElement.appendChild(newElement);

- 阅读更多 -

jQuery为文本框设置得到焦点和失去焦点的事件处理方法

System

2024-08-12

所有,jquery




$(document).ready(function() {
    // 为文本框设置得到焦点事件处理方法
    $('#inputField').focus(function() {
        // 当文本框获得焦点时执行的代码
        console.log('文本框获得焦点');
    });
 
    // 为文本框设置失去焦点事件处理方法
    $('#inputField').blur(function() {
        // 当文本框失去焦点时执行的代码
        console.log('文本框失去焦点');
    });
});

这段代码使用jQuery为一个ID为inputField的文本框元素设置了focus（得到焦点）和blur（失去焦点）事件的处理方法。当文本框获得焦点时，在控制台打印一条消息，当失去焦点时也会打印一条消息。这是jQuery中常用的事件处理方式，对于表单输入框的交互设计非常有用。

- 阅读更多 -

推荐一个强大的Node.js、TypeScript和Express项目模板

System

2024-08-12

所有,nodejs

以下是一个简化的Node.js、TypeScript和Express项目模板，它包括基础的配置和工具，可以作为开始新项目的起点。




// package.json
{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node .build/index.js",
    "watch": "tsc --watch"
  },
  "dependencies": {
    "express": "^4.17.1",
    "typescript": "^4.0.0"
  }
}
 
// tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "outDir": ".build",
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}
 
// src/index.ts
import express from 'express';
 
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

在这个模板中，我们配置了一个简单的Express服务器，并定义了几个npm脚本来编译和运行我们的TypeScript代码。这个模板提供了Node.js和Express入门所需的基础，同时利用了TypeScript的优势，如类型检查和编译时的错误捕捉。

- 阅读更多 -

Vue项目中安装及使用Sass（scss）

System

2024-08-12

所有,css

在Vue项目中使用Sass，首先需要安装相关的依赖。

安装sass和sass-loader依赖：




npm install --save-dev sass sass-loader

在Vue组件中使用Sass：

假设你有一个Vue组件MyComponent.vue，你可以在这个组件中使用Sass来定义样式：




<template>
  <div class="my-component">
    <p>Hello, World!</p>
  </div>
</template>
 
<script>
export default {
  name: 'MyComponent'
}
</script>
 
<style lang="scss">
.my-component {
  color: blue;
  p {
    font-weight: bold;
  }
}
</style>

在这个例子中，通过设置<style>标签的lang属性为scss，Vue会使用sass-loader来处理这段Sass代码，并将其转换为浏览器可识别的CSS。

- 阅读更多 -

html动态爱心超文本标记代码，丝滑流畅有特效

System

2024-08-12

所有,html

以下是一个简单的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:

- 阅读更多 -