详解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 showModalDialog模态对话框使用说明
Dec 31 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
React中的refs的使用教程
Feb 13 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python实现注册登录系统
2017/08/08 Python
5款非常棒的Python工具
2018/01/05 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
详解python中的线程与线程池
2019/05/10 Python
使用python实现滑动验证码功能
2019/08/05 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
乡镇交通安全实施方案
2014/03/29 职场文书
化妆品活动策划方案
2014/05/23 职场文书
教育见习报告范文
2014/11/03 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
P站美图推荐——变身女主角特辑
2022/03/20 日漫