Node应用与知识点在前端的正常工作中，对后端的了解比较少，但是大家应该都知道Node可以用来写后端。本文介绍Node的知名框架Express的基本使用，从应用入手，学习Node。我们先了解一下Node能干什么，再决定要不要学。从两点出发，首先是应用场景：代理服务（用于解决跨域）中间层（用于数据二次处理，流量拦截）Webpack（用于文件内容二次处理）服务端渲染（知所有这些）其次，可以学到什么知识：对后端有基本的介绍，成为懂后端的前端；进一步了解数据传输，深入HTTP和TCP；写一些简单的脚本，学习自动化（偷懒）；如果你对这些优点感兴趣，我们的学习将从下面的例子开始，学习基本的路由和响应数据请求，然后完成一个交互界面（没错，就是前后端联合的界面debuggingatwork），最后我们用Node来解决经典的跨域问题。案例展示：路由选择本案例中我们绘制了四个小花，然后通过不同的路由访问不同状态的小花。如果您的计算机上没有安装Node，则需要安装Node。我们进入一个全新的目录，使用npminit来初始化项目。这一步可以通过回车键完成。您也可以自己自定义一些选项。然后我们使用npminstallexpress--save来安装express。依赖安装完成后，我们在当前文件夹新建一个app.js，准备开始输入我们的内容。我们在app.js中编写如下代码：constexpress=require("express");constapp=express();app.get("/",(req,res)=>{res.end("HelloExpress");});app.listen(8888,()=>{console.log("serverislisteninginhttp://localhost:8888")})在运行代码之前，我们简单分析一下代码：constapp=express();：新建一个express实例，包含express的属性；app.get("/",callback)：express的路由控件，当客户端访问路由时，会执行传入的输入回调函数；res.end("HelloExpress"):响应一个HelloExpress字符串；app.listen(8888,callback)：进程运行在8888端口，监听来自该端口的请求；一切细节都解决了，接下来，我们使用nodeapp.js运行我们的程序：更改并重启服务，更适合在开发阶段使用。控制台将输出消息serverislisteninginhttp://localhost:8888。这时候我们打开浏览器输入http://localhost:8888，可以看到我们的服务响应了一条信息：Howdowedoit?我得到的是app.get("/",callback)执行的回调函数返回的结果，那么回调函数参数中的req和res是什么？本文不作深入解释。感兴趣的童鞋可以看看这篇文章。教你用Node.js实现HTTP协议。这里详细介绍一下req和res的实现。看完之后还可以提高自己对HTTP协议的掌握程度。就算你不明白这些细节，我们也可以继续讲下去，你只需要简单地把res.end()理解为一个向客户端发送数据的API即可。根据这个特征，我们知道如何处理我们的四朵小花。我们需要先定义四个路由，然后每个路由执行不同的回调函数返回对应的小花。Tips：点击下载四朵小花源码，下载源码放在文件夹的static目录下。在constapp=express()下添加一行代码，将我们的static目录变成静态文件目录，可以保证我们的js和css文件能够正确加载，并添加express.static提供一个文件服务器功能，把您的html文件在静态目录中，您可以通过路径访问它！//...//使用/static路径作为我们的静态文件路由，static作为我们的静态文件目录app.use('/static',express.static('static'));接下来我们只需要在访问路由时，将html文件作为响应返回给客户端即可。实际代码如下：constexpress=require("express");constpath=require("path");constapp=express();app.use('/static',express.static('static'));app.get("/",(req,res)=>{res.end("HelloExpress");});//新增4条路由，用于不同状态访问小花app.get("/happy",(req,res)=>{//res.SendFile响应本地文件//path.join用于加入一个path//__dirname为当前文件夹路径，属于Node的全局变量res.sendFile(path.join(__dirname,"./static/happy.html"))})app.get("/crazy",(req,res)=>{res.sendFile(path.join(__dirname,"./static/crazy.html"))})app.get("/sexy",(req,res)=>{res.sendFile(path.join(__dirname,"./static/sexy.html"))})app.get("/cool",(req,res)=>{res.sendFile(path.join(__dirname,"./static/cool.html"))})app.listen(8888,()=>{console.log("serverislisteninginhttp://localhost:8888")})重启服务，分别打开浏览器输入以下四个地址，可以看到四朵不同状态的小花，赶快试试吧！http://localhost:8888/happyhttp://localhost:8888/crazyhttp://localhost:8888/sexyhttp://localhost:8888/coolCase展示：API接口接下来我们实现一个API接口，可以查询页面中的查询数据，根据过滤条件返回相应的查询结果，也就是我们平时配合后台使用的那种接口”，我们将在性能上保持一致。首先，我们使用npminstallaxios-s安装axios来请求第三方链接，第三方数据就会成为我们的数据源。安装完成后，我们引入axios，添加一个route返回接口数据，我们这样定义：//addnewroute/product/listapp.get("/product/list",(req,res)=>{//使用axios获取http://dev-api.jt-gmall.com/mall的数据axios.post("http://dev-api.jt-gmall.com/mall",{query:`{counterGoodsList(page:1,pageSize:10){totalpagepageSizeitems{_idnameprice}}}`}).then(({data})=>{//等待请求结果返回//设置响应头res.setHeader("Content-Type","application/json")//响应一个JSON字符串，将得到的数据序列化为JSONres.end(JSON.stringify(data));});});使用Postman调试我们新写的接口，看看是否可行。实际结果如下：很好，我们成功了一半，接下来需要对输入参数进行过滤。这里我们实现最简单的分页功能。我们想通过url查询参数进行分页查询。我们需要先对客户端传入的页面相关参数进行处理，然后对这些参数进行相应的处理并通知数据源（第三方或数据库），最后返回响应数据即可，那么修改后的代码如下：app.get("/product/list",(req,res)=>{constpage=req.query.page||1;constpageSize=req.query.pageSize||10;axios.post("http://dev-api.jt-gmall.com/mall",{query:`{counterGoodsList(page:${page},pageSize:${pageSize}){totalpagepageSizeitems{_idnameprice}}}`}).then(({data})=>{res.setHeader("Content-Type","application/json")res.end(JSON.stringify(data))});});然后我们可以通过自定义参数请求，我们请求第二页的数据，并将每页的页数设置为20，响应结果如下：成功！这是Node的中间层功能，我们只需要加一行代码就可以解决跨域问题案例演示：解决跨域问题如果你尝试使用Ajax访问http://dev-api.jt-gmall在一个网页.com/mall中，那你肯定会遇到跨域问题，因为这个域名是不允许你用浏览器直接访问的，但是从前面的案例来看，我们可以访问http://localhost:8888/product/list获取相同的数据。跨域是浏览器的安全策略，Node在访问其他链接时是非浏览器客户端，不会遇到跨域问题。那我们能否在浏览器中使用Ajax访问http://localhost:8888/product/list呢？尝试之后，你会发现还是会遇到跨域的问题。其实如果深入研究跨域问题，跨域是浏览器实现的一种安全策略，它要求服务器响应头中必须包含若干个CORS相关的响应头，以保证请求被允许。根据这个原则，我们只需要在每个响应的头部添加这些CORS相关的信息即可。有一个插件可以帮我们做到这一点，那就是cors，我们运行npminstallcors--save来安装它。我们可以通过添加两行代码来解决客户端的跨域问题。代码如下：constcors=require("cors");app.use(cors());基本使用，也算是一个入门吧。如果想深入研究，最好参考Express和Node的官方文档，最好是跟着案例一行一行的看。如果您有任何问题，请留言！跳舞的小花源码地址原地址，欢迎收藏
