Nodejs 一个 node 服务端 + vue ssr 的多人文章发布系统
Nodejs 一个 node 服务端 + vue ssr 的多人文章发布系统
这个项目用了 react、vue、node、webpack、grophql、express 基本涉及到了前端大部分主流的技术了，都是用的最新的版本，都是从零开始搭建包括 ssr 脚手架，主要是让学的人，接触前端整个的生态圈，后期 node 会用 ts 重构，个人对 node 特别喜欢，所以就想写点东西
kite
项目源码地址： https://github.com/maoxiaoquan/kite
前台演示网站地址： https://www.xiaosuibi.com/
后台演示网站地址： https://www.xiaosuibi.com/_admin
后台演示网站账户：kitetest 密码：q123456 （资源有点大，可能要加载一段时间）
拉点赞，只发一次了，haha
说明 使用的技术栈：
前台方面：vue + vuex + vue-router + vue-server-renderer
后台方面：react + redux + react-redux + react-router + antd
server: express + mysql + graphql + apollo-server-express
公共部分：webpack
其他详细的直接看 package.json 就可以了，部分接口开始使用 graphql 改写 前台界面目前是用的 vue 的 ssr，但是没有采用 nuxt.js 代码的阅读应该还是可以的，后台界面采用的是 react 前台目前比较简单，就是一个多人文章发布系统，用户可以注册账号，发布文章，关注用户，喜欢文章，评论等等 后台管理文章的发布、审核，评论的审核，管理员权限管理，系统配置等等，前后台用户管理员独立 初始化界面是对整个文章发布系统的一个初始化，包括初始管理员角色，mysql 等等 前后台是写在一起的
感谢！本人小白，有很多值得学习的地方，已 star，不太熟练如何搭脚手架，如果搭好的脚手架 Vue 还会写一些（ react 和 node 都没接触过），看来还是任重道远
然后进 admin 随便点了点，发现 _admin/#/manager/article-column 这个页面好像有一些问题（我这边白屏了
就不开 issue 了
针对你提到的Node.js服务端结合Vue SSR的多人文章发布系统，这里提供一个简要的技术实现思路及代码片段。
后端（Node.js）
使用Express.js搭建Node服务端，配合MongoDB存储文章数据。
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/articleDB', { useNewUrlParser: true, useUnifiedTopology: true });
const articleSchema = new mongoose.Schema({
title: String,
content: String,
author: String,
});
const Article = mongoose.model('Article', articleSchema);
app.post('/api/articles', async (req, res) => {
const article = new Article(req.body);
await article.save();
res.status(201).send(article);
});
app.listen(3000, () => console.log('Server running on port 3000'));
前端（Vue SSR）
使用Nuxt.js作为Vue SSR的框架，通过axios向后端发送请求，实现文章的发布和展示。
// nuxt.config.js
export default {
modules: [
'@nuxtjs/axios',
],
axios: {
baseURL: 'http://localhost:3000',
},
}
// 在Vue组件中使用axios发送POST请求发布文章
this.$axios.post('/api/articles', articleData).then(response => {
// 处理响应
});
此方案仅为基础实现，实际开发中需考虑用户认证、权限控制、错误处理等问题。
