微信小程序 + thinkjs + mongoDB 实现简单的前后端交互

说明：这段时间跟老师学习了一下mongodb数据库，这次也是第一次搭建后台服务，出了不少差错，特此来复盘一下，非常感谢对我提供帮助的同学~

一、使用 thinkjs + mongodb 创建后台服务

1.安装 thinkjs

安装thinkjs工具包

npm install -g think-cli

2.创建 thinkjs 项目

thinkjs new demo;
cd demo;
npm install;
npm start;

3.让框架支持 mongo 模型

在demo项目的config文件夹中的extend.js文件中添加think-mongo模块

const mongo = require('think-mongo');

module.exports = [
	mongo(think.app)
]

4.连接 mongodb

安装think-mongo

npm install think-mongo

修改config文件夹下的adapter.js文件的数据库

exports.model = {
	type: 'mongo',
	common: {
		logConnect: isDev,
		logger: msg => think.logger.info(msg)
	},
	mongo: {
		host: '127.0.0.1',
		database: 'mytest',  // 自己创建的数据库名字
		port: 27017,
		user: '',
		password: ''
	}
};

5.创建 mongodb 数据库

在demo项目根目录下新建一个db文件夹，用于存放数据，并开启数据库服务。

注意：以后也要在此文件夹下开启服务，不然后台连接不到数据库

mkdir db
cd db
mongod --dbpath=./

windows用户这里使用powershell终端，请勿使用cmd命令窗口。

6.添加路由

修改 index 控制器

进入controller文件夹中的index文件夹当中，修改返回数据

module.exports = class extends Base {
	indexAction() {
		return this.json({nihao: '\'nihao\''});
	}
};

7.添加自己的控制器

新建一个任意名字的.js文件，然后自定义控制器返回的内容

const Base = require('./base.js');

module.exports = class extends Base {
	async indexAction() {
		// 获取从微信小程序传过来的 data 数据
		const data1 = this.post('data');
		// 将获取的数据 data1 添加到 student 表中
		const a = await this.mongo('student').add(data);
		// 从控制台输出 a 的地址
		console.log(a);
		return this.success('success');
	}

	async addAction() {
		const test = 'hello, world';
		return this.json({test});
	}
}

8.添加一个 mongodb 的控制器

在controller文件夹新建一个user.js文件，里面写入控制器的内容

const Base = require('./base.js');

module.exports = class extends Base {
	async indexAction() {
		// controller 中实例化模型
		const user = await this.mongo('user').find();
		if (think.isEmpty(user)) {
			return this.fail();
		} else {
			return this.success(user);
		}
	}
};

9.添加 model 文件

对每个模型进行各种操作，例如这里读取数据

module.exports = class extends think.Mongo {
	find() {
		return this.model('user').select();
	};
}

二、配置微信小程序

微信小程序的注册与创建这里就不赘述了，直接进入主题

1.在页面加载函数中加入wx.request

在创建的微信小程序的index.js文件中加入如下代码

Page({
	onLoad: function() {
		wx.request({
			// 这里的 test 是上面第7步创建的自己的控制器的名字
			url: 'http://127.0.0.1:8360/test/index'
			method: 'POST',
			data: {
				data: 'hello'
			},
			success: function (res) {
				console.log(res.data)
			}
		})
	}
})

三、检验前后端交互

1.开启demo服务

在demo项目目录下

npm start;

2.开启mongodb数据库

在demo目录下的db文件夹内开启数据库服务

cd db
mongod --dbpath=./

创建数据库和集合

use database
db.createCollection("collection")

3.编译微信小程序

结束

预期结果：

数据库中出现了微信小程序中添加的 data 数据，则前端数据成功发送给后台存入数据库；

微信小程序成功接收到后台返回的success信息；

demo项目控制台输出了一串接收数据的变量的地址。

至此，就完成了一个简单的前后端交互啦~