OpenHarmony 鸿蒙 PC + CodeArts IDE + Node.js安装第三方qs库进行数据序列化

m0_68635815

166人浏览 · 2026-06-16 22:43:45

m0_68635815 · 2026-06-16 22:43:45 发布

欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net/
欢迎在PC社区平台申请新建项目：https://atomgit.com/OpenHarmonyPCDeveloper
AtomGit 仓库地址：https://atomgit.com/OpenHarmonyPCDeveloper/ohos_node_vue_ts

环境搭建：

该文完整梳理了ARM64架构鸿蒙PC（HarmonyOS/OpenHarmony6.1及以上），基于CodeArts IDE搭建Vite+Vue前端项目的全流程与疑难解决方案。项目实操中，Vite启动会出现rolldown原生模块权限拒绝报错，根源是鸿蒙系统拦截未签名二进制文件，最终解决方案为引入ohos-signpost自动签名工具，配置npm后置钩子，在依赖安装完成后自动为所有.node文件添加系统合法签名，消除权限校验拦截，最终实现CodeArts IDE内Vue+TS项目正常启动、调试。

可以参考文章：
OpenHarmony 鸿蒙 PC + CodeArts IDE 前端 Vite+Vue 完整开发环境搭建指南:https://blog.csdn.net/wanmeijuhao/article/details/161925265

2. 什么是qs第三方库：

qs 是一个URL 参数序列化/反序列化工具库，专门处理 对象 ↔ url 查询字符串，比浏览器自带的 URLSearchParams 功能更强。

核心作用

序列化（对象 → url 参数）
JS 对象转为 a=1&b=2&c=3 格式，常用于 post x-www-form-urlencoded 表单请求、拼接地址栏参数。
反序列化（url 参数字符串 → 对象）
把 id=1&name=test 转回 JS 对象，支持嵌套对象、数组（原生 URLSearchParams 处理数组/嵌套会有缺陷，qs 完美解决）。

3. 安装qs第三方库：

npm install qs

在这里插入图片描述

1. qs.stringify() 对象转参数字符串（序列化）

适合：axios 表单提交、拼接跳转url参数

import qs from 'qs'

const params = {
  name: '张三',
  age: 18,
  arr: [1, 2, 3],
  info: { id: 100 }
}

// 基础转换
const str = qs.stringify(params)
console.log(str)
// name=张三&age=18&arr[0]=1&arr[1]=2&arr[2]=3&info[id]=100

// 数组格式改成 a[]=1 传统表单格式
qs.stringify(params, { arrayFormat: 'brackets' })

2. qs.parse() 参数字符串转回对象（反序列化）

适合：解析路由地址栏 ?id=xxx 参数

import qs from 'qs'
const urlStr = 'name=张三&age=18&arr[0]=1'
const obj = qs.parse(urlStr)
console.log(obj)
// { name: '张三', age: '18', arr: [1] }

Vue3 + Axios 实战场景（最常用）

后端接口要求 Content-Type: application/x-www-form-urlencoded 表单提交，必须用 qs 序列化参数：

<script setup>
import axios from 'axios'
import qs from 'qs'

// 表单对象
const form = {
  username: 'admin',
  password: '123456'
}

// post表单请求
const login = async () => {
  const res = await axios.post(
    '/api/login',
    // 对象转为表单字符串
    qs.stringify(form),
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )
  console.log(res.data)
}
</script>

解析路由参数示例（Vue Router）

<script setup>
import { useRoute } from 'vue-router'
import qs from 'qs'

const route = useRoute()
// route.query 只能解析简单参数，复杂数组嵌套用qs.parse
const queryObj = qs.parse(route.fullPath.split('?')[1] || '')
console.log(queryObj)
</script>

qs vs 原生 URLSearchParams 区别

原生 URLSearchParams
- 只能处理简单单层键值
- 数组、嵌套对象转换格式不友好
- 无复杂配置项
qs
- 完美支持数组、多层嵌套对象
- 可自定义数组拼接格式、过滤空值、编码规则
- 后端 Java/PHP 接收参数完全兼容

常用配置参数

// 忽略值为null/undefined的字段
qs.stringify(obj, { skipNulls: true })

// 数组格式：arr=1&arr=2（很多后端需要这种格式）
qs.stringify(obj, { arrayFormat: 'repeat' })

说明

axios 默认 post 发送 json，传表单数据必须用 qs 序列化；
GET 请求拼接 url 参数也推荐 qs，自动处理数组嵌套；
体积很小，无任何依赖，项目中高频使用。

Vue3 完整演示页面：qs 序列化/反序列化

直接复制单文件组件运行，包含：对象转参数、参数转对象、模拟表单提交、数组/嵌套对象测试

<template>
  <div class="container">
    <h2>qs 库功能演示</h2>

    <!-- 1. 原始测试对象 -->
    <div class="block">
      <h3>1. 原始JS对象</h3>
      <pre>{{ JSON.stringify(testObj, null, 2) }}</pre>
    </div>

    <!-- 2. 对象序列化为url参数 -->
    <div class="block">
      <h3>2. qs.stringify 序列化结果</h3>
      <p class="text">{{ queryStr }}</p>
      <button @click="copyStr">复制参数</button>
    </div>

    <!-- 3. 参数反解析回对象 -->
    <div class="block">
      <h3>3. qs.parse 解析参数回对象</h3>
      <pre>{{ JSON.stringify(parseObj, null, 2) }}</pre>
    </div>

    <!-- 4. 模拟表单提交（x-www-form-urlencoded） -->
    <div class="block">
      <h3>4. 模拟登录表单提交</h3>
      <input v-model="loginForm.username" placeholder="用户名" />
      <input v-model="loginForm.password" placeholder="密码" type="password" />
      <button @click="submitLogin">发起表单请求</button>
      <p v-if="loginResult" class="res">请求携带参数：{{ loginResult }}</p>
    </div>

    <!-- 5. 不同数组拼接格式对比 -->
    <div class="block">
      <h3>5. 数组不同序列化格式</h3>
      <p>默认格式：{{ arrDefault }}</p>
      <p>repeat 格式(arr=1&arr=2)：{{ arrRepeat }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 引入qs
import qs from 'qs'

// 测试对象：包含普通字段、数组、嵌套对象
const testObj = ref({
  name: '李四',
  age: 22,
  hobby: ['篮球', '游戏'],
  info: {
    id: 10086,
    address: '北京市朝阳区'
  }
})

// 1. 对象转url字符串
const queryStr = ref(qs.stringify(testObj.value))

// 2. 字符串转回对象
const parseObj = ref(qs.parse(queryStr.value))

// 复制文本
const copyStr = async () => {
  await navigator.clipboard.writeText(queryStr.value)
  alert('复制成功')
}

// 登录表单
const loginForm = ref({
  username: '',
  password: ''
})
const loginResult = ref('')
// 模拟表单post请求
const submitLogin = () => {
  const formData = qs.stringify(loginForm.value)
  loginResult.value = formData
  // 真实axios写法参考
  // axios.post('/login', formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
}

// 数组两种格式对比
const arrTest = { ids: [1, 2, 3] }
const arrDefault = qs.stringify(arrTest)
const arrRepeat = qs.stringify(arrTest, { arrayFormat: 'repeat' })
</script>

<style scoped>
.container {
  padding: 30px;
  max-width: 900px;
}
.block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
}
pre {
  background: #f5f5f5;
  padding: 10px;
}
.text {
  word-break: break-all;
  color: #1890ff;
}
input {
  margin-right: 10px;
  padding: 6px 10px;
}
.res {
  color: green;
}
button {
  padding: 6px 14px;
  cursor: pointer;
}
</style>

在这里插入图片描述

页面功能说明

基础序列化/解析
多层嵌套对象、数组一键转 url 参数，再还原回 JS 对象，直观看到 qs 处理嵌套的优势；
表单提交真实场景
模拟后端接收 x-www-form-urlencoded 表单，这是 qs 最常用场景；
数组格式切换
演示 arrayFormat: 'repeat'，适配 Java/PHP 后端接收数组；
附带复制功能，方便复制参数去地址栏测试。

运行后效果说明

原始对象包含数组、嵌套对象，原生 URLSearchParams 处理会丢失层级，qs 可以完整保留结构，解析后和原对象完全一致。
登录框输入账号密码点击按钮，会打印接口实际要携带的表单参数。

在这里插入图片描述

总结：

鸿蒙PC前端开发环境搭建

适配ARM64架构、OpenHarmony6.1及以上版本鸿蒙PC，使用CodeArts IDE搭建Vite+Vue3+TS项目；开发时rolldown会因系统拦截未签名.node二进制文件抛出权限报错，解决方案为引入ohos-signpost签名工具，配置npm钩子，安装依赖后自动为原生模块签名，实现项目正常启动调试，附对应CSDN搭建教程链接。

qs工具库完整介绍

库定位：专门用于URL查询字符串序列化与反序列化的第三方JS库，相比浏览器原生URLSearchParams功能更强，支持数组、嵌套对象处理。
安装命令：npm install qs
两大核心API
- qs.stringify()：JS对象转为url参数字符串，可自定义数组拼接格式、过滤空值；多用于表单接口、路由地址拼接。
- qs.parse()：参数字符串还原为完整JS对象，适合解析复杂路由参数。
两大实战场景
- Axios表单请求：后端要求application/x-www-form-urlencoded时，必须序列化请求体才能正常传参。
- Vue Router路由解析：原生route.query无法处理嵌套、数组参数，借助qs解析完整路径参数。
对比原生API优势
原生仅支持单层简单键值，对数组、嵌套对象兼容性差；qs可自定义编码、数组格式，前后端语言参数接收格式通用，轻量无依赖，是前端高频工具。
开发注意点
Axios默认POST传递JSON，表单提交必须使用qs序列化；GET拼接复杂参数也优先使用该库。