tibaiwan/manage-news

基于 Express, Vue, Handlebars, mongoDB 的新闻管理与展示系统，服务端渲染并静态化页面

新闻管理系统（Demo版）

客户端模块：新闻管理（增删查改）

技术栈：Vue, Vue-router, Axios, Stylus

服务端模块：新闻展示（使用模板渲染列表和详情页）

技术栈：Express, MongoDB, Mongoose, Handlebars

相关资源链接

Express
MongoDB 下载 Windows安装
Mongoose
Handlebars
Robo3t(mongoDB可视化工具)

项目流程图

项目结构

├── root
  ├── express (路由转发请求，返回html)
      ├── routes
          ├── index.js
          ├── news.js
          ...
      ├── views
          ├── index.hbs
          ├── layout.hbs
          ...
  ├── mongoDB (数据库相关)
      ├── models (mongoDB 数据模型)
          ├── news.js
          ...
      ├── config
          ├── db.js
          ├── data.js
          ...
  ├── src (Vue 项目结构)
      ├── assets
          ├── images
          └── stylesheet
      ├── components (组件)
          ├── layout
              ├── Header.vue
              └── Index.vue
          ├── modules (通用组件)
              ├── Panination.vue
              ├── RichText.vue
              ├── index.js
              ...
      ├── pages (页面级组件)
          └── display
              ├── List.vue
              └── Detail.vue
      ├── router (路由配置)
          ├── routes
              └── display.js
          └── index.js
      ├── utils (工具库)
      ├── App.vue
      └── main.js

项目搭建：

初始化Vue项目及启动：

vue init webpack manage-news
cd manage-news && npm i
npm run dev

启动express应用(自定义服务命令)

npm run server

Note:

1. express目录下文件由expres应用生成器生成
2. 使用nodemon包做了express应用热更新处理（内容更改不需重启，仍需刷新）

TODOLIST

查询列表不需要正文 修改新闻时需更新静态文件