![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 91
夜雨微澜°
这个作者很懒,什么都没留下…
展开
-
JWT入门详解
目录一、JWT简介1.什么是JWT?2.为什么要使用JWT?二、JWT的工作原理三、JWT的组成1.Header(头部)2.Payload(载荷)Reserved claims(保留)Public claims(公有)Private claims(私有)3.signature四、JWT的验证过程五、JWT令牌刷新思路1.首先前后端跨域配置2.JWT配置3.配置JWT验证过滤器4.登陆方法成功后,将生成的JWT令牌通过响应头返回给客户端.原创 2022-05-16 21:36:47 · 3980 阅读 · 2 评论 -
Vuex刷新页面数据丢失(数据持久化)
目录前提:一、 存储到localStorage中二、 存储到sessionStorage中三、 指定数据持久化前提:为什么要让vuex数据持久化:在使用vuex的时候,会发现刷新页面之后state中存储的数据会被重置,因为刷新浏览器的时候会导致整个页面重新加载,vuex的state也会全部重新加载,所以为了防止这类情况的发生,我们会将vuex中的数据进行本地存储,防止页面刷新丢失vuex中的数据。一、 存储到localStorage中首先安装vuex-pe...原创 2022-05-14 15:32:37 · 1009 阅读 · 0 评论 -
Vuex入门与使用案例
目录一、组件之间的传值方式1.父子组件2.非父子组件或父子组件3.非父子组件或父子组件二、Vuex介绍三、Vuex安装与配置1.下载2.配置1.在src目录下创建store模块,分别维护state/actions/mutations/getters2.在index.js中引入vue和vuex3.新建vuex的store实例4.在main.js中导入并使用store实例四、Vuex的简单使用1.创建案例页面2.往state.js中加入全...原创 2022-05-14 15:02:41 · 2765 阅读 · 0 评论 -
Vue中使用表单验证+CRUD
接上篇的数据表格与分页,今天我们给表格中的数据增删改查与表单验证一、后台数据接口public class BookAction extends DispatcherAction implements ModelDriver<Book> { private Book book=new Book(); private BookDao bookDao=new BookDao(); private ObjectMapper mapper=new ObjectMapper(); @O..原创 2022-05-12 19:02:53 · 1538 阅读 · 0 评论 -
Vue中使用ElementUI+数据库 完成动态树+数据表格+分页
接上一篇首页导航与左侧菜单的搭建,今天使用数据库数据实现动态树 数据表格 分页一、动态树1.后台接口准备数据库:t_module_vue:后台代码:Dao类方法:/** * 根据父类id查询子类pid的数据(递归) * @param pid * @param mod */ public void queryModuleByPid(Integer pid,Module mod){ String sql="...原创 2022-05-12 16:06:55 · 3443 阅读 · 3 评论 -
Vue中使用mock.js+ElementUI搭建首页导航+左侧菜单
一接上一篇登录的实现,我们今天搭建首页与左侧菜单栏使用技术:vue element mock.js首先介绍一下mock.js一、什么是mock.js前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器,用来帮...原创 2022-05-08 17:27:30 · 1256 阅读 · 0 评论 -
Vue中使用axios(Ajax)+ElementUI实现登录
一、引入和配置使用ElementUI框架1.使用vue-cli脚手架工具创建一个vue项目vue init webpack 项目名2.npm安装elementUIcd 项目名 #进入新建项目的根目录npm install element-ui -S #安装element-ui模块3.配置ElementUImain.js全局配置...原创 2022-05-05 20:02:33 · 21623 阅读 · 3 评论 -
Vue脚手架(vue-cli)安装与SPA项目创建
一、vue-cli介绍什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:vue init webpack xxx 注1:xxx 为自己创建项目的名称 注2:必须先安装vue,vue-cli,webpack,node等一些必要的环境二、 安装vue-cli1.安装vue-cli之前要保证已经安装nodejs等安装过的可以通过cmd输入以下两个命令来查看node -vnpm -v...原创 2022-05-04 19:59:50 · 952 阅读 · 0 评论 -
Vue+Element-UI入门与Node.js的环境配置
一、ElementUI1.ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件ElementUI官网:http://element-cn.eleme.io/#/zh-CN 注1:类似前端框架还有iview2.ElementUI组件的简单使用1.使用CSD的方式导入依赖&l...原创 2022-05-01 23:49:12 · 1501 阅读 · 0 评论 -
Vue路由实现SPA
一、SPA是什么单页Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序: 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序: 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面优势:减少了请求体积,加快页面响应速度,降低了对服务器的压力更好原创 2022-05-01 22:39:43 · 495 阅读 · 0 评论 -
Vue基础语法(二)
一、样式绑定 1.class绑定使用方式:v-bind:class="expression"expression的类型:字符串、数组、对象2.style绑定使用方式:v-bind:style="expression"expression的类型:字符串、数组、对象代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <titl...原创 2022-04-30 13:21:34 · 785 阅读 · 0 评论 -
Vue基础语法(一)
一、模板语法1.插值文本{{msg}}示例:<html> <head> <meta charset="utf-8" /> <title></title> <!-- 方式一 手动方式 --> <!-- <script src="js/vue.js" type="text/javascript"></script> --> <!-- 方式二 CDN ..原创 2022-04-30 01:39:32 · 1755 阅读 · 2 评论 -
Vue介绍与入门(一篇就可入门)
一、Vue.js是什么?vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。渐进式我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。官网:https://cn.vuejs.org/Vue作者:尤雨溪/原创 2022-04-26 01:35:21 · 45381 阅读 · 8 评论