在本篇指南中，我们将一步步使用Vue.js（前端）和Node.js（后端）构建一个简单而强大的个人博客网站。我们将介绍项目的创建、前端和后端的搭建、数据的存储以及如何将它们整合在一起。
步骤1：创建Vue.js项目
首先，确保你已经安装了Vue CLI。然后在命令行中运行以下命令来创建一个新的Vue.js项目：
代码语言：javascript复制bashCopy codevue create my-blog-client根据提示进行选择，选择手动配置并选择需要的特性。
步骤2：配置Vue.js项目
在Vue.js项目中，你可以使用Vue Router来处理页面导航，使用axios来处理与后端的数据通信。在my-blog-client项目中，执行以下命令安装这些依赖：
bashCopy codecd my-blog-client
npm install vue-router axios然后，配置src/router/index.js文件：
javascriptCopy codeimport Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
// 添加其他页面的路由
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;步骤3：创建Node.js后端
在博客项目的根目录中，创建一个名为my-blog-server的文件夹。在该文件夹内运行以下命令来初始化Node.js项目：
bashCopy codenpm init -y然后，安装Express和Mongoose：
代码语言：javascript复制bashCopy codenpm install express mongoose在my-blog-server文件夹中创建server.js文件，编写Express服务器：
javascriptCopy codeconst express = require('express');
const mongoose = require('mongoose');
const app = express();
const PORT = process.env.PORT || 3000;
// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost:27017/myblog', {
useNewUrlParser: true,
useUnifiedTopology: true,
});
// 定义数据模型
const blogSchema = new mongoose.Schema({
title: String,
content: String,
});
const Blog = mongoose.model('Blog', blogSchema);
// 中间件
app.use(express.json());
// 路由
app.get('/api/blogs', async (req, res) => {
const blogs = await Blog.find();
res.json(blogs);
});
// 启动服务器
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});步骤4：创建Vue.js页面
在Vue.js项目中，你可以创建博客列表页面、博客详情页面等。在src/views文件夹中创建相应的组件。
步骤5：与后端连接
在Vue.js项目中，使用axios从后端获取数据。在博客列表页面中：
代码语言：javascript复制vueCopy code<template>
<div>
<h2>博客列表</h2>
<div v-for="blog in blogs" :key="blog._id">
<h3>{{ blog.title }}</h3>
<p>{{ blog.content }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
blogs: [],
};
},
mounted() {
axios.get('http://localhost:3000/api/blogs').then((response) => {
this.blogs = response.data;
});
},
};
</script>步骤6：运行项目
分别在my-blog-client和my-blog-server文件夹中执行以下命令启动前端和后端：
bashCopy code# 在my-blog-client文件夹中执行
npm run serve
# 在my-blog-server文件夹中执行
node server.js访问http://localhost:8080即可查看个人博客网站。
以上就是使用Vue.js和Node.js构建个人博客网站的基本步骤。你可以根据需求进一步完善前后端逻辑、页面设计以及添加用户认证等功能。
我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
