nodejs-express4-ejs搭建及路由简单配置

环境

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登录页面路由的配置

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>

<!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;

基本完成了，可以试试~

原文链接：https://blog.csdn.net/fasdfdssdf/article/details/98965850

你可能也喜欢