vue中的qs插件使用规则

本文介绍了如何在Vue项目中安装和使用qs库,包括通过npm安装,全局引入,以及qs.parse()和qs.stringify()两个核心方法的用法。qs.parse()能将查询字符串转换为对象,qs.stringify()则将对象转换为查询字符串,方便进行URL参数的处理。

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

2|0vue中qs安装使用

  • 步骤:
    • 打开控制台输入:npm install qs
    • 在main.js中导入qs插件:import qs from 'qs'
    • 在main.js中配置全局属性:Vue.prototype.$qs = qs

3|0方法:qs.parse()和qs.stringify()

  • qs.parse()是将URL解析成对象的形式

     

    const str = "username='admin'&password='admin'" console.log(qs.parse(str)) // Object { username: "admin", password: "admin" }

  • qs.stringify()是将对象 序列化成URL的形式,以&进行拼接

     

    qs.stringify({username:'admin', password:'admin'}) //username=admin&password=admin

另外,附上关于qs更多方法地址,https://blog.youkuaiyun.com/sansan_7957/article/details/82227040

使用Vue连接个人后端数据库实现登录功能可采用不同的后端技术搭配,以下介绍几种常见的实现方法: ### 使用Node.js和MongoDB - **后端服务器搭建**:使用Node.js作为后端服务器,借助Axios将数据从前端发送到后端。在`app.js`中添加连接数据库的代码,示例如下: ```javascript var url = "mongodb://localhost:27017/test"; var mongoose = require('mongoose'); mongoose.connect(url, (err) => { if (err) { console.log(err); } else { console.log('db connect success'); } }); ``` - **前端请求发送**:在Vue组件中,使用Axios发送登录请求到后端服务器。同时,创建并验证会话,以保护用户数据的安全[^1][^3]。 ### 使用Django和MySQL - **Django连接数据库**: 1. 安装MySQL驱动程序。 2. 创建数据库。 3. 配置`settings.py`文件。 4. 创建表。 5. 添加数据。 - **登录功能实现**: - **Django后端**:实现登录功能的URL映射和视图函数。 - **Vue前端**:使用`vue-router`、`qs`、`less`、`less-loader@6`等扩展或依赖。使用Vue Router的API定义路由规则和创建路由实例,在`main.js`中使用Vue Router插件,在登录页面组件`Login.vue`中实现登录功能[^2]。 ### 使用Spring Boot和MyBatis - **后端配置**:在Spring Boot中配置数据库信息以及MyBatis的相关信息,创建`easyuser`表和`User`实体类。 - **前端请求**:前端使用Vue脚手架向Spring Boot后端发送登录请求。 - **后端处理**:Spring Boot后端的`LoginController`控制器的`login`方法处理登录请求,`UserDao`动态代理接口中的`getUserByMessage`方法和`UserDao.xml`映射文件负责数据库操作。 - **路由跳转**:登录成功后,路由跳转到`Home.vue`组件进行测试[^4]。 ### 使用Express和自定义SQL查询 - **后端请求处理**:在后端使用Express处理登录请求,示例代码如下: ```javascript // 1. 用户获取get请求路径 /login server.get("/login", (req, res) => { // 2. 获取参数 var u = req.query.uname; // uname 为数据库中的表的结构名字 var p = req.query.upwd; // 3. 创建sql语句 var sql = " SELECT id FROM xz_login"; sql += " WHERE uname = ? AND upwd = md5(?)"; // 4. 执行sql pool.query(sql, [u, p], (err, result) => { if (err) throw err; // 5. 获取数据库返回结果 // 6. 返回客户数据 if (result.length == 0) { res.send({ code: -1, msg: "用户名或密码错误" }); } else { res.send({ code: 1, msg: "登录成功" }); } }); }); ``` - **前端调用**:在Vue文件中调用该请求路径进行登录操作[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值