基于 node 搭建博客系统(一)
系统分为两端,分别实现。
管理员端:
功能 :个人信息,设置,发布随笔,随笔列表,删除随笔,查找,文章 等。
技术点: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 搭建博客系统(一)的更多相关文章
- 基于Hexo搭建博客并部署到Github Pages
基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...
- Django快速搭建博客系统
Django快速搭建博客系统 一.开发环境 Windows 7(64bit) python 3.6 https://www.python.org/ Django 2.0 https://www. ...
- day14搭建博客系统项目
day14搭建博客系统项目 1.下载代码包 [root@web02 opt]# git clone https://gitee.com/lylinux/DjangoBlog.git 2.使用pid安装 ...
- 基于HTML,css,jQuery,JavaScript,MySQL搭建博客系统
一.登陆注册 二.登录验证码相关 三.博客首页显示相关 四.当前用户的家目录显示 五.点赞以及取消 六.父评论以及子评论操作 七.后台管理首页 八.文章的操作(增.删,改) 九.文件上传问题 十.me ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(1),EF Code frist、实现泛型数据仓储以及业务逻辑
前言 从上篇30岁找份程序员的工作(伪程序员的独白),文章开始,我说过我要用我自学的技术,来搭建一个博客系统,也希望大家给点意见,另外我很感谢博客园的各位朋友们,对我那篇算是自我阶段总结文章 ...
- 一个 Vue + Node + MongoDB 博客系统
源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文
一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...
随机推荐
- enumerate使用
# enumerate读取文件import enumfor index, line in enumerate(open('C:\\Users\\CTO\\Desktop\\spider\\douban ...
- Http请求-get和post的区别
GET和POST是HTTP请求的两种基本方法. 最直观的区别就是GET把参数包含在URL中,以?的方式来进行拼接,POST通过request body传递参数.并且GET请求在URL中传送的参数是有长 ...
- 你(可能)不知道的web api
你(可能)不知道的web api 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍 ...
- Xamarin.Android 调用手机拍照功能
最近开发Android遇到了调用本地拍照功能,于是在网上搜了一些方法,加上自己理解的注释,在这儿记录下来省的下次用时候找不到,同事也给正在寻找调用本地拍照功能的小伙伴一些帮助~ 实现思路:首先加载-- ...
- 《Kubernetes权威指南》——网络原理
1 Kubernetes网络模型 基本原则:每个Pod都拥有一个独立IP,而且假定所有Pod都在一个可以直接连通的.扁平的网络空间中. 基于基本原则,用户不需要额外考虑如何建立Pod之间的连接,也不需 ...
- Eureka单机高可用伪集群配置
Eureka Server高可用集群理论上来讲,因为服务消费者本地缓存了服务提供者的地址,即使Eureka Server宕机,也不会影响服务之间的调用,但是一旦新服务上线,已经缓存在本地的服务提供者不 ...
- 【详解】换一个角度看Socket的数据读写
前言 以前对IO.NIO还算了解,也写过Netty的项目.但是对底层的数据传递不是很了解,一直存有这方面的疑惑.但是由于有其他事情就被打断了.前阵子因为想要了解volatile关键字的原理,学习了下J ...
- Mysql半同步复制模式说明及配置示例 - 运维小结
MySQL主从复制包括异步模式.半同步模式.GTID模式以及多源复制模式,默认是异步模式 (如之前详细介绍的mysql主从复制).所谓异步模式指的是MySQL 主服务器上I/O thread 线程将二 ...
- PM2来部署nodejs服务器永久开启
pm2 日常使用 1. pm2 是什么? 日常开发中需要启动一个node项目,需要用npm run …,,如果终端被关掉,程序也就自动停止,有时候几个项目一起跑起来,好几个终端开着,个人不太喜欢, ...
- Java关键字(一)——instanceof
instanceof 严格来说是Java中的一个双目运算符,用来测试一个对象是否为一个类的实例,用法为: boolean result = obj instanceof Class 其中 obj 为一 ...