系统分为两端,分别实现。

管理员端:

  功能 :个人信息,设置,发布随笔,随笔列表,删除随笔,查找,文章 等。

  技术点:Boostrap + AdminLTE;

      基于nodejs 实现的express 框架;

      MongoDB数据库;

      Mongoose 模块,操作数据库。

用户端:

  功能:浏览随笔列表,查看随笔,文章类似,评论,点赞 等;

  技术点:HTML + CSS + javascript 完成用户端页面及交互逻辑(使用博客模板);

      jquery 实现DOM操作,Ajax 数据对接。

博客系统目标拆分实现

  1:实现“用户访问接口,给用户返回一个HTML页面”:

  (1)新建blog项目,

  (2)在项目路径下,cmd 执行 npm init  进行项目初始化。

  (3)执行 npm install express --save  z安装express 框架。

  (4)在项目文件下新建app.js 文件,并在其中引入express模块。

  (5)在 app.js 中使用express 提供的方法,开启服务,监听前端请求,并作出响应。

  2:实现“用户访问接口,返回一个带样式的HTML页面”:

  (1)在 app.js 中配置静态资源托管路径

    app.use('/pub',express.static(__dirname+'/public'));

  (2)在html 页面中通过配置的路径访问对应资源

    <link rel="stylesheet" href="/pub/css/index.css">

  3:在前端渲染出来的html中,加入文章列表的数据

  (1)后端添加一个 /list 接口,用来给用户返回html 结构。

app.get('/list',function (req,res) {  //只负责渲染文章列表的页面结构
res.sendFile(__dirname+'/views/list.html');
})

  (2)后端再添加一个  /list/getdata ,用以返回文章数据

var listD = require('./data/listData');
app.get('/list/getdata',function (req,res) {
res.send(listD);
})

  (3)前端通过ajax请求 /list/getdata接口,并拿到json数据包,通过dom操作嵌入html中。(略)

  

  下节将使用模板引擎来拆分代码和渲染数据。

基于 node 搭建博客系统(一)的更多相关文章

  1. 基于Hexo搭建博客并部署到Github Pages

    基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...

  2. Django快速搭建博客系统

    Django快速搭建博客系统 一.开发环境 Windows 7(64bit) python 3.6   https://www.python.org/ Django 2.0  https://www. ...

  3. day14搭建博客系统项目

    day14搭建博客系统项目 1.下载代码包 [root@web02 opt]# git clone https://gitee.com/lylinux/DjangoBlog.git 2.使用pid安装 ...

  4. 基于HTML,css,jQuery,JavaScript,MySQL搭建博客系统

    一.登陆注册 二.登录验证码相关 三.博客首页显示相关 四.当前用户的家目录显示 五.点赞以及取消 六.父评论以及子评论操作 七.后台管理首页 八.文章的操作(增.删,改) 九.文件上传问题 十.me ...

  5. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  6. 从零开始,搭建博客系统MVC5+EF6搭建框架(1),EF Code frist、实现泛型数据仓储以及业务逻辑

    前言      从上篇30岁找份程序员的工作(伪程序员的独白),文章开始,我说过我要用我自学的技术,来搭建一个博客系统,也希望大家给点意见,另外我很感谢博客园的各位朋友们,对我那篇算是自我阶段总结文章 ...

  7. 一个 Vue + Node + MongoDB 博客系统

    源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...

  8. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  9. 从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

随机推荐

  1. 3-1 vue生命周期

    Vue实例生命周期函数 ================================================================== ③-④当beforeMount这个函数执行 ...

  2. 通过Postman进行post请求时传递X-XSRF-TOKEN

    前言介绍 这段时间一个项目后端用的是laravel.在写API接口时通过Postman6进行测试.但是在测试后形式的接口时laravel自带了CSRF验证机制.这就很尴尬了... 所以我们的目的在使用 ...

  3. Java程序员如何运用所掌握的技术构建一个完整的业务架构

    1.通用架构概述 创业之初,我们往往会为了快速迭代出产品,而选择最简单的技术架构,比如LAMP架构,SSH三层架构.这些架构可以适应初期业务的快速发展,但是,随着业务变得越来越复杂,我们会发现这些架构 ...

  4. Eclipse开发环境debug模式调试断点从jar跳到源码

    Eclipse开发环境debug模式调试断点从jar跳到源码 说明:本案例使用jsch-0.1.54.jar和源码做test,项目分成两个,一个是jsch的源码,另一个是测试案例 一.下载JSch.的 ...

  5. Maven项目打包成可执行Jar文件

    在使用Maven完成项目以后,如果需要打包成可执行的Jar文件,我们通过eclipse的导出很麻烦,还得指定入口文件的位置,还得说明依赖的jar包,既然都使用Maven了,很重要的一个目的就是让这些繁 ...

  6. MongoDB 系列文章

    MongoDB 系列文章 本文的内容是基于 MongoDB 4.0 的. 参考于 MongoDB 4.0 官方文档. 搭建 MongoDB从搭建到优化 MongoDB-副本集搭建与管理 管理 Mong ...

  7. ProxySQL Cluster 高可用集群环境部署记录

    ProxySQL在早期版本若需要做高可用,需要搭建两个实例,进行冗余.但两个ProxySQL实例之间的数据并不能共通,在主实例上配置后,仍需要在备用节点上进行配置,对管理来说非常不方便.但是Proxy ...

  8. centos适用的国内yum源:网易、搜狐

    默认的yum源是centos官网的,速度慢是不用说了.所以使用yum安装东西之前需要把yum源改为国内的.参考 http://mirrors.163.com/.help/centos.html 和 h ...

  9. .Net Core缓存组件(Redis)源码解析

    上一篇文章已经介绍了MemoryCache,MemoryCache存储的数据类型是Object,也说了Redis支持五中数据类型的存储,但是微软的Redis缓存组件只实现了Hash类型的存储.在分析源 ...

  10. Jenkins持续集成学习-Windows环境进行.Net开发2

    目录 Jenkins持续集成学习-Windows环境进行.Net开发2 目录 前言 目标 使用 .Net Stardard 单元测试 流程 手动执行单元测试 自动执行单元测试 单元测试报告 上传Nug ...