Vue
laoyaotask
Vue,PHP,Python,Office
展开
-
vue3+flask 简易登录功能实现
较为关键的几个点有:flask中session功能的应用和接收前端传递数据的方式、vue3中的组件跳转等。原创 2023-06-20 00:07:03 · 1662 阅读 · 0 评论 -
Vue3 Flask 渐进式入门笔记
以下均在Windows 10环境下实现。原创 2023-06-19 13:46:22 · 1843 阅读 · 0 评论 -
将echarts 封装为vue组件 动态加载数据——以饼状图为例
基本原理:1、创建一个用于展示图形的vue组件,保留接收数据的接口,作为子组件使用。2、在父组件中引用上述子组件,同时传递数据给子组件。本文在main.js中全局引入echarts,代码为:import * as echarts from 'echarts';Vue.prototype.$echarts = echarts子组件echartscom.vue:<template> <div class="echartsCommon"> <div sty原创 2022-04-23 20:23:33 · 4123 阅读 · 1 评论 -
vue 动态加载调查问卷的内容
前端用到了bootstrap-vue框架<template> <!-- 提示窗 --> <b-alert :show="dismissCountDown" fade :variant="alertType" @dismiss-count-down="countDownChanged" style="width: 20rem;height:3.5rem;position: fixed;top:0rem;bottom:0rem;left:0rem;ri原创 2022-04-23 17:33:42 · 1936 阅读 · 0 评论 -
vue+php 上传附件并回显
前端(使用了bootstrap-vue框架): <div style="text-align: left;"> <b-button size="md" pill variant="outline-primary" class="mt-2" @click="openFileWindow()"><span class="fa fa-plus"></span> 上传附件</b-button> </di原创 2022-04-23 17:21:48 · 640 阅读 · 0 评论 -
Vue后台管理页面总体结构及主要功能设计
后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密、退出菜单。中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局。其中导航菜单可以用el-menu配合el-menu-item来实现。用v-if控制一个变量值的变化,来控制在操作区域显示哪个组件。具体代码如下<template> <div> <el-container> <el-header> <el-row c原创 2022-04-23 17:07:11 · 2061 阅读 · 0 评论 -
Vue Element-ui PHP 实现随机抽题
需求如题。点击开始按钮后,在一个文本框中显示跳转的数字,从1至9,同时开始按钮的文字变为停止,点击停止数字不再跳动,显示当前数字对应的题目内容。另设一个重置按钮,清空当前所选题目。html部分<!--显示操作按钮--><el-row style=" text-align: left;"> <h2>二、随机抽取题</h2> <div style="padding-left: 52px;"> <el-原创 2022-01-09 13:41:00 · 590 阅读 · 0 评论 -
Vue XLSX实现解析excel文件并将数据保存到服务器端
需求如题。这里的关键点是对XLSX使用方式的理解与掌握,难点是数据本身的清洗、格式化过程。html部分<el-button size="mini" type="success" round @click="importFromxlsx()" title="导入人员"><i class="el-icon-upload2"></i> </el-button>   <a href="/static/看护人原创 2022-01-07 00:48:10 · 979 阅读 · 0 评论 -
Vue mint-ui 动态生成单选表单并绑定属性(含文件上传)
需求为保安人员研发一款巡逻记录小应用,巡逻的内容从服务器端获取,对应每个巡逻内容须提交巡逻结果和一张印证图片。思路从后台拉取数据动态生成单选组,并绑定数据属性,每一个单选组对应一个文件上传功能。具体为:根据后台拉取的单选组内容,在data()中动态创建一个json数据,包含单选项目本身的内容、存储用户选择值和对应的图片保存路径。代码html部分:<template> <div style="text-align: left;padding-bottom: 50px;">原创 2022-01-07 00:25:36 · 937 阅读 · 0 评论 -
vue npm 实现本地开发并部署到本地Webserver的方法
尝试在本地开发并部署到本地的apache下的WWW/test/目录中。过程如下:软件环境vue版本:2.9.6npm版本:6.14.10开发工具:HBuilder XWebServer:Apacher 2.4后端:PHP 7.3.4OS:Windows 10创建项目并修改配置文件1、创建项目利用cmd访问到D:\Projects\目录下,执行vue init webpack test可以此创建名为test的vue项目。安装axios,用于访问后端cd testnpm i ax原创 2021-01-29 01:34:20 · 760 阅读 · 0 评论 -
基于Vue开发钉钉企业内部应用的鉴权过程的实现
笔者在之前的博文中曾经介绍过钉钉企业内部应用的鉴权过程的实现方式,当时前端选用的是jquery。上周学习了Vue,并尝试开发了一款简易的钉钉企业内部应用。现实现过程作概括总结。PS:因笔者尚未学习Webpack工具,本文使用script标签引入vue.js,利用httpVueLoader引入外部Vue组件。index.html <head> <meta...原创 2020-04-28 23:27:49 · 1625 阅读 · 0 评论 -
Vue.js 基本知识——基于script标签引入
1、使用Script标签引入vue的方法<script src="https://unpkg.com/vue/dist/vue.js"></script>也可以将vue.js文件下载至项目目录。调试环境建议用vue.js,生产环境建议用vue.min.js2、组件必须有一个顶级容器,Vue的功能必须要在这此容器内。 <div id="myApp">...原创 2019-07-01 01:27:58 · 42527 阅读 · 1 评论