html5前台入门教程风险:Node.Js 框架

  • 时间:2018-10-30 22:56 作者:千锋Html5学习课堂 来源:千锋Html5学习课堂 阅读:417
  • 扫一扫,手机访问
摘要:项目前期准备: 以express 框架为例 npm i express-generator -g //全局安装express框架 express -e //生成express应用骨架 npm i //安装依赖 npm start //在3000端口监听 拓展:目前最市面上最流行的node框架有:

html5前台入门教程风险:Node.Js 框架

项目前期准备:
以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核心不绑定任何中间件,但提供了优雅的一组可以快速和愉悦地编写服务器应用的方法。

项目开始

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

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

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

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

了解mvc

  • 控制器Controller:
    是应用程序中解决客户交互的部分。
       通常控制器负责从视图读取数据,控制客户输入,并向模型发送数据。

作用:根据路由中设置的路径不同,调用控制器中对应的方法(函数),
res.body =>获取post请求中传递的参数
res.query => 获取get请求中的数据
业务逻辑基本都在控制层,调用模型中相对应的函数,把需要传递的数据作为参数传递进去

  • 模型Model
    Model(模型)是应用程序中用于解决应用程序数据逻辑的部分。
      作用:通常模型对象负责在数据库中存取数据。

由于模型中的函数需要在控制器里调用,所以在最后需要导出模型。
模型里,涉及到数据库的操作需要依赖mogoose包

模型解决数据会返还一个promise对象,成功或者者失败通过Promise.then调用 控制器里传递过来的成功或者者失败的函数
再由控制器res.json返还到前台

  • View(视图)
    是应用程序中解决数据显示的部分。
       通常视图是依据模型数据创立的

前台到后台

作为前台假如我们需要拿到后台的数据,就得发送ajax请求,假如涉及到文件操作,就必需用post 请求
通过不同的url(在app.js里设置过),拿到不同的数据
view-Controller-Model ,根据返还的数据渲染页面
这里还是MVC模式,所以MVC流程必需得熟习。


功能
登录:
涉及到数据库的操作,查询的结果是Promise对象,
控制器里面的操作还是那么回事,前台传递到控制器的参数,一个成功的回调,一个失败的回调
模型里promise.then()决定调用成功或者者失败的函数,传到控制器回调,控制器res.json返还到信息前台

需要保存客户登录信息:npm i cookie-session --save
app.js中配置cookie-session中间件

检查能否登录:
前台加载时,发送ajax请求,根据响应信息,判断能否登录,渲染登录效果
点击退出时,把req.session置为null

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

关于文件上传

  • 涉及到文件上传,在服务器端(路由)中引入
    multer板块 npm i multer --save

  • 配置文件上传 ,cv准则,修改保存位置和命名规则就可

  • 路由里,回调函数前加一个文件上传的方法
    router.post('',upload,single('文件上传表单name名'),fn)

  • 控制器判断能否有文件上传(res.file)
    假如有用变量储存文件路径 => const file = "/路由中配置的保存路径/" + req.file.filename


mvc意义

MVC 分层有助于管理复杂的应用程序,由于您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

总结

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

编辑:千锋HTML5

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部