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

主要分三部分内容:

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

环境准备

  • nodejs

    直接去官网下载最新的稳定版就好,以下为下载链接:

    https://nodejs.org/en/download/

  • vue-cli

    这是一个强大的构建工具,使用它可以很方便的管理一个vue的项目,并且不需要更多的webpack配置。建议全局安装:

    npm install --global vue-cli
  • mongodb

    后端要用到的数据库。直接去官网下载对应系统的版本就好,注意要下载server版。下载地址:

    http://downloads.mongodb.com/

博客后端管理系统

项目创建

首先创建一个基本的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

访问量统计

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

主页面

结尾

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

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

源码已经开源到GitHub, 如果您觉着对自己还有些帮助,希望能给个Star

全栈开发博客系统(nodejs+vuejs+mongodb)的更多相关文章

  1. 利用Sails.js+MongoDB开发博客系统

    http://yoyoyohamapi.me/categories/利用Sails-js-MongoDB开发博客系统/ 利用Sails.js+MongoDB开发博客系统 Apr 14, 2016 利用 ...

  2. 纯django开发博客系统

    企业级教程:纯django开发博客系统 1.视频教程 https://www.duanshuilu.com/ 2.教程文档 https://www.duanshuilu.com/ 0.课程简介1.简价 ...

  3. nodejs--express开发博客系统(三)

    上一节已经实现了登录.注册.发表文章和文章读取的功能,今天咱加上评论.文章页面和作者页面. 评论只能在进入文章页面后才能进行,所以咱们先写文章页面. 在上一节的代码中,我已经给文章标题添加了超链接了, ...

  4. python全栈开发day73-Django认证系统

    一.Form组件 day73 2018-08-10 1. 内容回顾 1. form表单组件 1. 常用字段 1. CharField() 2. ChoiceField() 2. 参数或配置 1. la ...

  5. Node.js开发博客系统

    数据库设计 用户表: id phone password nickname head_img personal_sign level_id create_time update_time is_del ...

  6. React与Koa一起打造一个功能丰富的全栈个人博客(业务篇)

    前言 豆哥的个人博客又改版了,本版主要技术栈是前台用的React,后台用的Koa.博客改版的初衷是自己可以练练React(公司的项目部分要用React,我也没法啊,再说早晚得学).本文主要介绍博客的业 ...

  7. ThinkPHP开发博客系统笔记之一

    1.前后台搭建 开发的第一步是搭建前后台系统.搭建前台系统的时候新建了LoginController控制器和登录界面View/Login/index.tpl.模板文件中需要引入js和css文件,这里想 ...

  8. python全栈开发day66-视图系统、路由系统

    一.昨日内容回顾 1. tags 1. for循环 {% for name in name_list %} {{ name }} {% endfor %} {% for name in name_li ...

  9. ThinkPHP开发博客系统笔记之二

    1. 登陆验证码 当用户登陆的时候我们希望也弹出验证码,有两种方法可以实现:一是再增加一个弹出验证码的dialog,二是和注册共用一个验证码dialog.第一种方法有大量重复代码,所以我们使用第二种方 ...

随机推荐

  1. mysql优化---订单查询优化(2):异步分页处理

    订单分页查询: 老的代码是顺序执行查询数据和计算总记录数,但是如果条件复杂的话(比如关联子表)查询的时间要超过20s种 public static PagedList<Map<String ...

  2. 多线程 共享资源 同步锁 java

    Java多线程编程:Lock   synchronized是java中的一个关键字,也就是说是Java语言内置的特性.那么为什么会出现Lock呢? 如果一个代码块被synchronized修饰了,当一 ...

  3. MySQL学习随笔记录

    安装选custmer自定义安装.默认安装全部在c盘.自定义安装的时候有个advance port选项用来选择安装目录. -----------------------MySQL常见的一些操作命令--- ...

  4. 认识Redies

    既然是作为了解性文章,那必然不会做很深入的解读.深入的解读以后会加上. 我们先来回答两个问题.通过这两个问题来开始我们的Redies入门之旅. Redies是什么? Redies有什么作用? Redi ...

  5. spring架构解析--入门一

    Spring 框架中的核心组件只有三个:Core.Context 和 Beans.它们构建起了整个 Spring 的骨骼架构.简单理解: spring core是工具,context是环境,而bean ...

  6. Multiple dex files define Lokhttp3/internal/wsWebSocketProtocol

    Multiple dex files define Lokhttp3/internal/wsWebSocketProtocol 老套路,先晒图 图一:如题,在编译打包时遇到了如上错误,很明显这是一个依 ...

  7. k8s学习笔记

    9.deployment:声明式的升级应用 9.1.使用RC实现滚动升级 #kubectl rolling-update kubia-v1 kubia-v2 --image=luksa/kubia:v ...

  8. 在centos6系列vps装Tomcat8.0

    In the following tutorial you will learn how to install and set-up Apache Tomcat 8 on your CentOS 6 ...

  9. notepad 写html乱码,已解决

    写一些简单基础的html文件时,突然发现新建的demo2,在浏览器打开乱码,而昨天的demo1打开没乱码,真奇怪,开始排查原因. 1.检查代码,,设了charset=UTF-8,看不出毛病. 2.索性 ...

  10. Spring源码剖析1:初探Spring IOC核心流程

    本文大致地介绍了IOC容器的初始化过程,只列出了比较重要的过程和代码,可以从中看出IOC容器执行的大致流程. 接下来的文章会更加深入剖析Bean容器如何解析xml,注册和初始化bean,以及如何获取b ...