详解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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
javascript 实现map集合
Apr 03 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
浅谈Vue.js
Mar 02 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
FCK调用方法..
2006/12/21 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python 排序算法总结及实例详解
2016/09/28 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
简单了解python模块概念
2018/01/11 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
幼儿教师自我鉴定
2013/11/02 职场文书
会计核算科岗位职责
2014/03/19 职场文书
小学家长评语大全
2014/04/16 职场文书
文化产业实施方案
2014/06/07 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
生日宴会祝酒词
2015/08/10 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android