环境
wid7 64bit
node环境(网址:http://nodejs.cn)
首先,我们需要安装express库,当前应该是4点几版本了
Express需要全局安装的,项目构建器模块是合并在Express项目中的,后来这个构建器被拆分出来,独立成为了一个项目express-generator,现在我们只需要全局安装express-generator项目就行了。
~ npm install -g express-generator@4 #全局安装-g
安装好express-generator包后,我们在命令行就可以使用express命令了。
~ express -V # 检查express的版本
4.11.2
~ express -h # 检查看express的帮助命令
Usage: express [options] [dir]
Options:
-h, --help output usage information
-V, --version output the version number
-e, --ejs add ejs engine support (defaults to jade)
--hbs add handlebars engine support
-H, --hogan add hogan.js engine support
-c, --css add stylesheet support (less|stylus|compass) (defaults to plain css)
--git add .gitignore
-f, --force force on non-empty directory
接下来,我们使用express的命令,来创建项目了。
cd C:\Users\Administrator\Desktop\nodeProject> # 进入工作目录
C:\Users\Administrator\Desktop\nodeProject>express nodejs_demo # 创建项目
下载依赖
C:\Users\Administrator\Desktop\nodeProject>cd nodejs-demo && npm install
启动项目。
这时如果出现报错,类似
Cannot find module ‘http-errors’
Cannot find module ‘ejs’
直接安装对应的模块就好了,安装命令如下:
npm install http-errors
还有express会默认是jade,如果要使用ejs,执行如下命令
express -e nodejs_demo
再次启动项目。
D:\workspace\javascript\nodejs-demo>npm start
> express4-demo@0.0.0 start D:\workspace\javascript\nodejs-demo
> node ./bin/www
访问 http://localhost:3000
在
网上找到了一个自启动的方法:
安装两个依赖包即可
1: opn 用于打开浏览器
2: address 用户查找 ip 地址
npm install -D opn
npm install -D address
然后在 bin/www 中的 监听结束后, 输入以下代码
var opn = require('opn');
var address = require('address');
opn("http://"+address.ip()+":"+port);
然后重启一下就行了
-
目录结构简单介绍
bin, 存放启动项目的脚本文件
node_modules, 存放所有的项目依赖库。
public,静态文件(css,js,img)
routes,路由文件(MVC中的C,controller)
views,页面文件(Ejs模板)
package.json,项目依赖配置及开发者信息
app.js,应用核心配置文件
更改把ejs文件更改为html
把里面的文件后缀改为html,包括error.ejs
然后在app.js,更改为如下:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');
app.engine('.html', ejs.__express);
// app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
路由功能
在routes文件夹里面
index.js主要配置
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Index' });
});
module.exports = router;
我们也可以新建一个路由配置,login登录页面路由的配置
login.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
// res.send('respond with a resource');
res.render('login', { title: '登录' });
});
module.exports = router;
index.html设置跳转
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
<script src="/javascripts/jQueryv3.4.1.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p><a href="/login">登陆</a></p>
</body>
</html>
login.html,在action上绑定一个“/dologin”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
<script src="/javascripts/jQueryv3.4.1.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<form class="form-horizontal" method="post" action="/dologin">
<fieldset>
<legend>用户登陆</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<br/>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陆</button>
<a href="/" class="btn btn-primary">返回</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
在routes新建dologin.js,用 req.body拿表单的数据,redirect好像不能传值哦
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.post('/', function(req, res, next) {
// console.log(req);
var user = {
username: 'admin',
password: 'admin'
}
if (req.body.username === user.username && req.body.password === user.password) {
res.redirect('/home');
}
res.redirect('/login', { title: '登录' });
});
module.exports = router;
再新建home.html
<!DOCTYPE html>
<html>
<head>
<title>个人中心</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Welcome <%= user.username %>, 欢迎登陆!!</h1>
<a claa="btn" href="/logout">退出</a>
</body>
</html>
配置home.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
// res.send('respond with a resource');
var user={
username:'admin',
password:'admin'
}
res.render('home', { title: 'Home',user: user});
});
module.exports = router;
基本完成了,可以试试~