前后端联动的小例子

标签：req const 前后 js 例子 limit 联动 query page

当然可以。下面我将为你构建一个简单的前后端联调场景，该场景涉及从后端获取表格数据并在前端显示这些数据。为了简化示例，我将使用Node.js（Express框架）作为后端服务，Vue.js作为前端框架。

后端（Node.js + Express）

首先，确保已经安装了必要的Node.js模块。如果还没有安装，可以通过运行以下命令来安装：

npm install express body-parser cors

然后，创建一个简单的Express服务器，用于提供数据列表的API接口。

server.js (后端代码)

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

// 模拟的数据列表
const mockData = [
  { id: 1, name: '张三', age: 24, address: '北京市' },
  { id: 2, name: '李四', age: 25, address: '上海市' },
  { id: 3, name: '王五', age: 26, address: '广州市' }
];

// API接口 - 获取数据列表
app.get('/vue-admin-template/table/list', (req, res) => {
  const { page = 1, limit = 10 } = req.query;
  const start = (page - 1) * limit;
  const end = start + limit;
  const paginatedData = mockData.slice(start, end);

  res.json({
    code: 20000,
    data: {
      items: paginatedData,
      total: mockData.length
    }
  });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

前端（Vue.js）

假设你已经有了一个Vue.js项目，接下来我们将在项目中添加代码以请求上述后端API并展示数据。

src/utils/request/request.js (前端请求工具)

import axios from 'axios';

const request = axios.create({
  baseURL: 'http://localhost:3000', // 根据实际情况修改基础URL
  timeout: 5000
});

export default request;

src/api/table.js (前端API接口文件)

import request from '@/utils/request/request';

export function getList(params) {
  return request({
    url: '/vue-admin-template/table/list',
    method: 'get',
    params
  });
}

src/components/TableList.vue (前端组件)

<template>
  <div>
    <h1>用户列表</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </tbody>
    </table>
    <p>总记录数：{{ total }}</p>
  </div>
</template>

<script>
import { getList } from '@/api/table';

export default {
  data() {
    return {
      tableData: [],
      total: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getList({ page: 1, limit: 10 }).then(response => {
        this.tableData = response.data.items;
        this.total = response.data.total;
      }).catch(error => {
        console.error('Error:', error);
      });
    }
  }
};
</script>

运行应用

启动后端服务器：在命令行中运行 node server.js 启动Node.js服务器。
启动前端开发服务器：确保你的Vue.js项目已安装了所有依赖，并通过运行 npm run serve 或类似的命令启动开发服务器。

这样，当你访问前端应用时，应该能看到从后端获取到的用户列表信息。这只是一个基本的例子，实际项目可能需要更复杂的错误处理、状态管理等。

当然，我会详细分析这段后端代码。这段代码是用Node.js和Express框架编写的，用于提供一个简单的RESTful API，以便前端应用可以从中获取数据列表。以下是代码的详细解释：

导入必要的模块

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

express: 是一个流行的Node.js框架，用于快速构建Web应用程序。
body-parser: 是一个中间件，用于解析HTTP请求体中的数据，通常用于处理POST请求中的JSON数据。
cors: 是一个中间件，用于处理跨域资源共享（CORS）问题，允许前端应用从不同的域名访问后端API。

创建Express应用实例

const app = express();

创建一个Express应用实例，用于定义路由和中间件。

使用中间件

app.use(bodyParser.json());
app.use(cors());

bodyParser.json(): 解析请求体为JSON格式。
cors(): 允许跨域请求，默认情况下允许所有来源的请求。

模拟数据列表

const mockData = [
  { id: 1, name: '张三', age: 24, address: '北京市' },
  { id: 2, name: '李四', age: 25, address: '上海市' },
  { id: 3, name: '王五', age: 26, address: '广州市' }
];

定义了一个模拟数据列表 mockData，包含一些示例数据。这些数据将用于响应前端的请求。

定义API路由

app.get('/vue-admin-template/table/list', (req, res) => {
  const { page = 1, limit = 10 } = req.query;
  const start = (page - 1) * limit;
  const end = start + limit;
  const paginatedData = mockData.slice(start, end);

  res.json({
    code: 20000,
    data: {
      items: paginatedData,
      total: mockData.length
    }
  });
});

路由路径: /vue-admin-template/table/list
请求方法: GET
请求参数:
- page: 当前页码，默认值为1。
- limit: 每页显示的条目数，默认值为10。
逻辑:
- 计算分页的起始索引 start 和结束索引 end。
- 使用 slice 方法从 mockData 中提取当前页的数据 paginatedData。
响应:
- 返回一个JSON对象，包含：
  - code: 状态码，20000表示成功。
  - data: 包含分页后的数据 items 和总记录数 total。

启动服务器

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

端口号: 使用环境变量 process.env.PORT 设置的端口号，如果没有设置则默认为3000。
监听端口: 使用 app.listen 方法启动服务器，监听指定的端口。
回调函数: 服务器启动成功后，打印一条消息到控制台，指示服务器正在运行的端口号。

总结

这段代码实现了一个简单的Express服务器，提供了一个分页查询数据的API接口。前端应用可以通过发送GET请求到 /vue-admin-template/table/list 来获取分页后的数据列表。通过调整 page 和 limit 参数，可以灵活地获取不同页的数据。

好的，让我详细解释一下这一行代码：

const { page = 1, limit = 10 } = req.query;

解构赋值与默认值

这行代码使用了JavaScript的解构赋值语法，并且为了解构出来的变量提供了默认值。让我们逐步解析：

解构赋值：
- req.query 是一个对象，包含了客户端请求中URL查询字符串的所有键值对。
- 例如，如果客户端请求的URL是 /vue-admin-template/table/list?page=2&limit=15，那么 req.query 将是一个对象 { page: '2', limit: '15' }。
解构赋值语法：
- const { page, limit } = req.query; 这部分代码的意思是从 req.query 对象中提取出 page 和 limit 属性，并将它们分别赋值给同名的变量 page 和 limit。
默认值：
- page = 1 和 limit = 10 是为了解决某些情况下 page 或 limit 可能未被传递或为空的问题。
- 如果 req.query 中没有 page 属性，或者 page 的值是 undefined，那么 page 变量将被赋值为 1。
- 同样，如果 req.query 中没有 limit 属性，或者 limit 的值是 undefined，那么 limit 变量将被赋值为 10。

示例

假设客户端发送了以下几种请求：

请求1：/vue-admin-template/table/list?page=2&limit=15
- req.query 是 { page: '2', limit: '15' }
- 解构赋值后，page 是 '2'，limit 是 '15'
请求2：/vue-admin-template/table/list?page=2
- req.query 是 { page: '2' }
- 解构赋值后，page 是 '2'，limit 是 10（因为 limit 没有传递，所以使用默认值 10）
请求3：/vue-admin-template/table/list
- req.query 是 {}（空对象）
- 解构赋值后，page 是 1，limit 是 10（因为 page 和 limit 都没有传递，所以都使用默认值）

代码解释

const { page = 1, limit = 10 } = req.query;

从 req.query 对象中提取 page 和 limit 属性。
如果 page 不存在或为 undefined，则将其赋值为 1。
如果 limit 不存在或为 undefined，则将其赋值为 10。

应用场景

在实际应用中，这种写法非常常见，特别是在处理分页查询时。它确保了即使客户端没有传递某些参数，程序也能正常运行并返回合理的默认值。这样可以提高代码的健壮性和用户体验。

标签：req,const,前后,js,例子,limit,联动,query,page
From： https://www.cnblogs.com/lmzzr24/p/18529203