项目前期准备:

以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是非关系型数据库,需要转化成关系型数据库)。控制器联系着显示层和模型,它决定后端返回什么数据,前端能拿到什么数据。

node html5,html5前端入门教程分享:Node.Js 框架相关推荐

  1. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识

    本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 网页开发工具 VSCode 或 WebStorm HTML简介 HTML:Hyp ...

  2. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页 ...

  3. html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...

    ## 本教程案例在线演示 ## 教程配套源码资源 ### 表格 table标签(表格). tr标签(行). td标签(标准单元格). caption标签(标题). th标签(表头单元格). 为了更深一 ...

  4. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS

    本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 考虑对人的描述方式 人 {身高:175cm; 体重:70kg; 肤色:黄色 } ...

  5. 前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化?

    统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...

  6. 零基础如何速成插画?插画入门教程分享!

    零基础如何速成插画?插画入门教程分享!在梵高君看来,绘画没有速成可言,你有见过哪一位美术生是速成的么?都是一个萝卜一个坑地画过来的,都是天天反复练习基础,反复练习人体,反复素描,反复速写练过来的.如果 ...

  7. 兄弟连区块链入门教程分享区块链POW证明代码实现demo

    区块链入门教程分享区块链POW证明代码实现demo 这里强调一下区块链的协议分层 应用层 合约层 激励机制 共识层 网络层 数据层 上 一篇主要实现了区块链的 数据层,数据层主要使用的技术 ...

  8. 宋九九:怎么做好seo优化?SEO基础入门教程分享

    宋九九:怎么做好seo优化?SEO新手基础入门教程分享! 宋九九以为一个好的SEO优化方法,需要团队的技术能力和凝聚力,SEO最根本的目的就是满足搜索引擎的规则,以达到排名前置的目的.常规seo是一个 ...

  9. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

最新文章

  1. java合并两个doc文件,java实现合并2个文件中的内容到新文件中
  2. Hadoop配置环境变量
  3. ubuntu解压zip文件乱码问题
  4. SPOJ AMR12B 720
  5. android 反编译工具_【Android APK分析工具】
  6. 数据载入过慢?这里有一份TensorFlow加速指南
  7. 基本地图加载完整示例
  8. Producer-Consumer question : OO 生产者-消费者:面向对象
  9. 小米笔记本 Air 13.3 黑苹果教程
  10. 【愚公系列】2022年01月 Django商城项目18-用户中心-密码修改功能页面设计
  11. 解决vs code使用code runner无法输入数据问题
  12. 霍夫斯特拉大学计算机科学专业排名,霍夫斯特拉大学排名 - hofstra computer science怎么样...
  13. 如何获取微信小店小程序的AppID
  14. 往word表中写数据
  15. 低版本360浏览器下,PDF.js部分文字显示不全的问题
  16. 计算机视觉 深度学习 slam 三维重建 机器学习学习资料整理
  17. 什么是servlet ?简述servlet执行原理?生命周期是怎样的?
  18. ST官网下载STM32固件库
  19. WebRequest 类
  20. 【b站雅思笔记】Charlie有好好学习 - 雅思听力

热门文章

  1. Python3.6字符串新特性
  2. ASP.NET企业开发框架IsLine FrameWork系列之六--DataProvider 数据访问(下)
  3. 使用RDLC报表(三)--向RDLC报表传入参数
  4. 【小说网站 - 抓取登陆后的数据,cookie操作】
  5. [pandas]方法总结
  6. 怎么设置表头字体大小_Excel斜线表头和三线表头是如何制作的?
  7. 常用数学符号的 LaTeX 表示方法(附代码)
  8. Pytorch —— 损失函数(二)
  9. hive基于多列去重操作
  10. TX2刷机flashOS finished后,卡在determining IP address解决方案