iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
2
Modern Web

初探Vue.js 30天系列 第 28

[Day 28] Laravel+MongoDB+Vue CRUD - part 1

前言

接下來兩天會在laravel使用mongodb跟Vue實作CRUD,而今天主要是環境的設定。

Mongodb套件安裝

在開始前請先安裝mongodb套件,主要建立mongodb連線

composer require jenssegers/mongodb ^3.6

安裝成功之後,在laravel的config/app.php的providers,新增這行

Jenssegers\Mongodb\MongodbServiceProvider::class,

如是用Windows+XAMPP注意事項

在laravel安裝mongodb會顯示錯誤

To enable extensions, verify that they are enabled in your .ini files:
    - C:\xampp\php\php.ini
  You can also run `php --ini` inside terminal to see which files are used by PHP in CLI mode.

確認XAMPP是32位元或64位元

PECL下載最新PHP for MongoDB的DLL檔,選擇自己環境的PHP版本&OS版本[Thread Safe (TS)],下載php_mongodb.dll,並將檔案放置xampp中。
C:\xampp\php\ext下開啟php.ini,新增一行extension=php_mongodb,即可重新composer required jenssegers/mongodb ^3.6

安裝mongodb

在開發環境需安裝mongodb

安裝[Robo 3T](https://robomongo.org/download)

Robo 3T是可以檢視mongodb的工具,安裝完之後,建立connection、database、collection

新增資料

Robo 3Tjson格式建立資料,可以想像成key就是欄位,value是資料,跟資料庫的差異是mongodb沒有資料表欄位限制,可自行在collection建立多個Key Value

https://ithelp.ithome.com.tw/upload/images/20201012/20108252rFiHoHYHeT.png

設定mongodb連線

laravel使用.env、database設定連線,在model建立mongodbCollection的物件,與mysql設定上有點差異

env設定

// mysql port 3306,mongodb port 27017
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=users
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mongodb
DB_HOST=127.0.0.1
DB_PORT=27017
DB_DATABASE=mydb
DB_USERNAME=
DB_PASSWORD=

//database
'connections' => [
	'mysql' => [
		'driver' => 'mysql',
    'url' => env('DATABASE_URL'),
    'host' => env('DB_HOST', '127.0.0.1'),
    'port' => env('DB_PORT', '3306'),
    'database' => env('DB_DATABASE', 'users'),
    'username' => env('DB_USERNAME', 'root'),
    'password' => env('DB_PASSWORD', ''),
    'unix_socket' => env('DB_SOCKET', ''),
    'charset' => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix' => '',
    'prefix_indexes' => true,
    'strict' => true,
    'engine' => null,
    'options' => extension_loaded('pdo_mysql') ? array_filter([
           PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
     ]) : [],
	],

  'mongodb' => [
		'driver' => 'mongodb',
		'host' => env('DB_HOST', '127.0.0.1'),
    'port' => env('DB_PORT', 27017),
    'database' => env('DB_DATABASE', 'mydb'),
    'username' => env('DB_USERNAME', ''),
    'password' => env('DB_PASSWORD', ''),
    'options' => [
			'database' => env('DB_AUTHENTICATION_DATABASE', 'admin'),
    ],
  ],
]

Model設定

//mysql set table name
protected $table = 'users';

//mongodb set collection
protected $collection= 'mydb';

上一篇
[Day 27] Vue 商品&信用卡
下一篇
[Day 29] Laravel+MongoDB+Vue CRUD - part 2
系列文
初探Vue.js 30天30

尚未有邦友留言

立即登入留言