搭建个人博客 ( YIDBlog )
(node+express+ejs+node+mongodb+mongoose)
(在这里认为大家已经知道如何用命令行创建node项目了，推荐用WebStorm快速创建)
实现以下简单的功能： (一些详细的表单验证先忽略)
用户注册
用户登录
用户登出
发表文章
编辑文章
删除文章
一. 配置路由
1.将目录下的 app.js 更改如下
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var app = express();
// 设置模板目录
app.set('views', path.join(__dirname, 'views'));
// 设置模板引擎为 ejs
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 设置路由
routes(app);
// catch 404 and forward to
error handler
app.use(function(req, res, next) {
var err = new
Error('
Not Found');
err.status = 404;
next(err);
});
//
error handler
app.use(function(err, req, res, next) {
// set locals, only providing
error in development
res.locals.message = err.message;
res.locals.
error = req.app.get('env') === 'development' ? err : {};
// render the
error page
res.status(err.status || 500);
res.render('
error');
});
app.listen(app.get('post'),function(){
console.log("Express server listening on port: " + 3000);
});
module.exports = app;
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2. 将routes下的index.js更改如下
module.exports = function(app){
app.get('/',function(req,res,next){
res.render('index',{
title:'首页',
});
}
AI写代码
javascript
运行
1
2
3
4
5
6
3. 在views中的index.ejs，代码如下：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
4. 运行项目，在浏览器输入：http://localhost:3000/
这样我们就很愉快就路由给配置好了。
接下来我们来一起搭建简单的界面，这里我用到bootstrap框架：
我们先在index.js中将要展示的界面进行路由的配置：
module.exports = function(app){
//首页
app.get('/',function(req,res,next){
res.render('index',{
title:'首页',
});
//注册界面
app.get('/reg',function(req,res,next){
res.render('reg',{
title:'注册',
});
//登录
app.get('/login',function(req,res,next){
res.render('login',{
title:'登录',
});
//发表文章
app.get('/post',function(req,res,next){
res.render('post',{
title:'发表文章',
});
}
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
*开始我们的界面设计了，用Ejs模板引擎的<%- include %> 来将相同的部分分离开
创建 header.ejs
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title><%= title %> - Blog</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/jquery.min.js"></script>
</head>
<body>
<nav
class="navbar navbar-inverse"
role="navigation">
<div
class="container">
<div
class="container-fluid">
<div
class="navbar-header">
<a
class="navbar-brand" href="/">YIDBlog</a>
</div>
<a
class="navbar-brand" href="/">首页</a>
<ul
class="nav navbar-nav navbar-right">
<li><a href="/reg"><span
class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="/login"><span
class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
</div>
</div>
</nav>
<div
class="container">
<div
class="col-sm-12">
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
创建 footer.ejs
</div>
</body>
</html>
AI写代码
javascript
运行
1
2
3
创建 首页- index.ejs
<%- include header %>
<form>
<div
class="input-group">
<input type="text"
class="form-control" placeholder="SEARCH" name="keyword">
<span
class="input-group-btn">
<input type="submit" value="搜索"
class="btn btn-default" />
</span>
</div>
</form>
<ul
class="list-group">
<li
class="list-group-item">
<h3><a href="#">学习node.js</a></h3>
<p
class="info">
<span>作者：小蚁</span>
<span>|</span>
<span>日期：2016-12-14</span>
</p>
</li>
<hr>
</ul>
<%- include footer %>
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
首页完成，显示效果如下：
创建 登录界面-login.ejs
<%- include header %>
<form
class="form-horizontal"
role="form" method="POST">
<div
class="form-group">
<label for="firstname"
class="col-sm-2 control-label">用户名</label>
<div
class="col-sm-10">
<input type="text"
class="form-control" name="username" placeholder="输入用户名">
</div>
</div>
<div
class="form-group">
<label for="lastname"
class="col-sm-2 control-label">密码</label>
<div
class="col-sm-10">
<input type="password"
class="form-control" name="password" placeholder="输入密码">
</div>
</div>
<div
class="form-group">
<div
class="col-sm-offset-2 col-sm-10">
<input type="submit"
class="btn btn-default" value="登录" />
</div>
</div>
</form>
<%- include footer %>
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
登录页面 效果如下：
创建 注册界面-reg.ejs
<%- include header %>
<form
class="form-horizontal"
role="form" method="POST">
<div
class="form-group">
<label for="firstname"
class="col-sm-2 control-label">用户名</label>
<div
class="col-sm-10">
<input type="text"
class="form-control" name="username" placeholder="输入用户名">
</div>
</div>
<div
class="form-group">
<label for="lastname"
class="col-sm-2 control-label">密码</label>
<div
class="col-sm-10">
<input type="password"
class="form-control" name="password" placeholder="输入密码">
</div>
</div>
<div
class="form-group">
<label for="lastname"
class="col-sm-2 control-label">重复密码</label>
<div
class="col-sm-10">
<input type="password"
class="form-control" name="password-repeat" placeholder="输入密码">
</div>
</div>
<div
class="form-group">
<label for="lastname"
class="col-sm-2 control-label">邮箱</label>
<div
class="col-sm-10">
<input type="text"
class="form-control" name="email" placeholder="再次输入密码">
</div>
</div>
<div
class="form-group">
<div
class="col-sm-offset-2 col-sm-10">
<input type="submit"
class="btn btn-default" value="完成注册" />
</div>
</div>
</form>
<%- include footer %>
AI写代码
javascript
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
登录页面 效果如下：
创建 发表文章界面-post.ejs
<%- include header %>
<form method="post" enctype="multipart/form-data">
<div
class="form-group">
<label for="name">标题:</label>
<input type="text"
class="form-control" name="title" placeholder="输入标题">
</div>
<div
class="form-group">
<label for="name">文章</label>
<textarea
class="form-control" name="article" rows="8"></textarea>
</div>
<hr />
<input type="hidden" name="pv" value=0 >
<input type="submit" value="发表"
class="btn btn-default"/>
</form>
<%- include footer %>
AI写代码
javascript
运行
本文介绍了在laravel项目中使用zizaco权限组件时遇到的问题及解决方案，主要针对配置文件config/auth.php中指定的Role模型路径不正确的情况。
扫一扫
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
