删除业务与鉴权
今天主要完成的是动态、专辑与图片的基本删除能力，其中包含了前端右键菜单设计以及导出功能的完善。（专辑=相册）
后端的业务实现
删除动态
这个的实现最为简单，没有上面特别需要注意的地方，所以不多赘述。
删除专辑
删除专辑中，由于有设定数据库中前三个专辑id的默认匹配规则（自动、博客、动态），所以在删除的时候给了id>3的约束，以免误删。同时，在删完该专辑确认成功后，才能继续将该专辑内的图片记录也都删除，否则除非事务回退，不然先删除图片记录是不可逆的，所以必须先进行专辑删除状态的确认才能删除图片。
删除图片
删除图片的业务也相对没有什么特别的，只需要注意不要删除id=1的记录即可，因为id=1的图片记录将作为专辑的封面。
参数的注意点
今天在控制器的一个方法参数中，使用Integer作为请求参数类型获取id，但是发现此时如果用户没有传递id值，Integer作为引用类型也会默认赋值null，而不会被报错，需要注意！所以如果该参数是必须的，还是应该设置为int类型的（仅控制器，因为控制器能通过说明必然有值了）。
前端的业务实现
事件对象函数的进一步说明
昨天有说到需要获取事件的对象时，调用函数不带()，那么默认的第一个参数即为事件对象。
但是今天遇到了既要传递参数又要对象的情况，这种情况的方式也很简单，传递参数的时候，第一个参数设置为$event即可。
动态页上图
想来想去，最后还是决定动态也用博客页的编辑模板进行编辑，自我约束动态页格式不要太花里胡哨的就好了，原本其实是打算像QQ空间一样的上图设计方式，但是，嗯，感觉那样的方式不如直接用博客页编辑模板来的方便和自由，所以最后动态页上图也就简单的改一下模板就完成了。
前台回忆页图片展示
前台回忆页的图片细节展示也摸了，直接利用后台查看图片的模板，稍作修改就完成了，这叫提高开发效率，绝对不是偷懒！一寸光阴一寸金，寸金难买寸光阴！
编辑页的文本导出
为什么要导出文本编辑的内容？那当然是防止突然断网啊、突然缺少灵感啊什么不得不停笔的情况了。
你绝对想象不到这篇博客之前版本的我是怎么导出备份的！（输出到控制台，手动复制粘贴到文件QAQ）
经过一些资料的查询后，得到了最终的解决方式，那就是a链接下载，a链接有download属性，表示的是下载的文件名，href则是目标地址。不过对于则个目标地址，学问可太大了。
const myBlob = new Blob([this.editor.txt.html()])
const toDownload = document.createElement('a')
toDownload.download = 'log' + this.$time() + '.txt'
toDownload.href = URL.createObjectURL(myBlob)
toDownload.click()
document.body.removeChild(myBlob)首先是将需要保存的数据内容封装成blob类型，需要传递的是数组，所以要用[]括起来。然后利用URL.createObjectURL(Blob)将数据对象创建仅限当前页的URL路径，可以给a链接href赋值，之后调用a链接的click函数触发点击事件。最后将这个url创建出来的blob节点给删除掉。
后台动态删除
后台动态的删除和后端的一样非常简单，不多赘述。
图片与专辑的删除
这个稍微设计了一活儿，主要就是设计了一个右键弹出菜单的效果，利用@click.right.prevent来禁用原来的效果。目前设计的比较简单，或者说后台也就只有我能看，所以我能看的懂就行，当然以后从业时不能有这种想法，因为那时，我做出来的就是给别人的了。
先来上图（实现了上传图片功能就是拽啊，随手上图(￣y▽,￣)╭ ）[我是绝对不会说我在上传这张图时遇到了bug的，哼哧哼哧]
怎样，是不是很简单的菜单实现，当完美右击指定专辑或者图片的时候，就获取clientX/Y并且记录是专辑类型还是图片类型以及其id号，然后将这个绝对定位的菜单的top和left对应设置就好了。然后全局加个click监听，当全局收到click时，这个菜单的v-show就设置为false，用来灵活的进行唤出。
html
<div class="menu" ref="menu" v-show="showMenu">
<p>编辑</p>
<p @click="delTarget">删除</p>
<p>取消</p>
</div>scss
.menu{
position:absolute;
width:100px;
background-color:white;
text-align: center;
border-radius: 6px;
cursor: default;
p{
border-bottom: 1px solid gray;
padding: 2px;
}
}js
targetDeal (e, id, isAlbum) {
this.targetMenuAlbum = isAlbum
this.targetMenuId = id
const node = this.$refs.menu
node.style.top = e.clientY + 'px'
node.style.left = e.clientX + 'px'
this.showMenu = true
}鉴权
拖更到今天终于到鉴权了，之前没写是因为那时候这个博客栏目还没有做好，现在做好了所以补录一下。
鉴权当然有着很多个板块，大的方向来说就是前端管理员页面鉴权。后端对一些需要鉴权的api请求拦截，以及图床请求需要AccessToken。下面来一个一个说。
图床鉴权
1. 签名
签名的算法如下 signStr = 请求URI + 请求参数 + "\n" + 请求体(没有请求体也要 "" 貌似，看图床的api这样说的)
签名 (sign)16 = hmac_sha1(signStr, <YOUR_SECRET_KEY>)
注意：请求体千万注意每个字节都要，如果直接getBytes()然后转String，那么一些隐藏的字符被忽略，并且结果数据内容也完全不对，这样是无法通过签名验证的！
2. accessToken
结果 accessToken = "TOKEN " + <YOUR_ACCESS_KEY> + ":" + (sign)16
实际的java算法示例：
=> (byte[] bytes,String secretKey,String apiPath)
String signStr = apiPath + "\n";
ByteArrayOutputStream bao = new ByteArrayOutputStream();
bao.write(signStr.getBytes());
bao.write(bytes);
byte[] res = bao.toByteArray();
bao.close();
String sign = "";
try {
Mac mac = Mac.getInstance("HmacSHA1");
mac.init(new SecretKeySpec(secretKey.getBytes(), "HmacSHA1"));
sign = new String(new Hex().encode(mac.doFinal(res)), StandardCharsets.UTF_8);
// 这里 Hex 来自 org.apache.commons.codec.binary.Hex
} catch (NoSuchAlgorithmException | InvalidKeyException e) {
e.printStackTrace();
throw new RuntimeException(e.getMessage());
}
String authorization = "TOKEN " + accessKey + ':' + sign;之后每当发送给服务方需要鉴权的api请求时，带上Authrization请求头即可达成通信（代码有借鉴与更改）。
后端请求鉴权
后端请求鉴权的方式熟悉拦截器那就非常简单了。
首先是产生token
@Override
public RetResult<String> checkPassword(String username, String password) {
ValueOperations op = redisTemplate.opsForValue();
String admin = (String) op.get("admin");
String pass = (String) op.get("password");
if(admin == null || pass == null) return RetResult.notFound();
else if (!admin.equals(username)) return RetResult.fail("用户不正确");
else if (!pass.equals(password)) return RetResult.fail("密码不正确");
else{
String token = Md5String.md5WithTime(username);
op.set("token",token,10, TimeUnit.DAYS);
return RetResult.success(token);
}
}其中Md5String是自己定义的工具类
package top.dreamcenter.dreamcenter.utils;
import org.apache.tomcat.util.security.MD5Encoder;
import org.springframework.util.DigestUtils;
import sun.security.provider.MD5;
public class Md5String {
public static String md5WithTime(String src){
src = src + System.currentTimeMillis();
return DigestUtils.md5DigestAsHex(src.getBytes());
}
}拦截器如下
package top.dreamcenter.dreamcenter.interceptor;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.servlet.HandlerInterceptor;
import top.dreamcenter.dreamcenter.ret.RetResult;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AdminAuthInterceptor implements HandlerInterceptor {
private RedisTemplate template;
@Autowired
public AdminAuthInterceptor(RedisTemplate template) {
this.template = template;
}
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String authorization = request.getHeader("Authorization");
String token = (String) template.opsForValue().get("token");
if(authorization!=null && authorization.equals(token)) return true;
response.setContentType("application/json;charset=utf8");
ObjectMapper mapper = new ObjectMapper();
String res = mapper.writeValueAsString(RetResult.denied());
response.getWriter().write(res);
return false;
}
}之后给容器配置添加完美的拦截器即可
package top.dreamcenter.dreamcenter.config;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import top.dreamcenter.dreamcenter.interceptor.AdminAuthInterceptor;
@Configuration
public class ToolsConfig implements WebMvcConfigurer{
private RedisTemplate redisTemplate;
@Autowired
public ToolsConfig(RedisTemplate redisTemplate) {
this.redisTemplate = redisTemplate;
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new AdminAuthInterceptor(redisTemplate))
.addPathPatterns("/api/info/**")
.addPathPatterns("/api/*/add")
.addPathPatterns("/api/*/delete")
.addPathPatterns("/api/image/upload");
}
}前端管理员页鉴权
这个部分有一说一还是错综复杂的，因为需要考虑的东西相对来说比较多。
假如我们登录通过鉴权获得token后，我默认的设置会保存在session中，也就是当前会话，但是如果选择了记住密码，那么肯定是要保存在cookie中的，这样，下一次打开浏览器，到我们的domain域下，就会自动的从cookie中获取保存的token并且放置到session中，当然是放到session中啦，因为session会比cookie来的更及时一点，比如说更改密码，也是session最先奏效，而cookie是否更改和续期则要取决于需求了，而且统一调用session会比一活儿调用session（无cookie有session时）一活儿调用cookie来的要合适，个人理解。之后我们已有token于session中后，可以选择性的请求头携带Authorization，也可以干脆每个请求头都带，需要注意的是，如果每个都带，那么无需鉴权的请求也带，从某些方面来说，有一部分数据的冗余，增加了流量消耗。
好了，有了鉴权后如何前端如何拦截未通过用户进入管理员页面，当然可以用路由守卫，不过我则是在beforeMount也就是装载之前时期，请求一个需要鉴权的api，如果被拒绝那么就跳转到登录页或者模式。
下面是一些前端鉴权代码的方向：
给每个请求带Authorization
axios.interceptors.request.use((config) => {
const token = sessionStorage.getItem('token')
if (token) config.headers.Authorization = token
return config
})借着在App.vue中初始化挂载节点时查看是否有token的cookie
beforeMount () {
const token = this.$cookie.get('token')
if (token) sessionStorage.token = token
}突然发现前端鉴权虽然描述了一大堆，但是实际上却只有一丁点需要分享的23333，而后端没啥描述却有一堆需要分享的代码，也许这也暗示了：前端如美丽动人的妹子，后端如无人问津的死肥宅了吧！（我自己说的，我决定把这句话记入我的名言之一！我可太牛了，随随便便就能说出名言不是）
好啦！今天的分享也结束了，算是提起那完成了不少工作？明后两天需要完成各项编辑业务以及一则统计业务，不知道又会有什么面对着我呢！
对了，明天把后台博客页tag标签页添加的效果代码也分享一下，感觉自己设计的用起来蛮舒服的。