NODEJS + VUE

news/发布时间2024/5/14 12:43:01

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

一、什么是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.bcls.cn/josI/2079.shtml

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

相关文章

相机图像质量研究(33)常见问题总结:图像处理对成像的影响--锯齿

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结:光学结构对成…

Leetcode 283.移动零

给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […

OpenAI Sora引领AI跳舞视频新浪潮:字节跳动发布创新舞蹈视频生成框架

OpenAI的Sora已经引起广泛关注,预计今年AI跳舞视频将在抖音平台上大放异彩。下面将为您详细介绍一款字节跳动发布的AI视频动画框架。 技术定位:这款框架采用先进的diffusion技术,专注于生成人类舞蹈视频。它不仅能够实现人体动作和表情的迁移…

Redis为什么快?

1. Redis单线程指的什么? Redis单线程是指命令处理是在一个单线程中处理的。 Redis本身是单线程的,即redis-server只有一个主线程来处理所有的命令请求和数据操作。但是,Redis在处理IO密集型任务时会使用多线程来提高效率。 在Redis中&…

linux调用so库之一

任务:linux系统,已经生成so库,需要调用。 参考文献: Linux 调用动态库(.SO文件)总结_linux deviceio.so-CSDN博客 可以看他的第一部分,即显式调用。但是会报错,我的版本是64位的U…

[经验] 什么是鄱阳湖旅游最主要的景点 #知识分享#知识分享

什么是鄱阳湖旅游最主要的景点 鄱阳湖是中国最大的淡水湖,位于江西省北部和湖南省南部。鄱阳湖旅游资源丰富,景色秀美,是游客游览江西最热门的旅游胜地之一。在所有的景点中,以下是鄱阳湖旅游中最主要的景点。 景点一&#xff1…

【学习笔记】算法学习01:复杂度分析

学习地址Hello算法:https://www.hello-algo.com/ 文章目录 一、复杂度分析1.1 时间复杂度1.1.1 时间复杂度分析有哪些特点?1.1.2 计算方法:1.1.3 常见类型的时间复杂度:1.1.4 最差、最佳、平均时间复杂度 1.2 空间复杂度1.2.1 算法…

用HTML和CSS打造跨年烟花秀视觉盛宴

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>跨年烟花秀</title><meta name"viewport" content"widthdevi…

【JavaEE】_form表单构造HTTP请求

目录 1. form表单的格式 1.1 form表单的常用属性 1.2 form表单的常用搭配标签&#xff1a;input 2. form表单构造GET请求实例 3. form表单构造POST请求实例 4. form表单构造法的缺陷 对于客户端浏览器&#xff0c;以下操作即构造了HTTP请求&#xff1a; 1. 直接在浏览器…

腾讯云宝塔Linux安装Mysql5.7

一、下载官方mysql包 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm二、安装mysql包 rpm -ivh mysql-community-release-el7-5.noarch.rpm三、安装mysql yum install mysql-community-server -y四、启动数据库 systemctl start mysqld.service…

JDBC简介

JDBC体系结构 Java Data Base Connectivity&#xff08;JDBC&#xff09;&#xff0c;Java数据库连接。 JDBC重要的类和接口 JDBC API 定义了一组用于与数据库进行通信的接口和类&#xff0c;这些接口和类都定义在Java.sql包中。 类或接口作用DriverManager处理驱动程序的加…

el-table同时固定左列和右列时,出现错误情况

最近遇到一个问题,就是需求是要求表格同时固定序号列和操作列,我们用的是饿了么组件库的el-table,如下图,出现了错误情况: 解决方法就是使用doLayout方法: 如果使用了keep-alive,可以在activated里执行doLayout方法: activated() {this.$nextTick(() => {this.$ref…

Jmeter接口测试+压力测试

Jmeter-http接口脚本 一般分五个步骤:&#xff08;1&#xff09;添加线程组 &#xff08;2&#xff09;添加http请求 &#xff08;3&#xff09;在http请求中写入接入url、路径、请求方式和参数 &#xff08;4&#xff09;添加查看结果树 &#xff08;5&#xff09;调用接口、…

【ChatIE】论文解读:Zero-Shot Information Extraction via Chatting with ChatGPT

文章目录 介绍ChatIEEntity-Relation Triple Extration (RE)Named Entity Recognition (NER)Event Extraction (EE) 实验结果结论 论文&#xff1a;Zero-Shot Information Extraction via Chatting with ChatGPT 作者&#xff1a;Xiang Wei, Xingyu Cui, Ning Cheng, Xiaobin W…

MySQL-----多表操作

介绍 实际开发中&#xff0c;一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系&#xff0c;接下来我们将在单表的基础上&#xff0c;一起学习多表方面的知识。 一 多…

深入解析SDRAM:从工作原理到实际应用

深入解析SDRAM&#xff1a;从工作原理到实际应用 在众多内存技术中&#xff0c;同步动态随机访问存储器&#xff08;SDRAM&#xff09;因其出色的性能和广泛的应用而备受关注。本文将从SDRAM的工作原理入手&#xff0c;探讨其性能优化策略和在现代电子设备中的应用。 SDRAM工作…

linux上安装bluesky的步骤

1、设备上安装的操作系统如下&#xff1a; orangepiorangepi5b:~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.2 LTS Release: 22.04 Codename: jammy 2、在用户家目录下创建一个目录miniconda3目录&a…

MATLAB 导出可编辑的eps格式图像

任务描述&#xff1a;部分期刊要求提交可编辑的eps格式图像&#xff0c;方便美工编辑对图像进行美化 我试了直接print或者在figure窗口导出&#xff0c;发现导出的文件放到Adobe AI中并不能编辑&#xff0c;经Google找到解决办法&#xff1a; %EPS exportgraphics(gcf,myVect…

【书生·浦语大模型实战营】第6节:OpenCompass 大模型评测(笔记版)

OpenCompass 大模型评测 1.关于评测的三个问题 为什么需要评测&#xff1a;模型选型、能力提升、应用场景效果测评。测什么&#xff1a;知识、推理、语言&#xff1b;长文本、智能体、多轮对话、情感、认知、价值观。怎样测&#xff1a;自动化客观测评、人机交互测评、基于大…

Day31文件IO

文章目录 1.什么是文件IO1.1 概念1.2 特点1.3 操作 2.函数接口2.1 打开文件 open()2.2 关闭文件2.3 读写文件2.3.1 读文件2.3.2 写文件 2.4 文件的定位操作 标准IO和文件IO总结 1.什么是文件IO 1.1 概念 又称系统IO&#xff0c;是系统调用&#xff0c;是操作系统提供的接口函…
推荐文章