详解node+express+ejs+bootstrap构建项目


Posted in Javascript onSeptember 27, 2017

node+express+ejs+bootstrap是前端常用的项目结构,分享给大家,具体如下:

您可以通过node-express_3water.rar 来克隆我创建好的项目结构,也可以通过下面的方式一步一步手动创建项目。

第一步 安装

新建一个项目文件夹,命名为MyProject

然后在文件夹里按住Shift点击鼠标右键,选择在此处打开命令窗口。

在打开的窗口中输入npm install express和npm install ejs去安装他们和他们所需要的依赖。安装完之后目录中会多出一个node_modules文件夹。

第二步 构建目录

新建routes文件夹,用于存放各页面的路由文件

例如Demo中的index.js文件

exports.index = function(req,res){
 res.render("index",{title:'首页'});
}

然后新建static文件夹,用于存放页面框架

例如Demo中的bootstrap框架

接着再创建一个views文件夹,用于存放页面文件

例如Demo中的index.ejs文件

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <title><%=title%></title>

  <!-- Bootstrap -->
  <link href="static/bootstrapcss/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
   <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1>你好,世界!</h1>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="static/bootstrapcss/js/bootstrap.min.js"></script>
 </body>
</html>

最后再创建一个app.js文件,也就是程序的入口文件。

var express = require("express");
var routes = require("./routes");
var app = express();

app.set("view engine",'ejs');

app.get("/",routes.index);

app.listen(8989);
console.log("espress start");

同样的我们在MyProject目录调出命令行工具,并通过node app.js命令来运行程序

这时我们在网页端就可以通过输入127.0.0.1:8989来打开网站了

详解node+express+ejs+bootstrap构建项目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
Three.js基础学习之场景对象
Sep 27 #Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 #Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 #Javascript
基于复选框demo(分享)
Sep 27 #Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 #Javascript
angular内置provider之$compileProvider详解
Sep 27 #Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 #Javascript
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
基于python 二维数组及画图的实例详解
2018/04/03 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python实现抖音点赞功能
2019/04/07 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python如何从键盘获取输入实例
2020/06/18 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
编辑找工作求职信范文
2013/12/16 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
房产买卖委托公证书
2014/04/04 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Python超详细分步解析随机漫步
2022/03/17 Python
vue router 动态路由清除方式
2022/05/25 Vue.js