用Express搭建 blog (一)
Info
公司马上要举行 hack day 了,这次决定和小伙伴用 Express 作为框架来搭建我们的应用,所以昨天搭出来UI后,今天开始系统的学习下 Express。
Start
首先是express的全局设置。
1 |
sudo npm install -g express |
接着我们试着用express搭建一个简单的blog程序
在work path 运行命令
1 |
express -e ejs blog |
可以看到express已经帮你创建了一系列的模板程序。接着进入blog目录安装ejs等相关依赖。
1 |
cd blog && npm install |
运行
1 |
node app |
并访问http://localhost:3000/ ,简单的hello world 程序已经生成。
下面来看下程序的整个结构,运行command
1 |
tree -I node* |
express的模板程序结构看起来和rails的结构很相像。
1 2 3 4 5 6 7 8 9 10 11 12 |
├── app.js ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── user.js └── views└── index.ejs |
Blog Design
对express的模板程序有了基本概念后,我们开始来实现一个稍微复杂的blog。
blog 需要实现下面的功能。
1 2 3 4 5 |
/:首页 /login:登录 /reg:注册 /post:发表文章 /logout:登出 |
blog 的数据存储采用mongodb。
Improve
首先我门先简单的改进下我们当前的blog程序。
首先是重写默认的路由
在 app.js 里面我们可以看到以下两行语句。
1 2 |
app.get('/', routes.index); app.get('/users', user.list); |
我们把这部分代码移到 routes/index.js 使代码结构看起来更为清晰。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
module.exports = function(app){ app.get('/',function(req,res){res.render('index', { title: '主页' });});app.get('/reg',function(req,res){res.render('reg', { title: '注册' });});app.post('/reg',function(req,res){});app.get('/login',function(req,res){res.render('login', { title: '登录' });});app.post('/login',function(req,res){});app.get('/logout',function(req,res){});app.get('/post',function(req,res){res.render('post', { title: '发表' });});app.post('/post',function(req,res){}); }; |
同时在 app.js里将上面两行代码替换成。
1 |
routes(app); |
Ok,接下来我们添加相应的ejs,实现后的前端界面结构应该如图所示。
1 2 3 4 5 6 |
└── views├── footer.ejs├── header.ejs├── index.ejs├── login.ejs└── reg.ejs |
footer.ejs
1 2 3 |
</article> </body> </html> |
header.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Blog</title> <link rel="stylesheet" href="stylesheets/style.css"> </head> <body><header> <h1><%= title %></h1> </header><nav> <span><a title="主页" href="/">home</a></span> <span><a title="登录" href="/login">login</a></span> <span><a title="注册" href="/reg">register</a></span> </nav> <article> |
index.ejs
1 2 3 |
<%- include header %> 这是主页 <%- include footer %> |
login.ejs
1 2 3 4 5 6 7 |
<%- include header %> <form method="post"> 用户名:<input type="text" name="username" /><br /> 密码: <input type="password" name="password" /><br /><input type="submit" value="登录" /> </form> <%- include footer %> |
reg.ejs
1 2 3 4 5 6 7 8 |
<%- include header %> <form method="post"> 用户名:<input type="text" name="username" /><br /> 密码: <input type="password" name="password" /><br /> 确认密码:<input type="password" name="password-repeat" /><br /><input type="submit" value="注册" /> </form> <%- include footer %> |
上面所做的工作简单的概括来说就是把整个 blog 的 header 和 footer 分离开,并按此建立相应的登陆,注册页面。
可以通过访问http://localhost:3000/ 来查看当前主页。
mongo db
首先是安装。mac下安装mongodb很简单。
1 2 |
brew update brew install mongodb |
测试
1 2 3 |
mongo > db.test.save({a:1}) > db.test.find() |
mongo db装上后 开始安装node js的依赖。
在 package.json 中加入。
1 2 |
"mongodb":"*", "connect-mongo":"*" |
运行
1 |
npm install |
安装完成后,我们就能够在程序中对mongo db进行操作了。
我们在blog下面新建 settings.js 用来存储我们blog程序的相关配置。
1 2 3 4 5 |
module.exports = { cookieSecret: 'myblog', db: 'blog', host: 'localhost' }; |
创建 models 目录并新建 js 文件 db.js 用来操作 db
1 2 3 4 5 |
var settings = require('../settings'),Db = require('mongodb').Db,Connection = require('mongodb').Connection,Server = require('mongodb').Server; module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT, {})); |
而Package connect-mongo 是用来存储会话信息到数据库。
在 app.js 中添加。
1 2 |
var MongoStore = require('connect-mongo')(express); var settings = require('./settings'); |
同时在 app.use(express.methodOverride()) 后面添加
1 2 3 4 5 6 7 |
app.use(express.cookieParser()); app.use(express.session({ secret: settings.cookieSecret, store: new MongoStore({ db: settings.db }) })); |
其中 express.cookieParser() 是 Cookie 解析的中间件。express.session() 则提供会话支持,设置它的 store 参数为 MongoStore 实例,把会话信息存储到数据库中,以避免丢失。
在后面的小节中,我们可以通过 req.session 获取当前用户的会话对象,以维护用户相关的信息。”
至此,数据库的配置工作完成了,后面我们就可以用数据库了。
结论
Express的代码结构看起来还是蛮清晰的,npm上的第三方的资源也很丰富。
由于本人是Express的初学者,所以整个 blog 的过程也是完全参考 【一起学node.js (一)】用node+express搭建多人博客 这篇blog的内容,在此也感谢下原作者。
参考
【一起学node.js (一)】用node+express搭建多人博客
转载于:https://www.cnblogs.com/nateriver520/p/3404507.html
用Express搭建 blog (一)相关推荐
- Hugo快速搭建Blog
2019独角兽企业重金招聘Python工程师标准>>> Hugo快速搭建Blog 2017-07-03 14:27 by 虫师, 2362 阅读, 0 评论, 收藏, 编辑 以往我们 ...
- java sqlite mybatis_Spring boot + Mybatis + SQLite 搭建blog API
Spring boot + Mybatis + SQLite 搭建blog API 一.准备环境 二.创建一个SpringBoot项目 在此我就不再演示如何创建SpringBoot项目了,需要的请看[ ...
- mysql第五章项目二_Todo List:Node+Express 搭建服务端毗邻Mysql – 第五章(第1节)
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 万丈高楼平地起,我们的Todo List项目也是越来越结实了.Todo List的前面4章内容都是在为Client端开发, ...
- 使用Hexo 搭建 blog过程
教你如何一步一步使用hexo搭建blog. 1. 第一步安装 Node.js 下载地址 选择第一个稳定版一路next,不过在Custom Setup这一步记得选Add to PATH ,这样你就不用自 ...
- 手把手教你用express搭建个人博客(二)
转自http://www.zhentaoo.com/program/one?id=58a32067aa82ab69510c26be 上篇说到了如何使用express生成器快速生成一个node项目,如果 ...
- python搭建博客系统_Mezzanine 搭建 BLOG 系统
Mezzanine 搭建 BLOG 系统 1. 创建 python 虚拟环境 查看虚拟环境列表: conda info --envs 创建虚拟环境 mezzenv: conda create -n m ...
- nodejs+express搭建小程序后台服务器
本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...
- node+express 搭建商城项目(1-项目搭建)
node+express 搭建商城项目(1-项目搭建) 1:下载node 博主已安装了node 版本:v14.14.1node官网:可选择跟博主同版本 2:安装 express 一般选择全局安装: n ...
- node+express 搭建商城项目(2-建立 Mysql链接 完成注册账号接口)
node+express 搭建商城项目(2-操作Mysql完成注册账号接口) 今天我们 用 express 和 mysql 插件完成 mysql数据库的操作 下面开始安装数据库 插件 npm inst ...
最新文章
- 学习不同编程语言的重要性
- devops 成长路线
- Web应用漏洞评估工具Paros
- swift添加下拉刷新_React Native自定义下拉刷新组件
- python的excel数据分析_excel VS python 谁更适合数据分析?
- Unity3dShader_边缘发光效果
- 结构化并发应用程序——任务执行
- 如何看待 70% 的程序员,缺乏数据结构和算法知识?
- FreeEIM 小插件 dwzjzx v2.1001 2013 下载
- Facebook AI何恺明等最新研究MoCo(动量对比学习)第二版,超越Hinton的SimCLR,刷新SOTA准确率...
- 《Design patterns》读书笔记
- 在Leangoo里怎么修改密码?
- html 车牌号输入代码,html中车牌号省份简称输入键盘的示例代码(3)
- 【SqlServer】不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的表进行了更改或者启用了“阻止保存要求重新创建表的更改”选项
- 策略战棋游戏开发计划
- [C#]WPF 3D 绘制一个正方体并调整视场角
- 我把淘宝当副业,一年全款买了房:你看不起的行业,真的很赚钱
- apple登录服务端验证
- DOS运行GHOST加参数
- 浙江省测绘与地理信息局异地备份和容灾项目
热门文章
- 疯狂为《英伟达深度学习学院半日免费初级课程》打Call
- mysql c null_MySQL中NULL字段的比较问题
- php 三色排序,一个数组中只有0,1,2三种元素,要求对这样的数组进行排序,一个数组中只有0,1,2三种元素,要求对这样的数组进行排序,第2章 排序 | | 第17节 三色排序练习题...
- java 所有路径算法_经典算法题:二叉树的所有路径
- 数据库MySQL基础---DDL/DML/DQL
- SpringBoot 中的事务处理 @Transactional
- ROS官网新手级教程总结
- Nginx 错误汇总
- 再次挑戰UCOSII内核源码
- bzoj 1095 捉迷藏