草庐IT

nodejs_vue

全部标签

vue3 实现pdf预览

需要下载pdfjs-disttemplate>a-modalclass="fill-modal"v-model:open="state.visible":title="state.modalTitle"width="50%"@cancel="handleCancel">divclass="preview-btns-posi">a-buttontype="primary"@click="exportBtn":loading="state.downLoading">下载/a-button>a-button@click="handleCancel"type="primary">返回/a-button

vue2 使用 cesium 篇 【第一篇】

vue2使用cesium篇今天好好写一篇哈,之前写的半死不活的。首先说明:这篇博文是我边做边写的,小白也是,实现效果会同时发布截图,如果没有实现也会说明,仅仅作为技术积累,选择性分享,不做教学哈。不好别喷。安装cesium这个就很简单,只需要一句简简单单的命令就可以实现在vue项目中安装cesium了。npminstallcesium--save然后等待安装完成就可以了兄弟们!!这个样子嘞,就是安装完成了,会开发vue的都晓得哈。看一下依赖包里面,也成功下载了cesium的依赖,非常棒!!接入项目cesium接下来就是使用,这个步骤很不好整,cesium的官方文档写的很不友好,许多新手小白很难

nginx配置vue前端代理

背景:做一个前后端分离的项目,我这里是vue3+view+ts创建的前端项目,在前端配置跨域请求。一、开发阶段在vue.config.js中配置devserver的proxy进行代理请求配置,然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候,需要再重新配置请求代理。vite.config.ts中代码配置如下:devServer:{port:8089,//启动端口open:true,//启动后是否自动打开网页proxy:{"/api":{target:"http://192.168.xx.xx:8083",//如果访问/api就在其前面加targ

vue3+动态路由

     动态路由,也就是不是写死的路由,根据自己的需求加载不同的页面;现在很多的后台管理项目就是根据用户角色的不同分配不同的功能菜单(页面);    根据用户登录的角色返回可以访问的页面路由,前端将路由存储到 pinia 实现持久话存储,然后在路由前置守卫用addRoute动态添加路由,对页面进行渲染。    通常的实现步骤:前端调用登录接口获取用户ID(uid)     前端用uid请求接口获取路由表(JSON)对路由表进行数据格式话形成树形结构树形结构转vue路由结构路由结构转 静态路由树形结构转 菜单组件 下面是我练习一个demo,仅用于学习与记录;服务端代码结构:     服务端在本

Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤,从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf)

目录一丶前言二、安装nginx1.准备nginx2.服务器上传nginx3.解压nginx 4.安装相关依赖库5.编译nginx6.启动nginx7.访问nginx 8.安装成系统服务三、安装Tomcat1.安装JDK(如果安装并配置环境变量了可以略过)2.准备Tomcat3.服务器上传tomcat4.解压tomcat 5.启动tomcat6.访问tomcat7.设置Tomcat开机启动 四、前端Vue打包1.配置文件.env.production2.配置vite.config.js文件3.配置reques.js4.配置router.js5.配置package.json五、后端SpringBo

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景,处理方式也不外乎三个步骤:1.通过全局状态管理定义状态值(vuex、pinia等)。2.在程序主入口监听状态值变化,从而展示/隐藏laoding动画。3.在请求和相应拦截器中变更状态值。第一二步骤处理大同小异,但在第三步中,网上很多博文分享的方法是:在请求拦截中展示loading,在响应拦截器中判断收到成功响应时直接隐藏loading,这种方法看似可行但实际过程中却有问题。例如,假设在第0秒时同时向后台发送了两个异步请求A和B,由于网络或处理逻辑不同,A请求0.5秒秒收到成功响应,B请求2秒才收到。那在第0.5秒,响应拦截器就会把loading状态变

vue使用Axios详细流程

一、安装使用npm:npminstallaxios或使用yarn:yarnaddaxios二、配置Axios在src/plugins目录下新建axios.js文件,在该文件里对axios进行自定义配置,如下图: axios.js全部代码:"usestrict";importVuefrom'vue';importaxiosfrom"axios";//Fullconfig:https://github.com/axios/axios#request-config//axios.defaults.baseURL=process.env.baseURL||process.env.apiUrl||'';

计算机毕业设计springboot+vue基本微信小程序的汽车俱乐部系统

本文主要阐述了企业小程序系统的开发过程,从最初的系统分析、总体设计,到数据库设计,再到最后的系统的具体设计,分四大章分别做了详细的介绍。本小程序系统有着明确的设计目的和范围,简明的前台页面设计,强大的后台管理功能。前台界面主要是用微信开发工具进行设计。汽车俱乐部小程序主要是为了方便车主而建立的小程序系统。一切本着服务车主、方便车主的原则,以直观、快捷、友好的面向广大车主用户,提供了最及时的新闻,最体贴最人性化的服务,最有意思的活动,公司信息方面,则是透明的,全方位的向车主展示。后台方面,我们强大的后台管理系统也在不断的为车主们更新行业新闻和最新的公告。环境需要1.运行环境:微信开发者工具,最好

Vue基础17之配置代理

Vue基础17配置代理使用node启动两台服务器server1.jsserver2.js使用axios发送ajax请求安装axios库引入axios库发送axios请求App.vue跨域问题解决代理服务器开启:方式一代理服务器开启:方式二server1.jsserver2.jsvue.config.jsApp.vue总结:Vue脚手架配置代理方法一方法二github案例静态组件配置代理使用node启动两台服务器server1.jsconstexpress=require('express')constapp=express()app.use((request,response,next)=>{

Vue项目启动后跳转到制定路由页面

前言今天把自己的项目布局完成了,但是想在项目启动的时候默认跳转到登录页面。这其实需要借助路由实现跳转开始编写之前,大家可以看下我的布局:安装并使用路由关于如何安装并使用路由,可以参考:Vue安装并使用路由和路由器编写路由规则需要对index.js进行修改,根据需求配置需要跳转的那个组件的路由,我的需求已经很明确了,就是登录的组件。引入需要的组件//引入登录组件importLoginfrom'../pages/Login.vue'配置路由然后配置login组件的路由//登录组件路由{path:'/login',component:Login,name:"Login"},配置完login组件路由后