用layui写一个 后端显示、 添加、编辑、删除、显示分页、 下载、搜索的功能
时间: 2023-09-29 19:06:15 浏览: 192
JSP实现添加功能和分页显示实例分析
首先,需要在后端搭建好Web服务器,并配置好数据库。这里以Node.js和MySQL为例。
接下来,我们可以使用Layui来实现前端页面布局和样式。在HTML文件中,我们需要引入Layui的相关依赖库:
```html
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
```
然后,我们可以定义一个表格来显示数据:
```html
<table class="layui-table" lay-data="{id:'dataTable', url:'/api/data', page:true, limit:10}" lay-filter="dataFilter">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'name', width:120}">Name</th>
<th lay-data="{field:'age', width:80}">Age</th>
<th lay-data="{field:'gender', width:80}">Gender</th>
<th lay-data="{field:'phone', width:120}">Phone</th>
<th lay-data="{field:'email', width:200}">Email</th>
<th lay-data="{fixed:'right', width:220, toolbar:'#toolbar'}">Operations</th>
</tr>
</thead>
</table>
```
其中,lay-data属性用来指定表格的数据源和分页设置,lay-filter属性用来指定表格的筛选器,方便后续操作。每个th元素的lay-data属性用来指定该列的字段名和宽度。
接下来,我们需要定义一个工具条,用来添加、编辑、删除和下载数据:
```html
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">Add</button>
<button class="layui-btn layui-btn-sm" lay-event="edit">Edit</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">Delete</button>
<button class="layui-btn layui-btn-sm" lay-event="export">Export</button>
</div>
</script>
```
其中,lay-event属性用来指定按钮点击事件的名称。
接下来,我们需要编写JavaScript代码来处理表格的数据源、工具条事件和搜索功能:
```javascript
layui.use(['table', 'layer'], function() {
var table = layui.table;
var layer = layui.layer;
// 定义数据源
table.render({
elem: '#dataTable',
url: '/api/data',
page: true,
limit: 10,
cols: [[
{field:'id', width:80},
{field:'name', width:120},
{field:'age', width:80},
{field:'gender', width:80},
{field:'phone', width:120},
{field:'email', width:200},
{fixed:'right', width:220, toolbar:'#toolbar'}
]]
});
// 监听工具条事件
table.on('toolbar(dataFilter)', function(obj) {
switch (obj.event) {
case 'add':
// 添加数据的逻辑
break;
case 'edit':
// 编辑数据的逻辑
break;
case 'delete':
// 删除数据的逻辑
break;
case 'export':
// 导出数据的逻辑
break;
}
});
// 监听行点击事件
table.on('row(dataFilter)', function(obj) {
// 显示该行对应的数据详情
});
// 监听搜索框的键盘事件
$('#searchInput').on('keyup', function() {
var keyword = $(this).val();
// 向后端发送搜索请求并更新表格数据源
});
});
```
最后,我们需要在后端编写接口,用来处理前端发送的请求并与数据库交互。例如:
```javascript
const express = require('express');
const mysql = require('mysql');
const app = express();
// 连接数据库
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'mydatabase'
});
connection.connect();
// 查询数据接口
app.get('/api/data', (req, res) => {
const page = req.query.page || 1;
const limit = req.query.limit || 10;
const offset = (page - 1) * limit;
const keyword = req.query.keyword || '';
const sql = `SELECT * FROM mytable WHERE name LIKE '%${keyword}%' LIMIT ${limit} OFFSET ${offset}`;
connection.query(sql, (error, results) => {
if (error) {
console.error(error);
res.sendStatus(500);
} else {
const countSql = `SELECT COUNT(*) AS count FROM mytable WHERE name LIKE '%${keyword}%'`;
connection.query(countSql, (error, countResult) => {
if (error) {
console.error(error);
res.sendStatus(500);
} else {
const totalCount = countResult[0].count;
res.json({
code: 0,
msg: '',
count: totalCount,
data: results
});
}
});
}
});
});
// 添加数据接口
app.post('/api/data', (req, res) => {
// 处理添加数据的逻辑
});
// 编辑数据接口
app.put('/api/data/:id', (req, res) => {
// 处理编辑数据的逻辑
});
// 删除数据接口
app.delete('/api/data/:id', (req, res) => {
// 处理删除数据的逻辑
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
在以上代码中,我们定义了4个接口用来处理前端发送的查询、添加、编辑和删除请求。其中,查询请求会根据分页和搜索关键字从数据库中获取符合条件的数据,并返回给前端;添加、编辑和删除请求则会修改数据库中的数据,然后返回操作结果给前端。
至此,我们就完成了一个实现了后端显示、添加、编辑、删除、显示分页、下载、搜索功能的Web应用。
阅读全文