首先创建一个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‘,{}); }); }); });
越来越多的人开始站队 Angular、Vue、React,仅仅围绕这些库或者框架进行前端技术讨论,这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来,希望可以贡献微薄的力量,消除一些我个人认为的前端社区不太好的风气。
近几年可谓是 JavaScript 的大爆炸纪元,各种框架类库层出不穷,它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM,到 BackboneJS、Dojo 提供监听器的形式,在到 Ember.js、AngularJS 数据绑定的理念,再到现在的 React、Vue 虚拟 DOM 的思想。
新框架(新工具,语言),一、了解概念,把握思路,二、迅速实战,见招拆招,三、深入文档,求人不如求己,四、掌握原理,有恃无恐,五、源码分析,自立门户。如果你已经熟悉一门计算机语言,当再学习其他语言的时候,会发现他们几乎是大同小异,对比着学习,会令你事半功倍。
我曾见过很多很多人盲目地使用(前端)框架,如 React,Angular 或 Vue等等。这些框架提供了许多有意思的东西:它们支持组件化;它们有强大的社区支持;它们有很多(基于框架的)第三方库来解决问题;它们有很多(很好的)第三方组件;它们有浏览器扩展工具来帮助调试;它们适合做单页应用。
Web 技术变化得很快,而最佳技术实践也在不断发展。Uber 的 Web 平台团队开发了 Fusion.js,一个开源的 Web 框架,用于简化 Web 开发,并构建出高性能的轻量级 Web 应用程序。
要使用现代的前端框架,你需要下载开发环境和依赖,编译代码,然后在浏览器上运行。这个是好是坏?究竟是什么导致了这种不必要的复杂性?是因为我们构建的网站太复杂,还是因为框架本身就很复杂?
有一个流传较广的笑话,一个人在stackoverflow中提了一个问题,如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件,jQuery插件可以做任何事情。 历史总是在重演,以前是jQuery,现在可能是react或vue。不同的框架有不同的应用场景,杀鸡不要用牛刀
Web框架(Web framework)是一种开发框架,用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法
Ionic 是一个高级的 HTML5 移动端应用框架,也是一个开发混合移动应用的前端框架,旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 基于 Angular 语法,之前一直不支持 Vue 和 React 。
最近想找一个简单的.Net下的轻量级Web框架,作为用户的本地的一个WebServer,实现同浏览器程序的一些简单交互,并调用本地服务,实现类似浏览器插件的功能。它有如下几点要求:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!