package com.thunisoft.maybee.engine.utils;
 
import org.apache.commons.lang3.StringUtils;
 
import java.util.HashMap;
 
import java.util.Map;
 
/**
 
* map 与 url参数转换
 
*/
 
public class MapUrlParamsUtils {
 
/**
 
* 将url参数转换成map
 
*
 
* @param param aa=11&bb=22&cc=33
 
* @return
 
*/
 
public static Map getUrlParams(String param) {
 
Map map = new HashMap(0);
 
if (PubString.isBlank(param)) {
 
return map;
 
}
 
String[] params = param.split("&");
 
for (int i = 0; i < params.length; i++) {
 
String[] p = params[i].split("=");
 
if (p.length == 2) {
 
map.put(p[0], p[1]);
 
}
 
}
 
return map;
 
}
 
/**
 
* 将map转换成url
 
*
 
* @param map
 
* @return
 
*/
 
public static String getUrlParamsByMap(Map map) {
 
if (map == null) {
 
return "";
 
}
 
StringBuffer sb = new StringBuffer();
 
for (Map.Entry entry : map.entrySet()) {
 
sb.append(entry.getKey() + "=" + entry.getValue());
 
sb.append("&");
 
}
 
String s = sb.toString();
 
if (s.endsWith("&")) {
 
s = StringUtils.substringBeforeLast(s, "&");
 
}
 
return s;
 
}
 
}

 

 
I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify url query params on the same page, I am doing like this:
 
this.$router.replace({ query: { q1: "q1" } })
 
But this also refreshes the page and sets the y position to 0, ie scrolls to the top of the page. Is this the correct way to set the URL query params or is there a better way to do it.
 
Edited:
 
Here is my router code:
 
export default new Router({
 
mode: 'history',
 
scrollBehavior: (to, from, savedPosition) => {
 
if (to.hash) {
 
return {selector: to.hash}
 
} else {
 
return {x: 0, y: 0}
 
}
 
},
 
routes: [
 
.......
 
{ path: '/user/:id', component: UserView },
 
]
 
})
 
解决方案
 
Here is the example in docs:
 
// with query, resulting in /register?plan=private
 
router.push({ path: 'register', query: { plan: 'private' }})
 
As mentioned in those docs, router.replace works like router.push
 
So, you seem to have it right in your sample code in question. But I think you may need to include either name or path parameter also, so that the router has some route to navigate to. Without a name or path, it does not look very meaningful.
 
This is my current understanding now:
 
query is optional for router - some additional info for the component to construct the view
 
name or path is mandatory - it decides what component to show in your .
 
That might be the missing thing in your sample code.
 
EDIT: Additional details after comments
 
Have you tried using named routes in this case? You have dynamic routes, and it is easier to provide params and query separately:
 
routes: [
 
{ name: 'user-view', path: '/user/:id', component: UserView },
 
// other routes
 
]
 
and then in your methods:
 
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
 
Technically there is no difference between the above and this.$router.replace({path: "/user/123", query:{q1: "q1"}}), but it is easier to supply dynamic params on named routes than composing the route string. But in either cases, query params should be taken into account. In either case, I couldn't find anything wrong with the way query params are handled.
 
After you are inside the route, you can fetch your dynamic params as this.$route.params.id and your query params as this.$route.query.q1.

 
如果您的DBMS支持递归查询,则可以这样做：
 
DROP SCHEMA tmp CASCADE;
 
CREATE SCHEMA tmp ;
 
CREATE TABLE tmp.webmeuk
 
( id INTEGER NOT NULL PRIMARY KEY
 
, slug VARCHAR
 
, content_type_id INTEGER NOT NULL
 
, parent_id INTEGER REFERENCES tmp.webmeuk(id)
 
);
 
INSERT INTO tmp.webmeuk( id , slug, content_type_id , parent_id )
 
VALUES( 0 , 'HTTP://pr0n.mysite.xx', 5 , NULL )
 
, ( 1 , 'portfolio', 5 , 0 )
 
, ( 2 , 'about-us', 1 , 0 )
 
, ( 3 , 'find-us', 1 , 0 )
 
, ( 4 , 'contact-us', 1 , 2 )
 
, ( 5 , 'find-us', 1 , 4 )
 
;
 
-- a room with a view
 
CREATE VIEW tmp.reteview AS (
 
WITH RECURSIVE xx AS (
 
SELECT w0.id AS id
 
, w0.slug AS slug
 
, w0.content_type_id AS content_type_id
 
, w0.slug AS fullpath
 
FROM tmp.webmeuk w0
 
WHERE w0.parent_id IS NULL
 
UNION
 
SELECT w1.id AS id
 
, w1.slug AS slug
 
, w1.content_type_id AS content_type_id
 
, xx.fullpath || '/'::text || w1.slug AS fullpath
 
FROM tmp.webmeuk w1, xx
 
WHERE w1.parent_id = xx.id
 
)
 
SELECT * FROM xx
 
);
 
SELECT * FROM tmp.reteview ;
 
-- Change one row of data
 
UPDATE tmp.webmeuk
 
SET slug = 'what-about-us'
 
WHERE id = 2;
 
SELECT * FROM tmp.reteview ;
 
输出：
 
NOTICE: drop cascades to 2 other objects
 
DETAIL: drop cascades to table tmp.webmeuk
 
drop cascades to view tmp.closure
 
DROP SCHEMA
 
CREATE SCHEMA
 
NOTICE: CREATE TABLE / PRIMARY KEY will create implicit index "webmeuk_pkey" for table "webmeuk"
 
CREATE TABLE
 
INSERT 0 6
 
CREATE VIEW
 
id | slug | content_type_id | fullpath
 
----+-----------------------+-----------------+---------------------------------------------------
 
0 | HTTP://pr0n.mysite.xx | 5 | HTTP://pr0n.mysite.xx
 
1 | portfolio | 5 | HTTP://pr0n.mysite.xx/portfolio
 
2 | about-us | 1 | HTTP://pr0n.mysite.xx/about-us
 
3 | find-us | 1 | HTTP://pr0n.mysite.xx/find-us
 
4 | contact-us | 1 | HTTP://pr0n.mysite.xx/about-us/contact-us
 
5 | find-us | 1 | HTTP://pr0n.mysite.xx/about-us/contact-us/find-us
 
(6 rows)
 
UPDATE 1
 
id | slug | content_type_id | fullpath
 
----+-----------------------+-----------------+--------------------------------------------------------
 
0 | HTTP://pr0n.mysite.xx | 5 | HTTP://pr0n.mysite.xx
 
1 | portfolio | 5 | HTTP://pr0n.mysite.xx/portfolio
 
3 | find-us | 1 | HTTP://pr0n.mysite.xx/find-us
 
2 | what-about-us | 1 | HTTP://pr0n.mysite.xx/what-about-us
 
4 | contact-us | 1 | HTTP://pr0n.mysite.xx/what-about-us/contact-us
 
5 | find-us | 1 | HTTP://pr0n.mysite.xx/what-about-us/contact-us/find-us
 
(6 rows)

url通用格式
 
<协议>：//<用户名>：<密码>@<主机域名或者ip地址>：<端口号>/<路径>；<参数>？<查询>#<片段>
 
其中最重要的是<协议><主机域名><路径>
 
总之，url（统一资源定位符）的作用就是通过浏览器发送给服务器，告诉服务器我们想要什么资源在什么位置，并发送给我们的浏览器，通过上边的格式，我们举几个例子：
 
http://www.baidu.com:80/main/index.html
 
这是一个简单的例子，有协议http，主机域名www.baidu.com，资源路径/main/index.html，其它部分都可以省略
 
下面是一个复杂的例子，我们结合下边这个例子具体介绍每一部分的作用和用法
 
http://joe：password@www.baidu.com:80/main/index.html；type=a；color=b？name=bob&id=123#main
 
协议
 
访问的协议可以是http（超文本传输协议）、ftp（文件传输协议）、rtsp（实时流传输协议）、telnet（远程登陆访问）等。每个协议都遵循上述格式，只是有些协议的一些部分没有，如telnet协议就没有<参数>，<查询>，<片段>这几部分。
 
其中http也可以写做HTTP，大小写不影响
 
用户名和密码
 
例子中的用户名和密码是joe：password。比如我们使用ftp协议传输时就需要输入用户名和密码，但是我们的http协议中，如果把用户名和密码就放在url里，那很不安全，所以一般放在cookie里，这里就不详细说了，总之就是不经常使用。
 
主机域名或者ip地址、端口
 
例子中的主机域名和端口是www.baidu.com：80，http协议的默认端口是80，端口就是开放服务的地方，我的前边的文章有讲过。
 
url中除了使用主机域名，还可以用ip地址，如可以写做：
 
http://163.177.151.109:80/main/index.html
 
路径
 
路径就是文件路径，和我们文件管理器的命名方法一样，就是\ /不一样
 
 
例子中的路径是/main/index.html  表示在根文件目录里的main文件夹里的index.html文件，“/”表示根目录，“./”表示该文件上一级目录。
 
路径有绝对路径和相对路径，在html网页中我们使用相对路径，浏览器会自动帮我们补全。比如我们在基础html网页（http：//www.baidu.com/main/index.html）中写一个相对路径（./img.jpeg），./意思是当前main目录下的文件，相当于我们访问（http：//www.baidu.com/main/img.jpeg）
 
关于相对路径，可以看这篇文章绝对路径与相对路径
 
参数
 
参数（params）一般使用“；”与路径分开，如果有多个参数也使用“；”分隔开。例子中的参数有两个，分别是type和color；type=a；color=b
 
我们访问一些资源，只有路径端口是不够的，有时候需要向解析url的应用程序提供参数才能去访问资源，如参数可能会定义传输格式等等。
 
查询
 
查询（query）使用“？”与前边的东西分开，如果有多个查询的问题，需要使用“&”连接。
 
访问一些资源时，有些需要查询数据库进行搜索来缩小请求资源范围，就像我们查东西时指定关键字一样，例子中的查询语句是？name=bob&id=123
 
意思是，在该路径下，查询name=bob，id=123的资源。
 
片段
 
我们访问资源时，可以不直接访问该资源，而是访问资源的一部分。比如我们访问一本书，可以直接指定访问某一部分。片段用“#”与其它东西分开，后边写指定部分的名字。如例子中的#main，表示访问资源/index.html 中的名字叫做main的部分。
 
但，其实http服务器仍然是把整个对象资源发给你的浏览器，浏览器获得整个资源后，根据片段显示你要的资源。
 
url编码
 
先看看现实中的url编码。我们看csdn中的文章时，看一下文章的url就会发现有很多%和16进制数字，跟我们上边说的格式一点都不一样。
 
 
这是因为url要同一命名网上的所有资源，还要通过不同的协议传输这些资源，那么我们的url要避开别的协议的编码机制，成为独一、完整、可移植性、可读的安全编码。
 
因此就出现了“转义”编码机制，这种转义表示法包括一个%和两个表示字符ascii码的16进制数
 
当我们的url中出现一些可能在传输时不安全，被别的机制编码的情况时，我们就提前使用“转义”编码机制进行编码
 
//当我们的url有“~” “ %”时，要给他们编码
 
下边的图显示了哪些字符需要编码：
 
 
使用受限的字符就是不安全的，在url上使用时，我们需要给他编码。