wenmo8 发布的文章

【引言】(完整代码在最后面)

本文将通过一个简单的计数器应用案例,介绍如何利用鸿蒙NEXT的特性开发高效、美观的应用程序。我们将涵盖计数器的基本功能实现、用户界面设计、数据持久化及动画效果的添加。

【环境准备】

电脑系统:windows 10

开发工具:DevEco Studio 5.0.1 Beta3 Build Version: 5.0.5.200

工程版本:API 13

真机:Mate60 Pro

语言:ArkTS、ArkUI

【项目概述】

本项目旨在创建一个多计数器应用,用户可以自由地添加、编辑、重置和删除计数器。每个计数器具有独立的名称、当前值、增加步长和减少步长。应用还包括总计数的显示,以便用户快速了解所有计数器的总和。

【功能实现】

1、计数器模型

首先,我们定义了一个CounterItem类来表示单个计数器,其中包含了计数器的基本属性和行为。

@ObservedV2
class CounterItem {
  id: number = ++Index.counterId;
  @Trace name: string;
  @Trace count: number = 0;
  @Trace scale: ScaleOptions = { x: 1, y: 1 };
  upStep: number = 1;
  downStep: number = 1;

  constructor(name: string) {
    this.name = name;
  }
}

2、应用入口与状态管理

应用的主入口组件Index负责管理计数器列表、总计数、以及UI的状态。这里使用了@State和@Watch装饰器来监控状态的变化。

@Entry
@Component
struct Index {
  static counterStorageKey: string = "counterStorageKey";
  static counterId: number = 0;

  @State listSpacing: number = 20;
  @State listItemHeight: number = 120;
  @State baseFontSize: number = 60;
  @State @Watch('updateTotalCount') counters: CounterItem[] = [];
  @State totalCount: number = 0;
  @State isSheetVisible: boolean = false;
  @State selectedIndex: number = 0;

  // ...其他方法
}

3、数据持久化

为了保证数据在应用重启后仍然可用,我们使用了preferences模块来同步地读取和写入数据。

saveDataToLocal() {
  const saveData: object[] = this.counters.map(counter => ({
    count: counter.count,
    name: counter.name,
    upStep: counter.upStep,
    downStep: counter.downStep,
  }));

  this.dataPreferences?.putSync(Index.counterStorageKey, JSON.stringify(saveData));
  this.dataPreferences?.flush();
}

4、用户界面

用户界面的设计采用了现代简洁的风格,主要由顶部的总计数显示区、中间的计数器列表区和底部的操作按钮组成。列表项支持左右滑动以显示重置和删除按钮。

@Builder
itemStart(index: number) {
  Row() {
    Text('重置').fontColor(Color.White).fontSize('40lpx').textAlign(TextAlign.Center).width('180lpx');
  }
  .height('100%')
  .backgroundColor(Color.Orange)
  .justifyContent(FlexAlign.SpaceEvenly)
  .borderRadius({ topLeft: 10, bottomLeft: 10 })
  .onClick(() => {
    this.counters[index].count = 0;
    this.updateTotalCount();
    this.listScroller.closeAllSwipeActions();
  });
}

5、动画效果

当用户添加新的计数器时,通过动画效果让新计数器逐渐放大至正常尺寸,提升用户体验。

this.counters.unshift(new CounterItem(`新计数项${Index.counterId}`));
this.listScroller.scrollTo({ xOffset: 0, yOffset: 0 });
this.counters[0].scale = { x: 0.8, y: 0.8 };

animateTo({
  duration: 1000,
  curve: curves.springCurve(0, 10, 80, 10),
  iterations: 1,
  onFinish: () => {}
}, () => {
  this.counters[0].scale = { x: 1, y: 1 };
});

【总结】

通过上述步骤,我们成功地构建了一个具备基本功能的计数器应用。在这个过程中,我们不仅学习了如何使用鸿蒙NEXT提供的各种API,还掌握了如何结合动画、数据持久化等技术点来优化用户体验。希望本文能为你的鸿蒙开发之旅提供一些帮助和灵感!

【完整代码】

import { curves, promptAction } from '@kit.ArkUI' // 导入动画曲线和提示操作
import { preferences } from '@kit.ArkData' // 导入偏好设置模块

@ObservedV2
  // 观察者装饰器,监控状态变化
class CounterItem {
  id: number = ++Index.counterId // 计数器ID,自动递增
  @Trace name: string // 计数器名称
  @Trace count: number = 0 // 计数器当前值,初始为0
  @Trace scale: ScaleOptions = { x: 1, y: 1 } // 计数器缩放比例,初始为1
  upStep: number = 1 // 增加步长,初始为1
  downStep: number = 1 // 减少步长,初始为1

  constructor(name: string) { // 构造函数,初始化计数器名称
    this.name = name
  }
}

@Entry
  // 入口组件装饰器
@Component
  // 组件装饰器
struct Index {
  static counterStorageKey: string = "counterStorageKey" // 存储计数器数据的键
  static counterId: number = 0 // 静态计数器ID
  @State listSpacing: number = 20 // 列表项间距
  @State listItemHeight: number = 120 // 列表项高度
  @State baseFontSize: number = 60 // 基础字体大小
  @State @Watch('updateTotalCount') counters: CounterItem[] = [] // 计数器数组,监控总计数更新
  @State totalCount: number = 0 // 总计数
  @State isSheetVisible: boolean = false // 控制底部弹出表单的可见性
  @State selectedIndex: number = 0 // 当前选中的计数器索引
  listScroller: ListScroller = new ListScroller() // 列表滚动器实例
  dataPreferences: preferences.Preferences | undefined = undefined // 偏好设置实例

  updateTotalCount() { // 更新总计数的方法
    let total = 0; // 初始化总计数
    for (let i = 0; i < this.counters.length; i++) { // 遍历计数器数组
      total += this.counters[i].count // 累加每个计数器的count值
    }
    this.totalCount = total // 更新总计数
    this.saveDataToLocal() // 保存数据到本地
  }

  saveDataToLocal() { // 保存计数器数据到本地的方法
    const saveData: object[] = [] // 初始化保存数据的数组
    for (let i = 0; i < this.counters.length; i++) { // 遍历计数器数组
      let counter: CounterItem = this.counters[i] // 获取当前计数器
      saveData.push(Object({
        // 将计数器数据添加到保存数组
        count: counter.count,
        name: counter.name,
        upStep: counter.upStep,
        downStep: counter.downStep,
      }))
    }
    this.dataPreferences?.putSync(Index.counterStorageKey, JSON.stringify(saveData)) // 将数据保存到偏好设置
    this.dataPreferences?.flush() // 刷新偏好设置
  }

  @Builder
  // 构建器装饰器
  itemStart(index: number) { // 列表项左侧的重置按钮
    Row() {
      Text('重置').fontColor(Color.White).fontSize('40lpx')// 显示“重置”文本
        .textAlign(TextAlign.Center)// 文本居中
        .width('180lpx') // 设置宽度
    }
    .height('100%') // 设置高度
    .backgroundColor(Color.Orange) // 设置背景颜色
    .justifyContent(FlexAlign.SpaceEvenly) // 设置内容均匀分布
    .borderRadius({ topLeft: 10, bottomLeft: 10 }) // 设置圆角
    .onClick(() => { // 点击事件
      this.counters[index].count = 0 // 重置计数器的count为0
      this.updateTotalCount() // 更新总计数
      this.listScroller.closeAllSwipeActions() // 关闭所有滑动操作
    })
  }

  @Builder
  // 构建器装饰器
  itemEnd(index: number) { // 列表项右侧的删除按钮
    Row() {
      Text('删除').fontColor(Color.White).fontSize('40lpx')// 显示“删除”文本
        .textAlign(TextAlign.Center)// 文本居中
        .width('180lpx') // 设置宽度
    }
    .height('100%') // 设置高度
    .backgroundColor(Color.Red) // 设置背景颜色
    .justifyContent(FlexAlign.SpaceEvenly) // 设置内容均匀分布
    .borderRadius({ topRight: 10, bottomRight: 10 }) // 设置圆角
    .onClick(() => { // 点击事件
      this.counters.splice(index, 1) // 从数组中删除计数器
      this.listScroller.closeAllSwipeActions() // 关闭所有滑动操作
      promptAction.showToast({
        // 显示删除成功的提示
        message: '删除成功',
        duration: 2000,
        bottom: '400lpx'
      });
    })
  }

  aboutToAppear(): void { // 组件即将出现时调用
    const options: preferences.Options = { name: Index.counterStorageKey }; // 获取偏好设置选项
    this.dataPreferences = preferences.getPreferencesSync(getContext(), options); // 同步获取偏好设置
    const savedData: string = this.dataPreferences.getSync(Index.counterStorageKey, "[]") as string // 获取保存的数据
    const parsedData: Array<CounterItem> = JSON.parse(savedData) as Array<CounterItem> // 解析数据
    console.info(`parsedData:${JSON.stringify(parsedData)}`) // 打印解析后的数据
    for (const item of parsedData) { // 遍历解析后的数据
      const newItem = new CounterItem(item.name) // 创建新的计数器实例
      newItem.count = item.count // 设置计数器的count
      newItem.upStep = item.upStep // 设置计数器的upStep
      newItem.downStep = item.downStep // 设置计数器的downStep
      this.counters.push(newItem) // 将新计数器添加到数组
    }
    this.updateTotalCount() // 更新总计数
  }

  build() { // 构建组件的UI
    Column() {
      Text('计数器')// 显示标题
        .width('100%')// 设置宽度
        .height('88lpx')// 设置高度
        .fontSize('38lpx')// 设置字体大小
        .backgroundColor(Color.White)// 设置背景颜色
        .textAlign(TextAlign.Center) // 文本居中
      Column() {
        List({ space: this.listSpacing, scroller: this.listScroller }) { // 创建列表
          ForEach(this.counters, (counter: CounterItem, index: number) => { // 遍历计数器数组
            ListItem() { // 列表项
              Row() { // 行布局
                Stack() { // 堆叠布局
                  Rect().fill("#65DACC").width(`${this.baseFontSize / 2}lpx`).height('4lpx') // 上方横条
                  Circle()// 圆形按钮
                    .width(`${this.baseFontSize}lpx`)
                    .height(`${this.baseFontSize}lpx`)
                    .fillOpacity(0)// 透明填充
                    .borderWidth('4lpx')// 边框宽度
                    .borderRadius('50%')// 圆角
                    .borderColor("#65DACC") // 边框颜色
                }
                .width(`${this.baseFontSize * 2}lpx`) // 设置宽度
                .height(`100%`) // 设置高度
                .clickEffect({ scale: 0.6, level: ClickEffectLevel.LIGHT }) // 点击效果
                .onClick(() => { // 点击事件
                  counter.count -= counter.downStep // 减少计数器的count
                  this.updateTotalCount() // 更新总计数
                })

                Stack() { // 堆叠布局
                  Text(counter.name)// 显示计数器名称
                    .fontSize(`${this.baseFontSize / 2}lpx`)// 设置字体大小
                    .fontColor(Color.Gray)// 设置字体颜色
                    .margin({ bottom: `${this.baseFontSize * 2}lpx` }) // 设置底部边距
                  Text(`${counter.count}`)// 显示计数器当前值
                    .fontColor(Color.Black)// 设置字体颜色
                    .fontSize(`${this.baseFontSize}lpx`) // 设置字体大小
                }.height('100%') // 设置高度
                Stack() { // 堆叠布局
                  Rect().fill("#65DACC").width(`${this.baseFontSize / 2}lpx`).height('4lpx') // 下方横条
                  Rect()
                    .fill("#65DACC")
                    .width(`${this.baseFontSize / 2}lpx`)
                    .height('4lpx')
                    .rotate({ angle: 90 }) // 垂直横条
                  Circle()// 圆形按钮
                    .width(`${this.baseFontSize}lpx`)// 设置宽度
                    .height(`${this.baseFontSize}lpx`)// 设置高度
                    .fillOpacity(0)// 透明填充
                    .borderWidth('4lpx')// 边框宽度
                    .borderRadius('50%')// 圆角
                    .borderColor("#65DACC") // 边框颜色
                }
                .width(`${this.baseFontSize * 2}lpx`) // 设置堆叠布局宽度
                .height(`100%`) // 设置堆叠布局高度
                .clickEffect({ scale: 0.6, level: ClickEffectLevel.LIGHT }) // 点击效果
                .onClick(() => { // 点击事件
                  counter.count += counter.upStep // 增加计数器的count
                  this.updateTotalCount() // 更新总计数
                })
              }
              .width('100%') // 设置列表项宽度
              .backgroundColor(Color.White) // 设置背景颜色
              .justifyContent(FlexAlign.SpaceBetween) // 设置内容两端对齐
              .padding({ left: '30lpx', right: '30lpx' }) // 设置左右内边距
            }
            .height(this.listItemHeight) // 设置列表项高度
            .width('100%') // 设置列表项宽度
            .margin({
              // 设置列表项的外边距
              top: index == 0 ? this.listSpacing : 0, // 如果是第一个项,设置上边距
              bottom: index == this.counters.length - 1 ? this.listSpacing : 0 // 如果是最后一个项,设置下边距
            })
            .borderRadius(10) // 设置圆角
            .clip(true) // 裁剪超出部分
            .swipeAction({ start: this.itemStart(index), end: this.itemEnd(index) }) // 设置滑动操作
            .scale(counter.scale) // 设置计数器缩放比例
            .onClick(() => { // 点击事件
              this.selectedIndex = index // 设置当前选中的计数器索引
              this.isSheetVisible = true // 显示底部弹出表单
            })

          }, (counter: CounterItem) => counter.id.toString())// 使用计数器ID作为唯一键
            .onMove((from: number, to: number) => { // 列表项移动事件
              const tmp = this.counters.splice(from, 1); // 从原位置移除计数器
              this.counters.splice(to, 0, tmp[0]) // 插入到新位置
            })

        }
        .scrollBar(BarState.Off) // 隐藏滚动条
        .width('648lpx') // 设置列表宽度
        .height('100%') // 设置列表高度
      }
      .width('100%') // 设置列宽度
      .layoutWeight(1) // 设置布局权重

      Row() { // 底部合计行
        Column() { // 列布局
          Text('合计').fontSize('26lpx').fontColor(Color.Gray) // 显示“合计”文本
          Text(`${this.totalCount}`).fontSize('38lpx').fontColor(Color.Black) // 显示总计数
        }.margin({ left: '50lpx' }) // 设置左边距
        .justifyContent(FlexAlign.Start) // 设置内容左对齐
        .alignItems(HorizontalAlign.Start) // 设置项目左对齐
        .width('300lpx') // 设置列宽度

        Row() { // 添加按钮行
          Text('添加').fontColor(Color.White).fontSize('28lpx') // 显示“添加”文本
        }
        .onClick(() => { // 点击事件
          this.counters.unshift(new CounterItem(`新计数项${Index.counterId}`)) // 添加新计数器
          this.listScroller.scrollTo({ xOffset: 0, yOffset: 0 }) // 滚动到顶部
          this.counters[0].scale = { x: 0.8, y: 0.8 }; // 设置新计数器缩放
          animateTo({
            // 动画效果
            duration: 1000, // 动画持续时间
            curve: curves.springCurve(0, 10, 80, 10), // 动画曲线
            iterations: 1, // 动画迭代次数
            onFinish: () => { // 动画完成后的回调
            }
          }, () => {
            this.counters[0].scale = { x: 1, y: 1 }; // 恢复缩放
          })
        })

        .width('316lpx') // 设置按钮宽度
        .height('88lpx') // 设置按钮高度
        .backgroundColor("#65DACC") // 设置按钮背景颜色
        .borderRadius(10) // 设置按钮圆角
        .justifyContent(FlexAlign.Center) // 设置内容居中
      }.width('100%').height('192lpx').backgroundColor(Color.White) // 设置行宽度和高度

    }
    .backgroundColor("#f2f2f7") // 设置背景颜色
    .width('100%') // 设置宽度
    .height('100%') // 设置高度
    .bindSheet(this.isSheetVisible, this.mySheet(), {
      // 绑定底部弹出表单
      height: 300, // 设置表单高度
      dragBar: false, // 禁用拖动条
      onDisappear: () => { // 表单消失时的回调
        this.isSheetVisible = false // 隐藏表单
      }
    })
  }

  @Builder
  // 构建器装饰器
  mySheet() { // 创建底部弹出表单
    Column({ space: 20 }) { // 列布局,设置间距
      Row() { // 行布局
        Text('计数标题:') // 显示“计数标题”文本
        TextInput({ text: this.counters[this.selectedIndex].name }).width('300lpx').onChange((value) => { // 输入框,绑定计数器名称
          this.counters[this.selectedIndex].name = value // 更新计数器名称
        })

      }

      Row() { // 行布局
        Text('增加步长:') // 显示“增加步长”文本
        TextInput({ text: `${this.counters[this.selectedIndex].upStep}` })// 输入框,绑定增加步长
          .width('300lpx')// 设置输入框宽度
          .type(InputType.Number)// 设置输入框类型为数字
          .onChange((value) => { // 输入框变化事件
            this.counters[this.selectedIndex].upStep = parseInt(value) // 更新增加步长
            this.updateTotalCount() // 更新总计数
          })

      }

      Row() { // 行布局
        Text('减少步长:') // 显示“减少步长”文本
        TextInput({ text: `${this.counters[this.selectedIndex].downStep}` })// 输入框,绑定减少步长
          .width('300lpx')// 设置输入框宽度
          .type(InputType.Number)// 设置输入框类型为数字
          .onChange((value) => { // 输入框变化事件
            this.counters[this.selectedIndex].downStep = parseInt(value) // 更新减少步长
            this.updateTotalCount() // 更新总计数
          })

      }
    }
    .justifyContent(FlexAlign.Start) // 设置内容左对齐
    .padding(40) // 设置内边距
    .width('100%') // 设置宽度
    .height('100%') // 设置高度
    .backgroundColor(Color.White) // 设置背景颜色
  }
}

在 Solon Mvc 里,@Mapping 注解一般是配合 @Controller 和 @Remoting,作请求路径映射用的。
且,只支持加在 public 函数 或 类上

1、注解属性

属性 说明 备注
value 路径 与 path 互为别名
path 路径 与 value 互为别名
method 请求方式限定(def=all) 可用
@Post

@Get
等注解替代此属性
consumes 指定处理请求的提交内容类型 可用
@Consumes
注解替代此属性
produces 指定返回的内容类型 可用
@Produces
注解替代此属性
multipart 申明支持多分片请求(def=false) 如果为false,则自动识别

当 method=all,即不限定请求方式

2、支持的路径映射表达式

符号 说明 示例
** 任意字符、不限段数 **

/user/**
* 任意字符 /user/*
? 可有可无 /user/?
/ 路径片段开始符和间隔符 /

/user
{name} 路径变量申明 /user/{name}

路径组合(控制器映射与动作映射)及应用示例:

import org.noear.solon.annotation.Controller;
import org.noear.solon.annotation.Mapping;

@Mapping("/user") //或 "user",开头自动会补"/"
@Controller
public void DemoController{

    @Mapping("") //=/user
    public void home(){ }
    
    @Mapping("/") //=/user/,与上面是有区别的,注意下。
    public void home2(){ }
    
    @Mapping("/?") //=/user/ 或者 /user,与上面是有区别的,注意下。
    public void home3(){ }
    
    @Mapping("list") //=/user/list ,间隔自动会补"/"
    public void getList(){ }
    
    @Mapping("/{id}") //=/user/{id}
    public void getOne(long id){ }
    
    @Mapping("/ajax/**") //=/user/ajax/**
    public void ajax(){ }
}

提醒:一个 @Mapping 函数不支持多个路径的映射

3、参数注入

非请求参数的可注入对象:

类型 说明
Context 请求上下文(org.noear.solon.core.handle.Context)
Locale 请求的地域信息,国际化时需要
ModelAndView 模型与视图对象(org.noear.solon.core.handle.ModelAndView)

支持请求参数自动转换注入:

  • 当变量名有对应的请求参数时(即有名字可对上的请求参数)
    • 会直接尝试对请求参数值进行类型转换
  • 当变量名没有对应的请求参数时
    • 当变量为实体时:会尝试所有请求参数做为属性注入
    • 否则注入 null

支持多种形式的请求参数直接注入:

  • queryString
  • form-data
  • x-www-form-urlencoded
  • path
  • json body

其中 queryString, form-data, x-www-form-urlencoded, path 参数,支持 ctx.param() 接口统一获取。

import org.noear.solon.core.handle.Context;
import org.noear.solon.core.handle.ModelAndView;
import org.noear.solon.core.handle.UploadedFile;
import java.util.Locale;

@Mapping("/user") 
@Controller
public void DemoController{
    //非请求参数的可注入对象
    @Mapping("case1")
    public void case1(Context ctx, Locale locale , ModelAndView mv){ }
    
    //请求参数(可以是散装的;支持 queryString, form;json,或支持的其它序列化格式)
    @Mapping("case2")
    public void case2(String userName, String nickName, long[] ids, List<String> names){ }
    
    //请求参数(可以是整装的结构体;支持 queryString, form;json,或支持的其它序列化格式Mapping
    @Mapping("case3")
    public void case3(UserModel user){ }
    
    //也可以是混搭的
    @Mapping("case4")
    public void case4(Context ctx, UserModel user, String userName){  }
    
    //文件上传    //注意与 <input type='file' name="file1" /> 名字对上
    @Mapping("case5")
    public void case5(UploadedFile file1, UploadedFile file2){ } 
    
    //同名多文件上传
    @Mapping("case6")
    public void case6(UploadedFile[] file){ }  
}

提醒: ?user[name]=1&ip[0]=a&ip[1]=b&order.id=1 风格的参数注入,需要引入插件: solon-serialization-properties

4、带注解的参数注入

注解:

注解 说明
@Param 注入请求参数(包括:query-string、form)。起到指定名字、默认值等作用
@Header 注入请求 header
@Cookie 注入请求 cookie
@Path 注入请求 path 变量(因为框架会自动处理,所以这个只是标识下方便文档生成用)
@Body 注入请求体(一般会自动处理。仅在主体的 String, InputSteam, Map 时才需要)

注解相关属性:

属性 说明 适用注解
value 参数名字 @Param, @Header, @Cookie, @Path
name 参数名字(与 value 互为别名) @Param, @Header, @Cookie, @Path
required 必须的 @Param, @Header, @Cookie, @Body
defaultValue 默认值 @Param, @Header, @Cookie, @Body
import org.noear.solon.annotation.Controller;
import org.noear.solon.annotation.Mapping;
import org.noear.solon.annotation.Header;
import org.noear.solon.annotation.Body;
import org.noear.solon.annotation.Path;

@Mapping("/user") 
@Controller
public void DemoController{
    @Mapping("case1")
    public void case1(@Body String bodyStr){   }
    
    @Mapping("case2")
    public void case2(@Body Map<String,String> paramMap, @Header("Token") String token){ }
    
    @Mapping("case3")
    public void case3(@Body InputStream stream, @Cookie("Token") token){  }
    
    //这个用例加不加 @Body 效果一样
    @Mapping("case4")
    public void case4(@Body UserModel user){  } 
    
    @Mapping("case5/{id}")
    public void case5(String id){  }
    
    //如果名字不同,才有必要用 @Path //否则是自动处理(如上)
    @Mapping("case5_2/{id}")
    public void case5_2(@Path("id") String name){  } 
    
    @Mapping("case6")
    public void case6(String name){ }
    
    //如果名字不同,才有必要用 @Param //否则是自动处理(如上)
    @Mapping("case6_2")
    public void case6_2(@Param("id") String name){ } 
    
    //如果要默认值,才有必要用 @Param
    @Mapping("case6_3")
    public void case6_3(@Param(defaultValue="world") String name){ }
    
    @Mapping("case7")
    public void case7(@Header String token){ }
    
    @Mapping("case7_2")
    public void case7_2(@Header String[] user){ } //v2.4.0 后支持
}

5、请求方式限定

可以1个或多个加个 @Mppaing 注解上,用于限定请求方式(
不限,则支持全部请求方式

请求方式限定注解 说明
@Get 限定为 Http Get 请求方式
@Post 限定为 Http Post 请求方式
@Put 限定为 Http Put 请求方式
@Delete 限定为 Http Delete 请求方式
@Patch 限定为 Http Patch 请求方式
@Head 限定为 Http Head 请求方式
@Options 限定为 Http Options 请求方式
@Trace 限定为 Http Trace 请求方式
@Http 限定为 Http 所有请求方式
@Message 限定为 Message 请求方式
@To 标注转发目标
@WebSokcet 限定为 WebSokcet 请求方式
@Sokcet 限定为 Sokcet 请求方式
@All 允许所有请求方式(默认)
其它限定注解 说明
@Produces 申明输出内容类型
@Consumes 申明输入内容类型(当输出内容类型未包函 @Consumes,则响应为 415 状态码)
@Multipart 显式申明支持 Multipart 输入

例:

import org.noear.solon.boot.web.MimeType;

@Mapping("/user") 
@Controller
public void DemoController{
    @Get
    @Mapping("case1")
    public void case1(Context ctx, Locale locale , ModelAndView mv){ }
   
    //也可以直接使用 Mapping 的属性进行限定。。。但是没使用注解的好看
    @Mapping(path = "case1_2", method = MethodType.GET)
    public void case1_2(Context ctx, Locale locale , ModelAndView mv){ }
    
    @Put
    @Message
    @Mapping("case2")
    public void case2(String userName, String nickName){ }
    
    //如果没有输出申明,侧 string 输出默认为 "text/plain"
    @Produces(MimeType.APPLICATION_JSON_VALUE)
    @Mapping("case3")
    public String case3(){
        return "{code:1}";
    }
    
    ////也可以直接使用 Mapping 的属性进行限定。。。但是没使用注解的好看
    @Mapping(path= "case3_2", produces=MimeType.APPLICATION_JSON_VALUE))
    public String case3_2(){
        return "{code:1}";
    }
    
    //如果没有输出申明,侧 object 输出默认为 "application/json"
    @Mapping("case3_3")
    public User case3_3(){
        return new User();
    }
    
}

6、输出类型

@Mapping("/user") 
@Controller
public void DemoController{

    //输出视图与模型,经后端渲染后输出最终格式
    @Maping("case1")
    public ModelAndView case1(){
        ModelAndView mv = new ModelAndView();
        mv.put("name", "world");
        mv.view("hello.ftl");
        
        return mv;
    }
    
    //输出结构体,默认会采用josn格式渲染后输出
    @Maping("case2")
    public UserModel case2(){
        return new UserModel();
    }
    
    //输出下载文件
    @Maping("case3")
    public Object case3(){
        return new File(...); //或者 return new DownloadedFile(...);
    }
}

7、父类继承支持

@Mapping("user")
public void UserController extends CrudControllerBase<User>{
           
}

public class CrudControllerBase<T>{
    @Post
    @Mapping("add")
    public void add(T t){
        ...
    }

    @Delete
    @Mapping("remove")
    public void remove(T t){
        ...
    }
}


title: Nuxt.js 应用中的 vite:extendConfig 事件钩子
date: 2024/11/16
updated: 2024/11/16
author:
cmdragon

excerpt:
通过合理使用 vite:extendConfig 钩子,开发者可以极大地增强 Nuxt 3 项目的灵活性和功能性,为不同的项目需求量身定制 Vite 配置。无论是添加插件、调整构建选项还是配置开发服务器,这些扩展可以有效提升开发体验和应用性能。

categories:

  • 前端开发

tags:

  • Nuxt
  • Vite
  • 配置
  • 钩子
  • 插件
  • 构建
  • 环境


image

image

扫描
二维码
关注或者微信搜一搜:
编程智域 前端至全栈交流与成长

在 Nuxt 3 中,
vite:extendConfig
钩子允许开发者扩展默认的 Vite 配置。这意味着你可以在 Nuxt 项目中根据需求自定义 Vite 的配置,包括添加插件、修改构建选项、调整开发服务器设置等。

文章大纲

  1. 定义与作用
  2. 调用时机
  3. 参数说明
  4. 示例用法
  5. 应用场景
  6. 注意事项
  7. 总结

1. 定义与作用

  • vite:extendConfig
    是一个事件钩子,提供了机会来修改 Vite 的配置对象。
  • 通过该钩子,你可以将额外的 Vite 插件、构建选项、开发服务器设置等添加到项目中。

2. 调用时机

vite:extendConfig
钩子在 Nuxt 3 启动时进行 Vite 配置的构建阶段被调用,此时你可以访问到
viteInlineConfig
和环境变量
env

3. 参数说明

钩子接收两个参数:

  1. viteInlineConfig
    : 当前 Vite 的配置对象。你可以直接修改这个对象的属性。
  2. env
    : 当前的环境变量。可以根据不同环境配置。

4. 示例用法

下面是如何使用
vite:extendConfig
钩子的基本示例,展示了如何扩展 Vite 的默认配置。


plugins/viteExtendConfig.js
文件中的实现

// plugins/viteExtendConfig.js

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks('vite:extendConfig', (viteInlineConfig, env) => {
    // 添加自定义的 Vite 插件,例如 React 支持
    viteInlineConfig.plugins.push(require('@vitejs/plugin-react')());

    // 根据环境动态调整构建选项
    viteInlineConfig.build = {
      ...viteInlineConfig.build,
      sourcemap: env.NODE_ENV === 'development', // 仅在开发模式下开启 sourcemap
    };

    // 修改开发服务器设置
    viteInlineConfig.server = {
      ...viteInlineConfig.server,
      port: 3001, // 将开发服务器的端口修改为 3001
    };
  });
});

5. 应用场景

5.1 添加 Vite 插件

在涉及到使用特定功能的情况下,例如使用 React,你可以在
vite:extendConfig
中添加 Vite 插件:

// plugins/viteExtendConfig.js
viteInlineConfig.plugins.push(require('@vitejs/plugin-react')());

5.2 调整构建配置

在不同的环境中,可能需要不同的构建选项。例如,调试开发环境可以开启源码映射:

// 根据环境动态调整构建选项
viteInlineConfig.build = {
  ...viteInlineConfig.build,
  sourcemap: env.NODE_ENV === 'development', // 开发环境开启 sourcemap
};

5.3 自定义开发服务器设置

如果你需要指定开发服务器的端口,可以这样做:

// 修改开发服务器设置
viteInlineConfig.server = {
  ...viteInlineConfig.server,
  port: 3001, // 设置开发服务器端口
};

5.4 根据环境动态调整配置

使用
env
参数,可以在生产环境和开发环境中使用不同的配置。这使得你的应用更加灵活:

if (env.NODE_ENV === 'production') {
  viteInlineConfig.base = '/my-production-base/';
} else {
  viteInlineConfig.base = '/';
}

6. 注意事项

  • 性能影响
    : 添加过多插件或配置可能会影响构建性能,需谨慎选择。
  • 兼容性
    : 确保你所添加的插件与 Vite 及其他 Nuxt 插件兼容,以避免运行时错误。

7. 总结

通过合理使用
vite:extendConfig
钩子,开发者可以极大地增强 Nuxt 3 项目的灵活性和功能性,为不同的项目需求量身定制 Vite 配置。无论是添加插件、调整构建选项还是配置开发服务器,这些扩展可以有效提升开发体验和应用性能。

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:
编程智域 前端至全栈交流与成长
,阅读完整的文章:
Nuxt.js 应用中的 vite:extendConfig 事件钩子 | cmdragon's Blog

往期文章归档:

在当今编程界,ChatGPT 就像一颗耀眼却又颇具争议的新星,它对编程有着不可忽视的影响。但这影响就像一把双刃剑,使用不当,就可能让我们在编程之路上“受伤”。

一、过度依赖 ChatGPT 编程:黑暗深渊里的重重危机

1、个人编程能力:被“偷走”的成长

想象一下,那些初涉编程的新手们,就像刚学走路的孩子。如果他们一遇到编程作业,就不假思索地向 ChatGPT 寻求答案,那可就像是一直被搀扶着,自己的双腿从未真正用力。就拿写一个简单的猜数字小游戏来说,直接从 ChatGPT 拿到代码,表面上是完成了任务,但实际上呢?对于代码中随机数是如何生成的、循环是怎样巧妙设计的,他们完全是一头雾水。长此以往,当真正需要独立编程的时候,比如在考试或者参与实际项目时,他们就会像离开拐杖的人,茫然失措,因为他们的编程能力从未真正成长。

2、业务理解:与现实的“脱轨”

编程和业务本应是紧密交织的齿轮,共同推动项目前进。可过度依赖 ChatGPT,就会让这个齿轮系统错乱。以开发电商平台为例,电商的世界就像一个复杂的迷宫,满是各种促销规则这样的“机关”。如果仅仅依靠 ChatGPT 生成代码,对于满减、买一送一等促销逻辑,代码可能就像是没头的苍蝇,无法准确处理。这就会导致在实际运营中,促销活动变成一团乱麻,用户体验一落千丈,电商平台的发展也会因此陷入困境。

3、职业发展:被堵死的晋升之路

在职场这个残酷的战场上,过度依赖 ChatGPT 的程序员就像是穿着沉重枷锁的战士。比如说公司要对库存管理系统升级,程序员如果长期依赖 ChatGPT,那就麻烦了。因为每个公司的库存管理都有自己的独特之处,像是特殊的分类方式和盘点规则。而 ChatGPT 的方案就像是千篇一律的模板,无法契合公司的实际情况。这样一来,项目进度就会像蜗牛爬行一样缓慢,甚至可能出现数据安全问题。在公司眼中,这样的程序员就像失去光芒的星星,无法展现价值,升职加薪自然成了泡影,甚至可能面临被淘汰的命运。

4、安全隐患:悬在头顶的“达摩克利斯之剑”

在软件开发的王国里,安全就是守护宝藏的巨龙。然而,过度依赖 ChatGPT 可能会让这条巨龙打瞌睡。就拿在线支付软件来说,这可是涉及用户资金安全和隐私的“金库”。如果盲目使用 ChatGPT 生成的代码,就可能像在金库的大门上留下了无数漏洞。比如在用户登录环节,可能没有足够强大的防盗号魔法,数据传输过程中也可能缺失安全的加密护盾。一旦黑客这个“恶龙”发现这些破绽,用户的资金和隐私就会被洗劫一空,给用户和软件公司都带来毁灭性的打击。

5、团队协作:被打乱的和谐乐章

在团队这个大乐队中,每个成员都应该是演奏精彩旋律的乐手。但如果有成员过度依赖 ChatGPT 编程,就像是一个不懂乐谱却在乱弹琴的人。比如在游戏开发的大合奏中,负责角色技能系统的成员使用 ChatGPT 生成代码,在代码整合这个关键的“合奏”环节,他可能完全无法解释清楚技能系统和其他系统(像角色属性系统、战斗系统)之间的交互逻辑。这就会导致技能效果在游戏中“跑调”,像技能暴击效果无法正确触发、游戏卡顿等问题频发,严重破坏了项目的进度和质量这个“乐章”的和谐,团队的协作氛围也会像被暴风雨袭击过的湖面,不再平静。

二、ChatGPT 在编程中的微光:并非一无是处

1、代码模板:编程路上的“快捷小道”

在一些常见的编程任务中,ChatGPT 就像是一位贴心的导游,能迅速为程序员指出一条代码模板的“快捷小道”。比如说基本的文件读写操作,它能快速生成一个可用的代码框架,就像为程序员搭建了一个简易的脚手架。程序员可以在这个基础上轻松地进行修改和完善,大大节省了时间,提高了编程的效率。

2、编程思路:黑暗中的“启明星”

当程序员在复杂的算法问题或者新的功能需求的“迷雾森林”中迷失时,ChatGPT 就像一颗闪亮的启明星,为他们指引方向。比如在解决复杂的图算法问题时,它展示的某种解法可能就像是打开宝藏的钥匙,启发程序员找到更合适的解决方案,帮助程序员拓宽思维,让他们在编程的“迷宫”中更快地找到出口。

三、挣脱依赖之网,开启编程能力升级之旅

1、筑牢编程基础:编程大厦的坚固基石

深入数据结构与算法的“魔法世界”

通过参加专业课程或线上教程,像探险家深入神秘洞穴一样,全面掌握数据结构(从简单的数组、链表,到复杂的树、图等)和算法(从常见的排序算法、搜索算法到更高级的算法)的原理和应用。例如,亲自尝试在编程中实现红黑树的插入、删除操作,体验如同施展魔法般的感觉,以及熟练运用各种排序算法。这样,在编程时就能像魔法师挑选合适的魔法咒语一样,根据实际情况选择最优的算法,而不被 ChatGPT 生成的代码迷惑。

成为编程语言的“主宰者”

对于常用的编程语言(Python、Java、C++等这些编程世界的“王国”),要像国王了解自己的领土一样深入学习其语法、特性和标准库。以 Python 为例,要深入理解生成器、装饰器这些神奇的“魔法工具”是如何工作的,掌握多线程和多进程模块这些“强大兵力”的使用方法。只有这样,在面对 ChatGPT 生成的代码时,才能像睿智的国王辨别真伪一样,准确判断其质量,并进行针对性的修改。

2、洞察业务逻辑:连接编程与现实的“桥梁”

与业务部门的“亲密对话”

在项目开发的“征途”前,要和业务部门进行像老友般的深入沟通。比如在开发金融风险评估软件时,要与金融专家、业务人员这些“行业智者”促膝长谈,了解不同金融产品的风险评估指标、计算方法和特殊规则这些“行业密码”,确保编写的代码能够像精准的指南针一样,准确反映业务逻辑。

绘制业务蓝图:从抽象到具体的“魔法画笔”

根据业务需求,拿起绘制业务模型和流程图的“魔法画笔”。在开发金融交易系统时,精心绘制从用户下单、交易撮合、资金结算到风险控制的整个流程这幅“宏伟画卷”,清晰地展现每个环节的业务规则和数据流向,让编程过程像沿着地图航行一样,紧密围绕业务逻辑展开,避免被 ChatGPT 的通用代码引入歧途。

3、强化安全意识:守护编程王国的“钢铁长城”

学习安全编程规范:安全防线的“建造手册”

深入钻研行业内的安全编程规范,如 OWASP 的安全编码指南这一“安全宝典”。在开发 Web 应用时,依据这个“宝典”对输入验证、输出编码、密码存储等环节进行像打造坚固城堡一样的严格安全处理,防止因使用 ChatGPT 代码而让“敌人”(黑客)有机可乘。

安全审计与测试:安全漏洞的“照妖镜”

在编程过程中,要定期拿起专业的代码扫描工具(如 Checkmarx、Fortify 等这些“照妖镜”)对代码进行安全审计,检查是否存在像隐藏在暗处的小妖怪一样的安全隐患。同时,开展各种安全测试,如渗透测试、漏洞扫描测试等,像英勇的卫士一样及时发现并修复 ChatGPT 代码可能存在的安全问题。

4、优化团队协作与知识共享:团队力量的“核聚变”

建立代码审查与分享“圆桌会议”

在团队中建立定期的代码审查“圆桌会议”,对成员编写的代码(包括使用 ChatGPT 生成并修改后的代码)进行像鉴赏珍宝一样的审查。在这个过程中,大家分享编程思路、业务逻辑实现方法和优化建议这些“智慧宝藏”。例如在开发移动应用时,通过审查用户登录模块的代码,讨论如何更好地实现记住密码功能及其安全性,让团队成员之间像知识的“魔法师”一样相互学习,减少对 ChatGPT 的依赖。

创建内部代码库和知识库:团队智慧的“宝库”

建立团队内部的代码库这个“宝藏仓库”,收集和整理经过实践检验的优质代码。同时,打造知识库这个“智慧殿堂”,记录业务需求分析、常见问题解决方案、编程技巧等内容。这样,成员在编程时就可以像在宝库中挑选武器一样,优先从内部资源中获取帮助,降低对 ChatGPT 的使用频率。并且鼓励成员将使用 ChatGPT 的经验和教训分享到知识库中,提高团队对其使用的警惕性。

5、实践出真知:编程能力提升的“黄金之路”

从小项目开启编程“冒险之旅”

模仿经典:站在巨人肩膀上的“起步”

从网络这个“魔法森林”中寻找一些经典的小型编程项目,如简单的命令行计算器、待办事项列表应用等,开启模仿练习的“冒险之旅”。在模仿过程中,不仅要实现基本功能,还要像学习古老魔法的学徒一样,学习优秀的代码风格和规范。以命令行计算器为例,在完成基本的四则运算功能这个“小魔法”后,逐步添加更复杂的功能,如括号运算、幂运算等,像升级魔法技能一样加深对编程的理解。

自主拓展:突破边界的“成长”

在完成模仿后,对小项目进行功能拓展,这就像是打破魔法封印一样。对于待办事项列表应用,可以增加任务优先级设置、按日期排序任务等功能。这需要像魔法师重新设计魔法阵一样,对数据结构和算法进行重新设计和优化,从而锻炼解决问题的能力和编程思维。

投身开源项目:编程江湖的“历练”

寻找合适项目:踏入开源江湖的“第一步”

根据自己的兴趣和技术水平,在开源平台(如 GitHub 这个“编程江湖”)上寻找合适的开源项目。例如,如果对 Web 开发感兴趣且有一定基础,可以选择一个小型的前端框架项目这个“门派”。在参与项目前,先像探秘神秘门派一样,仔细阅读项目的文档和代码结构,了解其实现原理和功能特点。

积极贡献与交流:江湖高手的“成长之路”

从简单的任务入手,如文档更新、代码格式化这些“基础招式”,熟悉开源项目的协作流程和代码规范。随着对项目的熟悉,像勇敢的江湖侠客一样尝试解决一些实际的代码问题,如修复 Bug 或添加新功能。在这个过程中,与其他开发者在项目的 issue 区这个“江湖茶馆”交流经验,学习他们的思路和方法,拓宽编程视野。

解决生活难题:编程魔法的“日常应用”

自动化日常:让生活充满“魔法”

将编程应用于日常生活中的问题解决,实现任务自动化,这就像是把魔法融入生活。例如,如果经常需要处理大量文件,可以编写 Python 脚本这个“魔法咒语”实现文件的批量重命名或格式转换。在这个过程中,学习如何使用编程语言操作文件系统,以及如何运用相关库(如
os
模块、
re
模块等)这些“魔法工具”实现复杂的功能。

开发实用工具:创造属于自己的“魔法神器”

根据自己的兴趣爱好或工作需求,开发一些实用的小工具,这就像是打造专属的魔法神器。比如,对于数据分析爱好者,可以开发一个简单的数据可视化工具。从使用 Python 的
matplotlib

seaborn
库绘制简单的柱状图、折线图这些“初级魔法绘图”开始,逐渐掌握如何将数据映射到图形元素上,设置坐标轴标签、标题等“高级魔法技巧”。随着经验的积累,尝试制作更复杂的可视化作品,如交互式的桑基图或地理信息图,以此提升编程能力。

四、与 ChatGPT 共舞,主宰编程之路

总之,ChatGPT 是编程世界里一个强大的“魔法助手”,但我们不能被它的“魔法”迷惑,陷入过度依赖的陷阱。我们要巧妙地利用它,同时通过各种途径提升自己的编程能力,深入理解业务逻辑,筑牢安全防线,优化团队协作,积极实践。只有这样,我们才能在编程这个充满魅力的“魔法世界”里不断成长,成为能够独立解决问题的编程高手,真正主宰自己的编程之路,而不是在依赖中迷失方向,成为被“魔法”控制的傀儡。

本文介绍基于
VBA
语言,对大量含有图片、文本框与表格的
Word
文档加以批量自动合并,并在每一次合并时
添加分页符
的方法。

在我们之前的文章中,介绍过基于
Python
语言的
python-docx

docx
)模块与
docxcompose
模块,对大量
Word
文档加以合并的方法;但是,基于这种方法,我们无法对
具有非明确大小的文本框

Word
加以合并,因为
python-docx
无法处理含有这种元素的
Word
文件。最近,一位老哥提出了合并
含有文本框

Word
的需求,所以就尝试用
VBA
来实现这一操作,这里就介绍一下具体的方法。

其中,
VBA
是Visual Basic for Applications的缩写,其是基于
Visual Basic
语言的一种扩展,主要应用于微软
Office
套件中各种应用程序,例如
Word

Excel

PowerPoint
等;其允许用户创建自定义的宏和应用程序来自动执行各种任务,从而提高工作效率。目前,
VBA
主要就是应用于需要批量操作
Office
文件的各类场景中。

本文的需求如下。现在有一个文件夹,其中包含大量文档文件,如下图所示;其中,每一个文档中,都包含图片、表格、文本框等
较为复杂的元素

image

我们现在希望,可以批量将文件夹中大量文档文件加以合并;并且在合并时,每次都需要在新的
1
页中合并下一个文件(也就是,不同文件的内容不要出现在
1
页中)。

明确了需求,即可开始代码撰写。本文所需代码如下。

Sub merge_word()
    Dim time_start As Single: time_start = Timer
    Dim word_result As Document
    Dim word_temp As Document
    Dim file_dialog As FileDialog
    Dim str As String
    Dim file
    Dim num As Long
    
    Set word_result = ActiveDocument
    Set file_dialog = Application.FileDialog(msoFileDialogFilePicker)
    
    With file_dialog
        .AllowMultiSelect = True
        .Title = "请选择【一个或多个】需要与当前文档合并的文件"
        With .Filters
            .Clear
            .Add "Word文件", "*.doc*;*.dot*;*.wps"
            .Add "所有文件", "*.*"
        End With
        If .Show Then
            Application.ScreenUpdating = False
            num = .SelectedItems.count
            For Each file In .SelectedItems
                Set word_temp = Documents.Open(file)
                word_temp.Range.Copy
                
                word_result.Range(word_result.Range.End - 1, word_result.Range.End).Select
                
                DoEvents
                Selection.Paste
                Selection.InsertBreak
                
                word_temp.Close wdDoNotSaveChanges
            Next
            
            Application.ScreenUpdating = True
        End If
    End With
    
    Set word_result = Nothing
    Set word_temp = Nothing
    Set file_dialog = Nothing
    
    str = Format(Timer - time_start, "均已成功合并;共用时0秒!")
    str = Format(num, "您选择合并0个文件,") & str
    MsgBox str, vbInformation, "文件合并结果"
End Sub

上述代码中,我们首先进行
变量声明

time_start
是一个
Single
类型的变量,用以记录代码开始执行的时间;
Timer
函数返回一个单精度浮点数,表示从计算机启动到现在经过的秒数。
word_result
是一个
Document
类型的变量,用以存储当前打开的
Word
文档。
word_temp
是另一个
Document
类型的变量,用以临时存储要合并的其他
Word
文档。
file_dialog
是一个
FileDialog
类型的变量,用以存储文件选择对话框对象。
str
是一个字符串类型的变量,用以存储最终要显示在消息框中的合并结果信息。
file
用以在循环中存储用户选择的每个文件路径。
num
是一个长整型变量,用以存储用户选择的文件数量。

随后,我们
获取当前文档
。将当前正在编辑的
Word
文档赋值给
word_result
变量,这个文档就是要合并其他文档内容的结果文档。

接下来,我们
打开文件选择对话框
。创建一个文件选择对话框对象,并逐一设置对话框的属性;其中,允许用户选择多个文件,自定义对话框标题,并设置文件类型过滤器,其中第一个表示只显示
Word
文档文件,第二个则表示显示所有类型的文件。

紧接着,通过
If .Show Then
语句,判断用户在对话框中是否选择了文件。如果是的话,执行合并操作。其中,首先获取用户选择的文件数量;随后,循环遍历每个选择的文件——打开每个选择的文件作为
临时文档
,将
临时文档
的全部内容复制到剪贴板;将光标定位到
目标文档
(也就是结果文件)的最后一个字符处,并将剪贴板中的内容粘贴到
目标文档
的末尾,同时在粘贴的内容后插入一个分页符;最后,关闭
临时文档
而不保存更改。接下来,进行下一次遍历。其中需要注意,这里如果我们不添加
DoEvents
这句代码,会导致其下方的
Selection.Paste
这句代码报错(虽然会报错,但其实选择调试后继续按下
F5
,程序也还是可以运行)。

最后,即可清理变量引用,并计算合并操作的耗时,将结果信息显示在消息框中。

代码的执行方法如下。首先,在任意路径创建一个空白的
Word
文档,作为我们的结果文件。随后,在这个文档中,同时按下
Alt
键与
F11
键,进入
VBA
宏界面,如下图所示。

随后,在左上角的
Normal
处右键,选择“
插入
”→“
模块
”,如下图所示。

随后,在弹出的窗口中,复制前述代码,如下图所示。

接下来,按下
F5
键,即可开始运行代码。其中,首先弹出一个选择文件的窗口,我们选择待合并的文件即可;如下图所示。

随后,点击“
确定
”,即可开始合并文件。稍等片刻,合并完成,并将弹出如下所示界面。

此时,回到我们打开的
Word
文件中,即可看到文件已经被合并在内了。

其中,上图中紫色框所示区域,就是我这里待合并文件的开头部分(紫色框内红色的两段线仅仅是为了遮挡文件中的部分信息,没有别的含义,大家理解即可)——可以看到,每一次新的文件合并时,都是在新的一页操作的,符合我们的需求。

至此,大功告成。