利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

图片 5

图片 1这里写图片描述项目源码

源码:可以点击这里或者本地下载.rar)

安装 Express

封装MongoDB API 的db.js

// 封装所有对数据库的常用操作// 不管数据库的什么操作都要先链接数据库var MongoClient = require("mongodb").MongoClient;const url = "mongodb://localhost:27017";//本地数据库URLconst dbname = "test" //要操作的数据库名称function _connectDB{//链接数据库 MongoClient.connect(url,function{ cb })}// 插入一条数据exports.insertOne = function(collectionName,jsonData){//collectionName 集合名 jsonData 插入的json对象 // 注意:无论成功还是失败操作完成后都要关闭数据库 var p = new Promise(function(resolve, reject){//使用promise来处理回调 _connectDB(function{//数据库链接完成后进行操作 if{ reject; db.close(); } db.db.collection(collectionName).insertOne(jsonData,function(err,result){ if{ reject; db.close(); } resolve db.close; }) return p;}// 查找所有匹配数据  exports.findAll = function(collectionName,data){//若data什么都不传则代表查全部 var data = data || { page:0, size:0, params:{} }; var result = []; var cursor; //定义查找游标 var p = new Promise(function(resolve, reject){ _connectDB(function{ if{ reject; db.close(); } /* 老版本写法 利用游标遍历 新版本可以直接生成一个数组 cursor = db.db.collection(collectionName).find(data.params).limit(data.size).skip((data.page-1)*data.size); // skip 表示从第几条开始数 cursor.each(function{ if{ reject; } if(doc != null){ result.push }else{ resolve } }) */ // 分页 通过limit 跟skip 来处理(代表从第几页开始查找) // skip 0 limit 0 代表查所有 result = db.db.collection(collectionName).find(data.params).limit(data.size).skip((data.page-1)*data.size).toArray(); resolve; db.close return p;}// 删除所有数据exports.delectMany = function(collectionName,jsonData){ var p = new Promise(function(resolve, reject){ _connectDB(function{ if{ reject; db.close(); } //该方法会删除所有的匹配项 db.db.collection(collectionName).deleteMany(jsonData,function(err,result){ if{ reject; db.close(); } resolve db.close; }) return p;}// 修改数据exports.updateMany = function(collectionName,oldJson,newJson){//oldJson条件 newJson 修改成什么 var p = new Promise(function(resolve, reject){ _connectDB(function{ if{ reject; db.close(); } var params = {$set:newJson}; db.db.collection(collectionName).updateMany(oldJson,params,function(err,result){ if{ reject; db.close(); } resolve db.close; }) return p;}

app.js 位于项目根目录,使用 node app 运行服务器。

后端走通
新建 index.js 文件,然后开始写后端代码,配合 postman 调试
npm install nodemon –save-dev

express 搭一个服务器

var express = require("express");var app = express();var db = require("./model/db.js");var MongoClient = require("mongodb").MongoClient;//引入mongovar bodyParser = require("body-parser");//用于处理post请求的插件//解析application/x-www-form-urlencoded 请求 并将传递的参数返回到req.body里app.use(bodyParser.urlencoded({extended:false}));app.set("view engine","ejs");//使用ejs模板引擎//此命令代表 用户访问"/"路径 即首页时,先查找数据源,然后将数据源渲染app.get("/",function{ db.findAll.then(function{ res.render("index",{ list:data }); }).catch(function{ res.send })})//提供查询接口 以json格式返回数据app.get("/find",function{ //若什么都不传则默认不分页 var params = { page:req.query.page || 0, size:req.query.size || 0, params:{} } db.findAll("txt",params).then(function{ //result 为查询成功返回的数组 res.json({ "code":0, "data":result }) }).catch(function{ res.json({ "code":-1, "message":"查找失败" }) })})//提供新增数据接口 传递完整的 json对象{"user":xxx,"content":xxx};app.post("/add",function{ // console.log(); var params = req.body db.insertOne("txt",params).then(function{ res.json({ "code":0, "message":"新增成功" }) }).catch(function{ res.json({ "code":-1, "message":"插入失败" }) })})//提供删除接口 传递user参数即可app.post("/del",function{ var params = req.body db.delectMany("txt",params).then(function{ res.json({ "code":0, "message":"删除成功" }) }).catch(function{ res.json({ "code":-1, "message":"删除失败" }) })})//提供修改接口 传递user参数 跟content参数 user参数供查询,content参数供修改app.post("/update",function{ var oldJson = { "user":req.body.user }; var newJson ={ "content":req.body.content } db.updateMany("txt",oldJson,newJson).then(function{ res.json({ "code":0, "message":"修改成功" }) }).catch(function{ res.json({ "code":-1, "message":"修改失败" }) })})//监听 127.0.0.1:8012路径app.listen(8012,"127.0.0.1",function(){ console.log("服务器已启动,地址为127.0.0.1:8012")})

数据表结构如下:

图片 2这里写图片描述

至于前端,可通过ajax可直接掉接口,我不再过多赘述,希望大家多多支持,觉得好的话,GitHub打星星啦。

      1.文章的编辑,修改,删除

安装 Express
$ npm install express –save

mac环境安装MongoDB

由于官网的下载十分繁琐,又要注册又要干嘛的,所以我们直接采取brew这个工具进行安装

安装brew工具 打开控制台/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"使用brew 安装MongoDBbrew install mongodb安装完成后控制台直接输入 mongo看运行情况 

图片 3这里写图片描述

至此我们的电脑就可以使用mongoDB了,shell语法我就不过多介绍,官方API写得很详细,介绍一个开机命令mongod本地开发的时候,需要mongoDB一直处于开机状态,新打开一个控制台窗口。

//更改数据源的存放路径 mongod --path "路径" //输入完成后保持控制台窗口的打开状态

参考:

      5.element-ui

创建一个项目文件夹
$ mkdir myapp
$ cd myapp
$ npm init

最近在学node跟MongoDB,觉得MongoDB对前端开发者来说真的很友好,没有什么SQL语句,写法也跟js很相像,并且json格式传输数据,数据没有任何结构化的限制,API详细。附
mongoDB的api

vue-resource

安装 AngularJS

demo 小展示

前端

配合mongoDB

后端使用 express 构建了一个简单的服务器,几乎只用于操作数据库。

password as soon as possible!

其中 5elsT6KtjrqV 是待会儿要用到的密码。
与此同时,我还需要一个可以直接管理 mongoDB 的工具
MongoHub。附上下载地址:http://www.macupdate.com/app/mac/33918/mongohub
这时需要配置 MongoHub
了,左下角有一个加号,点进去看到下面这样的配置项,只需要填红色部分,下面是我已经配置好的内容,其中
Address 是虚拟机的 IP, Password 就是上面那个 5elsT6KtjrqV 。

图片 4

Paste_Image.png

2.创建项目文件夹
准备工作的时间可能会比较长,下面几步就简单了
创建文件夹 $ mkdir myblog

进到文件夹里 $ cd myblog

NPM 初始化 $ npm init
,初始化的时候可以设置入口文件 entry point , 我设置为 index.js
3.安装 Express
接下来需要安装 Express
$ npm install express –save

地址:http://expressjs.com/en/starter/installing.html
express项目中通常使用body-parser进行post参数的解析
下载 body-parser :
$ npm install body-parser –save

4.Index.js + nodemon
安装完成以后我们可以直接写一些后端的代码了,首先我新建一个 index.js
的文件,因为刚才 npm 初始化的时候指定了 entry point 是 index.js,这里的
index.js 是写后端代码用的,因为 Node 是这边的后端,代码如下:

// index.js

var express = require('express');
var app = express();
​
app.get('/', function (req, res) {
 res.send('This is my blog!');
});
​
app.listen(3000, function () {
 console.log('Example app listening on port 3000!');
});

然后打开 terminal ,执行 node index.js ,此时就能通过
http://localhost:3000/
看到 This is my blog! 字样啦。
nodemon 可以选择性安装。它是什么呢?由于每次修改代码以后都需要重启一下
node,而 nodemon
能够在代码修改了以后自动重启,省去了一些麻烦。安装过程也很简单:
npm install nodemon –save-dev

5.安装 AngularJS
用 NPM 下载 AngularJS 的安装包就好。
$ npm install angular–save-dev

6.配合 mongoDB
mongoDB 是 NoSQL 型数据库,因此存取方式和以前的 Select … From .. Where
..之类的不一样,具体办法可以参考 mongoDB 官网。简单写一下,

var MongoClient = require('mongodb').MongoClient;

MongoClient.connect('mongodb://192.168.240.1:27017/blog', function (err, db) {
   app.post('/FrontEnd', function (req,res) { // 前端发送 POST 请求
       //不需要预先创建 collection,如果不存在它会自动创建名称为 article 的collection
       db.collection('article').insert( 
           {
               name: "ES6",
               content: "Generator",
               created_time: 1464420258
        }
       );
       res.send('Success'); // 返回 Success 到前端页面
   })
​
});

7.补充说明
这里并没有列出任何前端代码,也没有写任何前端页面,其实只要是把这些全部搭建好,前后端走通,剩下的就是完全按照平时工作中只负责前端的部分去做就好了。
我虽然没有写前端页面,但是需要有前端的 post 请求来进行测试,我用到了
postman,不知道什么时候安装到电脑上的 =
=。上手比较简单,针对刚才的代码,可以直接像下面这样配置,然后
send,如果发送成功的话,就能看到返回 Success
字样,具体就不细说了。自己折腾去吧 ~

图片 5

Paste_Image.png

      3.vue-router

创建项目文件夹

     
5.框架模块的使用都不难,套API的活每个人都能干,只是快与慢的差别。

补充说明

后端

========================================================================
You can now connect to this MongoDB server using: mongo admin -u admin
-p 5elsT6KtjrqV –host –port Please remember to change the above

前端部分

前端安装 Angular
nam install angular —save-dev 安装的是 Angular 1.x 版本

这篇文章实现的博客系统使用 Vue 做前端框架,Node + express
做后端,数据库使用的是
MongoDB。实现了用户注册、用户登录、博客管理(文章的修改和删除)、文章编辑(Markdown)、标签分类等功能。

Index.js + nodemon

项目目录

配合 mongoDB

基本思路

最近刚新搭了一个博客,用的是 Angular + MongoDB + Express + Node
,为了熟悉整个流程并没有使用 MeanJS
框架,为啥现在才开始搭?主要是以前太懒了不爱写博客,现在幡然悔悟了,应该还可以亡羊补牢一下。所以其实网上教程已经非常多了,但是这边还是要记录一下。
废话不多说,先上步骤:
NodeJS + NPM + mongoDB

      1.Node.js

1.NodeJS + NPM + mongoDB
首先要在电脑里安装 NodeJS 和 NPM,去 NodeJS 的官网下载,能够顺带着也把
NPM
下载下来了,因为我很早就下过了,所以这里不提供具体操作。附上官网地址:https://nodejs.org/en/
接着要下载 mongoDB,我是用 Docker 下载到 Linux
的虚拟机里面(正确姿势是去租个服务器),这里不提供安装 Linux 以及 Docker
的具体步骤。我只需要一个 mongoDB
的镜像,附上镜像地址:https://hub.docker.com/r/tutum/mongodb/。
首先通过 ssh 连接本机和虚拟机。
本机直接运行:
docker run -d -p 27017:27017 -p 28017:28017 tutum/mongodb
就能自动 pull 镜像到 Docker 容器中,
执行 docker ps 查看容器,能够看到有一个 CONTAINER_ID 。
执行 docker logs <CONTAINER_ID> 能够看到下面的内容:

      3.阅读与你项目相关的优秀项目的源码,学习别人如何组织代码。

      5.支持用户注册登录

// 新建文章
// 即将被储存的数据 obj
let obj = {
 title: this.title,
 date: this.date,
 content: this.content,
 gist: this.gist,
 labels: this.labels
}
this.$http.post('/api/admin/saveArticle', {
 articleInformation: obj
}).then(
 response => {
 self.$message({
 message: '发表文章成功',
 type: 'success'
 })
 // 保存成功后跳转至文章列表页
 self.refreshArticleList()
 },
 response => console.log(response)
)

      2.Express

      1.Vue.js

后端响应请求并返回结果

<!--App.vue-->
<template>
 <div id="app">
 <div class="black_line"></div>
 <div id="main">
 <router-view name="sidebar"></router-view>
 <router-view></router-view>
 </div>
 </div>
</template>

实现的功能

给自己挖了一个坑。因为登录之后需要保存用户状态,用来判断用户是否登录,如果登录则可以进入后台管理,如果没有登录则不能进入后台管理页面。之前写
node 的时候用的是 session
来保存,不过spa应用不同于前后端不分离的应用,我在前端对用户输入的账号密码进行了判断,如果成功则请求登录在后端保存
session。不过不知道出于什么原因,session 总是没办法赋值。因为我 node
学的也是半吊子,所以暂时放着,等我搞清楚了再来填坑。

const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParse = require('body-parser')
const session = require('express-session')
const MongoStore = require('connect-mongo')(session)
const router = require('./server/router')
const app = express()

const resolve = file => path.resolve(__dirname, file)

app.use('/dist', express.static(resolve('./dist')))
app.use(bodyParse.json())
app.use(bodyParse.urlencoded({ extended: true }))
app.use(router)

// session
app.set('trust proxy', 1) // trust first proxy
app.use(session({
 secret: 'blog',
 resave: false,
 saveUninitialized: true,
 cookie: {
 secure: true,
 maxAge: 2592000000
 },
 store: new MongoStore({
 url: 'mongodb://localhost:27017/blog'
 })
}))

app.get('*', function (req, res) {
 let html = fs.readFileSync(resolve('./' + 'index.html'), 'utf-8')
 res.send(html)
})

app.listen(3000, function () {
 console.log('访问地址为 localhost:3000')
})

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图