随笔分类 - Java登陆
从沙滩到陆地咯
摘要:微头条项目链接 作为JavaWeb的收官之作,这里记载了写项目时遇到的问题。 前提:使用maven进行依赖管理 1.JJWT导入依赖太少 最初只导入了 <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api</arti
阅读全文
摘要:到目前一共学习了两种传参方式。 1.组件传参 2.路由传参 这两种传参方式并不好用,所以出现了Pinia Pinia平替了Vuex,而且比它更优秀。 Pinia是Vue衍生的生态系统之一,所以,在使用它前需要导入依赖。 npm i pinia 简单地说,Pinia就是共享数据。各个.vue组件可以利
阅读全文
摘要:浏览器拥有最基本的安全机制,同源策略。 违背同源策略的交互,会被浏览器认为是不安全的交互,所以不解析。 什么是域?(源) 协议,域名,端口。 什么是跨域? 访问不同的域。 即便协议,域名相同,端口号不一样也会违背同源策略。 前后端分离后,前端服务器负责视图,后端服务器负责数据。 不同的服务器,其域必
阅读全文
摘要:如果想在axios发送HTTP请求之前。或者是接收响应之前做一些额外的工作,可以通过拦截器完成。 Axios拦截器分为请求拦截器,响应拦截器。分别在请求或响应时生效。 一图了解Axios拦截器 提供了两种文本函数:名字太长,直接看语法 语法格式如下: //请求拦截器,f1对应请求发送 成功 函数,f
阅读全文
摘要:Vue 推荐使用 axios 来完成 ajax 请求。 axios中文文档 Axios Axios是一款基于Promise,用于发送HTTP请求和处理HTTP响应的工具库。 内部也是使用原生的ajax对象发送HTTP请求。 所以,在使用它前需要导入依赖。 npm install axios 提供了一
阅读全文
摘要:在学习axios之前,需要学习ES6提供的Promise对象。 普通函数和回调函数 学习Promise的预备知识,回调函数 普通函数 普通函数: 正常调用的函数,普通函数执行完毕后才会继续执行下一行代码。 按照编码顺序执行。 function f1() { console.log("普通函数f1执行
阅读全文
摘要:需求 未登录无法访问除login页面 练习 1.使用vite创建项目,导入依赖 npm create vite 选择vue+js npm i 导入基本依赖 npm vue-router 导入路由依赖 2. 创建组件,login.vue、home.vue、list.vue 仅展示home.vue组件,
阅读全文
摘要:路由守卫就是在切换页面的期间,执行的函数。 类似于Vue的钩子函数 类似于Setvlet的Filter(过滤器) 路由守卫 路由守卫,就是在路由切换期间执的函数。 由vue-router提供的两个常见守卫(函数): 全局前置守卫beforeEach和全局后置守卫afterEach 语法格式如下: /
阅读全文
摘要:在上一章节,<router-link to="/left">左</router-link> 这种这种路由,to中的内容目前是固定的。被称之为声明式路由(或普通路由) 编程式路由 编程式路由,可以按需决定某组件的路由地址。 vue-router提供了一个函数:useRouter 语法格式如下: //该
阅读全文
摘要:什么是路由? 类似于Servlet的映射路径。 路由可以让,不同的URL展示不同的页面。 Router Router是Vue衍生的生态系统之一,所以需要单独安装。 路由案例需求 1 安装依赖 还记得npm安装依赖指令吗?看这。 npm i vue-route 1-1 编写组件 略 2 编写路由配置
阅读全文
摘要:生命周期 之前在Servlet等也学习过生命周期,相同的,VUE组件也有生命周期。 VUE组件完全解析到浏览器,会经过如下过程。(简单理解) vue组件被实例化的过程,称为,组件实例化。 组件实例解析到浏览器中,称为,挂载。 组件实例从浏览器中删除,称为,卸载。 钩子函数 vue组件解析到浏览器的这
阅读全文
摘要:单向绑定 之前学习的栗子,都是单向绑定。 单向绑定: 响应式数据对象的变化会更新dom树,用户的某些操作造成的数据更新,不会同步更新到响应式数据对象。 栗子 App.vue <script setup> import {ref, reactive} from 'vue'; let msg = ref
阅读全文
摘要:响应式数据 什么是响应式数据? 当数据发生改变时,DOM树的内容,会和数据同步更新。 vue3不是自动响应式数据,需要经过函数处理得到响应式数据对象。 ref和reactive 这两个函数都会返回响应式数据对象,但也有不同。 ref ref通常用于将一个基本类型转为响应式数据对象。 基本类型包括:数
阅读全文
摘要:插值表达式 VUE中最基本的数据绑定形式。 语法格式如下: {{ 数据来源 }} 插值表达式的特点: 不依靠标签。 可以调用函数。 支持运算符。 栗子 App.vue <script setup> let msg = "字符串"; let num = 10; function f1() { retu
阅读全文
摘要:当浏览器接收到服务端返回的页面后,浏览器会把页面解析成DOM树,DOM树中各个元素会相应的显示在浏览器上。 VUE提供的响应式数据可以在页面不刷新的情况下更新数据。 响应式数据 App.vue <script> //等价于setup语法糖。固定的写法,不会改。 export default { se
阅读全文
摘要:在一个.Vue文件中,通常包括以下三部分。 <template> <style> <script> .vue中部分 传统部分 描述 <template> HTML 代替传统的.html文件 <style> CSS 代替传统的.js文件 <script> JS 代替传统的.css文件 声明内部的CSS
阅读全文
摘要:Vite创建的默认Vue3项目中package.json文件信息如下: { "name": "vmoudle1", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build":
阅读全文
摘要:项目结构 使用Vite创建Vue3+JS默认项目结构如下:(vmoudle1是项目名) Vue中提出了组件的概念。 组件是代码复用的一种方式,用于抽象出一个可复用的UI,方便在不同的场景中进行重复使用。 组件根据大小可被分为:(从小到大) 1.组件 2.布局组件 3.页面级别组件 .vscode 忽
阅读全文
摘要:Vue Vue是基于标准 HTML、CSS 和 JavaScript 构建的前端框架,可以更高效地开发前端页面。 Vite Vite是Vue团队开发的项目管理工具。 Maven的主要功能 引入依赖 项目管理 使用Maven可以工程化的管理后端代码。 npm的主要功能:引入依赖 vite的主要功能:项
阅读全文
摘要:Nodejs是JS的运行环境,使得JS可以运行在服务端。可以跨平台,,成为一款全栈编程语言。 Node.js安装 Nodejs官网,进入👈网站后ctrl+F搜索需要的版本即可;(本人是v18.16.0/node-v18.16.0-x64.msi) nodejs安装配置菜鸟教程。 关于Automat
阅读全文