微信小程序完整项目实战(前端+后端)

随着微信生态的不断发展，微信小程序成为了越来越多开发者关注的焦点。小程序轻便、易用，不需要下载安装即可使用，为用户提供了极大的便利。在这篇文章中，我们将通过一个完整的小程序项目来探讨前端和后端的开发流程，并给出相应的代码示例。

项目背景

本项目是一个简单的图书管理系统，允许用户查看图书列表、添加图书和删除图书。前端使用微信小程序进行开发，后端使用 Node.js 和 Express 框架搭建 RESTful API。数据存储使用 MongoDB。

一、前端开发

1. 创建小程序项目

首先，我们需要在微信开发者工具中创建一个新的小程序项目。在项目的根目录下，我们可以创建以下文件结构：

/book-manager
  ├── /pages
  │    ├── index
  │    │     ├── index.wxml
  │    │     ├── index.wxss
  │    │     ├── index.js
  │    │     └── index.json
  ├── app.js
  ├── app.json
  └── app.wxss

1. 编写页面

在 index.wxml 中，我们可以定义图书列表的展示和添加图书的输入框：

<view>
  <view wx:for="{{books}}" wx:key="index">
    <text>{{item.title}} - {{item.author}}</text>
    <button bindtap="deleteBook" data-id="{{item._id}}">删除</button>
  </view>

  <input bindinput="onInput" placeholder="书名" />
  <input bindinput="onInputAuthor" placeholder="作者" />
  <button bindtap="addBook">添加图书</button>
</view>

在 index.js 中，我们实现数据的获取和操作：

Page({
  data: {
    books: [],
    title: '',
    author: ''
  },

  onLoad() {
    this.fetchBooks();
  },

  fetchBooks() {
    wx.request({
      url: 'http://localhost:3000/books',
      method: 'GET',
      success: (res) => {
        this.setData({
          books: res.data
        });
      }
    });
  },

  onInput(e) {
    this.setData({
      title: e.detail.value
    });
  },

  onInputAuthor(e) {
    this.setData({
      author: e.detail.value
    });
  },

  addBook() {
    wx.request({
      url: 'http://localhost:3000/books',
      method: 'POST',
      data: {
        title: this.data.title,
        author: this.data.author
      },
      success: () => {
        this.fetchBooks();
      }
    });
  },

  deleteBook(e) {
    const id = e.currentTarget.dataset.id;
    wx.request({
      url: `http://localhost:3000/books/${id}`,
      method: 'DELETE',
      success: () => {
        this.fetchBooks();
      }
    });
  }
});

1. 样式设置

在 index.wxss 中，添加一些简单的样式：

view {
  margin: 10px;
}
button {
  margin-left: 10px;
}

二、后端开发

1. 搭建 Express 服务器

我们使用 Node.js 和 Express 构建 RESTful API。首先安装所需的依赖：

npm install express mongoose body-parser cors

1. 创建服务器

在项目根目录下创建 server.js 文件：

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

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

mongoose.connect('mongodb://localhost/bookmanager', { useNewUrlParser: true, useUnifiedTopology: true });

const BookSchema = new mongoose.Schema({
  title: String,
  author: String
});

const Book = mongoose.model('Book', BookSchema);

// 获取所有图书
app.get('/books', async (req, res) => {
  const books = await Book.find();
  res.json(books);
});

// 添加图书
app.post('/books', async (req, res) => {
  const book = new Book(req.body);
  await book.save();
  res.status(201).json(book);
});

// 删除图书
app.delete('/books/:id', async (req, res) => {
  await Book.findByIdAndRemove(req.params.id);
  res.status(204).send();
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

三、总结

通过以上步骤，我们成功构建了一个简单的图书管理小程序。这一项目展示了如何将前端微信小程序与后端 Node.js 服务进行结合，完成数据的增删查改。希望这篇文章能够对您了解微信小程序的开发有所帮助！