【Part2】用JS写一个Blog （node + vue + mongoDB）

YPHP 发布于2019-08-22 11:19 / 2676人阅读

摘要：用写一个上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。每一个都映射到一个的集合，并定义了该集合中的文档的形式。

【Part1】用JS写一个Blog （node + vue + mongoDB）

上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。实现mongoDB数据库的连接。

整理后端目录

下面是通过express-generate生成的项目的目录

bin/www是项目的启动文件，启动项目除了上次说的npm start，还可以再命令后执行 node bin/www，其实这两个命令是一样的，只不过在package.json文件中两者建立了链接，如下图

node_modules不用多说，项目的依赖都安装于此
public是放置一些公共资源的文件夹，我以后也不会用到它，所以把他给删掉了
router下的.js文件就是我们写API的地方了，为了更直观，我把router名字改为api，把里面的文件名字分别改为post.js和admin.js.(我把api分成两个文件，一个是与文章相关的，另一个是与管理员相关的)
views是页面的模板，因为我们后端只提供数据接口，所以用不到页面文件，我把他给删掉了
app.js是整个项目的入口文件，相当于后端项目的大脑，它里面的文件是按顺序执行
package.json是关于我们这个项目用到的依赖。
需要说明的是，需要在根目录下创建一个models的文件夹用来初始化mongodb数据库等一些操作的。
下面就是整理好的后端目录

安装mongoDB数据库

安装方法在这里不多说，网上资源一大堆，可以去官网看官方文档，我是利用Docker安装的,方便本地调试。
安装完成后不要忘记启动mongodb

安装mongoose

mongoose是mongodb的一个对象模型工具，有了它，可以很方便的操作mongodb数据库，还不是很了解mongoose的小伙伴自行google，资料有很多。
命令行输入 npm install mongoose --save

安装完成后，首先要定义模型
在models文件夹下新建一个post.js 定义文章的模型，填入内容

let mongoose = require("mongoose")  //引入mogoose

 //在 Mongoose 中，所有东西都从一个 Schema 开始。每一个 schema 都映射到一个 MongoDb 的集合，并定义了该集合中的文档的形式。
let postSchema = new mongoose.Schema({  
  title: String,   //规定文章的标题是字符串类型
  content: String  //规定文章的内容是字符串类型
})               
let postModel = mongoose.model("posts", postSchema)  //定义模型

module.exports = postModel   //通过commonJS模块语法导出

在models文件夹下新建一个admin.js 定义管理员模型，填入内容

let mongoose = require("mongoose")

let adminSchema = new mongoose.Schema({
  name: String,   //用户名
  pass: String    //密码
})

let adminModel = mongoose.model("admin", adminSchema)

module.exports = adminModel

继续在models文件夹下新建一个init.js 用于连接mongoDB数据库，填入内容

let mongoose = require("mongoose")

mongoose.connect("mongodb://localhost:27017/blog")  // 数据库的端口号根据需求进行调整，一般直接安装mongodb并启动后，端口号默认是27017，如果通过docker安装，端口号会是其他的。blog是我们博客的数据库的名字，如果没有名字为blog的数据库，会自动添加。

///打印连接状态的日志，可自行选择写与不写
mongoose.connection.on("connected", (req, res) => {
  console.log("MongoDB connected success")
})
mongoose.connection.on("err", (req, res) => {
  console.log("MongoDB connected fail")
})
mongoose.connection.on("disconnected", (req, res) => {
  console.log("MongoDB connected disconnected")
})

下面就重启我们后端项目，如果上次开启的进程还没关掉，命令行control + c关闭进程，输入npm start重启项目。

fk，报错。。

不能找到index这个文件，原来是我们刚刚改了index.js和user.js文件的名字，因为这两个文件在app.js中被引用，所以找到app.js,
把

和

修改为

修改完成后，执行npm start
项目是启动成功了，但是结果没有出现打印的日志

说明我们的数据库没有连接，找了很久，原来是因为我们的init.js文件没有在app.js中引用，那肯定是没有执行init.js文件，因为前面说了整个项目的主入口文件是app.js,所以我们在app.js中引用它

现在重启项目，看看是不是有了连接成功的日志

数据库已连接成功，那么下一步写接口！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92191.html

【Part2】用JS写一个Blog （node + vue + mongoDB）

摘要：用写一个上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。每一个都映射到一个的集合，并定义了该集合中的文档的形式。【Part1】用JS写一个Blog （node + vue + mongoDB）上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。实现mongoDB数据库的连接。整理后端目录下面是通过express-generate生成的项目的目录 show...

charles_paul 2019-06-26 17:30 评论0 收藏0
【Part3】用JS写一个Blog （node + vue + mongoDB）

摘要：用写一个用写一个上一节我们把数据库连接成功了，这节我准备写关于文章的数据接口增删改查上次说到接口都在文件夹里面写，打开文件，首先引入文章的模型新增文章新增文章方法保存数据到数据库如果出现错误，直接把错误进的错误中枢处理储存成功后，返回给客户【Part1】用JS写一个Blog （node + vue + mongoDB）【Part2】用JS写一个Blog （node + vue + m...

wuyumin 2019-06-26 17:31 评论0 收藏0
【Part3】用JS写一个Blog （node + vue + mongoDB）

摘要：用写一个用写一个上一节我们把数据库连接成功了，这节我准备写关于文章的数据接口增删改查上次说到接口都在文件夹里面写，打开文件，首先引入文章的模型新增文章新增文章方法保存数据到数据库如果出现错误，直接把错误进的错误中枢处理储存成功后，返回给客户【Part1】用JS写一个Blog （node + vue + mongoDB）【Part2】用JS写一个Blog （node + vue + m...

CoorChice 2019-08-21 18:32 评论0 收藏0
【Part1】用JS写一个Blog（node + vue + mongoDB）

摘要：总的来说就是开发博客系统，探索前端走向全栈之路。我会记录下来整个过程在我的专栏，有兴趣的可以关注一下，一起学习，欢迎讨论。话不多说，先进行前后端项目的初始化。安装完成后，输入命令切换到项目文件夹后输入命令访问一下项目初始化完成。学习JS也有一段时间了，准备试着写一个博客项目，前后端分离开发，后端用node只提供数据接口，前端用vue-cli脚手架搭建，路由也由前端控制，数据异步交互用...

jhhfft 2019-08-22 11:15 评论0 收藏0
【Part1】用JS写一个Blog（node + vue + mongoDB）

摘要：总的来说就是开发博客系统，探索前端走向全栈之路。我会记录下来整个过程在我的专栏，有兴趣的可以关注一下，一起学习，欢迎讨论。话不多说，先进行前后端项目的初始化。安装完成后，输入命令切换到项目文件夹后输入命令访问一下项目初始化完成。学习JS也有一段时间了，准备试着写一个博客项目，前后端分离开发，后端用node只提供数据接口，前端用vue-cli脚手架搭建，路由也由前端控制，数据异步交互用...

ctriptech 2019-06-26 17:30 评论0 收藏0