历史搜索

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

游客2024-07-23 08:53:01

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

主要分三部分内容:

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

环境准备

博客后端管理系统

项目创建

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

 vue create admin

对于出现的一些选项,直接选择默认就可。

创建好后的目录结构如下:

集成

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

vue add router

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

-ui集成

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

vue add element

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

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

npm run serve

启动后的默认页面如下:

页面基本布局

可以采用-ui的-,直接把样例代码copy过来放到Home.vue 的里面就可以。

但是这里有一点要注意,由于在切换左侧菜单的时候,我们希望只有右侧是变动的,左侧应该保持不变,所以这里需要用到。把右侧变动的部分挂载到这里。

新建分类页面

首先新建一个.vue文件,然后添加路由。

路由这里需要注意,右侧的可变动的页面应该作为Home组件的子路由。

这样,这个页面的内容就会显示在我们之前定义的的位置。

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

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

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

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

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

后端服务

这部分采用 + 实现。

项目构建

首先在根目录(与admin同级的目录)新建文件夹。新建一个.json文件,可以使用以下命令初始化一个npm init全部选择默认即可。依赖安装。后端主要会用到以下依赖。

 "cors": "^2.8.5", // 允许跨域请求
 "express": "^4.17.1", // 后端框架
 "mongoose": "^5.6.12", // 数据库
 "nodemon": "^1.19.2", // 当文件变更后会自动重启后端服务

以上依赖安装完后新建一个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")
})

通过以下命令就可以启动后端服务了:

 nodemon start index.js

路由定义

新建一个文件夹,然后新建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作为参数