全栈开发博客系统(nodejs+vuejs+mongodb)

2019-09-12 admin

本篇文章将会介绍如何使用nodejs+vuejs构建个人博客。

主要分三部分内容:

  1. 环境准备
  2. 博客后端管理系统(admin)
  3. 后端服务(主要提供admin及web端接口)
  4. 博客前端展示(web)

环境准备

博客后端管理系统

项目创建

首先创建一个基本的vue后端项目,可以使用以下命令:

    vue create admin

对于出现的一些选项,直接选择默认就可。 创建好后的目录结构如下:

router集成

使用vue-cli可以很方便的集成路由:

vue add router

注意,默认会采用history模式,为了以后方便些,这里要选择(n)即用hash模式,而不是浏览器的history模式。

element-ui集成

为了方便,后端的页面我们采用element-ui提供的一些组件实现,所以要把element-ui集成进来:

vue add element

提示选项,全部选择默认就可。

好了,到目前为止,后端项目的基本结构就算构建完成了。可以通过以下命令启动:

npm run serve

启动后的默认页面如下:

页面基本布局

可以采用element-ui的layout-container,直接把样例代码copy过来放到Home.vue 的template里面就可以。 但是这里有一点要注意,由于在切换左侧菜单的时候,我们希望只有右侧是变动的,左侧应该保持不变,所以这里需要用到<router-view>。把右侧变动的部分挂载到<router-view>这里。

新建分类页面

首先新建一个CategoryEdit.vue文件,然后添加路由。 路由这里需要注意,右侧的可变动的页面应该作为Home组件的子路由。 这样,CategoryEdit这个页面的内容就会显示在我们之前定义的<router-view>的位置。

好了,这样当我们在浏览器输入"http://localhost:8080/#/categories/create", CategoryEdit页面就会显示出来了。具体的页面内容在这里不介绍了。都是用的element-ui的组件。

由于篇幅有限,其他的页面在这里也不详细一一介绍了,具体源码已开源到GitHub

最终的项目页面结构会是下面这样:

共分成三部分:分类管理、文章管理及用户管理。

对于页面中使用的接口,会在接下来的server部分介绍。

后端服务

这部分采用nodejs + mongodb实现。

项目构建

  1. 首先在根目录(与admin同级的目录)新建文件夹server。

  2. 新建一个package.json文件,可以使用以下命令初始化一个

    npm init
    

    全部选择默认即可。

  3. 依赖安装。后端主要会用到以下依赖。

    "cors": "^2.8.5",       // 允许跨域请求
    "express": "^4.17.1",   // 后端框架
    "mongoose": "^5.6.12",  // 数据库
    "nodemon": "^1.19.2",   // 当文件变更后会自动重启后端服务
  1. 以上依赖安装完后新建一个index.js文件。
const express = require('express')
const cors = require('cors')
const app = express()

// 允许跨域
app.use(cors())
app.use(express.json())

app.listen('3000', async(req, res) => {
  console.log("http://localhost:3000")
})
  1. 通过以下命令就可以启动后端服务了:
    nodemon start index.js

路由定义

新建一个router文件夹,然后新建admin文件夹作为admin端的接口,平级可以再建一个web文件夹作为web端的接口。在admin文件夹下新建index.js文件

module.exports = app => {
  const express = require('express')
  const router = express.Router()

  // 获取资源
  router.get('/getData', async (req, res) => {
    res.send("hello world")
  })

  app.use('/admin/api/rest', router)
}

注意这里导出的是一个函数,这样做有个好处就是可以传递参数进来,这里我们传入了app作为参数。

在根目录的index.js文件中需要引入一下:

require('./routers/admin/index')(app) // 直接执行函数并传入app作为参数

当在浏览器中输入"http://localhost:3000/admin/api/rest/getData" 时,会看到"hello wrold"。

连接数据库

接下来新建一个文件夹db,然后新建db.js文件:

module.exports = app => {
  const mongoose = require('mongoose')

  mongoose.connect('mongodb://localhost:27017/myblog', {
    useNewUrlParser: true
  })
}

mongodb安装完后默认会在27017端口启动,myblog是我们给数据库的命名。

然后在index.js文件中需要引入db.js。

require('./db/db')(app) 

创建模型

新建models文件夹,在文件夹下新建Category.js作为分类的模型。

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
  title: {type: String}
})

module.exports = mongoose.model('Category', schema)

暂时只定义一个分类名称 “title”

数据查询

在routers/admin/index.js中通过以下代码就可以查询categories表中的数据。

  // 获取分类列表
  router.get('/categories', async (req, res) => {
    const res = await Category.find()
    res.send(res)
  })

当在浏览器中输入 “http://localhost:3000/admin/api/rest/categories” 即可得到categories表的数据。

好了,通过以上的介绍,我们应该能够实现一些简单的增删改查操作。

中间件

在开发的过程中,我们一定会遇到一个问题。

前面提到,后端admin主要包括三大模块:分类管理、文章管理、用户管理。

每一个模块都会涉及增删改查操作。如果我们为每一个模块都定义一套自己的增删改查接口,势必会产生很多重复代码,而且如果是分类比较多的情况,重复代码会更加严重。所以这里可以考虑自定义一个中间件。

首先新建一个文件夹middleware,然后新建resource.js文件(我们可以把每个分类都理解为资源),统一对资源进行增删改查操作,唯一的不同是资源名称。

module.exports = options => {
  return async (req, res, next) => {
    const inflection = require('inflection')
    const modelName = inflection.classify(req.params.resource)
    req.Model = require(`../models/${modelName}`)

    next()
  }
}

这里用到了inflection库,需要先安装一下,然后用inflection.classify把传入的参数转为单数形式,作为模型的名称。

然后将routers/admin.index.js改为以下方式

  // 获取资源
  router.get('/', async (req, res) => {
    const data = await req.Model.find()
    res.send(data)
  })

  app.use('/admin/api/rest/:resource', resourceMiddleware(), router)

好了,由于篇幅有限,其他的一些内容就暂不介绍了,详细代码可以参考GitHub

博客前端展示(web)

项目构筑

这部分和admin差不多,新建web项目,需要集成router,但不需要element-ui,具体可以参照上文后端管理系统的项目构筑介绍。

主题选择

主题部分我是直接从Jekyll Themes主题库中选取的一个,由于时间没那么多,再加上是自己做着玩,所以偷个懒。在这里贴出原作者 Liberxue

访问量统计

访问量统计这里用到了一个免费的开源库不蒜子,非常轻量级,使用起来也很简单。

主页面

结尾

好了,暂时就先介绍这么多吧,还有很多内容就不一一展开了。如果大家有疑问可以留言。

由于本人是前端出身,做了六七年前端了。后端也是刚刚接触不久,所以上文前端部分介绍的可能会少一些,相对后端会多些,如果有哪些错误的地方欢迎指正。

[转载]原文链接:https://segmentfault.com/a/1190000020368273

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74952.html

文章标题:全栈开发博客系统(nodejs+vuejs+mongodb)

相关文章
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
2015年2月国内操作系统市场份额概况,xp占46.29%,
规则调整:2012年6月1日开始,Mac操作系统中不再包含ipad、iphone市场份额。 ...
2015-11-12
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
哪些互联网产品适合用HTML5开发?
J.P. Morgan(摩根大通集团)不久前发布了有关2013年互联网公司股票的研究报告,其中在预测2013年趋势时,提及移动互联网有关web和app之间的辩论将在3到5年内继续,而摩根认为这对于搜索产品和谷歌是利好消息,因为用户需要处理复...
2015-11-12
回到顶部