详解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 full screen 全屏显示页面元素的方法
Sep 27 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 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 手机归属地查询 api
2010/02/08 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
用于table内容排序
2006/07/21 Javascript
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
js 居中漂浮广告
2010/03/21 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python字符串替换实例分析
2015/05/11 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python中如何引入第三方模块
2020/05/27 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
人力资源主管职责范本
2014/03/05 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
感谢信的格式
2015/01/21 职场文书
教师工作态度自我评价
2015/03/05 职场文书
乔迁新居祝福语
2019/11/04 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery