博主逸尘
这一切都将过去!
展开
-
Vue开发实战二十六:毕业设计之校园网
毕业设计之校园网络购买及统计原创 2023-05-13 14:58:18 · 192 阅读 · 0 评论 -
Vue开发实战二十五:用户权限控制
Vue用户权限控制的使用示例,包含后端接口,web端页面,uni小程序的使用说明原创 2022-11-22 11:36:45 · 278 阅读 · 0 评论 -
Vue开发实战二十四:左侧树与右侧列表勾选关联的实现
Vue中el-tree与el-table勾选关联的实现原创 2022-09-23 09:49:16 · 2083 阅读 · 2 评论 -
Vue开发实战二十三:导出功能的实现
vue列表导出图片及数据功能的实现原创 2022-09-20 10:07:40 · 436 阅读 · 0 评论 -
Vue开发实战二十二:列表中表格动态合并的实现
Vue+elementUI实现table中表格的动态合并原创 2022-06-20 13:50:15 · 733 阅读 · 0 评论 -
Vue开发实战二十一:html项目中引入elementUI的实现
文章目录1.效果预览2.页面引入vue及elementUI样式3.页面中代码1.效果预览2.页面引入vue及elementUI样式<link rel="stylesheet" href="element/element.css"><script src="element/vue.js"></script><script src="element/element.js"></script>注意:本地项目文件夹element中需要包含f原创 2022-05-31 17:48:09 · 1054 阅读 · 0 评论 -
Vue开发实战二十:一个端口访问多个项目的实现
文章目录1.最终效果预览2.项目打包及Nginx配置说明1.最终效果预览2.项目打包及Nginx配置说明通过域名加端口访问的项目,在前端正常打包部署即可,如果不想要域名可以用默认的80端口,域名+端口的项目nginx配置如下 server { listen 5501; server_name localhost; charset utf-8; location / { root /home/di原创 2022-05-31 16:45:48 · 598 阅读 · 0 评论 -
Vue开发实战十九:省市区县级联新增及编辑功能的实现
文章目录1.最终效果图2.三级级联页面的实现3.三级级联的方法实现4.三级级联编辑功能显示动态的区县数据的名称5.四级级联的实现6.四级级联规则校验7.四级级联事件获取各级的值8.四级级联编辑功能1.最终效果图三级级联四级级联说明:建议使用el-cascader来实现省市区级联功能,其中三级级联的实现用的是三个el-select关联,这种方式需要写不少代码,并且省市区是三个接口,根据所选择的数据关联查询下一级,注意在编辑的时候要根据获取到的市、区县数据分别在请求接口拿到区域的数据,这样所属市、原创 2022-04-09 20:11:05 · 1948 阅读 · 0 评论 -
Vue开发实战十八:官网搭建全过程
文章目录1.最终效果图1.1轮播图1.2首页1.3案例管理模块1.4服务流程1.5新闻资讯1.6合作伙伴1.7关于我们1.8联系我们1.9后台管理管理员2.0后台体验用户2.1体验用户只能查看没有新增、修改、删除权限2.2官网前端数据只开首页及案例如下2.官网前端页面的实现3.后端管理系统页面4.后台接口的实现5.Linux服务器上传文件及配置启动6.Nginx的配置本来打算写个七八篇做一个官网搭建的系列,之前写过一篇十七新闻资讯的实现,后来的模块和之前的基本类似就不在重复,这篇文章从前后端到服务器,详细原创 2022-03-16 16:48:52 · 17763 阅读 · 17 评论 -
Vue开发实战十七:官网搭建之新闻资讯模块的实现
文章目录1.新闻资讯页面最终效果2.官网前端页面展示的实现3.官网后端管理页面的实现4.后端数据库的设计5.后端数据查询6.map.xml的实现从实战十六开始,准备逐步从头到尾搭建一个官网,借鉴网上开源的项目,先自己搭好架子,然后开始每个模块进行数据交互,项目整体包括:1.siteFront官网展示页面2.siteAdmin官网管理页面3.siteMaster官网前端及管理端数据提供4.mysql数据库5.redis缓存1.新闻资讯页面最终效果官网新闻资讯前10条展示官网新闻资讯更多展示原创 2022-03-09 20:53:40 · 2701 阅读 · 0 评论 -
Vue开发实战十六:自定义弹框页面
文章目录1.最终效果预览2.主页面布局3.主页面逻辑的实现4.单选弹框dialog-radio.vue5.弹框密码修改update-password.vue1.最终效果预览2.主页面布局<template><div>...... <add-or-update v-if="dialogRadioVisible" ref="dialogRadio" @refreshDataList="han原创 2022-03-01 13:59:11 · 1059 阅读 · 0 评论 -
Vue开发实战十五:登录页实现账号及二维码切换功能
文章目录1.最终效果图预览2.页面布局<el-button-group style="margin:20px;display:flex;justify-content:center;"> <el-button size="mini" :type="accountButton" @click="accountClick"> 账号登录 </el-原创 2022-02-16 09:21:08 · 1745 阅读 · 0 评论 -
Vue开发实战十四:图片转base64上传及修改的实现
文章目录1.最终效果2.布局3.on-change事件的实现4.必填项校验说明:实际项目中需要我们将图片转为base64作为一个字段保存,下面我们来探究下如何实现一个图片base64的上传及修改1.最终效果图片上传图片修改2.布局<el-form-item label="图标" prop="icon"> <span slot="label"> <el-tooltip content="只能上传jpg/png格式图片,且原创 2022-02-11 09:29:11 · 807 阅读 · 0 评论 -
Vue开发实战十三:Vben框架之后端搭建及启动
文章目录1.效果图2.安装JDK 1.8+3.安装MySQL 5.6+4.安装Redis 4.0+5.安装Nacos 2.0.3+6.Idea导入后端项目并配置maven7.Idea中启动工程上篇文章我们实现了Vben框架的编辑及Linux部署,下面我们来搞下后端,将后端跑起来,毕竟光一个前端是没法使用的。1.效果图前端列表请求后端我们看到确实走断点了,证明前端确实是访问当前启动的后端数据2.安装JDK 1.8+JDK官网下载地址:https://www.oracle.com/java/t原创 2021-12-13 17:03:01 · 4143 阅读 · 0 评论 -
Vue开发实战十二:Vben项目在Linux上部署
文章目录1.项目效果预览2.开发环境配置及修改3.Linux中搭建Nginx4.Nginx下载解压及初始化5.Nginx配置6.启动Nginx并访问管理系统刚做完一个基于Vben框架开发的项目,里面用的技术栈如下Vue 3.2.12Pinia 2.0.0-rc.8vue-i18n 9.1.7typescript 4.4.2ant-design-vue 2.2.6axios 0.21.3vue-router 4.2.8-SNAPSHOTvite 2.5.8之前做的几个项目都是基于Vue2+原创 2021-12-10 10:26:31 · 991 阅读 · 2 评论 -
Vue开发实战十一:Vue3+TS+Antd实现vben项目的增删改查
文章目录1.效果图预览2.列表的实现3.数据新增、修改及附件上传的实现4.详情界面的实现说明:之前用Vue2+ElementUI|iView用的那是相当的爽,写法和之前做移动的用的Ionic很是类似,最近新开了一个项目,用的Vue3+TS+Antd那真是一把辛酸一把泪,完全摸索+找规律+瞎蒙,开发了一个模块之后终于有所得,以此篇文章记录。1.效果图预览老规矩先上效果图列表新增附件上传修改详情2.列表的实现index.vue页面中template布局如下,BasicTable列原创 2021-12-03 15:23:42 · 3270 阅读 · 0 评论 -
Vue开发实战十:表格展开显示列表的实现
文章目录1.效果图2.安装插件3.图二表格树的实现3.dataList数据获取并处理4.图一表格展开列表的实现5.列表页引入项目基于vue+iview开发,要求增加一个访客数据14天反查功能,点击当前访客数据实现展开或者在详情中实现均可,详情实现已经玩烂了,下面探究下列表中展开的实现。1.效果图第二种方式适用于列表数据与展开显示的数据字段相同或者类似的,下面介绍下这两种情况的实现。2.安装插件iview目前已更新为ViewUI,官网地址:https://www.iviewui.com/docs原创 2021-08-12 10:35:36 · 1559 阅读 · 7 评论 -
Vue开发实战九:列表字段动态展示及全数据排序
文章目录1. 先用u-table做一个列表2.向列表中加入列3.列字段全数据排序4.看下数据请求字段项目框架用的vue+elementUI,列表中展示的字段有的是固定字段、有的是从接口中取的数组,还有的是设置的每个用户能够动态展示及隐藏的字段,要求实现字段动态及全数据排序。1. 先用u-table做一个列表<u-table v-loading="dataListLoading" :data="dataList" ref="multipl原创 2021-08-10 13:43:48 · 1455 阅读 · 4 评论 -
Vue开发实战八:Linux+Nginx实现table列表图片数据导出excel
文章目录1.列表中图片数据绑定2.拿到列表中选中的数据,默认当前一页数据3.根据导出的字段组装数据4.导出数据中图片5.将图片数据随便换成网络图片数据6.在Linux服务器查找图片上传后保存路径7.Nginx配置映射图片路径8.重启Nginx后重新在浏览器访问新上传的图片路径9.在Vue代码中更改图片路径为Nginx映射路径,重新导出项目中做到一个功能,列表中有图片数据的展示,图片绑定到table列表中,选择列表的数据,需要能导出选中的数据,其他字段一把成功,图片怎么也导出不了,记录下解决过程。1.列表原创 2021-05-14 16:26:50 · 266 阅读 · 2 评论 -
Vue开发实战七:折叠面板+表格实现动态二维输入表格
文章目录1.最终效果图2.页面布局3.逻辑的实现需求是实现一个二维表格,并且行和列数据是动态的,并且表格能够折叠。1.最终效果图整体收缩效果整体展开效果动态添加单位单位数据为纵列,价格为横列,目前价格只开启了一个2.页面布局 <el-row> <el-col span="4" pull="0"> <el-form-item label="价格"原创 2022-03-01 14:48:12 · 1159 阅读 · 0 评论 -
Vue开发实战六:for循环input表单,实现动态绑定
文章目录1.最终效果图2.在data中定义3.折叠列表加表单输入循环4.在computed中计算两个输入表单之和5.表单提交组合需要提交的参数在新增页面中,新增的字段有时候往往是动态的,一般根据不同的用户展示不同的字段,这种情况,往往用户登录后就会拿到需要展示的字段信息,下面我们来看下如何动态绑定到Form表单中。1.最终效果图2.在data中定义 inputCountArr: [], countArr: [ { name: '数量一', id: '1' },原创 2021-03-08 15:58:12 · 7031 阅读 · 1 评论 -
Vue开发实战五:项目分页列表模块加载
文章目录1.在src下新建mixins文件,并完成公用参数配置及网络请求2.在需要加载分页列表的页面引入mixins配置3.最终页面展示如下项目中常用list分页,在mixins中整合分页列表,实现模块功能复用。1.在src下新建mixins文件,并完成公用参数配置及网络请求import qs from 'qs'export default { data() { return { // 设置属性 mixinViewModuleOptions: {原创 2021-03-08 16:35:26 · 242 阅读 · 0 评论 -
Vue开发实战四:Cascader 级联选择器的使用
文章目录1. 页面最终展示2.获取数据及组件选择3.组件引用及Demo实现4.调试数据适配组件5.配置组件属性适配数据6.组件数据获取1. 页面最终展示按需求要求只能选择第三级的数据,并且数据不超过三级,点击了第三级列表自动增加一条数据之前做的类似的功能新增及列表功能如下:2.获取数据及组件选择很多情况下我们获取到的数据并不符合我们的需要,因此需要我们处理下,当然这个工作可以交给后端,我前端要啥样的数据你就需要给我提供什么样的数据,先看下最初我们获取的数据如下:数据处理这里先不说,后面原创 2020-12-30 15:15:48 · 4180 阅读 · 0 评论 -
Vue开发实战三:Vue编译包Linux及Window服务器Nginx部署
文章目录1.打包Vue项目2.拿到编译文件dist文件夹,扔到服务器上3.下载Nginx并扔到服务器4.解压Nginx及配置5.Nginx初始化6.编译7.运行Nginx8.查看Nginx是否启动9.在浏览器访问下IP+端口号项目背景说明:最近一直在修改Vue前端的项目,今天接到领导要求,让我在内网139搭建一套数据安全服务支撑平台的前端系统,心里顿时翻了个360°白眼,大哥我是干Android开发的啊,Linux、Nginx没整过啊,之前封闭开发不是你部署的吗,好吧,既然领导说了,那也只能干了。1.原创 2020-12-11 16:28:13 · 2441 阅读 · 1 评论 -
Vue开发实战二:列表及购物车弹框的实现
文章目录1.环境搭建2.项目运行3.实现列表及购物弹框1.环境搭建之前是用的ionic开发,新建项目的环境是vue2.9.6,这次我们来升级下到最新版首先卸载之前的版本npm uninstall vue-cli -g然后执行更新命令npm install -g @vue/cli最后用vue -V查看下vue的版本号即可注意:vue-cli是版本2.0的用法,而3.0之后改成了vue/cli我们可以通过新建的项目目录的差别也能区分开项目是vue2.0还是vue3.0vue2.0版本的项目目原创 2020-11-02 20:07:39 · 659 阅读 · 0 评论 -
Vue开发实战一:演示demo搭建
近期由于公司要投一个比较重要的标,10来个人集体在宾馆开发了10来天了,前几天领导分配了个活给我,让我负责做其中的一个演示系统,用Vue,还好在此之前看过两三天Vue的使用,给了三张效果图如下:登录页首页系统中的一个模块界面1.新建一个项目,用vscode打开,先npm install下(之前用ionic开发的环境啥的都已经具备了)2.在代码中找到配置文件package.json,看看代码的运行命令 "scripts": { "dev": "vue-cli-service ser原创 2020-11-23 18:35:12 · 1463 阅读 · 0 评论