分类前端技术下的文章

2024-08-23

在Flex布局中，如果最后一行的项目没有对齐，可以使用align-content属性来调整。align-content属性在多行的弹性容器上工作，并且当项目没有填满容器高度时，它会提供额外的空间分布在行之间。

以下是一些align-content属性的常用值：

flex-start：行在弹性容器的开始位置排列。
flex-end：行在弹性容器的结束位置排列。
center：行在弹性容器的中间位置排列。
space-between：行之间保持固定的间隔。
space-around：行之间的间隔是相邻行间隔的两倍。
stretch：默认值。行会被拉伸以填满整个弹性容器的高度。

例如，如果你想要最后一行的项目在垂直方向上对齐到容器的底部，可以这样设置：




.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end; /* 调整这里的值以满足需求 */
}

根据你的具体需求，可以选择合适的align-content值来调整最后一行的对齐方式。

- 阅读更多 -

HTML5简介-HTML5 新增语义化标签-HTML5 新增多媒体标签

System

2024-08-23

所有,html5

HTML5 引入了许多新的语义化标签和多媒体标签，以下是一些示例：




<!-- 语义化布局 -->
<header>头部信息</header>
<nav>导航链接</nav>
<section>一个内容区块</section>
<article>一篇文章</article>
<aside>侧边内容</aside>
<footer>底部信息</footer>
 
<!-- 多媒体内容 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</audio>

在这个例子中，我们使用了新的语义化标签来构建页面布局，并使用<video>和<audio>标签来嵌入视频和音频内容。这些标签提供了更好的机会来描述内容的意义，并使得浏览器能够更好地处理多媒体内容。

- 阅读更多 -

如何在 jQuery 中选择具有多个类的元素？

System

2024-08-23

所有,jquery

在 jQuery 中，你可以使用 .filter() 方法来选择具有多个类的元素。或者，你可以使用 .is() 方法来检查元素是否具有所有指定的类。以下是两种方法的示例：

使用 .filter() 方法：




// 假设你想要选择同时具有 'class1' 和 'class2' 类的元素
$('elementSelector').filter('.class1.class2').each(function() {
    // 对每个匹配的元素执行操作
});

使用 .is() 方法：




// 同样，选择同时具有 'class1' 和 'class2' 类的元素
$('elementSelector').filter(function() {
    return $(this).is('.class1.class2');
}).each(function() {
    // 对每个匹配的元素执行操作
});

在这两种方法中，elementSelector 是你想要选择的元素的基础选择器，例如 div、#myId 或 .myClass。

System

2024-08-23

所有,jquery

这是一个基于JavaWeb技术栈，使用SSM（Spring MVC + Spring + MyBatis）框架实现的婚纱影楼摄影商城系统。以下是该系统的核心功能模块的代码示例：

用户注册和登录（UserController.java）:




@Controller
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @RequestMapping(value = "/register", method = RequestMethod.POST)
    @ResponseBody
    public String registerUser(User user) {
        return userService.registerUser(user);
    }
 
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    @ResponseBody
    public String loginUser(User user) {
        return userService.loginUser(user);
    }
}

商品列表和搜索（ProductController.java）:




@Controller
public class ProductController {
 
    @Autowired
    private ProductService productService;
 
    @RequestMapping("/products")
    public String getAllProducts(Model model) {
        List<Product> products = productService.getAllProducts();
        model.addAttribute("products", products);
        return "products";
    }
 
    @RequestMapping("/search")
    public String searchProduct(String keyword, Model model) {
        List<Product> products = productService.searchProduct(keyword);
        model.addAttribute("products", products);
        return "products";
    }
}

购物车管理（CartController.java）:




@Controller
public class CartController {
 
    @Autowired
    private CartService cartService;
 
    @RequestMapping("/add-to-cart")
    @ResponseBody
    public String addToCart(Integer pid, Integer quantity) {
        return cartService.addToCart(pid, quantity);
    }
 
    @RequestMapping("/view-cart")
    public String viewCart(Model model) {
        List<CartItem> cartItems = cartService.getCartItems();
        model.addAttribute("cartItems", cartItems);
        return "cart";
    }
}

订单管理（OrderController.java）:




@Controller
public class OrderController {
 
    @Autowired
    private OrderService orderService;
 
    @RequestMapping("/place-order")
    @ResponseBody
    public String placeOrder() {
        return orderService.placeOrder();
    }
 
    @RequestMapping("/my-orders")
    public String myOrders(Model model) {
        List<Order> orders = orderService.getMyOrders();
        model.addAttribute("orders",

- 阅读更多 -

js数组常用操作

System

2024-08-23

所有,typescript

在JavaScript中，数组是一种常用的数据结构，以下是一些常见的数组操作及其实现方式：

创建数组：




let arr = [1, 2, 3];

访问数组元素：




let first = arr[0]; // 1

更新数组元素：




arr[0] = 10; // 更新第一个元素为10

添加元素到数组：




arr.push(4); // 在数组末尾添加元素4

从数组中删除元素：




arr.pop(); // 删除数组最后一个元素

在数组中搜索元素：




let index = arr.indexOf(2); // 返回元素2在数组中的索引，如果不存在返回-1

数组元素排序：




arr.sort((a, b) => a - b); // 升序排序
arr.sort((a, b) => b - a); // 降序排序

合并数组：




let arr2 = [4, 5, 6];
let combined = arr.concat(arr2); // 合并两个数组

创建数组的拷贝：




let copy = arr.slice(); // 创建数组的浅拷贝

数组元素的遍历：




arr.forEach(element => console.log(element)); // 输出每个元素

数组的映射：




let mapped = arr.map(element => element * 2); // 将每个元素乘以2

数组的筛选：




let filtered = arr.filter(element => element > 2); // 返回所有大于2的元素

数组的化简（reduce）：




let sum = arr.reduce((total, current) => total + current, 0); // 计算数组元素的总和

这些是JavaScript数组操作的基本方法，每个方法都有相应的使用场景，可以根据实际需求灵活使用。

- 阅读更多 -

TypeScript编译选项

System

2024-08-23

所有,typescript

在TypeScript中，可以通过tsconfig.json文件来配置编译选项。以下是一些常见的编译选项及其说明和示例代码：

target: 设置编译后的JavaScript版本。




{
  "compilerOptions": {
    "target": "es5"
  }
}

module: 设置模块的类型。




{
  "compilerOptions": {
    "module": "commonjs"
  }
}

strict: 启用所有严格类型检查。




{
  "compilerOptions": {
    "strict": true
  }
}

noImplicitAny: 不允许隐式any类型。




{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

removeComments: 移除注释。




{
  "compilerOptions": {
    "removeComments": true
  }
}




{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

rootDir: 指定输入文件的目录。




{
  "compilerOptions": {
    "rootDir": "./src"
  }
}

sourceMap: 生成源映射文件。




{
  "compilerOptions": {
    "sourceMap": true
  }
}

watch: 启动监视模式。




{
  "compilerOptions": {
    "watch": true
  }
}

lib: 包含默认库的声明文件。




{
  "compilerOptions": {
    "lib": ["es6", "dom"]
  }
}

这些是一些常见的编译选项，可以在tsconfig.json文件中设置。根据项目需求，可以调整这些选项以适应不同的编译配置。

- 阅读更多 -

Ant Design Upload 自定义上传 customRequest

System

2024-08-23

所有,typescript

在Ant Design中，你可以使用customRequest属性来自定义文件上传的行为。这个属性接受一个函数，该函数会接收一个包含action、directory、data和filename的对象，以及一个onSuccess和onError的回调函数。

以下是一个使用customRequest的例子：




import React from 'react';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  return isJpgOrPng || Upload.LIST_IGNORE;
}
 
function customRequest(options) {
  const { onSuccess, onError, file, onProgress } = options;
 
  const formData = new FormData();
  formData.append('file', file);
 
  // 使用你喜欢的方式上传文件，例如使用axios
  fetch('your-upload-api', {
    method: 'POST',
    body: formData,
    onUploadProgress: ({ total, loaded }) => {
      onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) });
    },
  })
    .then(() => {
      onSuccess('upload success');
    })
    .catch(() => {
      onError('upload failed');
    });
}
 
function App() {
  return (
    <Upload
      customRequest={customRequest}
      beforeUpload={beforeUpload}
      name="file"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    >
      <button style={{ border: '1px solid #d9d9d9', padding: 10 }}>
        <UploadOutlined /> Upload
      </button>
    </Upload>
  );
}
 
export default App;

在这个例子中，我们定义了一个customRequest函数，它会创建一个FormData对象，将文件附加到该对象，然后使用fetch API发送请求。你可以根据需要替换上传逻辑，例如使用axios或其他HTTP客户端。beforeUpload函数用于检查文件类型。

请注意，你需要根据你的API端点更新action属性。在这个例子中，我使用了一个模拟的API端点https://www.mocky.io/v2/5cc8019d300000980a055e76，你应该替换为你自己的上传API。

- 阅读更多 -

Table布局 flex布局 grid布局

System

2024-08-23

所有,css3

在CSS中，有三种主要的布局方式：Table布局、Flex布局和Grid布局。

Table布局：

Table布局是通过创建一个表格来控制网页布局。表格的每一部分都可以通过行（<tr>）和列（<td>）进行控制。

HTML:




<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Flex布局：

Flex布局是一种更加灵活的布局方式，它可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

HTML:




<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:




.flex-container {
  display: flex;
}

Grid布局：

Grid布局是一种基于网格的布局系统，它将容器分割成一系列的行和列，然后通过行和列的交叉定位子项。

HTML:




<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:




.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

每种布局都有其优点和适用场景，例如，Flex布局在移动应用和响应式网页设计中非常流行，而Grid布局在创建复杂的网格布局时提供了更多的灵活性。

System

2024-08-23

所有,css3

以下是实现天空中白云飘动CSS3特效的完整示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Cloud Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9d7f1;
    z-index: 1;
  }
  .clouds-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAyCAYAAACoPV+aAAAgAElEQVR4Xu3UQQ2AMAhD7+v58I3f0H9/3+D19/v39/f39/vH9/f3+Dg4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBg

- 阅读更多 -

Vue2 CSS小知识点

System

2024-08-23

所有,css

在Vue2中，CSS的使用可以通过以下几种方式进行：

单文件组件中的<style>标签：可以在Vue组件的单文件中使用<style>标签来添加CSS。




<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.example {
  color: red;
}
</style>

全局CSS文件：可以在入口文件（如main.js或app.js）中导入全局CSS文件。




// main.js
import Vue from 'vue';
import App from './App.vue';
import './global.css'; // 全局CSS文件
 
new Vue({
  render: h => h(App),
}).$mount('#app');

CSS预处理器：如Sass/SCSS、Less等，需要相关预处理器支持。




<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style lang="scss">
$color: red;
 
.example {
  color: $color;
}
</style>

CSS Modules：在单文件组件中使用CSS Modules，可以使样式局部作用于组件。




<template>
  <div :class="style.example">Hello, World!</div>
</template>
 
<script>
import style from './style.module.css';
 
export default {
  data() {
    return {
      style,
    };
  },
};
</script>

使用CSS-in-JS库，如styled-components。




import styled from 'styled-components';
 
const StyledDiv = styled.div`
  color: red;
`;
 
export default {
  render() {
    return <StyledDiv>Hello, World!</StyledDiv>;
  },
};

以上是在Vue2中使用CSS的一些方法，具体使用哪种取决于项目需求和开发者偏好。

- 阅读更多 -