微信小程序 + 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項目控制台輸出了一串接收數據的變量的地址。

至此，就完成了一個簡單的前后端交互啦~