起源
博客里面存在着许多的图片，有人存在图床里面 ，但是博主的图片是存在腾讯云储存里面的，云存储的软件有一个缺陷就是无法看到图片是什么样子的，目的是看到这个图片，方便进行管理
技术栈
Vue、SpringBoot
前台
登录
<template>
<div class="login_co">
<div class="content">
<div class="content_input">
<div class="title">
<p>管理员登录</p>
</div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForms">
<el-form-item prop="username">
<el-input type="text" clearable v-model="ruleForm.username" autocomplete="off" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" clearable show-password v-model="ruleForm.password" autocomplete="off" placeholder="密码"></el-input>
</el-form-item>
<div class="content_button">
<el-button type="primary" @click="login">登录</el-button>
<el-button @click="replace">重置</el-button>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
import '@/assets/style.css'
import '@/assets/ribbon.js'
const qs = require('qs');
export default {
name: "Login",
data(){
return{
ruleForm: {
username: '',
password:'',
},
rules: {
//用户名验证
username: [
{required: true, message: '请输入用户名', trigger: 'blur'},
],
//密码
password:[
{required: true, message: '请输入密码', trigger: 'blur'},
]
}
}
},
methods:{
//登入
login(){
//验证是否满足规则 true：满足 false:不满足 ruleForm是上面定义的：model
this.$refs.ruleForms.validate(async (valid) => {
if(valid!==true){
this.$message({
showClose: true,
message: '请检查账号密码！',
type: 'warning'
});
return;
}else{
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(this.ruleForm),
url:'http://127.0.0.1:8090/login'
};
//axios请求
let ret=await this.$http(options);
if(ret.data.code==200){
this.$message({
showClose: true,
message: '登入成功！',
type: 'success'
});
await this.$router.push('/home');
}else{
//登入失败
this.$message({
showClose: true,
message: '登入失败,请检查账号密码！',
type: 'error'
});
throw new Error(ret.data.msg);
}
}
})
},
//重置
replace(){
this.$refs.ruleForm.resetFields();
}
}
}
</script>
<style lang="scss" scoped>
.login_co{
//background-color:#2b4b6b;
height:100%;
}
.el-button--primary {
width: 45%;
}
.el-button--default{
width: 45%;
float:right;
}
</style>
|
主界面
<template>
<div class="text item">
<el-table border
:data="coslist" >
<el-table-column
type="index"
label="#">
</el-table-column>
<el-table-column
prop="key"
label="图片名">
</el-table-column>
<el-table-column
prop="key"
label="图片预览">
<template v-slot:="scope">
<el-image :src="'https://blog-1301165591.cos.ap-guangzhou.myqcloud.com/'+scope.row.key">
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column
prop="filesize"
label="大小">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="del(scope.row.key)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "Home",
data(){
return{
coslist:[]
}
},
mounted() {
this.getcosall();
},
methods:{
async getcosall() {
let ret = await this.$http.get("http://127.0.0.1:8090/cosall");
if(ret.data.code===200){
this.coslist=ret.data.data;
}else{
this.$message({
type: 'error',
message: ret.data.msg
});
throw new Error(ret.data.msg);
}
},
del(key){
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
let res = await this.$http.delete('http://127.0.0.1:8090/delcos/' + key);
if(res.data.code===200){
this.$message({
type: 'success',
message: '删除成功!'
});
await this.getcosall();
}else{
this.$message({
type: 'error',
message: res.data.msg
});
throw new Error(res.data.msg);
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
<style scoped>
</style>
|
后台
controller
package com.it.coludecos.controller;
import com.it.coludecos.service.CosService;
import com.it.coludecos.tools.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
public class CosController {
@Autowired
CosService coser;
@RequestMapping(path = "/login",method= RequestMethod.POST)
public JsonResult login(String username, String password){
System.out.println(username+" "+password);
return coser.login(username,password);
}
@RequestMapping(path="/cosall",method = RequestMethod.GET)
public JsonResult cosall(){
return coser.cosall();
}
@RequestMapping(path = "/delcos/{key}",method = RequestMethod.DELETE)
public JsonResult delcos(@PathVariable("key")String key){
return coser.delcos(key);
}
}
|
service
package com.it.coludecos.service;
import com.it.coludecos.tools.JsonResult;
public interface CosService {
public JsonResult login(String username, String password);
public JsonResult cosall();
public JsonResult delcos(String key);
}
|
serviceimpl
package com.it.coludecos.service.Impl;
import com.it.coludecos.service.CosService;
import com.it.coludecos.tools.CosClient;
import com.it.coludecos.tools.JsonResult;
import com.qcloud.cos.COSClient;
import com.qcloud.cos.exception.CosClientException;
import com.qcloud.cos.exception.CosServiceException;
import com.qcloud.cos.model.COSObjectSummary;
import com.qcloud.cos.model.ListObjectsRequest;
import com.qcloud.cos.model.ObjectListing;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class CosServiceImpl implements CosService {
@Value("${us.username}")
private String usname;
@Value("${us.pass}")
private String pass;
@Value("${cos.bucketName}")
private String bucketName;
@Override
public JsonResult login(String username, String password) {
System.out.println("username:"+username);
System.out.println("password:"+password);
if (usname.equals(username) && pass.equals(password)) {
System.out.println(1);
return new JsonResult(200, "登入成功！");
} else {
System.out.println(2);
return new JsonResult(505, "账号或密码错误！");
}
}
@Override
public JsonResult cosall() {
COSClient cosClient = CosClient.CosClient();
ListObjectsRequest listObjectsRequest = new ListObjectsRequest();
listObjectsRequest.setBucketName(bucketName);
listObjectsRequest.setPrefix("/");
listObjectsRequest.setDelimiter("/");
listObjectsRequest.setMaxKeys(1000);
ObjectListing objectListing = null;
List mk;
do {
try {
objectListing = cosClient.listObjects(listObjectsRequest);
} catch (CosServiceException e) {
e.printStackTrace();
return new JsonResult(201, e.getMessage());
} catch (CosClientException e) {
e.printStackTrace();
return new JsonResult(201, e.getMessage());
}
List<String> commonPrefixes = objectListing.getCommonPrefixes();
for (String commonPrefix : commonPrefixes) {
System.out.println(commonPrefix);
}
List<COSObjectSummary> cosObjectSummaries = objectListing.getObjectSummaries();
mk = new ArrayList();
for (COSObjectSummary cosObjectSummary : cosObjectSummaries) {
Map mp = new HashMap();
String key = cosObjectSummary.getKey();
long fileSize = cosObjectSummary.getSize();
if(fileSize >= 1024*1024*1024){
mp.put("filesize",fileSize / (1024*1024*1024)+"GB");
}else if(fileSize>=1024*1024){
mp.put("filesize",fileSize / (1024*1024)+"MB");
}else if(fileSize>=1024){
mp.put("filesize",fileSize / (1024)+"KB");
}
mp.put("key", key);
mk.add(mp);
}
String nextMarker = objectListing.getNextMarker();
listObjectsRequest.setMarker(nextMarker);
} while (objectListing.isTruncated());
cosClient.shutdown();
return new JsonResult(200, "获取成功！", mk);
}
@Override
public JsonResult delcos(String key) {
COSClient cosClient = CosClient.CosClient();
try {
cosClient.deleteObject(bucketName, key);
return new JsonResult(200,"删除成功！");
} catch (CosServiceException e) {
e.printStackTrace();
return new JsonResult(500,"删除失败！");
} catch (CosClientException e) {
e.printStackTrace();
return new JsonResult(500,"删除失败！");
}finally{
cosClient.shutdown();
}
}
}
|
界面
