返回
新手也能学会的 Node.js 前后端简单博客开发指南
前端
2023-11-08 01:22:07
前言
博客是分享知识和见解的绝佳平台。如果您想创建一个自己的博客，那么使用 Node.js 是一个不错的选择。Node.js 是一个跨平台的 JavaScript 运行时环境，具有异步、事件驱动的特点，非常适合构建网络应用程序。
后端开发
1. 安装 Node.js
首先，您需要在您的计算机上安装 Node.js。您可以从 Node.js 官网下载安装包。
2. 创建项目
使用命令行工具创建一个新的 Node.js 项目。
mkdir my-blog
cd my-blog
npm init -y
3. 安装依赖
安装必要的依赖包。
npm install express ejs body-parser
4. 配置服务器
在项目中创建一个名为 server.js 的文件，并添加以下代码：
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});
5. 创建数据库
在项目中创建一个名为 database.js 的文件，并添加以下代码：
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'my_blog'
});
connection.connect();
module.exports = connection;
6. 创建模型
在项目中创建一个名为 models/post.js 的文件，并添加以下代码：
const connection = require('../database');
const Post = {
all: (callback) => {
connection.query('SELECT * FROM posts', callback);
},
find: (id, callback) => {
connection.query('SELECT * FROM posts WHERE id = ?', [id], callback);
},
create: (data, callback) => {
connection.query('INSERT INTO posts SET ?', data, callback);
},
update: (id, data, callback) => {
connection.query('UPDATE posts SET ? WHERE id = ?', [data, id], callback);
},
delete: (id, callback) => {
connection.query('DELETE FROM posts WHERE id = ?', [id], callback);
}
};
module.exports = Post;
前端开发
1. 安装依赖
安装必要的依赖包。
npm install vue vue-router vuex
2. 创建项目
使用命令行工具创建一个新的 Vue.js 项目。
vue create my-blog-frontend
3. 配置项目
在项目中创建一个名为 vue.config.js 的文件，并添加以下代码：
module.exports = {
publicPath: '/my-blog-frontend/'
};
4. 创建组件
在项目中创建一个名为 src/components/Post.vue 的文件，并添加以下代码：
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</div>
</template>
<script>
export default {
props: ['post']
};
</script>
5. 创建页面
在项目中创建一个名为 src/pages/Home.vue 的文件，并添加以下代码：
<template>
<div>
<post v-for="post in posts" :key="post.id" :post="post"></post>
</div>
</template>
<script>
import Post from '@/components/Post.vue';
import { mapState } from 'vuex';
export default {
components: { Post },
computed: {
...mapState(['posts'])
}
};
</script>
6. 创建路由
在项目中创建一个名为 src/router/index.js 的文件，并添加以下代码：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/pages/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
component: Home
}
];
const router = new VueRouter({
mode: 'history',
base: '/my-blog-frontend/',
routes
});
export default router;
7. 创建状态管理
在项目中创建一个名为 src/store/index.js 的文件，并添加以下代码：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
posts: []
};
const mutations = {
setPosts(state, posts) {
state.posts = posts;
}
};
const actions = {
fetchPosts({ commit }) {
fetch('/api/posts')
.then(res => res.json())
.then(data => commit('setPosts', data))
.catch(error => {
console.error(error);
});
}
};
const getters = {
posts: state => state.posts
};
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
部署
您可以使用 Nginx 将您的 Node.js 应用程序部署到生产环境。
1. 安装 Nginx
首先，您需要在您的服务器上安装 Nginx。您可以从 Nginx 官网下载安装包。
2. 配置 Nginx
在 Nginx 的配置文件中添加以下代码：
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://localhost:3000;
}
}
3. 启动 Nginx
启动 Nginx 服务。
systemctl start nginx
现在，您可以通过访问 http://example.com 来访问您的博客了。
