古文字识别助手与众包平台——项目博客三
背景:
由于骨刻文项目存在许多骨刻文的静态图片,为了前端能够快速获取到相应的图片,后端打算再部署一个nginx静态服务器,用来存取在项目中客户上传的各种图片。同时对于token做一下分析。最后介绍近期小程序端的项目搭建情况。
在云服务器(centos)上部署Nginx静态资源服务器:
Nginx作为静态资源web服务时,通过接收客户端的静态资源请求,然后到静态文件存储位置获取对应的资源并返回给客户端,流程如下图所示:
具体步骤:
1.配置EPEL源,安装Nginx:
2.在centos中打开相应的端口,腾讯云中也打开安全组端口;
3.启动nginx,确认Nginx进程在运行后,访问服务器IP地址正常,然后配置图片静态资源访问地址;
location ~ .*\.(jpg|gif|png)$ {
gzip on;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript image/jpeg image/gif image/png;
valid_referers none blocked 47.100.199.15;
if($invalid_referer) {
return 403;
}
root /usr/share/nginx/images;
}
之后就可以通过网络请求获取图片;
token的作用:
为什么使用Token验证:
所谓的Token,其实就是服务端生成的一串加密字符串、以作客户端进行请求的一个“令牌”。当用户第一次使用账号密码成功进行登录后,服务器便生成一个Token及Token失效时间并将此返回给客户端,若成功登陆,以后客户端只需在有效时间内带上这个Token前来请求数据即可,无需再次带上用户名和密码。
Token就为我们免去了每次打开应用都要输入账号跟密码的过程。
当下用户对产品的使用体验要求在逐渐提高,从产品体验方面来讲,Token带来的体验更容易能让用户接受。
那么Token都可以解决哪些问题呢?
- Token具有随机性、不可预测性、时效性、无状态、跨域等特点。
- Token完全由应用管理,所以它可以避开同源策略。
- Token可以避免CSRF攻击。
- Token可以是无状态的,可以在多个服务间共享。
- Token是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回Token给前端。前端可以在每次请求的时候带上Token证明自己的合法地位。如果这个Token在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌。
自定义springboot注解实现自定义功能(如mongo的自增id以及token的验证):
自增操作定义的注解:
package com.example.guke.annotation;
/**
* @program: GuKe
* @description: 自增字段注解
* @author: NiuYiq
* @date: 2022-04-05 09:54
**/
import java.lang.annotation.*;
/**
* 定义一个主键自增的标志注解
*/
@Documented
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.FIELD})
public @interface AutoInc
{
}
跨文档原子操作使用的注解:
package com.example.guke.annotation;
import java.lang.annotation.*;
/**
* @program: GuKe
* @description: 跨文档递减字段-post的评论数量字段
* @author: NiuYiq
* @date: 2022-04-16 14:40
**/
@Documented
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.FIELD})
public @interface AutoDec
{
}
用户不需要验证token的注解:
package com.example.guke.annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface PassToken
{
boolean required() default true;
}
用户需要验证token的注解:
package com.example.guke.annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface UserLoginToken
{
boolean required() default true;
}
小程序端社区功能的初步搭建和静态功能的展示:
社区功能概述
经过与老师的交流,我们决定在web端和微信小程序端都实现一个社区,类似于csdn,但当然不会像csdn这么强大。这个社区里,大家可以发帖讨论,后期还可以提供资源下载功能,例如刘凤君老师的书籍资源等。因此,今天初步搭建的只是一个简易的朋友圈,且只是静态资源。功能可以逐步扩展,并且等后端的同学完成接口后再联合调用。
首先创建帖子组件的结构,一条帖子应该具有的元素包括发布用户头像和名称、发布时间、帖子文字内容(先简单实现文字)、点赞人数、当前用户是否点赞等,这些都需要外部传递给组件。因此,在帖子的properties中加入这些变量:
帖子分为3个部分,分别是基本信息(包含用户头像、用户名、发布时间等)、帖子内容、点赞和评论。大部分信息都由外部传入,因此展开基本信息:
帖子内容:
点赞和评论:
点赞图标使用图片的画会非常占用空间,因此我们使用矢量图标。
社区模块:
新建社区模块:
并在app.json中配置:
本地数据应用
本文使用本地静态数据模拟实现社区帖子。首先需要准备相应的数据,在community.js中保存:
然后community.json中引入组件:
在页面中循环遍历Post组件:
先将基本的数据传入组件,并且要注意,在这里要接收Post组件内部传出来的changeWelcome事件,并绑定处理函数。 函数实现如下:
接收传过来的id和state,然后遍历帖子数组,修改相应点赞状态,然后更新数据即可。这样,就能实现点赞功能了。