在课程列表页,补充一个搜索功能,包括一个文本框和一个搜索按钮,在文本框内输入课程名称,点击搜索按钮,即可在下面展示搜索结果,要求结合JSON-Server实现该效果,页面布局,自定义。
时间: 2023-07-16 21:15:43 浏览: 49
好的,实现这个功能需要以下步骤:
1. 安装 JSON-Server
在命令行中输入以下命令来安装 JSON-Server:
```
npm install -g json-server
```
2. 创建课程数据
创建一个 courses.json 文件,并在其中添加一些课程数据,例如:
```json
{
"courses": [
{
"id": 1,
"name": "Web开发入门",
"teacher": "张三",
"description": "学习Web开发的基础知识和技能"
},
{
"id": 2,
"name": "Java编程",
"teacher": "李四",
"description": "学习Java编程语言和开发框架"
},
{
"id": 3,
"name": "Python基础",
"teacher": "王五",
"description": "学习Python编程语言和常用库"
}
]
}
```
3. 启动 JSON-Server
在命令行中进入 courses.json 文件所在的目录,然后输入以下命令来启动 JSON-Server:
```
json-server --watch courses.json
```
此时,JSON-Server 就会启动并监听 3000 端口。
4. 创建 HTML 页面
创建一个 index.html 文件,并在其中添加一个搜索框和一个搜索按钮,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程列表</title>
</head>
<body>
<h1>课程列表</h1>
<form>
<input type="text" placeholder="请输入课程名称" id="searchBox">
<button type="button" onclick="searchCourse()">搜索</button>
</form>
<ul id="courseList">
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
5. 创建 JavaScript 文件
创建一个 app.js 文件,并在其中添加一个函数来处理搜索功能,例如:
```javascript
function searchCourse() {
var searchStr = document.getElementById("searchBox").value;
$.get("http://localhost:3000/courses?name_like=" + searchStr, function(data) {
var courseList = document.getElementById("courseList");
courseList.innerHTML = "";
data.forEach(function(item) {
var li = document.createElement("li");
li.innerHTML = "<h2>" + item.name + "</h2><p>" + item.description + "</p>";
courseList.appendChild(li);
});
});
}
```
这个函数会从服务器上获取课程数据,并根据搜索框中的内容进行过滤,然后将结果展示在页面上。
6. 运行页面
在浏览器中打开 index.html 文件,即可看到搜索框和搜索按钮,输入关键词并点击搜索按钮,即可看到搜索结果。