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给前端。

⑥我们其他子组件的路由,是可以根据服务器返回的内容,进行动态的注册子组件的。这样就可以实现通过操控数据的数据字段,来决定网页端的页面显示与否。

⑦具体子组件的内容,再进行另外设计。

相关推荐
雪碧聊技术5 分钟前
前端VUE3项目部署到linux服务器(CentOS 7)
前端·linux部署vue3项目
汝生淮南吾在北3 小时前
SpringBoot+Vue饭店点餐管理系统
java·vue.js·spring boot·毕业设计·毕设
酒尘&6 小时前
JS数组不止Array!索引集合类全面解析
开发语言·前端·javascript·学习·js
学历真的很重要6 小时前
VsCode+Roo Code+Gemini 2.5 Pro+Gemini Balance AI辅助编程环境搭建(理论上通过多个Api Key负载均衡达到无限免费Gemini 2.5 Pro)
前端·人工智能·vscode·后端·语言模型·负载均衡·ai编程
用户47949283569157 小时前
"讲讲原型链" —— 面试官最爱问的 JavaScript 基础
前端·javascript·面试
用户47949283569157 小时前
2025 年 TC39 都在忙什么?Import Bytes、Iterator Chunking 来了
前端·javascript·面试
JIngJaneIL8 小时前
基于Java非遗传承文化管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
+VX:Fegn08958 小时前
计算机毕业设计|基于springboot + vue心理健康管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
大怪v9 小时前
【Virtual World 04】我们的目标,无限宇宙!!
前端·javascript·代码规范
狂炫冰美式9 小时前
不谈技术,搞点文化 🧀 —— 从复活一句明代残诗破局产品迭代
前端·人工智能·后端