返回
全栈个人博客：Vue 3、Node.js和MongoDB从入门到精通
前端
2023-08-16 16:49:00
构建全栈个人博客：使用Vue 3、Node.js和MongoDB打造
使用最新的技术打造你的在线平台
在当今数字时代，拥有一个个人博客至关重要，它可以让你分享你的想法、专业知识和经验。全栈博客让你完全控制你的内容和设计，提供更多的定制性和灵活性。在本博客中，我们将指导你使用Vue 3、Node.js、MongoDB和UniApp从头开始构建一个全栈个人博客系统。
先决条件
在开始之前，确保你已经安装了以下软件：
- Node.js 16+
- npm或Yarn包管理器
- MongoDB
- Visual Studio Code或你喜欢的代码编辑器
项目结构
我们的项目将包含以下目录和文件：
- client/
- src/
- public/
- package.json
- server/
- src/
- package.json
- .gitignore
- package.json
步骤 1：搭建Vue 3前端
- 创建一个新的Vue 3项目：
vue create client
- 安装UniApp CLI：
npm install -g uniapp-cli
- 在client目录中，运行：
uniapp create blog
步骤 2：搭建Node.js和MongoDB后端
- 创建一个新的Node.js项目：
mkdir server
cd server
npm init -y
- 安装必要的依赖项：
npm install express mongoose body-parser
- 创建一个新的MongoDB数据库：
mongo
use blog
- 创建一个新的集合：
db.createCollection("posts")
步骤 3：连接前端和后端
- 在client/package.json中，添加以下代码：
"proxy": "http://localhost:3000"
- 在server/server.js中，添加以下代码：
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
mongoose.connect("mongodb://localhost:27017/blog", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const PostSchema = new mongoose.Schema({
title: String,
content: String,
});
const Post = mongoose.model("Post", PostSchema);
app.get("/posts", async (req, res) => {
const posts = await Post.find();
res.json(posts);
});
app.post("/posts", async (req, res) => {
const post = new Post(req.body);
await post.save();
res.json(post);
});
app.listen(3000);
步骤 4：开发博客前端
- 在client/src/main.js中，添加以下代码：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
- 在client/src/App.vue中，添加以下代码：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/posts">Posts</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
#app {
font-family: Arial, Helvetica, sans-serif;
}
</style>
- 在client/src/router/index.js中，添加以下代码：
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Posts from "../views/Posts.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
{
path: "/posts",
name: "Posts",
component: Posts,
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
- 在client/src/views/Posts.vue中，添加以下代码：
<template>
<div>
<h1>Posts</h1>
<ul>
<li v-for="post in posts" :key="post._id">
<router-link :to="`/posts/${post._id}`">{{ post.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Posts",
data() {
return {
posts: [],
};
},
created() {
axios.get("/posts").then((res) => {
this.posts = res.data;
});
},
};
</script>
<style>
</style>
- 在client/src/views/Post.vue中，添加以下代码：
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Post",
props: ["id"],
data() {
return {
post: null,
};
},
created() {
axios.get(`/posts/${this.id}`).then((res) => {
this.post = res.data;
});
},
};
</script>
<style>
</style>
步骤 5：运行项目
- 在client目录中，运行：
npm run serve
- 在server目录中，运行：
node server.js
- 打开浏览器，访问 http://localhost:8080，你应该可以看到你的博客。
结论
通过遵循本指南，你已经成功构建了一个功能齐全的全栈个人博客。你可以根据你的需要进一步定制它。继续探索更多功能，例如用户注册、登录和评论，以提升你的博客体验。
常见问题解答
-
为什么我需要一个全栈博客？
全栈博客提供完全控制，让你可以定制设计和内容，实现更高的灵活性。 -
Vue 3和Node.js有什么优势？
Vue 3是一个强大的前端框架，具有快速渲染和响应式状态管理功能。Node.js是一个高效的服务器端平台，适合构建API和实时应用程序。 -
MongoDB如何用于博客？
MongoDB是一个文档型数据库，非常适合存储和检索博客文章等非结构化数据。 -
UniApp如何简化开发过程？
UniApp是一个跨平台框架，允许你使用Vue.js代码同时构建iOS和Android应用程序。 -
如何维护和更新我的博客？
维护你的博客需要定期添加新内容、更新现有文章并监控其性能。使用版本控制系统（如Git）管理代码变更很重要。
