Nodejs之使用express框架搭建WEB应用

更新日期: 2019-07-18 阅读: 2.7k 标签: 框架

首先创建一个index.js,在里面引入相关的中间件,如果没有这些中间件,则需要在nodejs里进入index.js所在的文件夹安装这些模块,安装命令:npm install express express-static cookie cookie-session body-parser multer mysql,并且创建好www文件夹和views文件夹,www文件夹放了所有要读取的css.js.img等,views文件夹下放了所有要渲染的ejs模板

const express = require("express");//框架
const expressStatic = require("express-static");//指定路径读取静态文件
const cookie = require("cookie");//解析cookie数据
const cookieSession = require(‘cookie-session‘);//基于cookie的session数据,保存在request.session
const bodyParser = require("body-parser");//解析post数据,保存在request.body中
const consolite = require("consolite");//模板适配器
const multer = require("multer");//文件上传
const mysql = require("mysql");//数据库
const db = mysql.createPool({//建立数据库连接池
  host:‘localhost‘,//主机地址
  name:‘root‘,//数据库账号
  password:‘q791469353‘//数据库密码
  database:‘officialwebsite‘//数据库名称
});
//第一步,搭建服务器并监听端口
var app = express();
app.listen(8080);//这里监听端口8080

//第二步,指定路径读取静态文件
app.use(expressStatic(‘./www‘));//这里指定在./www下读取所有静态文件

//第三步 ,初始化session
app.use(cookieParser(‘asdhkj‘));//将cookie数据解析
var array = [];//随机生成数组用于加密session
for(var i=0;i<1000;i++){
    array.push(Math.random());
}
app.user(cookieSession({
     name:‘session名称‘,
     keys:array,//keys表示session加密的字符
     maxAge:5*60*1000//设置session的有效时间,以毫秒为单位
}));

//第四步,解析post传过来的数据,保存在request.body中,get方法express框架将数据保存在了request.query中
app.use(bodyParser.urlencoded({extend:false}));
//第五步,文件上传数据解析
app.use(multer({dest:“保存文件上传的路径”}).any());//any()方法表示接收上传任何类型的文件
//第六步,适配模板
app.set(‘"views engine","text/html");//适配模板引擎后将其识别为html文件
app.set("views","./views");//指定模板在views文件夹下面,该文件夹下面以ejs为结尾的模板,其中语法:<% js代码 %>表示执行js代码但不输出, <%= js代码 %>表示执行js代码并输出  ,<%- js代码%>表示转义输出js代码 ,<% include ‘其他模板路径‘%>表示在该模板中的该段引入模板的代码
app.engine("html",consolite.ejs);//使用ejs模板引擎=

//以上是应用搭建的部署,接下来对请求做处理
app.get("/",(request,response)=>{//表示访问localhost:8080/时做出的响应,request表示浏览传输过来的数据,response表示服务器响应给浏览器的数据
  response.render("index.ejs",{});//表示渲染index,ejs模板,并传一个空的对象给该模板
});
app.get("/sign_in",(request,response)=>{
  var name = request.query.name;//获取get方法传过来的数据
  db.query(`SELECT * FROM xxx表 WHERE 字段 = ${name}`,(err,data)=>{//对数据库进行查询,参数为SQL语句,${变量}表示在该字符串中使用该变量,此时字符串应为反双引号:``
    //如果出现错误,则err不是空的对象,否则为空对象,并且查找到的数据在data中
    if(err) throw err;
    else{
      res.render("sign-in.ejs",{data:data});//给模板传入找到的data数据
    }
  });
});
app.post(‘/sign-up‘,(request,response)=>{
  var post = request.body;//获取post传过来的数据
  if(post.name == xx){
    response.send(‘xxx‘);//代码执行成功后,给前端调用ajax方法的回调函数传递参数
};

app.get(‘/test‘,(request,response,next)=>{//以test为例,用next()方法渲染test.ejs模板
  if(request.query.name == ‘xxxx‘){
  next();//执行下一个相同请求的函数
}
app.get(‘/test‘,(request,response)=>{
  render(‘/test.ejs‘,{});
});
});
});


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/4797

相关推荐

Vue适用于移动端的ui框架

Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用

为什么用vue,而不用Jquery了?

在没有任何前端框架之前,我们写代码,只能用原生的JS,进行数据的处理,DOM的操作,譬如对一个id 为txtName 的文本框进行赋值,只不过用原生实现的代码比较多,开发起来慢啊,在这个时间就是金钱的年代,显然不是很好的方式。

Angular、Vue、React 和前端的未来

越来越多的人开始站队 Angular、Vue、React,仅仅围绕这些库或者框架进行前端技术讨论,这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来,希望可以贡献微薄的力量,消除一些我个人认为的前端社区不太好的风气。

常用的十大 NodeJS 框架

Node.js 是基于 Chrome V8 javascript 引擎构建的开源、跨平台运行时环境。事件驱动的非阻塞I/O 模型使,NodeJS 能开发极其轻便且高效的 Web 应用程序。客户端 和 服务端 脚本中使用相同的语言

三种Js深度学习框架介绍

谈到机器学习,我们脑海首先蹦出的编程语言是什么?一定是python。其实除了python,Javascript也是不错的选择。都说现在是大前端时代,从移动开发、服务器端

JavaScript 框架的探索与变迁

近几年可谓是 JavaScript 的大爆炸纪元,各种框架类库层出不穷,它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM,到 BackboneJS、Dojo 提供监听器的形式,在到 Ember.js、AngularJS 数据绑定的理念,再到现在的 React、Vue 虚拟 DOM 的思想。

最受程序员欢迎的20 个CSS框架

本文为大家搜罗了 20 款截至目前最受程序员欢迎的前端CSS框架,其中有的霸榜已久,也有不少后起之秀,有的是单纯的 CSS 框架,也有的结合了 JavaScript 以提供更丰富的功能

在Vue框架下使用Fullcalendar

Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar(v3)的使用。今天我们来看看如何在Vue框架下使用Fullcalendar。

Ionic 框架宣布 2019 年将正式支持 Vue 和 React

Ionic 是一个高级的 HTML5 移动端应用框架,也是一个开发混合移动应用的前端框架,旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 基于 Angular 语法,之前一直不支持 Vue 和 React 。

前端框架选型

有一个流传较广的笑话,一个人在stackoverflow中提了一个问题,如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件,jQuery插件可以做任何事情。 历史总是在重演,以前是jQuery,现在可能是react或vue。不同的框架有不同的应用场景,杀鸡不要用牛刀

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!