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

简介: 如题,将本地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方法学习到此结束,在之后完善我的网站时碰到问题我会继续编辑文章,大家有什么问题可以评论我们一起解决。

相关文章
|
7月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
363 1
|
7月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
351 0
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
14131 23
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
670 26
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
426 10
|
前端开发 JavaScript API
惊呆了!这些前端技巧竟然能让你的网站支持AR/VR体验!
【10月更文挑战第31天】在数字化时代,用户对网页交互体验的要求日益提高,传统二维网页已难以满足需求。本文介绍如何利用前端技术,特别是Three.js,实现AR/VR体验,提升用户满意度和网站价值。通过示例代码,展示如何创建简单的3D场景,并探讨AR/VR技术的基本原理和常用工具,帮助开发者打造沉浸式体验。
977 6
|
前端开发 JavaScript UED
惊呆了!这些前端技巧竟然能让你的网站秒变高大上,赶快学起来!
前端技术是网页设计的核心,能够显著提升用户体验和网站竞争力。本文介绍了三种实用的前端技巧:动态背景效果、微交互设计和响应式设计。通过CSS动画和JavaScript,可以实现视觉吸引的动态背景;微交互设计如按钮点击效果能增强用户参与感;响应式设计则确保网站在不同设备上呈现良好效果。这些技巧简单易学,效果显著,值得尝试。
380 3
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
327 3
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
339 4
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
330 3

热门文章

最新文章