![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
KiMiWaWonderful
我就是个傲娇的孩子
展开
-
vue-video-player:将视频上传至腾讯云点播平台,在播放器中选择播放
一、上传我使用的是腾讯云点播平台,按照教程上传视频,得到url。二、代码我的思路是:写一个选择器,将选中的value传给vue-video-player的src中。HTML:<el-select v-model="value" placeholder="请选择检测对象" @change="changeUrl"> <el-option ...原创 2020-02-17 23:38:09 · 934 阅读 · 0 评论 -
vue-baidu-map:实现地点搜索和路径规划
一、自定义一个百度地图控件:该控件包括一个输入框,用于输入要搜索的地址;一个路线按钮,点击后弹出面板,用于选择出行方式和输入始终点;一个搜索按钮。<bm-control> <div id="searchbox" class="clearfix"> <div id="searchbox-container"> ...原创 2020-02-14 19:43:38 · 3294 阅读 · 1 评论 -
在Vue中调用和风天气api展示天气详情和生活指数
api的具体使用可以看官网。我主要使用两个api。我新建了一个叫Weather.vue的Vue组件。HTML代码:我使用Element-UI框架的el-tabs,弄了一个标签页,可以切换查看天气详情和生活指数。<template> <div> <el-tabs v-model="activeName" type="card" @tab-clic...原创 2020-02-14 17:52:18 · 2809 阅读 · 1 评论 -
Vue实现视频播放(二):使用Vue组件vue-video-player
一、安装npm install vue-video-player --save二、在组件中引用import { videoPlayer } from 'vue-video-player'import 'video.js/dist/video-js.css'export default { components: { videoPlayer }}三、HTML代码...原创 2020-02-10 16:36:07 · 3552 阅读 · 0 评论 -
Vue实现视频播放(一):使用原生方法写一个视频播放组件
看的是黑马程序员的教程,记录下来当做笔记。HTML:使用了video标签该标签的事件:ontimeupdate:在视频进行播放的时候持续触发,我们可以监听这个事件,并在这个事件中获取视频的当前播放时间;oncanplay:在视频信息加载完毕之后触发总时长可以通过oncanplay获取,但是当前播放时间需要在ontimeupdate事件中持续更新,当视频信息加载完毕之后,会自动的触发on...原创 2020-02-10 16:26:43 · 8774 阅读 · 6 评论 -
初次尝试SpringBoot+vue-baidu-map+WebSocket
因为项目需求,后台与前端需要保持长期的连接,后台可以主动地向前端发送数据。因为WebSocket一直很热门,因此趁此机会学习一下。一、后端代码(1)添加依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp...原创 2020-02-08 10:10:17 · 346 阅读 · 0 评论 -
Vue+axios+Element UI+SpringBoot+Spring Data JPA实现分组查看
今天从中午弄到晚上九点多就一直在纠结,到底是经验不够,哎一 后端要实现的是找出所有分组及每个分组下的所有车辆(1)SQL语句的编写车辆为一张表,分组为一张表,车辆表里的分组ID对应着分组表里的主键ID。我们设想了好多条SQL语句,比如:select t_car.id ,t_car.car_group from t_car group by t_car.id ;select ...原创 2019-10-09 22:35:52 · 271 阅读 · 0 评论 -
Vue+axios+SpringBoot+Spring Data JPA实现增加和修改
一 增加我的设想是:前端将对象转化成Json字符串,传送给后端,后端接收了Json字符串后再使用Json工具类将其转化成对象。前端代码:let newCar = { gpsNumber:this.car.gpsNumber, carNumber:this.car.carNumber, carType:this...原创 2019-10-08 20:49:52 · 545 阅读 · 0 评论 -
Vue+ElementUI实现简单的用户管理系统(五):编辑用户信息
(1)编辑用户的界面界面和和添加用户的界面差不多,只是需要显示用户原来的信息。<template> <div class="edit"> <h1>编辑用户</h1> <el-form :label-position="labelPosition" label-width="80px" ...原创 2019-10-06 16:58:42 · 4679 阅读 · 0 评论 -
Vue+ElementUI实现简单的用户管理系统(四):查看用户详情页及删除用户
(一)展示用户详细信息在点击“查看”按钮时,传递了用户的Id,我们要把这个Id拿出来:this.$route.query.idcreated() { this.handle(this.$route.query.id); },handle方法,也就是根据id使用axios发送get请求拿到用户的详细信息:handle(id){ let config = {...原创 2019-10-06 16:46:05 · 5653 阅读 · 0 评论 -
Vue+ElementUI实现简单的用户管理系统(三):使用ElementUI的表单组件实现添加用户
(1)使用ElementUI的表单组件及表单验证功能<template> <div class="add"> <h1>添加用户</h1> <el-form :label-position="labelPosition" label-width="80px" :model="custome...原创 2019-10-06 16:27:30 · 2917 阅读 · 0 评论 -
Vue+ElementUI实现简单的用户管理系统(二):axios获取数据、使用table组件显示、vue-router带参数跳转
有了接口和数据后,就要开始获取数据并把它们显示出来了。(一)axios获取数据在methods里写一个方法。一开始我没有使用箭头函数而是使用下面这种写法, handle(){ let config = { url:'http://localhost:3000/users', method: 'get', } ...原创 2019-10-06 16:07:57 · 1869 阅读 · 0 评论 -
Vue+ElementUI实现简单的用户管理系统(一):使用JsonServer模拟接口
我这里没有写后台题接口,而是使用了JsonServer模拟接口和数据。GitHub地址:https://github.com/typicode/json-server,可以按照里面的教程进行学习。1)新建一个文件夹,cd进去,npm init2)npm install json-server --save3)新建一个db.json文件,写入以下内容:{ "users": [ ...原创 2019-10-06 15:29:34 · 974 阅读 · 0 评论 -
SpringBoot+Vue+ElementUI实现头像上传功能
从安装FastDFS开始,断断续续折腾了两天多,终于基本粗糙地实现了这个功能。遇到了许多bug,记录一下。后端:Controller:(1)这里要加上 @CrossOrigin解决跨域问题(2)我的参数的注解是@RequestParam,而不是@RequestBody,这会导致接下来前端使用axios进行POST请求时,参数传不到后台的情况。这个问题在前端解决。(3)我的设想是前端将图...原创 2019-09-30 19:37:16 · 5657 阅读 · 1 评论