技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-6.迁移本地数据到服务器(mongodump)

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 如题,将本地Mongodb数据库数据迁移到服务器中。
1.获取本地数据库数据

在node项目中,找到当初我们的数据库配置:
在这里插入图片描述
找到我的数据库名为node-mine,所以根据数据库名调取数据库,使用mongodump方法:

// -d表示需要导出的是数据库
mongodump -d node-mine

在这里插入图片描述
糟,有报错,需要配置系统变量。
找到mongodb的bin目录,赋值到系统变量Path中:
在这里插入图片描述
确定后重启vscode,输入mongodump命令:
在这里插入图片描述
依旧有报错,查询原因大概是msi下载mongodb方式缺少了一些文件mongo工具类,所以需要下载mongodb数据库工具的zip包,将其中bin文件夹中之前没有的内容复制进已安装好mongodb的bin文件夹中
在这里插入图片描述
在这里插入图片描述
复制进去之后,看见没,那个mongodump.exe:
在这里插入图片描述
这回再重启vscode尝试mongodump命令:
在这里插入图片描述
啊,真爽。
此时数据库中的数据已经获取到了,下一步导入到服务器中。

2.导入数据库数据到网站服务器

(1)通过vscode进入网站服务器,今天不用之前那个服务器配置文件夹了,进入root用户个人文件夹:
在这里插入图片描述
将dump文件直接复制到网站服务器root文件夹下:
在这里插入图片描述
调出终端,执行命令mongorestore,mongodump与mongorestore是成对存在的,分别是导出和导入:
在这里插入图片描述
此时导入成功,数据应该存在了,回到admin端网页登录输入密码进行查看:
在这里插入图片描述
在这里插入图片描述
成功。访问其他数据:
在这里插入图片描述
有错误,但既然可以登录,就跟数据库没关系。
我猜猜啊,看他报错是找不到module,找不到inflection包,所以应该是接口命名单复数的问题。
以下斜体内容为我测试内容,大家暂时不要操作
*我记得admin和web端中的npm包还没有更新,去admin端文件夹中更新试一下。
直接上git bash,速度快一些:*
在这里插入图片描述
在这里插入图片描述
这次试一下还是不行,还是找不到inflection,得了,专门下载一下inflection试试:
在这里插入图片描述
还是不行,重启服务器:)
在这里插入图片描述
最终解决:
还是不行,再试一下在server端安装inflection,重启一下项目:
在这里插入图片描述
刷新页面,出现内容了:
在这里插入图片描述
反正就是找不到包,之后碰到包的问题,直接在server端重新下载,反正web和admin都扔进来了,其他两个外部文件夹基本没什么用了。
检查下其他页面:
在这里插入图片描述
图片都不在了,检查下原因,是因为当初我们存储图片的时候,路径用的都是http://localhost:3000/....:
在这里插入图片描述
所以我们需要在vscode中改一下,当然图片已经无法改回去了,我们要做的是让以后上传的图片路径是对的。

3.本地修改功能更新上传到网站服务器

其实目前我们通过vscode远程连接,可以直接修改图片连接的功能,只需要进入到node-mne的文件夹,手动找到server/routes/admin/index.js即可:
在这里插入图片描述
但是后期我们需要完善网站内容,还是需要本地先进行功能上的完善,继续补充上传到git服务器再到网站服务器中。所以本次我们在本地修改,走一遍流程。
(1)本地修改代码
在这里插入图片描述
(2)查看当前git版本库状态

git status

在这里插入图片描述
我们刚才修改的文件index.js已被找到,此时发现我们之前迁移数据库时的文件,已经没用了,删了即可。删除后再次执行命令:
在这里插入图片描述
确认更改了此文件,下一步,可以查看此文件哪里被修改了:

git diff

在这里插入图片描述
(3)提交本地代码到git服务器
与之前过程相同,二次提交内容:

git commit -am "修改了上传图片功能的url"

在这里插入图片描述
推送更改到git服务器版本库中:

git push

在这里插入图片描述
此时我们的gitee中代码就更新了。
但此时还没有到网站服务器,所以需要在网站服务器中拉取数据。
(4)网站服务器拉取项目数据

git pull

在这里插入图片描述
(5)重启pm2服务
每次代码更新后都需要重启服务,pm2只要不重启服务器就不会有所更新,所以我们要手动重启:

pm2 reload index

之前我都是先关了再开,没想到还有这种好命令:)。
在这里插入图片描述
此时,代码更新完成。

4.更改网站服务器中的图片地址

其实就是介绍一下mongodb的可视化软件——Robo 3T
(1)安装Robo 3T
下载地址https://robomongo.org/
在这里插入图片描述
下载zip安装包后傻瓜安装:
在这里插入图片描述
安装成功后进入软件。
(2)远程连接数据库
在这里插入图片描述
与MySQL的Navicat相同,都是远程连接到服务器数据库:
在这里插入图片描述
点击连接后进入数据库,其中分为三种形式,表格形式与navicat相同,代码格式就是以json格式呈现。
(3)修改图片数据
修改数据方法有两种,第一种与Navicat相似,直接进入表格格式进行修改保存,但同样修改的是代码格式:
在这里插入图片描述
修改后保存即可:
在这里插入图片描述
第二种就是代码形式修改,利用js代码对json数据进行编辑:
在这里插入图片描述
例如现在我需要修改广告页面中的所有图片地址,只需要用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
})

在这里插入图片描述
Ctrl + Enter运行:
在这里插入图片描述
???,不可以保存null?那就改成空字符串再试一下,还是不行,可能是数据中的image都存在的原因,大致修改代码,不用三元表达式:
在这里插入图片描述
说找不到image,想了以下原因可能是image在items下边的数组中,应该有索引值
在这里插入图片描述
所以在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方法学习到此结束,在之后完善我的网站时碰到问题我会继续编辑文章,大家有什么问题可以评论我们一起解决。

相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
8天前
|
Web App开发 缓存 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第26天】本文将引导你了解Node.js的基本原理,并通过实际案例展示如何在后端开发中应用它。我们将从Node.js的核心概念讲起,逐步深入到构建一个完整的后端服务,最后探讨如何优化你的Node.js应用。准备好让你的开发技能更上一层楼了吗?让我们一起潜入Node.js的世界!
|
8天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
6天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
9天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第57天】本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
7天前
|
Web App开发 JavaScript 前端开发
探索现代JavaScript开发:ECMAScript提案的未来
JavaScript是最受欢迎的编程语言之一,其发展迅速。ECMAScript(JS的标准化版本)的提案和更新为其带来了诸多新特性和改进。本文将介绍值得关注的ECMAScript提案,如可选链、空值合并运算符、逻辑赋值运算符、类字段和顶级Await,并展示如何利用这些新特性提升开发效率和代码质量。通过关注TC39提案流程、使用Babel和TypeScript等工具,开发者可以提前体验并利用这些新特性。随着JavaScript的不断进步,未来将有更多令人期待的功能加入。
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第25天】本文将带你了解Node.js的基本概念和核心优势,同时提供一些实际的代码示例来加深理解。无论你是初学者还是有一定经验的开发者,都能通过本文获得有价值的信息和技巧。让我们一起探索Node.js的世界吧!
|
8天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
9天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
|
9天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
21 0
下一篇
无影云桌面