天天看點

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

1.擷取本地資料庫資料

在node項目中,找到當初我們的資料庫配置:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)
找到我的資料庫名為node-mine,是以根據資料庫名調取資料庫,使用mongodump方法:

// -d表示需要導出的是資料庫
mongodump -d node-mine           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

糟,有報錯,需要配置系統變量。

找到mongodb的bin目錄,指派到系統變量Path中:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

确定後重新開機vscode,輸入mongodump指令:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

依舊有報錯,查詢原因大概是msi下載下傳mongodb方式缺少了一些檔案mongo工具類,是以需要下載下傳mongodb資料庫工具的zip包,将其中bin檔案夾中之前沒有的内容複制進已安裝好mongodb的bin檔案夾中。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

複制進去之後,看見沒,那個mongodump.exe:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

這回再重新開機vscode嘗試mongodump指令:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

啊,真爽。

此時資料庫中的資料已經擷取到了,下一步導入到伺服器中。

2.導入資料庫資料到網站伺服器

(1)通過vscode進入網站伺服器,今天不用之前那個伺服器配置檔案夾了,進入root使用者個人檔案夾:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

将dump檔案直接複制到網站伺服器root檔案夾下:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

調出終端,執行指令mongorestore,mongodump與mongorestore是成對存在的,分别是導出和導入:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

此時導入成功,資料應該存在了,回到admin端網頁登入輸入密碼進行檢視:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

成功。通路其他資料:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

有錯誤,但既然可以登入,就跟資料庫沒關系。

我猜猜啊,看他報錯是找不到module,找不到inflection包,是以應該是接口命名單複數的問題。

以下斜體内容為我測試内容,大家暫時不要操作:

*我記得admin和web端中的npm包還沒有更新,去admin端檔案夾中更新試一下。

直接上git bash,速度快一些:*

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

這次試一下還是不行,還是找不到inflection,得了,專門下載下傳一下inflection試試:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

還是不行,重新開機伺服器:)

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

最終解決:

還是不行,再試一下在server端安裝inflection,重新開機一下項目:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

重新整理頁面,出現内容了:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

反正就是找不到包,之後碰到包的問題,直接在server端重新下載下傳,反正web和admin都扔進來了,其他兩個外部檔案夾基本沒什麼用了。

檢查下其他頁面:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

圖檔都不在了,檢查下原因,是因為當初我們存儲圖檔的時候,路徑用的都是

http://localhost

:3000/....:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

是以我們需要在vscode中改一下,當然圖檔已經無法改回去了,我們要做的是讓以後上傳的圖檔路徑是對的。

3.本地修改功能更新上傳到網站伺服器

其實目前我們通過vscode遠端連接配接,可以直接修改圖檔連接配接的功能,隻需要進入到node-mne的檔案夾,手動找到server/routes/admin/index.js即可:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

但是後期我們需要完善網站内容,還是需要本地先進行功能上的完善,繼續補充上傳到git伺服器再到網站伺服器中。是以本次我們在本地修改,走一遍流程。

(1)本地修改代碼

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

(2)檢視目前git版本庫狀态

git status           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

我們剛才修改的檔案index.js已被找到,此時發現我們之前遷移資料庫時的檔案,已經沒用了,删了即可。删除後再次執行指令:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

确認更改了此檔案,下一步,可以檢視此檔案哪裡被修改了:

git diff           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

(3)送出本地代碼到git伺服器

與之前過程相同,二次送出内容:

git commit -am "修改了上傳圖檔功能的url"           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

推送更改到git伺服器版本庫中:

git push           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

此時我們的gitee中代碼就更新了。

但此時還沒有到網站伺服器,是以需要在網站伺服器中拉取資料。

(4)網站伺服器拉取項目資料

git pull           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

(5)重新開機pm2服務

每次代碼更新後都需要重新開機服務,pm2隻要不重新開機伺服器就不會有所更新,是以我們要手動重新開機:

pm2 reload index           

之前我都是先關了再開,沒想到還有這種好指令:)。

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

此時,代碼更新完成。

4.更改網站伺服器中的圖檔位址

其實就是介紹一下mongodb的可視化軟體——Robo 3T。

(1)安裝Robo 3T

下載下傳位址https://robomongo.org/
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

下載下傳zip安裝包後傻瓜安裝:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

安裝成功後進入軟體。

(2)遠端連接配接資料庫

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

與MySQL的Navicat相同,都是遠端連接配接到伺服器資料庫:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

點選連接配接後進入資料庫,其中分為三種形式,表格形式與navicat相同,代碼格式就是以json格式呈現。

(3)修改圖檔資料

修改資料方法有兩種,第一種與Navicat相似,直接進入表格格式進行修改儲存,但同樣修改的是代碼格式:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

修改後儲存即可:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

第二種就是代碼形式修改,利用js代碼對json資料進行編輯:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

例如現在我需要修改廣告頁面中的所有圖檔位址,隻需要用map周遊數組找到每條資料中的items中的image,利用replace修改其部分内容。

db.getCollection('ads').find({}).map(doc => {
    // 如果doc.items.image存在,則将localhost:3000改為zslhr.top,否則為null
    doc.items.image = doc.items.image ? doc.items.replace('localhost:3000', 'zslhr.top') : null
    // 資料庫.集合.save方法  進行修改資料,沒有這條将不會修改
    db.ads.save()
    // 運作顯示修改後内容
    return doc
})           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

Ctrl + Enter運作:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

???,不可以儲存null?那就改成空字元串再試一下,還是不行,可能是資料中的image都存在的原因,大緻修改代碼,不用三元表達式:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

說找不到image,想了以下原因可能是image在items下邊的數組中,應該有索引值

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

是以在doc中再套一層map測試:

db.getCollection('ads').find({}).map(doc => {
    doc.items.map(doc2 => {
        // 如果doc.items.image存在,則将localhost:3000改為zslhr.top,否則為null
        doc2.image = doc2.image ? doc2.image.replace('localhost:3000', 'zslhr.top') : null
        // 運作顯示修改後内容
        return doc2
    })
    // 資料庫.集合.save方法  進行修改資料,沒有這條将不會修改,另外save()方法中要将doc加入,否則儲存全局時會找不到
    db.ads.save(doc)
    return doc
})           
技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

修改成功,此時回到頁面中重新整理測試:

技能學習:學習使用Node.js + Vue.js,開發前端全棧網站-14-6.遷移本地資料到伺服器(mongodump)

成功。

到此,項目上線已經掌握,node.js+vue.js方法學習到此結束,在之後完善我的網站時碰到問題我會繼續編輯文章,大家有什麼問題可以評論我們一起解決。