大学寝室选择微信小程序如何用使用前后端分离的方法实现详细代码

实现前后端分离的方法有很多，可以使用不同的技术栈来实现。下面我给你提供一个基于Vue.js和Node.js的前后端分离实现方案。

前端部分：

1. 使用Vue.js框架搭建前端UI界面，引入axios库来进行与后端API的交互。

<template>
  <div class="container">
    <h1>大学寝室选择微信小程序</h1>
    <div>
      <label>请输入寝室编号:</label>
      <input v-model="roomNumber" />
      <button @click="selectRoom()">查询</button>
    </div>
    <div v-if="selectedRoom">
      <h2>{{ selectedRoom.name }}</h2>
      <p>可住人数: {{ selectedRoom.capacity }}</p>
      <p>已住人数: {{ selectedRoom.occupancy }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      roomNumber: '',
      selectedRoom: null
    }
  },
  methods: {
    async selectRoom() {
      const response = await axios.get(`/api/rooms/${this.roomNumber}`);
      this.selectedRoom = response.data;
    }
  }
}
</script>

2. 在Vue.js中使用axios来调用后端API，API地址为`/api/rooms/:roomNumber`，其中`:roomNumber`是参数。

import axios from 'axios';

export default {
  data() {
    return {
      roomNumber: '',
      selectedRoom: null
    }
  },
  methods: {
    async selectRoom() {
      const response = await axios.get(`/api/rooms/${this.roomNumber}`);
      this.selectedRoom = response.data;
    }
  }
}

后端部分：

1. 使用Node.js和Express框架搭建后端API，定义API路径为`/api/rooms/:roomNumber`，其中`:roomNumber`是参数。

const express = require('express');
const app = express();
const port = 3000;

const rooms = [
  {
    name: 'A101',
    capacity: 4,
    occupancy: 2
  },
  {
    name: 'A102',
    capacity: 6,
    occupancy: 3
  }
];

app.get('/api/rooms/:roomNumber', (req, res) => {
  const roomNumber = req.params.roomNumber;
  const room = rooms.find(r => r.name === roomNumber);
  if (!room) {
    res.status(404).send('Room not found');
  } else {
    res.send(room);
  }
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
});

2. 在后端API中定义`/api/rooms/:roomNumber`的逻辑，根据输入的寝室编号查找对应的寝室信息，并返回JSON格式的数据。

以上就是一个基于Vue.js和Node.js的前后端分离实现方案，具体的代码可以根据实际需求进行调整。