草庐IT

Vue-Router

全部标签

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍。我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息,以变化规律拥抱变化的内容。如对于服务端来说,后端代码中类的继承关系和特殊的接口名称规律,我们可以根据用户选中的表,获取表之间的字段和关系信息,生成各种DTO和接口类等代码文件;而前端界面来说,也是依照数据库的表信息、字段信息等内容,实现查询区域、查询列表、新增界面、编辑界面、查看界面、导入导出界面等内容进行相应的生成,并整合相关的界面事件关系,可以实现相关处理的按钮动作处理。本篇随笔介绍如何使用代

Jenkins+svn+nginx实现windows环境自动部署vue前端项目

前面文章介绍了Jenkins+svn+tomcat实现自动化部署,现在终于有空抽时间出来写下Jenkins+svn+nginx实现自动部署vue前端项目。jenkins的安装和配置已经在前面文章进行介绍,下面介绍实现vue前端项目需要进行的哪些额外的步骤。注意:在安装jenkins和nginx的前提下,如果还没安装nginx,请自行百度1:登陆jenkins,在系统管理——插件管理中,添加两个插件。Node.js和Postbuildtask.其中node.js是用来打包vue项目,postbuildtask用来把打包好的项目自动移动到nginx目录。      2.配置下NodeJS参数,打开

Vue与后端交互、生命周期

一:Axios1.简介①Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中②axios官网:axios中文网|axiosAPI中文文档|axios2.实例json文件:film.json(这里只是一部分,原代码太多了...)https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying后端:main.pyimportjsonfromflaskimportFlask,jsonifyapp=Flask(__name__)@app.route('/film')defindex():print('请求来了')withopen('

Vue + Element-Plus + SpringBoot + WebSocket实现简易网络聊天室

项目流程图1.前端搭建:    前端用Vue+Element-Plus来搭建,由登录页面和聊天页面组成1.1登录页面    由一个昵称输入框组成,用户输入自己的昵称若昵称和别的用户不重复,则可进入聊天室,否则提示错误并请重新输入。EZ-Chat进入        这段代码是一个Vue.js组件的模板部分,用于实现聊天应用的用户昵称输入和登录功能import{reactive,ref}from"vue";importtype{FormInstance,FormRules}from"element-plus";import{ElMessage}from"element-plus";importro

vue通知公告左右不间断循环滚动,鼠标放置停止滚动,移开重新滚动

思路:1.准备两个span标签,设置一个定时器,让两个span标签一起移动,2.当第二个span标签的尾部移动到盒子的尾部,让第一个span标签头部重新回到盒子尾部位置,跟在第二个span标签后面一起移动,3.当第二个span标签的尾部移动到盒子头部,将他的位置设置为0,跟在第一个span标签后,然后不断循环,达到不间断的效果注意:需要将两个span标签的总宽度大于盒子宽度通知公告左右滚动{{message}}{{message}}{{message}}{{message}}exportdefault{data(){return{message:'今天天气好晴朗,处处好风光!今天天气好晴朗,处

2023年新一代开发者工具 Vue ,正式开源!

以下文章来源于前端充电宝 ,作者CUGGZ近日,Vue新一代开发者工具(DevTools)正式开源!VueDevTools是一个旨在增强Vue开发人员体验的工具,它提供了一些功能来帮助开发者更好地了解Vue应用。下面就来看看新一代VueDevTools的功能和使用方法。官网:https://devtools-next.vuejs.org/功能首先来看看VueDevTools中都有哪些功能。Overview:显示应用的概述,包括Vue版本、页面数量和组件数量。Pages:Pages选项卡显示当前的路由以及相关信息,并提供在页面之间快速导航的方法,还可以使用文本框查看每个路由的匹配情况。Compo

Vue中刷新页面的三种方式

下面介绍三种刷新页面方法第一种类似于你浏览器上的刷新页面按钮有人说闪白,但是我这个没出现闪白,咱也不知道为啥。。。。location.reload()第二种通过Vue自带的路由进行跳转,闪白this.$router.go(0)第三种通过在父页面的上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provide和inject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新。不闪白,地址栏会不会出现快速切换的过程,用户体验好在app.vue中template>divid="app">router-view

分析 vant4 源码,学会用 vue3 + ts 开发毫秒级渲染的倒计时组件,真是妙啊

2022年11月23日首发于掘金,现在同步到公众号。11.前言大家好,我是若川。推荐点右上方蓝字若川视野把我的公众号设为星标。我倾力持续组织了一年多源码共读,感兴趣的可以加我微信lxchuan12参与。另外,想学源码,极力推荐关注我写的专栏《学习源码整体架构系列》,目前是掘金关注人数(4.6k+人)第一的专栏,写有20余篇源码文章。我们开发业务时经常会使用到组件库,一般来说,很多时候我们不需要关心内部实现。但是如果希望学习和深究里面的原理,这时我们可以分析自己使用的组件库实现。有哪些优雅实现、最佳实践、前沿技术等都可以值得我们借鉴。相比于原生JS等源码。我们或许更应该学习,正在使用的组件库的源

基于Java+Vue的高校二手书籍交易平台(附开题报告)

💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。👇🏻精彩专栏推荐订阅👇🏻计算机毕业设计精品项目案例-200套🌟文末获取源码+数据库+文档🌟感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以和学长沟通,希望帮助更多的人一、前言现今,高校学生持有的二手书籍已经成为一种即时的可再利用资源。然而,由于信息沟通不充分和二手市场的不成熟,造成了这种资源的严重浪费。本文旨在分析建立一个能够调用各高校书籍信息的系统作为交易平台,实现二手书籍的交易,便于各高校学生了解到所需书籍的可能来源,克服传统二手书市场信息滞后的缺陷,将模式

基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

Tansci-Boot基于SpringBoot2+magic-api+Vue3+ElementPlus+amis3.0快速开发管理系统Tansci-Boot是一个前后端分离后台管理系统,前端集成amis低代码前端框架,后端集成magic-api的接口快速开发框架。包含基础权限、安全认证、以及常用的一些组件功能。项目易上手,技术更综合,能力更全面。amis是一个低代码前端框架,它使用JSON配置来生成页面,可以减少页面开发工作量,极大提升效率。magic-api一个基于Java的接口快速开发框架,通过magic-api提供的UI界面完成编写接口,无需定义Controller、Service、Da