# 拉驴子出来溜溜，VFPBS实战做一个查询页面
今天猫猫带大家来做一个查询的界面，代码极少，学习东西需要学习本质，先学习原理，再考虑变化，所有的花式都在本质上变化的。 今天虽然教的是WEB1.0的技术，实际中WEB2.0也是在其基础出发展而来。
框架会员，只要你肯来学，我都会把你教会，通晓BS、CS 、APP、公众号、中间层等等。
# 页面设计
页面一个form 一个文本框，一个按钮
底下展现文本信息
# 前端代码html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="ctl_ryxx.fsp">
请查询<input type="text" name="tj" value="">
<input type="submit" value="查询">
</form>
id 姓名 年龄<br>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
存放到wwwroot\tmpl目录下叫ryxx.html
# 后端代码vfp代码
Define Class ctl_ryxx As Session
Procedure ondefault
lcTmpl=getWwwrootPath("tmpl")+"ryxx.html" &&得到HTML模板的路径
chtml=FWS_MergeFile(lcTmpl) &&执行模板
_currentcode="UTF-8" &&模板文件本身是UTF-8格式
Use In Select("ryxx") &&关闭表
Return cHtml
endproc
enddefine
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 测试
输入http://192.168.0.99:801/ctl_ryxx.fsp
后端的ctl_ryxx.onDefault方法启动
便会输出一个页面
# 文本框架输入文字，点击按钮之后发生了什么
- 前端拼接键值对 将表单中的文本框的name=tj value=输入值拼成了tj=输入值提交给form action，即ctl_ryxx.fsp
- 后端onDefault将会拿到这值
- 取出键值对(tj=输入值)
- 打开表，启动筛选
- 重新加载页面和数据，重新输出
# 后端代码
PRIVATE cTj
cTj=HttpQueryParams("tj")
If !Used("ryxx")
Use ryxx In 0
Endif
Select ryxx
SET FILTER TO cTj$name &&筛选完的数据
lcTmpl=getWwwrootPath("tmpl")+"ryxx.html" &&得到HTML模板的路径
chtml=FWS_MergeFile(lcTmpl) &&执行模板
_currentcode="UTF-8" &&模板文件本身是UTF-8格式
Use In Select("ryxx") &&关闭表
Return cHtml
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 前端html代码增加几行代码
<form action="ctl_ryxx.fsp">
请查询<input type="text" name="tj" value="">
<input type="submit" value="查询">
</form>
id 姓名 年龄<br>
<% scan %>
<%=u(id)%> <%=u(name)%> <%=u(age)%><br>
<% endscan %>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
执行看看效果
观察地址栏的变化
通过URL提交数据
就是GET方式
# 让文本框再次加载时保留输入的值
<form action="ctl_ryxx.fsp">
请查询<input type="text" name="tj" value="<%=u(cTj)%>">
<input type="submit" value="查询">
</form>
注意这里是后端private声明的cTj, 而不是表单中name的tj
<form action="ctl_ryxx.fsp">
请查询<input type="text" name="tj" value="<%=u(cTj)%>">
<input type="submit" value="查询">
</form>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
注意这里是后端private声明的cTj, 而不是表单中name的tj
作业：测试form method=post与get异同
<form action=“ctl_ryxx.fsp” method=“post”>
请查询<input type="text" name="tj" value="<%=u(cTj)%>">
<input type="submit" value="查询">
</form>
1
2
3
4
2
3
4
请找出至少一个不同点，直观可被观察的现象 可以把答案打在评论区哟。