千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > Web前端学习教程之Node Js流程

Web前端学习教程之Node Js流程

来源:千锋教育
发布人:千锋HTML5
时间: 2018-09-04 17:48:00 1536054480

  1,项目前期准备:

  以express 框架为例

  npm i express-generator -g //全局安装express框架

  express -e //生成express应用骨架

  npm i //安装依赖

  npm start //在3000端口监听

  拓展:目前最市面上最流行的node框架有:

  --Sail.js

  Sails.js 就像是 Node.js 平台上的 Rails 框架。这是一个可靠可伸缩的开发框架,面向服务的架构,提供数据驱动的 API 集合。用来开发多玩家游戏、聊天应用和实时面板引用非常方便,也可用于开发企业级 Node.js 应用。

  Sails.js 基于 Node.js, Connect, Express 和 Socket.io 构建。

  --Koa.js

  koa.js是下一代的 Node.js 的 Web 框架。由 Express 团队设计。旨在提供一个更小型、更富有表现力、更可靠的 Web 应用和 API 的开发基础。

  Koa可以通过生成器摆脱回调,极大地改进错误处理。Koa核心不绑定任何中间件,但提供了优雅的一组可以快速和愉悦地编写服务器应用的方法。

  2,项目开始

  --利用bootstrap完成布局(或者使用bulma前端css框架也很方便)

  --把需要复用的小组件放在一个文件夹在,这里我新建了一个commjs目录

  --构造函数中加载DOM结构(面向对象思想)

  --把一切需要重复使用的组件模块化,哪里需要哪里引入,代码复用

  3,理解mvc

  --控制器Controller:

  是应用程序中处理用户交互的部分。

  通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

  作用:根据路由中设置的路径不同,调用控制器中对应的方法(函数),

  res.body =>获取post请求中传递的参数

  res.query => 获取get请求中的数据

  业务逻辑基本都在控制层,调用模型中相对应的函数,把需要传递的数据作为参数传递进去

  --模型Model

  Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。

  作用:通常模型对象负责在数据库中存取数据。

  因为模型中的函数需要在控制器里调用,所以在最后需要导出模型。

  模型里,涉及到数据库的操作需要依赖mogoose包

  模型处理数据会返还一个promise对象,成功或者失败通过Promise.then调用 控制器里传递过来的成功或者失败的函数

  再由控制器res.json返还到前端

  --View(视图)

  是应用程序中处理数据显示的部分。

  通常视图是依据模型数据创建的

  4,前端到后端

  作为前端如果我们需要拿到后端的数据,就得发送ajax请求,如果涉及到文件操作,就必须用post 请求

  通过不同的url(在app.js里设置过),拿到不同的数据

  view-Controller-Model ,根据返还的数据渲染页面

  这里还是MVC模式,所以MVC流程必须得熟悉。

  5,功能

  登录:

  涉及到数据库的操作,查询的结果是Promise对象,

  控制器里面的操作还是那么回事,前端传递到控制器的参数,一个成功的回调,一个失败的回调

  模型里promise.then()决定调用成功或者失败的函数,传到控制器回调,控制器res.json返还到信息前端

  需要保存用户登录信息:npm i cookie-session --save

  app.js中配置cookie-session中间件

  检查是否登录:

  前端加载时,发送ajax请求,根据响应信息,判断是否登录,渲染登录效果

  点击退出时,把req.session置为null

  **fromData.append("","")可以追加请求信息

  6,关于文件上传

  --涉及到文件上传,在服务器端(路由)中引入

  multer模块 npm i multer --save

  --配置文件上传 ,cv原则,修改保存位置和命名规则即可

  --路由里,回调函数前加一个文件上传的方法

  router.post('',upload,single('文件上传表单name名'),fn)

  --控制器判断是否有文件上传(res.file)

  如果有用变量储存文件路径 => const file = "/路由中配置的保存路径/" + req.file.filename

  7,mvc意义

  MVC 分层有助于管理复杂的应用程序,因为您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

  MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

  8,总结

  Node.js实现了前后端分离,把mvc理解之后,所有的操作都是按部就班,前端请求到后端数据,只用根据请求到的数据来渲染页面,后端控制器里主要负责业务逻辑,模型里面保存的是数据(mongodb是非关系型数据库,需要转化成关系型数据库)。控制器联系着显示层和模型,它决定后端返回什么数据,前端能拿到什么数据

  本文由千锋web前端培训学员总结,学习web前端,可以参考千锋提供的HTML5学习路线,结合千锋名师精心录制的全套HTML5视频教程,可以让你对学习HTML5需要掌握的知识有个清晰的了解,并快速入门HTML5开发。视频讲解通俗易懂,入门HTML5开发仅用此套视频足矣。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT