NODEJS + VUE

简单回顾一下之前做的项目:

一、什么是nodejs?

脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言,浏览器是它的解析器角色。而对于需要独立运行的JS,nodejs就是一个解析器。

每一种解析器都是一个运行环境,不但允许js定义各种数据结构,进行各种计算,还允许js使用允许环境提供的内置对象和方法做一些事情。如运行在浏览器中的js的用途是操作DOM,浏览器就提供了document之类的内置对象。而运行在nodejs中的js的用途是操作磁盘文件或搭建http服务器,nodejs就相应提供了fs,http等内置对象。

这边nodejs主要是为了接收vue不同组件传递过来的数据,进行判断处理或者传递到服务器,然后再将服务器返回的数据传回vue前端。
同时nodejs的config文件夹里面还可以进行开发生产环境的区分。


二、VUE简介

VUE作者叫尤雨溪,一个从本科读艺术史到硕士读美术设计和技术专业,跨行开发前端框架的大佬。
Vue.js 是一套构建用户界面的渐进式(Progressive framework)框架,是MVVM开发模式的实现者。

VVM源自于经典的 MVC(Model-View-Controller)模式。MVVM的核心是ViewModel层,负责转换 Model中的数据对象,来让数据变得更容易管理和使用,其作用如下:

1、该层向上与视图层进行双向数据绑定
2、向下与Model层通过接口请求进行数据交互

View是视图层,也就是用户界面。前端主要由HTML和css来构建,为了更方便地展现ViewModel或者Model层的数据,已经产生了各种各样的前后端模板语言,比如 FreeMarker、Thymeleaf 等等,各大 MVVM框架如Vue.js,AngularJS,EJS等也都有自己用来构建用户界面的内置模板语言。

Model是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的Model数据进行转换处理,做二次封装,以生成符合View层使用预期的视图数据模型。

换言之,VM的实现原理:
view model中内置了一个观察者,这个观察者观察两个维度
​ 1) 观察视图的变化: 当视图变了,就通知数据进行变化
​ 2) 观察数据的变化: 当数据变了,就通知视图进行变化

​ —— MVVM通过VM实现了双向数据绑定

VUE的双向绑定和生命周期的概念是比较重要的。
vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板。
ElementUI是比较流行的开源vue组件代码。


二、大概项目逻辑
①首先在front文件夹找到index.html文件,看到它绑定了唯一的容器的id=“app”
②再找到入口文件main.js,去生成vue,并且绑定容器app
③编写router.js,默认是 / ,将它redirect到/login ;而/login注册了一个组件Login
④我将login.vue放在了models文件夹下,这个组件渲染出来就是登录页面。其中当点击登录的button是,会触发@click事件,进而将username和pwd通过axios.post传到Node后端。
⑤找到后端的router.js文件,通过nodejs后端的路由。找到相应的处理js。可以封装一下到service,将数据post到服务器进行验证,等待返回的token。若状态是200则继续进行后续内容,否则返回错误的ctx给前端。
⑥我们其他子组件的路由,是可以根据服务器返回的内容,进行动态的注册子组件的。这样就可以实现通过操控数据的数据字段,来决定网页端的页面显示与否。
⑦具体子组件的内容,再进行另外设计。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Next.js 连接 mysql 数据库

前言 本文主要为大家介绍,如何使用 Next 框架实现一个简单的后端接口,并且从数据库中请求数据返回给前端。 实现 创建api/getData文件夹 项目创建完成后在 app 文件下新建api文件夹,在 api 文件夹下新建 getData 文件夹,在 ge…

IOT-Reaserch安装ghidra以及IDEA和ghidra的配置

Linux research 5.4.0-91-generic #102~18.04.1-Ubuntu SMP Thu Nov 11 14:46:36 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux java --version IOT自带的java是符合要求的,不需要额外下载 iotresearch:~/install-file$ java --version openjdk 11.0.13 2021-10-19 …

【LeetCode】509. 斐波那契数(简单)——代码随想录算法训练营Day38

题目链接:509. 斐波那契数 题目描述 斐波那契数 (通常用 F(n) 表示)形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和。也就是: F(0) 0,F(1) 1 F(n) F(n -…

数字新纪元:探索Web3对社会的影响

在当今数字化时代,技术的进步已经成为社会发展的驱动力之一。而随着区块链技术的快速发展,我们正处在一个即将到来的数字新纪元——Web3时代。这一新时代不仅仅是技术的迭代升级,更是对传统社会模式的颠覆和重构。本文将深入探讨Web3对社会的…

当前主流开发语言有哪些:了解其特性、应用与示例

随着技术飞速发展,编程语言的丰富多样性为开发者提供了广泛的选择。每种语言都有其适用的场景和独特的特性。本文将综合探讨目前市场上最流行、最多人使用的几种主流开发语言,包括它们的特点、典型应用场景以及简单示例代码。 一、Python 特点 Python…

深入理解指针(c语言)

目录 一、使用指针访问数组二、数组名的理解1、数组首元素的地址2、整个数组 三、一维数组传参的本质四、冒泡排序五、二级指针六、指针数组 一、使用指针访问数组 可以使用指针来访问数组元素。例如,可以声明一个指针变量并将其指向数组的第一个元素,然…

Github代码仓库SSH配置流程

作者: Herman Ye Auromix 测试环境: Ubuntu20.04 更新日期: 2024/02/21 注1: Auromix 是一个机器人爱好者开源组织。 注2: 由于笔者水平有限,以下内容可能存在事实性错误。 相关背景 在为Github代码仓库配…

Unity Shader ASE基础效果思路与代码(一):遮罩、硬边溶解、光边溶解、UV扰动

Unity Shader ASE基础效果思路与代码(一):遮罩、硬边溶解、光边溶解、UV扰动 文章目录 Unity Shader ASE基础效果思路与代码(一):遮罩、硬边溶解、光边溶解、UV扰动遮罩效果硬边溶解光边溶解UV扰动 遮罩效果 效果展示: 思路与代码&#xff1…

消息队列-RabbitMQ:死信队列

十五、死信队列 1、死信的概念 先从概念解释上搞清楚这个定义,死信,顾名思义就是无法被消费的消息,字面意思可以这样理解,一般来说,producer 将消息投递到 broker 或者直接到 queue 里了,consumer 从 que…

postgres

1.下载postgres 解压后 bin\initdb -D data -U postgres -A password -E utf8 -W // 初始化设置密码这里的账号是postgres pg_ctl.exe register -N "PostgreSQL" -D "F:/pgsql/data" //windows 本地生成服务 pg_ctl -D F:/pgsql/data -l F:/pgsql/logs/pg…

用idea debug时,怎么在某个map对象中再加个key value

实现方式 在用idea 进行 debug时,我们经常喜欢对某行代码打断点,然后对某个对象重新设置值,以快速地实现我们预期想覆盖的场景。通常的方式是用鼠标右键点击某个对象,然后选择Set value进行设置值,但是如果想在map中添…

鸿蒙原生应用元服务实战-发布时多设备选择注意事项

在可公开可获取DevEco Studio最新版本,Stage模型ArkTSAPI9开发元服务HarmonyOS4现不支持平板等;但是元服务在发布时是可选平板、智慧屏电视设备发布。 如果开发人员与上架运营人员沟通不充分的话,上架运营人员可能会选择多设备发布,试一试&am…

bugku3

xxx二手交易市场 进去是这样讴歌乱进的页面 查看了一下源代码也没什么 先随便注册一个账号 然后登录 随便看了看,发现可以修改头像 上传文件 随便上传了一个图片 发现他对图片进行了base64加密 解密后得到是 data:image/jpeg;base64 这里重新修改类型为php&a…

【buuctf--我有一只马里奥】

这是一道关于 ntfs 流查看的题目运行 exe 后会出来一个 1.txt 文件 在 exe 和 1.txt 文件目录下打开终端,输入 notepad 1.txt:flag.txt就可以看到答案了。 这么做的原因见BUUCTF misc 专题(53)[SWPU2019]我有一只马里奥_ntfs flag.txt 马里…

OpenAI新推出的Sora是什么?如何注册使用?

2024年2月16号,OpenAI全新发布文本视频模型Sora,可以通过指令生成特定的视频内容,这对于内容营销、广告宣传、教育教学等行业都将来带来巨大的机遇与挑战。 相信许多人跟小编一样,对此新兴产品跃跃欲试,那么应该如何注…

柔顺控制笔记

参资料: 【1】https://zhuanlan.zhihu.com/p/620918453 【2】https://blog.csdn.net/a735148617/article/details/108564836 【3】https://zhuanlan.zhihu.com/p/126338809 【4】机器人与环境间力_位置控制技术研究与应用_李正义 【5】水下机械臂建模及柔顺控制方法…

编程笔记 Golang基础 014 数据类型概述

编程笔记 Golang基础 014 数据类型概述 一、基本数据类型二、复合数据类型三、引用类型四、特殊类型小结 Go 语言的数据类型系统涵盖了基本数据类型、复合数据类型以及引用类型。 下面将对这些类型进行详细说明: 一、基本数据类型 布尔型 (bool):表示逻…

Javascript中var和let之间的区别

文章目录 一.变量提升(声)二.let和var的区别 区别: 1、var有变量提升,而let没有; 2、let不允许在相同的作用域下重复声明,而var允许; 3、let没有暂时性死区问题; 4、let创建的全局变量没有给window设置对应…

不同种类遥感图像汇总 !!

文章目录 前言 1、可见光遥感图像 2、全色遥感图像 3、多光谱遥感图像 4、高光谱遥感图像 5、红外遥感图像 6、激光雷达图像 7、合成孔径雷达遥感图像 前言 遥感技术是从远距离感知目标反射或自身辐射的电磁波、可见光、红外线,对目标进行探测和识别的技术。遥感卫…

懒汉单例设计模式与饿汉单例设计模式

单例模式即一个类确保只有一个对象,主要用于避免浪费内存 1.饿汉单例设计模式:拿到对象时,对象就早已经创建好了 public class A { private static A a new A(); private A(){ } public static A getObject(){ return a;} } 写法: 把类的构造器私有 在类中自己创建一个对…