ruoyi-vue(三) 一支

2024-11-02

若依管理系统RuoYi-Vue（三）：代码生成器原理和实战

历史文章若依管理系统RuoYi-Vue(一):项目启动和菜单创建若依管理系统RuoYi-Vue(二):权限系统设计详解本篇文章将会讲解ruoyi-vue系统下代码生成器的使用.原理分析以及将这部分代码抽离出来形成独立版的代码生成器. 一.代码生成器的使用 1.新建maven模块原则上,我们的业务代码和若依系统本身的系统代码是要做隔离的,一方面是易于之后随着若依系统升级而升级,另一方面则是纯粹的合理性考虑. 这里新建一个ruoyi-business模块作为业务代码模块,新建完ruoyi-b

MVVM 和 VUE三要素：响应式、模板引擎、渲染

MVVM 和 VUE三要素:响应式.模板引擎.渲染:https://blog.csdn.net/weixin_37644989/article/details/94409430

一步一步学Vue(三)

接上篇,有同事看了我写的博客,觉得我这人不靠谱,文笔太白了,不够严肃,所以这次我一定要做一个严肃的人,写博客要有写博客的态度,第三篇开始我在考虑一个问题,会不会太着急了,要知道Vue的组件化时它的一个买点,现在还没有完全的过一遍其核心概念我就开始结合后端了,有点操之过急了,没写过这类博文,大家见谅. 计划由于上述原因就会有些变动,会在接下来的文章中,先以demo的形式把一些核心概念先过一遍,这样我们才能写逼格很高的代码,要不写代码的时候总是捉急,就如以前学数学概念的时候,没学到的知识不能用,但是

Vue (三) --- Vue 组件开发

------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的

Vue(三)之前端路由

01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变后,立马发送请求,响应整个页面,有可能资源过多,传统开发会让前端的页面出现 “白屏” 用户体验不好 (2)SPA 单页面应用:锚点值的改变后,不会立刻发送请求,而是在某个合适的时机,发送ajax请求,局部改变页面中的数据,页面不立刻跳转用户体验好 2.如何来使用vue-router 它是vue中核心

Vue(三) v-bind 及 class 与 style 绑定

DOM 元素经常会动态绑定一些 class 类名或 style 样式,现在介绍使用 v-bind 指令来绑定 class 和 style 的多种方法. 了解 v-bind 指令在之前已经介绍了指令 v-bind 的基本用法以及它的语法糖,它的主要用法是动态更新 HTML 元素上的属性,回顾之前的一个样例: <div id="app"> <a v-bind:href="url">百度一下</a> </div> <

vue三要素及底层实现机制

深入解析Vue 我们首先来熟悉一下我们这个文档所学习内容的流程. 先对比一下jQuery和Vue的区别,再讲述Vue的MVVM模型,接着讲解Vue的实现流程. 当然,我是不相信没有对比哪来的伤害,没有伤害哪能让人记忆深入骨髓咧,向来都是被伤害过的人我才会记得你,我要恨你一辈子 ~ ~ 哈哈,这当然是个泛词,我们今天的重点也不是要你真的去恨谁哈,一起来看今日焦点,jQuery 和 Vue的生死之战. 我们来看看jQuery 和 Vue 分别具有什么夺命技能,来来来,看官们看好了. 一.jQuery

vue(三)

一.vue的特点 1.响应式的数据绑定(一旦修改了数据,立马更新视图) 数据驱动思想 (数据到视图的映射.操作数据改变视图.简化对DOM的操作) 追踪依赖变化 ( Object.defineProperty .watcher 实例对象) 把一个普通 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是仅 E

Vue三步完成跨域请求

三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target:'https://www.baidu.com', changeOrigin:true, pathRewrite:{ '^/ap

VUE三 vue-router（路由）详解

前端路由根据不同的 url 地址展示不同的内容或页面,无需依赖服务器根据不同URL进行页面展示操作优点用户体验好,不需要每次都从服务器全部获取,快速展现给用户缺点使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置一.路由(以user为例) userList-->用户列表页的路由所加载的代码(router-->index.js) import Vue from 'vue' //引入vue import

从零开始学习Vue(三)

我们从一个例子来学习组件,vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar 这个例子用到其他组件,对于初学者来说,一下子要了解那么多组件的使用,会变得一头雾水.所以我把这个例子改写了一下,只需要依赖Vue. 然后最好FQ安装一个chrome的扩展 vue-devtools,这样可以更好看到组件的内容组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊

vue(三)-父子组件通信

原因 : Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props 父组件给子组件传递数据 props:作用是父组件给子组件传递数据. 语法:参考<vue(二)-父子组件语法>. 注意要点: 1: 子组件要显式声明需要哪些数据.语法: props{ item:{ default(){ return } } } 2:从父组件用props传进来的数据,一般不要改动,因为改动之后,父组件中数据也变了,但是(敲黑板),

前端框架开始学习Vue(三)

初步安装.与搭建 https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目安装 nodejs,,, npm i == npm install 默认安装当前目录下package.json内的[‘devDependencies’,‘dependencies’]的模块,, 当使用npm install --production或者注明NODE_ENV变量值为production时,只会下载dependencies中的模块 d

Vue(三)--循环语句

v-for: v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. demo1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script>

vue 三目运算

:class="followed ? 'btn-success':'btn-secondary'"

Vue框架（三）——Vue项目搭建和项目目录介绍、组件、路由

Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注:2或3终端安装失败时,可以清空 npm缓存再重复执行失败的步骤 npm cache clean --f

Ruoyi表单构建

Ruoyi表单构建通过拖动组件就能自动生成前端代码,很方便,所以本文简单通过上层函数源码来梳理一下大致流程,如有需要再自行仔细一行行分析底层代码. 组件拖动实现组件拖动功能主要依赖第三方库:VueDragger.简单通过例子+注释介绍一下: <draggable class="components-draggable" :list="inputComponents" :group="{ name: 'componentsGroup', pull:

Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

一.前言 1.用vuex实现加入购物车操作 2.购物车详情页面 3.点击删除按钮,删除购物详情页面里的对应商品二.主要内容 1.用vuex加入购物车 (1)在src目录下创建store.js, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //vuex五大将 state:{ num:1//小球的数量默认为1 }, gette

Vue（一）创建第一个Vue程序

一.下载安装nodeJs 基于node.js,利用淘宝npm镜像安装相关依赖.由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 -- npm install -g cnpm --registry=https://registry.npm.taobao.org 二.第一种方法,直接下载vuejs 可以查看vue所以版本安装vue最新版本可以下载最新的vuejs版本然后直接在你的项目中引入js文件,即可使用vue 三.第二种方法,使用vue-cli创建vue项目 1.安装vue-cli脚手

Vue之初识Vue

前言如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 一.Vue简介 1.1 渐进式框架-Vue vue官网说:Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 渐进式我个人理解就是阶梯式向前.vue是

vue中的dom基本渲染

一.输出动态标签请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击. <div id="J_app"> <div v-html="rawHtml"></div> </div> var vapp = new Vue({ el: '#J_app', data: { rawHtml:'<p>输出标签和内容</p>' } }) 二.输出动态文本内容 <div id=

ruoyi-vue(三) 一支

热门专题