精华内容
下载资源
问答
  • Vue上传阿里云OSS(STS方式)

    千次阅读 2019-06-18 18:25:12
    一、准备工作 1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和... stsToken: data.stsToken, bucket: data.bucket }) } //testUpload.vue 将文件拖到此处,或点击上传 上传文件大小不能超过 1G 完成上传

    一、准备工作

    1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和AccessKeySecret。

    2. 创建Bucket,并登录OSS控制台

    3. 配置Bucket (很重要)

    • 将allowed origins(来源)设置成 *
    • 将allowed methods(允许methods)设置成 PUT, GET, POST, DELETE, HEAD
    • 将allowed headers(允许headers)设置成 *
    • 将expose headers(暴露headers)设置成 ETag   (这里需要换行)  x-oss-request-id

     

     

    可参考阿里官方文档:https://help.aliyun.com/docum...

    二、引入ali-oss

    有两种方式:

    1. 在HTML文件的<head>中包含如下标签:

    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"></script>

    2. 项目中安装ali-oss

    npm install ali-oss --save

    可参考阿里官方文档:https://github.com/ali-sdk/al...

    这里使用第二种。

    三、使用OSS

    关于直传,阿里官方给了三种方案:

    1. 客户端 JavaScript 签名后直传;
    2. 客户端申请服务端签名,然后打包上传;
    3. 客户端申请服务端签名,打包上传OSS后回调服务端。

    这里使用第一种。

    vue中使用步骤:

    1. 在src目录中创建utils文件夹
    2. utils文件夹中创建Client.js
    3. 在组件中创建testUpload.vue文件
    //Client.js 
    const OSS = require('ali-oss');
    
    export default function Client(data) {
        //后端提供数据
        return new OSS({
            region: data.region,  //oss-cn-beijing-internal.aliyuncs.com
            accessKeyId: data.accessKeyId,
            accessKeySecret: data.accessKeySecret,
            stsToken: data.stsToken,
            bucket: data.bucket
        })
    }

     

    //testUpload.vue 
    <template>
        <!--在此处添加渲染的内容-->
        <div>
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    drag
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :http-request="handleHttpRequest"
                    :headers="uploadHeaders"
                    :limit="files"
                    :disabled="disabled"
                    multiple
                    action=""
                    :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
            </el-upload>
        </div>
    </template>
    
    <script type="text/ecmascript-6">
        import Client from '../../utils/Client'
        //将渲染的内容导出
        export default{
            props: {},
            data(){
                return {
                    region: 'oss-cn-beijing',
                    bucket: '',//这里选择OSS容器
                    percentage: 0,
                    url: '',//后台获取token地址
                    ClientObj: null,
                    dataObj: {},
                    expiration: '',
                    fileList: [],
                    files: 10,
                    uploadHeaders: {
                        authorization: '*'
                    },
                    disabled: false,
                }
            },
            methods: {
                getDate(){
                    const date = new Date(),
                        year = date.getFullYear(),
                        month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`,
                        day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`,
                        hh = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`,
                        mm = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;
                        return `${year}${month}${day}${hh}${mm}`;
                },
                getAliToken(){ //获取Token
                    return new Promise((resolve, reject) => {
                        this.$axios({
                            method: 'POST',
                            url: this.url
                        }).then(res => {
                            if (res.success) {
                                const {expiration, tempAk, tempSk, token} = res.data;
                                this.expiration = expiration;
                                this.dataObj = {
                                    region: this.region,
                                    bucket: this.bucket,
                                    accessKeyId: tempAk,
                                    accessKeySecret: tempSk,
                                    stsToken: token
                                };
                                resolve(true);
                            } else {
                                reject(false);
                            }
                        }).catch(err => {
                            console.log(err);
                            reject(false);
                        })
                    })
                },
                beforeUpload(file){
                    return new Promise((resolve, reject) => {
                        this.getAliToken().then(response => {
                            if (response) {
                                resolve(response);
                            } else {
                                reject(response);
                            }
                        }).catch(err => {
                            console.log(err);
                            reject(err);
                        });
                    })
                },
                async handleHttpRequest(option){ //上传OSS
                    try {
                        let vm = this;
                        vm.disabled = true;
                        const client = Client(this.dataObj), file = option.file;
                        //随机命名
                        const random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop();
                        // 分片上传文件
                        await client.multipartUpload(random_name, file, {
                            progress: async function (p) {
                                let e = {};
                                e.percent = p * 100;
                                option.onProgress(e)
                            }
                        }).then(({res}) => {
                            console.log(res);
                            if (res.statusCode === 200) {
                                // option.onSuccess(ret)
                                return res.requestUrls
                            } else {
                                vm.disabled = false;
                                option.onError('上传失败');
                            }
                        }).catch(error => {
                            vm.disabled = false;
                            option.onError('上传失败');
                        });
    
                    } catch (error) {
                        console.error(error);
                        this.disabled = false;
                        option.onError('上传失败');
                    }
                },
                handleSuccess(response, file, fileList){
                    console.log(response);
                    console.log(file);
                    console.log(fileList);
                },
                // 随机生成文件名
                random_string(len) {
                    len = len || 32;
                    let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678', maxPos = chars.length, pwd = '';
                    for (let i = 0; i < len; i++) {
                        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
                    }
                    return pwd;
                }
            },
            watch: {
                url(val){
                    if (val) {
                        this.urls.push(val);
                    }
                }
            },
            components: {},
            computed: {},
            watch: {},
            created(){
                this.getAliToken();
            },
            mounted(){
            },
    
        }
    </script>
    
    <style scoped>
        /**渲染内容的样式**/
    
    </style>

     

    完成上传

     

    展开全文
  • 在做springboot项目时,公司要求是springboot+gradle+mybatis+vue,同时,我又习惯了用ecplise来开发, 在网上找了许多资料都不是很全, 于是自己经过磕磕碰碰的尝试整合,终于基于要求做了一个简单的用户管理...

    spring boot + gradle + mybatis + vue整合前后端分离入门

    前言

       在做springboot项目时,公司要求是springboot+gradle+mybatis+vue,同时,我又习惯了用ecplise来开发,
       在网上找了许多资料都不是很全,
       于是自己经过磕磕碰碰的尝试整合,终于基于要求做了一个简单的用户管理系统。
    

    前期准备

    首先是各种工具的下载与安装:
    1.Spring Tool Suite 简称STS,是基于eclipse的springboot的开发工具,下载安装与eclipse一样,下载地址:https://spring.io/tools3/sts/all/
    2.Gradle的下载与安装与eclipse(STS)集成(点击查看)
    3.Vue的相关下载与安装。
    4.Vue开发工具的下载与安装。

    1.使用STS创建一个springboot项目

    1.打开STS,在左侧空白区右键new,新建一个spring starter project项目

    在这里插入图片描述
    Service URL默认的,不用变,Name是项目名。Type选择gradle(详细看gradle下载与安装),jdk版本要8,Group是组织名,Description描述随便写,Package是包名。然后next。

    在这里插入图片描述
    这里可以根据你项目的需要勾选所需要的依赖包,也可以不勾选,等项目新建后再添加相关依赖。

    在这里插入图片描述
    再next,点finish,就创建好了一个springboot项目了。目录结构如下所示:
    在这里插入图片描述

    2,正式开发

    1.使用gradle导入依赖
    打开build.gradle文件,在dependencies中导入依赖

    dependencies {
     implementation 'org.springframework.boot:spring-boot-starter-web'
     compile('org.mybatis.spring.boot:mybatis-spring-boot-starter:2.0.0')
     runtimeOnly 'mysql:mysql-connector-java'
     testImplementation 'org.springframework.boot:spring-boot-starter-test'
     compile group: 'org.springframework.boot', name: 'spring-boot-devtools', version: '2.0.4.RELEASE'
    }

    若在项目创建时已经勾选的相关依赖,就不需要再导入了。spring-boot-devtools是springboot热部署的依赖包,可以不导入。

    2.用MVC模式来编程
    先来一张整体结构图
    在这里插入图片描述
    注意:自动生成的启动类不能和其他类在同一级,必须在上一级。

    下面是代码:
    (1)启动类:CustomerServiceApplication.java

    package com.seley.service.customer;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    @MapperScan(basePackages = "com.seley.service.customer.dao")
    public class CustomerServiceApplication {
    
     public static void main(String[] args) {
      SpringApplication.run(CustomerServiceApplication.class, args);
     }
    }

    说明@MapperScan注解作用指定要变成实现类的接口所在的包,然后包下面的所有接口在编译之后都会生成相应的实现类,添加位置:是在Springboot启动类上面添加。或者在接口类上添加了@Mapper,在编译之后会生成相应的接口实现类,但需要在每个接口类上加上@Mapper注解,比较麻烦,所以用@MapperScan

    (2)实体类:User.java

    package com.seley.service.customer.entities;
    
    import java.io.Serializable;
    
    @SuppressWarnings("serial")
    public class User implements Serializable{
    	
    	private Integer id;
    	private String name;
    	private String sex;
    	private String tel;
    	private String email;
    	public User() {}
    	public User(Integer id, String name, String sex, String tel, String email) {
    		super();
    		this.id = id;
    		this.name = name;
    		this.sex = sex;
    		this.tel = tel;
    		this.email = email;
    	}
    	public Integer getId() {
    		return id;
    	}
    	public void setId(Integer id) {
    		this.id = id;
    	}
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public String getSex() {
    		return sex;
    	}
    	public void setSex(String sex) {
    		this.sex = sex;
    	}
    	public String getTel() {
    		return tel;
    	}
    	public void setTel(String tel) {
    		this.tel = tel;
    	}
    	public String getEmail() {
    		return email;
    	}
    	public void setEmail(String email) {
    		this.email = email;
    	}
    	
    }
    

    (3)Dao接口:UserDao.java

    package com.seley.service.customer.dao;
    
    import java.util.List;
    
    import org.apache.ibatis.annotations.Param;
    
    import com.seley.service.customer.entities.User;
    
    public interface UserDao {
    	
    	public List<User> getAllUser();
    	
    	public int addUser(User user);
    	
    	public int deleteUser(@Param("id")Integer id);
    	
    	public User getUser(@Param("id")Integer id);
    
    }

    (4)Mapper映射文件:UserMapper.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.seley.service.customer.dao.UserDao" >
       <insert id="addUser" parameterType="User">
        insert into user(name, sex, tel, email) values(#{name}, #{sex}, #{tel}, #{email})
       </insert>
       <select id="getAllUser" resultType="User">
        select id, name, sex, tel, email from user
      </select>
      <delete id="deleteUser">
          delete from user where id=#{id}
       </delete>
       <select id="getUser" resultType="User">
          select id, name, sex, tel, email from user where id=#{id}
       </select>
    </mapper>

    注意:1.命名空间地址要写全路径。2.实体类可以写全路径,亦可以简写,但是简写的前提是在配置文件中要有相关配置。(后面说明)

    (5)Service层接口:MainService.java

    package com.seley.service.customer.service;
    
    import java.util.List;
    
    import com.seley.service.customer.entities.User;
    
    public interface MainService {
    	
    	public List<User> getAllUser();
    	
    	public int addUser(User user);
    	
    	public int deleteUser(int id);
    	
    	public User getUser(int id);
    
    }

    (6)Service层实现类:MainServiceImpl.java

    package com.seley.service.customer.serviceimpl;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.seley.service.customer.dao.UserDao;
    import com.seley.service.customer.entities.User;
    import com.seley.service.customer.service.MainService;
    
    @Service
    public class MainServiceImpl implements MainService{
    	
    	@Autowired
    	private UserDao userDao;
    
    	@Override
    	public List<User> getAllUser() {
    		
    		return userDao.getAllUser();
    	}
    
    	@Override
    	public int addUser(User user) {
    		
    		return userDao.addUser(user);
    	}
    
    	@Override
    	public int deleteUser(int id) {
    		
    		return userDao.deleteUser(id);
    	}
    
    	@Override
    	public User getUser(int id) {
    		
    		return userDao.getUser(id);
    	}
    
    }

    注意@Service注解不能忘;@Autowired注入对象

    (7)控制器:MainController.java

    package com.seley.service.customer.controller;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.seley.service.customer.entities.User;
    import com.seley.service.customer.service.MainService;
    
    @RestController
    public class MainController {
    	
    	@Autowired
    	private MainService mainService;
    	
    	@RequestMapping(value = "/get/users", method = RequestMethod.GET)
    	public List<User> getAllUser() {
    		List<User> userList = mainService.getAllUser();
    		return userList;
    	}
    	
    	@RequestMapping(value="/post", method=RequestMethod.POST)
    	public int addUser(@RequestBody Map<String, String> map) {
    		User user = new User();
    		user.setName(map.get("name"));
    		user.setSex(map.get("sex"));
    		user.setTel(map.get("tel"));
    		user.setEmail(map.get("email"));
    		int status = mainService.addUser(user);
    		return status;
    	}
    	
    	@GetMapping("/get/user")
    	public User getUser(@RequestParam("id") String id) {
    		
    		return mainService.getUser(Integer.parseInt(id));
    	}
    	
    	@GetMapping("/delete/user/{id}")
    	public int deleteUser(@PathVariable String id) {
    		return mainService.deleteUser(Integer.parseInt(id));
    	}
    }

    说明@RestController注解相当于@ResponseBody + @Controller合在一起的作用,所以不能返回一个页面,返回json格式的值(前后端分离-页面之间的调用在前台完成)。上面代码中每种请求的传参方式都不一样,看你的实际情况决定用那一种。

    3.配置文件
    找到application配置文件,修改后缀文件格式为.yml,不修改也行,但是写起来没有.yml格式的简洁。关于.yml文件格式的写法可自行百度,这里只强调两点:1.冒号后必须带一个空格;2.下一级必须比上一级要缩进一点。

    server: 
       port: 9100
        
    mybatis: 
        mapper-locations: classpath:mapper/*.xml
        type-aliases-package: com.seley.service.customer.entities
        
    spring: 
      datasource:
        url: jdbc:mysql://localhost:3306/vsbtest?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
        username: root
        password: 123456
        driver-class-name: com.mysql.cj.jdbc.Driver

    说明server.port设置端口号;mybatis.mapper-locations扫描映射文件;mybatis.type-aliases-package用来简化映射文件中实体类的写法(不用写全路径);spring.datasource用来配置数据库,需要注意一点的是必须配置时区serverTimezone=GMT%2B8,否则启动会出错。url中数据库名换成你自己的。

    4.启动springboot
    项目右键—>Run As—>Spring Boot App

    5.测试
    对了,MySQL数据库中得有表,有测试数据。(数据库要提前设计好)
    建表:

    -- Table "user" DDL
    
    CREATE TABLE `user` (
      `id` int(50) NOT NULL AUTO_INCREMENT,
      `name` varchar(50) NOT NULL,
      `sex` varchar(10) NOT NULL,
      `tel` varchar(50) NOT NULL,
      `email` varchar(50) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

    插入一条测试数据

    INSERT INTO user( name, sex, tel, email )
                           VALUES
                           ( "kaikai","boy","123456789","345617523@qq.com" );

    打开浏览器,地址栏输入:http://localhost:9100/get/users,回车,看能不能得到测试数据。

    关于前端VUE在下一篇博客中分享

    有问题的小伙伴欢迎评论

    展开全文
  • 前端使用阿里云上传文件(sts授权上传) vue框架 下载阿里云插件 npm install ali-oss --save 获取授权所需的参数 //获取Token async getAliToken() { //获取Token let uploadUrl = "api/v1/funs/getSts"; //...

    前端使用阿里云上传文件(sts授权上传) vue框架


    下载阿里云插件

     npm install ali-oss --save
    

    获取授权所需的参数

     //获取Token
       async getAliToken() {
        //获取Token
        let uploadUrl = "api/v1/funs/getSts"; // 也可以前端写死 需要的参数  ps:我使用的是后端返回的参数
        return new Promise((resolve, reject) => {
          uploadInstance
            .post(uploadUrl)
            .then((res) => {
              if (res.status === 200) {
                const {
                  expiration,
                  AccessKeyId,
                  AccessKeySecret,
                  SecurityToken,
                  bucket,
                  endpoint,
                } = res.data;
                let dataObj = {
                  region: endpoint,
                  bucket,
                  accessKeyId: AccessKeyId,
                  accessKeySecret: AccessKeySecret,
                  stsToken: SecurityToken,
                };
                resolve(dataObj);
              } else {
                reject(false);
              }
            })
            .catch((err) => {
              console.log(err);
              reject(false);
            });
        });
      }
        });
    

    封装一个oss对象接受获取到的参数

     Client = (data) => {
        //后端提供数据
        return new OSS({
          region: data.region, //oss-cn-beijing-internal.aliyuncs.com
          accessKeyId: data.accessKeyId,
          secure: true,
          accessKeySecret: data.accessKeySecret,
          stsToken: data.stsToken,
          bucket: data.bucket,
        });
      };
    

    上传文件到阿里云

    // 阿里云上传
      async updateAliOSS(filename, file) {
        let params = {};
        await this.getAliToken() // 获取oss对象所需参数赋值params
          .then((response) => {
            params = response;
          })
          .catch((err) => {
            console.log(err);
          });
    
        return new Promise((resolve, reject) => {
          let client = this.Client(params); //生成一个oss对象并将参数带入
          client.multipartUpload(filename, file, { // 分片上传 
              progress: function(p, checkpoint) {
                option.onProgress({ percent: Math.floor(p * 100) }); // 触发el-upload组件的onProgress方法
              },
            })
            .then(({ res }) => {
              if (res.statusCode === 200) { //判断上传是否成功
                resolve(res.requestUrls);
              } else {
                option.onError("上传失败");
              }
            })
            .catch((error) => { 
              client.put(filename, file, { // 如果分片上传失败 使用put上传
                  progress: function(p, checkpoint) {
                    option.onProgress({ percent: Math.floor(p * 100) }); // 触发el-upload组件的onProgress方法
                  },
                })
                .then(({ res }) => {
                  if (res.statusCode == 200) {
                    resolve(res.requestUrls);
                  } else {
                    option.onError("上传失败");
                  }
                });
            });
        });
      }
    
    展开全文
  • 如何开启 vue 项目

    千次阅读 2020-03-27 12:36:00
    在读此文章再此之前默认你已经安装了 vue 项目 vue项目 脚手架@vue/cli安装 运行项目 cmd 运行 vue create serve 运行的目录要在你的项目文件夹下 比如我有一个项目 one 那我就要双击进入 one 项目,在这个目录...

    在读此文章再此之前默认你已经安装了 vue 项目

    vue项目 脚手架@vue/cli安装

    运行项目

    cmd 运行 cnpm run serve

    • 运行的目录要在你的项目文件夹下
    • 比如我有一个项目 one
    • 那我就要双击进入 one 项目,在这个目录下运行

    展示:

    在这里插入图片描述
    如果地址错误
    在这里插入图片描述

    浏览器打开项目

    在这里插入图片描述

    在浏览器的地址栏输入 上图蓝字 的地址

    • 第一个是你的本地服务地址(选这个
    • 第二个是你ip地址
    • 这两个显示效果都是一样的,不过推荐选择第一个

    效果展示:
    在这里插入图片描述

    展开全文
  • 用Eclipse 进行Vue开发

    万次阅读 2018-10-22 09:02:19
    在终端中输入 npm run dev 后回车,则运行Vue项目,之后会自动打开浏览器,显示Vue欢迎页面! 之后浏览器打开网址就可以调试查看了 修改路径,这样编译直接到garcol工程中。 D:\workspace\lajifenlei\...
  • 首先我的项目是Vue,人家的官网上面也提到了这个东西 阿里云这里面有demo,参照demo的方式我进行上传, 将代码进行修改后,大概是这个样子的 因为vue使用的组件化开发,所以要将依赖进行模块化引入,然后将上传文件的样式...
  • 这里写自定义目录标题前言安装node.js安装cnpmcnpm安装脚手架vue-cli构建项目安装项目依赖运行项目浏览器访问项目备注 前言 博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来...
  • antd-vue upload组件使用ali-oss sts上传图片引入js组件 部分代码结束 引入 npm install ali-oss js 出现异常时,重新获取一下sts的token import OSS from 'ali-oss' import { csyApi } from '../api/csy' let ...
  • STS临时授权访问OSS:STS临时授权访问OSS STS接入地址:STS接入地址 报错Error: Please set the etag of expose-headers in OSS解决:报错Error: Please set the etag of expose-headers in OSS "npm ERR! Error: ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • vue 环境搭建

    2018-05-17 16:04:42
    vue 环境搭建 为了搭建vue环境,网上查了很多资料教程,踩了一些坑,在此记录 安装node.js 官网地址,安装配置环境变量之后,可以使用npm -v 验证是否配置成功 配置淘宝镜像 npm install -g cnpm -...
  • 阿里云视频点播服务web集成方式使用的是javascript方式,未提供typescript方式,请问有没有同学有过vue 集成阿里视频点播服务(vod) 或者 typescript集成阿里云视频点播服务(vod)的经验。急急急......在线等┭┮﹏┭...
  • Vue 项目从 Vue CLI 2 升级到 Vue CLI 4

    千次阅读 2020-01-11 14:57:48
    介绍如何将使用 Vue CLI 2 构建的项目升级到 Vue CLI 4 更多精彩 更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线 相关网址 介绍 - Vue CLI 配置参考 - Vue CLI 升级细则 实际升级起来还算比较...
  • 从Spring官网下载的最新版本的IDE工具,基于eclipse进行的二次开发,对spring的开发更便捷。由于上传包大小的限制,共分为9个压缩包。版本号为3.7.1.RELEASE 支持windows 64位操作系统
  • eclipse导入vue项目

    千次阅读 2019-11-18 15:47:36
    从gitlab上把代码拉下来以后,发现是带有.project文件的,于是我没有在eclipse里面新建web项目,而是选择import——.xml——再选择pom.xml文件导入。 导入以后一堆报错,主要集中在js文件和pom.xml,配置好maven,...
  • spring boot+vue 实现分页查询功能

    千次阅读 2019-10-21 18:54:18
    vue 实现分页 效果图: ·······················································································...
  • Element - The world’s most popular Vue UI framework,你值得拥有。此时我特别想高喊一句 “PHP 是世界上最好的语言”,现在搜啥啥都说自己是最好的,输什么不能输气势啊。先看一下修改完的登录页面 当然,...
  • 阿里云OSS(Object Storage Service,对象存储服务)是一种海量、安全、低成本、高可靠...临时授权,用阿里OSS官方的话说就是使用STS(Security Token Service,临时授权访问),可以为第三方应用或子用户(即用户身份由
  • vue-element-admin】--Pagination分页组件设置一、参考资料一、涉及到的文件1、//src/utils/scroll-to.js2、//src/components/Pagination/index.vue3、//src/views/***/index.vue三、知识拓展1、Pagination分页的...
  • 因为之前一直是用Layui来显示数据和对表格进行分页,最近刚学了Vue和Element组件,那就把它们结合起来实现分页以及数据的显示吧。Element和Vue可到官网详细了解。 我们先来看一下我们完成的效果,如下: 首先我们...
  • getOssToken() { this.$api.systemUser.getOssToken().then(res => { this.client = new OSS({ accessKeyId: res.data.accessKeyId, accessKeySecret: res.data.accessKeySecret, stsToken: res.data.securityToken...
  • 开发工具:STS(spring tool suite) 构建环境:maven 直接在maven中引入lombok的依赖,代码是可以正常编写的,但是在实际开发的时候,是不可以调用getter和setter方法。 研究了半天,发现不仅仅需要在po...
  • 基于vue的图片裁剪插件vue-cropper

    万次阅读 热门讨论 2018-09-28 10:30:46
    我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的, 我这里采用了4:3的固定...
  • IMG-VIDEO上传工具类 package com.tenli.util; import com.aliyun.oss.OSS; import ...import org.springframework.web.multipart.MultipartFile;... public static String upImg(MultipartFile i
  • 如何在vue项目中使用Highmaps功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥。第三步:调用注意点(十分重要)写在最后 功能需求 近日我接到了这么一个需求,原型如下: 在系统中需要绘制一个...
  • 针对这一场景及问题,本文介绍了一种轻量级的安全解决方案,即使用STS服务授权客户端直接访问云存储。本文阐述了STS方案的基本原理,并且结合具体应用场景,对实施步骤进行了详细的描述。 1 引言 假设您是阿里云...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 677
精华内容 270
关键字:

stsvue

vue 订阅