详解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 Prototype 对象扩展
May 15 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
基于JavaScript实现轮播图效果
Jan 02 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实现读取和写入tab分割的文件
2015/06/01 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
js实现登录验证码
2016/12/22 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年党务工作总结
2014/11/25 职场文书
酒会邀请函
2015/01/31 职场文书
大学推普周活动总结
2015/05/07 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016年学校招生广告语
2016/01/28 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
导游词之长城八达岭
2019/09/24 职场文书