NodeJs实战-待办列表(4)-解决待办事项中文乱码问题

news2025/7/28 13:48:25

NodeJs实战-待办列表4-解决待办事项中文乱码问题

  • 乱码问题在哪里产生的
  • 定位乱码问题
    • VSCode 启动 NodeJs 调试模式
    • 浏览器中调试JS
  • 效果图
    • 执行添加
    • 执行完成

乱码问题在哪里产生的

运行第3节的server.js, 当添加中文待办事项时候,会产生中文乱码问题。乱码可能在以下地方产生:

  1. 发送请求封装参数的时候
  2. 参数传输到后台,解析的时候发生乱码
  3. 数据读取返回到前台序列化的时候发生乱码

定位乱码问题

遇到问题不要慌,先 debug 看看

VSCode 启动 NodeJs 调试模式

  1. 首先定位到左侧导航栏的 server.js,鼠标左键点击就好
    在这里插入图片描述
  2. 使用 debug 模式运行 server.js,运行 -> 启动调试,也可以使用快捷键F5
    在这里插入图片描述
    启动调试,发现端口被占用
    在这里插入图片描述
    执行以下命令看那个进程占用了端口 netstat -ano|findstr 3000
C:\Users\Administrator>netstat -ano|findstr 3000
  TCP    127.0.0.1:3000         0.0.0.0:0              LISTENING       85772
  TCP    127.0.0.1:3000         127.0.0.1:57460        ESTABLISHED     85772
  TCP    127.0.0.1:57460        127.0.0.1:3000         ESTABLISHED     67588

使用 taskkill 命令终止进程

C:\Users\Administrator>taskkill /pid 85772
错误: 无法终止 PID 为 85772 的进程。
原因: 只能强行终止这个进程(带 /F 选项)。

C:\Users\Administrator>taskkill /pid /f 85772
错误: 无效语法。需要 '/pid' 的值。
键入 "TASKKILL /?" 以了解用法。

C:\Users\Administrator>taskkill /f /pid 85772
成功: 已终止 PID 为 85772 的进程。

C:\Users\Administrator>taskkill /f /pid 67588
成功: 已终止 PID 为 67588 的进程。

再次启动调试,出现调试窗口
在这里插入图片描述
3. 需要调试的代码前面加上断点,鼠标点击就行在这里插入图片描述
代码前面会出现小红点

  1. 页面增加中文item
    在这里插入图片描述
    发现从前端穿过来的时候就乱码了

浏览器中调试JS

打开浏览器开发者模式,先开 Network 传的参数
在这里插入图片描述
乱码的参数为 %E4%B8%AD%E6%96%872222,我们在浏览器的 console中调试js。与编码有关的方法有 encodeURI, decodeURI。调试这个方法可以看出 中文2222 url 经过了 decodeURI,变成了 %E4%B8%AD%E6%96%872222
在这里插入图片描述
有一种方式,在后端接收的时候解码就行,于是修改 server.js

function findItemData(urlParse) {
	if (urlParse.query.length > 0) {
		var queryArray = urlParse.query.split('=');
		if (queryArray.length >= 2) {
			return decodeURI(queryArray[1]);
		}
	}
	return '';
}

保存之后,重新启动调试,发现解码成功
在这里插入图片描述

效果图

执行添加

  1. 添加 1111
  2. 添加 en1111
  3. 添加 中文11111
    在这里插入图片描述

执行完成

  1. 完成 1111
  2. 完成 en1111
  3. 完成 中文1111
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/16407.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一款超好用的开源密码管理器?

程序员宝藏库:https://gitee.com/sharetech_lee/CS-Books-Store DevWeekly收集整理每周优质开发者内容,包括开源项目、资源工具、技术文章等方面。 每周五定期发布,同步更新到 知乎:Jackpop 。 欢迎大家投稿,提交iss…

最新消息:2022高被引科学家名单已公布,都想成为高被引,到底应该怎么做?(附名单)

11月15日,科睿唯安发布了2022年“高被引科学家”名单。该名单旨在遴选全球自然科学和社会科学领域最具影响力的研究人员。入选“高被引科学家”名单,意味着该学者在其所研究领域具有世界级影响力,其科研成果为该领域发展作出了较大贡献。 全球…

百度全景数据采集与分析

1、百度街景是什么 全景是通过将平面数字图像转换为三维空间,从而带来拟真交互体验的地图浏览方式。 全景技术通过专业相机将现实世界的空间场景捕捉下来,利用软件将多幅平面照片拼接合成,并模拟成三维空间的360度全景景观。全景具有真实感强…

127. 单词接龙

127. 单词接龙 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> … -> sk&#xff1a; 每一对相邻的单词只差一个字母。对于 1 < i < k 时&#xff0c;每个 si 都在 wordList 中。注意&…

linux线程互斥锁

互斥量mutex 大部分情况&#xff0c;线程使用的数据都是局部变量&#xff0c;变量的地址空间在线程栈空间内&#xff0c;这种情况&#xff0c;变量归属单个线程&#xff0c;其他线程无法获得这种变量。 但有时候&#xff0c;很多变量都需要在线程间共享&#xff0c;这样的变量…

基于粒子群优化算法的冷热电联供型综合能源系统运行优化附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

JAVA图书管理练习

目录0.前言1.书类(BOOK)1.1 Book1.2 BookList2. User类2.1 user类2.2 AdminUser类2.3 NormalUser类3.Operation类3.1 添加图书3.2 删除图书3.3 查找图书3.4 展示图书3.5 退出系统3.6 借阅图书3.7 归还图书0.前言 1.在学习了面向对象,接口继承等语法后,综合使用这些语法完成一个…

【第九章】vim 程序编辑器

文章目录vi与vimvi的使用范例按键说明一般指令模式可用的按钮说明&#xff1a;光标移动、复制贴上、搜寻取代等一般指令模式切换到编辑模式的可用的按钮说明一般指令模式切换到命令行界面的可用按钮说明vim的暂存盘、救援回复与打开时的警告讯息vi与vim 一、Linux上面的指令都…

Java#12(String中的常用方法)

目录 一.String中的方法substring 1.作用:截取字符串 2.格式:对象名.substring(开始的索引,结束的索引(没写就截到结尾)) 3.返回类型是String,所以要用一个字符串对象来接收 4.特点: 二.String中的办法replace 1.作用:替换字符串中的内容 2.格式:对象名.replace("要…

【面试题】flex布局画色子

1. flex布局 flex属性作用flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式align-items设置侧轴上的子元素排列方式flex-wrap设置子元素是否换行align-self设置子元素在侧轴的对齐方式 2. 通过flex布局画色子 <!DOCTYPE html> <html lang&qu…

Zotero文献管理软件入门使用方法:软件下载、文献导入、引文插入

本文介绍文献管理软件Zotero的基础使用方法&#xff0c;包括软件下载与安装、文献与PDF导入、在Word中插入参考文献等的方法。 在EndNote文献输出引用格式自定义修改与编辑界面解读&#xff08;https://blog.csdn.net/zhebushibiaoshifu/article/details/115221112&#xff09;…

Mysql、Hive、Sqoop的安装及配置

Mysql的安装及配置 1、查看系统安装的MariaDB rpm -qa|grep mariadb2、删除查询到的MariaDB&#xff0c;这里的mariadb-libs-5.5.68-1.el7.x86_64是通过上一步查出来的 rpm -e --nodeps mariadb-libs-5.5.68-1.el7.x86_643、执行以下命令下载并安装mysql5.7 wget http://de…

蓝桥杯刷题(一)

蓝桥杯刷题1.单词分析2.成绩统计3.最短路4.门牌制作5.数字三角&#xff08;较困难&#xff09;1.单词分析 我本人其实是比较讨厌操作字符的&#xff0c;因为比较麻烦&#xff0c;所以我将字符都用ascll码值表示。例如‘a’97,‘b’98,c‘99’&#xff0c;所以b-a1 #include<…

prometheus学习

指标类型 测量型&#xff08;gauge&#xff09; 这种类型是上下增减的数字&#xff0c;本质上是特定度量的快照。常见的有CPU&#xff0c;内存&#xff0c;磁盘使用率等。对于业务上来说&#xff0c;指标可能是网站上的客户数量。 计数型&#xff08;counter&#xff09; 这…

【Final Project】Kitti的双目视觉里程计(2)重读

1.基础 ​ 纠正一个思想&#xff0c;即要具有模块化的思维&#xff0c;面对整体中模块是不要考虑其他&#xff0c;就仅考虑如何将一个类抽象出来&#xff0c;思考实现怎样的功能。前面的总结学习我认为是错误的学习方法&#xff0c;并不系统。我的目的&#xff1a;借鉴学习别人…

基于移动应用的城市公共气象服务平台的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

spark分布式计算框架

MapReduce是计算逻辑清晰的&#xff0c;只有两个步骤&#xff0c;任务是JVM进程级别&#xff0c;每执行到什么步骤 去申请具体的资源。 而spark根本不知道具体有几个stage&#xff0c;逻辑未知&#xff0c;每个人的job stage等根本不知道。它是默认倾向于抢占资源的&#xff0c…

C++11 条件变量

目录 条件变量 1 成员函数 wait函数 wait_for函数 wait_until函数 notify_one函数 notify_all函数 2 Demo1 sync_queue.h condition-sync-queue.cpp 3 Demo2 2-sync_queue.h 2-condition-sync-queue.cpp C/CLinux服务器开发/后台架构师【零声教育】-学习视频教程…

汇编内中断

内中断 文章目录内中断1.内中断的产生2.中断处理程序、中断向量表、中断过程3.iret指令4.除法错误中断的处理5.单步中断6.int指令7.BIOS和DOS所提供的中断例程1.内中断的产生 任何一个通用的CPU&#xff0c;都具备一种能力&#xff0c;可以在执行完当前正在执行的指令之后&…

StartDT奇点云通过CMMI5全球软件领域最高级别成熟度认证

近日&#xff0c;奇点云正式通过全球软件领域最高级别认证——CMMI 5级认证&#xff0c;标志着奇点云的软件技术研发能力、项目管理能力、质量保障能力、方案交付能力等均达到优化管理级的国际先进水平。 CMMI&#xff08;软件能力成熟度模型集成&#xff09;是国际上用于评价软…