系统说明

835854385
295 阅读4分钟

系统说明

系统分为三个模块

  1. nodejs服务端 使用express框架 mongodb数据库 ，实现数据的增删改查，功能实现 ，前端网站渲染 ，后端管理平台渲染
  2. 网站前端 使用vue-cli 开发的单页应用 包括
      1. 用户登录、注册功能。未登录的用户不能进行评论，留言操作
      1. 文章分类列表，内容列表，内容详情，评论列表，添加评论功能
      1. 视频列表，内容详情，视频播放功能
      1. 留言板在线留言，查看所有留言功能
  3. 网站管理平台 使用vue-cli+elementui 开发的单页应用 包括
      1. 管理员登录，非管理员用户不具备操作数据权限
      1. 首页文章统计图展示点击量排行，公用页面整体框架
      1. 用户管理- 包括用户的列表展示， 删除
      1. 文章管理- 包括新增文章 文章列表 查看详情编辑 删除 文章分类管理操作
      1. 视频管理- 包括新增视频，编辑视频，删除视频，查看视频列表操作
      1. 留言管理- 包括文章评论查看，删除，在线留言查看，回复功能

nodejs服务端

服务端采用以nodejs为基础的express框架,mvc开发的模式,数据库采用用mongodb，数据库操作采用mongoose插件，方便处理数据入库 项目使用express项目脚手架生成，包含路由模块，模板渲染模块 整理架构为models，mongoose生成的数据表结构与模型

1. 数据模型展示

文章数据结构
type: String,  //文章类型字段
title: String, //文章标题
introduce: String, //文章介绍
mdContent: String,//文章内容源数据
htmlContent: String,//文章内容html数据
poster: String,//文章海报封面图
pv: {//文章点击量
    type: Number,
    default: 0
},
category: {//文章分类
    type: ObjectId,
    ref: 'Category'
},
meta: {//每个模型的单条数据创建的时间和修改时间
    createdAt: {
        type: Date,
        default: Date.now()
    }

视频数据结构
type: String,  //文章类型字段
title: String, //视频标题
introduce: String, //视频介绍
mdContent: String,//视频内容源数据
htmlContent: String,//视频内容html数据
poster: String,//视频文件
pv: {//视频点击量
    type: Number,
    default: 0
},
meta: {//每个模型的单条数据创建的时间和修改时间
    createdAt: {
        type: Date,
        default: Date.now()
    }，
      updatedAt: {
        type: Date,
        default: Date.now()
    }

文章分类模块
name: String,分类名称
articles: [{文章列表
    type: ObjectId,
    ref: 'Article'
}],
path: String,路径
visible: {是否可见
    type: Boolean,
    default: true
},
meta: {同上
    createdAt: {
        type: Date,
        defalut: Date.now()
    },
    updatedAt: {
        type: Date,
        defalut: Date.now()
    }
}

评论模块
txt: String,评论内容
auth:String,作者
article: {文章id
    type: ObjectId,
    ref: 'Article'
},
meta: {同上
    createdAt: {
        type: Date,
        default: Date.now()
    }
}

留言模块
    txt: String, // 留言内容
    auth:String, // 作者
    replay: String, // 回复内容
    meta: {
      craetedAt: { // 留言时间
        type: Date,
        default: Date.now()
      },
      updatedAt: { // 回复时间
        type: Date,
        default: Date.now()
      }
    }

用户模块
account: {登录用户名
    unique: true,
    type: String
},
// username: String,
password: String,密码
pwdKey: String,密钥
info: {用户信息
    type: ObjectId,
    ref: 'Info'
},
role: {用户权限
    type: Number,
    default: 0
},
/* 
    0: normal 普通用户
    1: verify 邮件激活后的用户
    2: professonal 高级用户

    >10: admin 管理员
    >50: super admin 超级管理员(开发时候用)
*/
meta: {同上
    createAt: {
        type: Date,
        default: Date.now()
    },
    updateAt: {
        type: Date,
        default: Date.now()
    }
}

2.路由模块

app.use('/', index) 根目录 访问/时候为前台网站 访问/admin时候为后台管理网站
app.use('/users', users) 后台用户模块 包括用户新增 删除 权限设置 资料更新功能具体与数据库交互实现
app.use('/user', user)前台用户模块 用户注册 登录 退出功能实现
app.use('/articles', articles) 后台文章管理模块 新增文章 修改文章 删除文章具体实现
app.use('/videos', articles) 后台视频管理模块 新增修改删除具体实现
app.use('/comment', comment) 评论模块 包括列表查询 删除 
app.use('/categories', categories) 分类模块 包括列表展示 新增 删除 打开关闭是否显示
app.use('/feUser', feUser) 用户信息模块 包括用户判断是否登录 用户资料获取等 供前台使用
app.use('/feCategories', feCategories) 获取分类接口 供前台使用
app.use('/feArticles', feArticles) 获取文章接口 供前台使用
app.use('/feVideos', feVideos) 获取视频接口 供前台使用

3.网站前后台界面

服务端网站前端 & 后端项目实现,两个html文件中分别引用了对应的静态资源 （包括css样式 js脚本等 vue项目打包生成）,在public中 ,后端管理系统是对应static目录 ,前台用户网站对应webStatic目录

前后台打包后的项目对应的使用

静态资源的位置

前端项目

项目源码为src目录中的
assets -图片资源
components – vue组件和页面
router – 路由配置文件
sass – 样式文件
store – 全局公用状态
App.vue网站入口组件
Main.js 网站脚本入口文件
具体实现在代码中有注释

后端管理项目

类似前端项目 页面组件载views目录中对应的文章，留言，评论，用户，视频模块

项目启动部署

1. 安装nodejs 配置cnpm
2. 安装mongodb 启动mongodb服务 导入初始数据
3. http://blog.csdn.net/qq_27093465/article/details/54574948
4. 安装服务端项目依赖 cnpm i
5. 前端跟后端网站项目都使用vuecli打包过了 集成在后端项目中 所以不需要启动了 源码如果修改需要重新集成
6. 将打包好的js和css复制进去  修改views中的admin.jade web.jade文件引用
avatar
文章
阅读
粉丝