Skip to content

N
nyx
Commit 13dd7379 by jscat
Options

nyx: 优化多图oss上传流程，添加发现点赞功能 

说明
1. 多图上传里，前n-1张图片直接上传oss，最后第n张图片上传oss+callback，通过callback写入阿里云数据库
2. 针对postId进行点赞，
3. 已点赞用户无需二次点赞
parent 490867f6
正在显示 包含 224 行增加 和 121 行删除
增值产品-小程序及app/nyx-master/config.js
//config.js API全局域名配置
//config.js API全局域名配置
//config.js API全局域名配置
var prod = 0;
var local = 0;
var test = 1;
var prod = 0; //阿里云服务器生产版本
var local = 1; //本地java测试，需要启动java 后台
var test = 0; //阿里云服务器测试版本
var debug = 0; //是否打印调试信息
var host_key = "https://fun.hisuhong.com";
......@@ -54,5 +54,6 @@ var config={
socket_url: socket_url,
oss_token_url: host_key + "/api/nyx/oss/getToken",
oss_callback_url: login_url + "/api/nyx/oss/callback",
post_like_url: host_key + "/api/nyx/post/like",
}
module.exports=config;
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/discover/discover.js
// pages/kinds/kinds.js
// pages/kinds/kinds.js
......@@ -45,6 +45,9 @@ Page({
strSearch : "", //搜索的字串
inputVal : "", //输入字符串，主要用于页面显示
//点赞模块
likeDict: {},
},
switchCategory(e) {
......@@ -200,13 +203,14 @@ Page({
}
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["post_id"] = res.data.data[i].postId
result["note_image"] = res.data.data[i].noteImage.split("::")
result["title"] = res.data.data[i].title
result["tag"] = res.data.data[i].tag
result["content"] = res.data.data[i].content
result["like"] = res.data.data[i].numLike
result["writer_name"] = res.data.data[i].nickName
result["writer_image"] = res.data.data[i].avatarUrl
result["writer_name"] = res.data.data[i].nickName == null ? "匿名用户" : res.data.data[i].nickName
result["writer_image"] = res.data.data[i].avatarUrl == null ? '/icon/icon_avatar1.png' : res.data.data[i].avatarUrl
list.push(result)
}
......@@ -278,5 +282,46 @@ Page({
})
},
submitLike: function (postId) {
var _this = this;
var strUrl = config.post_like_url + '?postId=' + postId
config.debug == 1 ? console.log("===submitLike strUrl is: " + strUrl) : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.statusCode == 200) {
//表示查询成功
console.log(res.data);
var notesList = _this.data.notes
var likeDict = _this.data.likeDict
for (var j = 0; j < notesList.length; j++) {
if (notesList[j].post_id == postId)
notesList[j].like = parseInt(notesList[j].like) + 1
likeDict[postId] = 1
}
_this.setData({
likeDict: likeDict,
notes: notesList,
})
}
}
})
},
onSubmitLike: function (e) {
var _this = this;
let postId = e.currentTarget.dataset.postId;//获取评论内容
var likeDict = _this.data.likeDict
if (likeDict[postId] == 0 || likeDict[postId] == undefined) {
_this.submitLike(postId)
}
},
})
增值产品-小程序及app/nyx-master/pages/discover/discover.wxml
<view class="page">
<view class="page">
......@@ -47,8 +47,8 @@
<image class="photo-img" src="{{item.writer_image}}"/>
<span class="name">{{item.writer_name}}</span>
</navigator>
<view class="like">
<image class="like-icon" src="../../icon/discover/like.png"/>
<view class="like" bindtap="onSubmitLike" data-post-id="{{item.post_id}}">
<image class="like-icon" src="../../icon/discover/like.png" style="width:30rpx;height:30rpx"/>
<span>{{item.like}}</span>
</view>
</view>
......
增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.js
// pages/index/note-info/note-info.js
// pages/index/note-info/note-info.js
......@@ -35,8 +35,8 @@ Page({
notes['content'] = options.content;
notes['note_image'] = options.note_image.split(",");
notes['like'] = options.like;
notes['writer_name'] = options.writer_name;
notes['writer_image'] = options.writer_image;
notes['writer_name'] = options.writer_name == "null" ? "匿名用户" : options.writer_name;
notes['writer_image'] = options.writer_image == "null" ? '/icon/icon_avatar1.png' : options.writer_image;
}
wx.setNavigationBarTitle({
......
增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.wxml
<view class="page">
<view class="page">
......@@ -5,7 +5,7 @@
<span class="name">{{notes.writer_name}}</span>
</view>
<!-- 图片 -->
<scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{contentHeight}}px" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}">
<scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height: 90%;" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}">
<block wx:for="{{notes.note_image}}" wx:key="unique" wx:for-index="id" wx:for-item="item">
<view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
<image src="{{item}}" mode="widthFix"/>
......@@ -14,7 +14,10 @@
</scroll-view>
<!-- 文字内容 -->
<view class="note">
<view class="note-info">
<view class="note-title" style="font-weight: bold">
{{notes.title}}
</view>
<view class="note-content">
{{notes.content}}
</view>
</view>
......
增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.wxss
.scroll-view_H{
.scroll-view_H{
......@@ -2,20 +2,21 @@
position: relative;
width: 100%;
text-align: center;
transform: scale(0.9);
white-space: nowrap;
}
.scroll_item {
position: relative;
width: 100%;
height: 90%;
margin: 0;
transform-origin: 50% 0;
left: 0%;
display: inline-block;
border-radius: 20rpx !important ;
/* border-radius: 20rpx !important ; */
overflow: hidden;
transform: scale(0.9);
/* box-shadow: 0 0 10px #ccc; */
vertical-align: top;
/* transform: scale(0.9); */
vertical-align: middle;
/* top: 0%; */
/* height: 72%; */
background-color: #fff;
......@@ -45,9 +46,25 @@
background: #fff;
border-radius: 5px;
float: left;
margin-top: 0;
}
.note-info{
font-size: 13px;
.note-title{
font-size: 16px;
/* 后期用于 '展开' 功能 */
/* overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; */
margin-left: 10%;
margin-right: 10%;
margin-top: 0;
text-align:justify;
}
.note-content{
font-size: 16px;
/* 后期用于 '展开' 功能 */
/* overflow : hidden;
......
增值产品-小程序及app/nyx-master/pages/post/post.wxml
<view class="page" style="height:100%;width:100%">
<view class="page" style="height:100%;width:100%">
......@@ -5,10 +5,7 @@
</navigator>
</block>
<view class="page-body">
<form>
<view class="page-section">
<!-- <view class="weui-cells weui-cells_after-title"> -->
<!-- 选择图片来源 -->
<!-- <view class="weui-cell weui-cell_input">
......@@ -34,7 +31,6 @@
</view>
</view>
</view> -->
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
......@@ -59,8 +55,6 @@
</view>
</view>
</view>
</view>
</form>
</view>
</view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/post/submit/submit.js
// pages/post/submit/submit.js
// pages/post/submit/submit.js
......@@ -20,8 +20,8 @@ Page({
accessid: "",
policy: "",
signature: "",
uploadUrl: "",
uploadUrlend: "",
host: "",
dir: "",
expire: "",
securityToken: "",
......@@ -31,28 +31,26 @@ Page({
},
onReady: function (e) {
var _this = this;
//进入页面就自动获取oss参数
_this.oss();
},
// Date Flow
// 输入该组图片的内容
bindKeyInput(e) {
var _this = this;
_this.setData({
inputContent: e.detail.value
})
},
// 提交oss和数据库
onSubmitPost: function (e) {
var _this = this;
var title = e.detail.value.inputTitle;//获取topc
var title = e.detail.value.inputTitle;//获取title
var content = e.detail.value.inputContent;//获取content
app.globalData.postData.title = title
app.globalData.postData.content = content
if (content != undefined && content != "") {
//step1, 上传至oss-获取token,在onReady()提前准备
//_this.oss();
//step2, 上传至oss-上传图片
_this.releaseOss(title, content);
//step3, 上传信息到数据库
//上传数据库在oss sdk的callback函数里设置
//需要java后台支持
}
......@@ -76,8 +74,8 @@ Page({
accessid: res.data.data.accessid,
policy: res.data.data.policy,
signature: res.data.data.signature,
uploadUrl: res.data.data.host,
uploadUrlend: res.data.data.dir,
host: res.data.data.host,
dir: res.data.data.dir,
expire: res.data.data.expire,
securityToken: res.data.data.securityToken,
})
......@@ -85,44 +83,90 @@ Page({
}
})
},
//上传照片(阿里云)
uploadAli: function (babyData, photoArr) {
uploadAli: function (tag, title, content, photoArr) {
var _this = this;
var uploadUrl = this.data.uploadUrl;
var uploadUrlend = this.data.uploadUrlend;
var photoArrLen = photoArr.length;
console.log("===this is uploadAli");
console.log("===uploadUrl_"+uploadUrl);
console.log("===uploadUrlend_" + uploadUrlend);
var promise = Promise.all(photoArr.map((pic, index) => {
//pic是多图上传模式中的单张图片 index => 0 : length-1
console.log(pic)
//传给阿里云的参数
var policy = this.data.policy;
var accessid = this.data.accessid;
var securityToken = this.data.securityToken;
var signature = this.data.signature;
var path = this.data.host + "/" + this.data.dir;
console.log("policy: " + policy);
console.log("signature: " + signature);
console.log("accessid: " + accessid);
console.log("path: " + path)
var babyData = {
'Filename': '${filename}',
'name': pic.replace('http://tmp/', "").replace('wxfile://', ""),
'key': this.data.dir + '${filename}',
'policy': policy,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
'signature': signature,
'x-oss-security-token': securityToken
}
// 多图n上传流程,通过promise.all实现异步控制
// n-1图直接上传
// 第n图上传+设置callback，在java后台提交参数到数据库
if (index == photoArr.length - 1)
{
var photoArrsm = [];
//由于微信小程序生成的临时路径在上传阿里云的时候不需要上传.所以需要对路径进行处理,但是在手机端上传和PC端上传,图片临时路径的前缀不同,所以需要进行分别的处理
// pc: http://tmp/
// wx: wxfile://
for (let i = 0; i < photoArr.length; i++) {
photoArrsm.push(path + photoArr[i].replace('http://tmp/', "").replace('wxfile://', ""));
}
//生成最终的文件字符串 file1.jpg::file2.png (数据库解析格式)
var image = photoArrsm.join("::")
var userId = wx.getStorageSync('nyxCode')
var strUrl = config.oss_callback_url
var callback_param = {
'callbackUrl': strUrl,
'callbackBody': 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}&tag=' + encodeURI(encodeURI(tag)) + '&title=' + encodeURI(encodeURI(title)) + '&content=' + encodeURI(encodeURI(content)) + '&image=' + image + '&userId=' + userId,
'callbackBodyType': "application/x-www-form-urlencoded",
}
var base64_callback_body = base64.encode(JSON.stringify(callback_param));
babyData['callback'] = base64_callback_body
}
return new Promise(function (resolve, reject) {
var host = _this.data.host;
wx.uploadFile({
url: uploadUrl,
url: host,
formData: babyData,
name: 'file',
filePath: photoArr[0],
filePath: pic,
header: {
'content-type': 'multipart/form-data'
},
success: res => {
if (res.statusCode == 200) {
//表示上传成功(可以在阿里云服务器查看上传的图片)
_this.switchTab()
}
else
{
console.log("阿里云 oss 上传失败, error msg__", res)
}
success: function (res) {
console.log("=== index_"+index)
console.log(res)
resolve(res.data);
},
fail: function (err) {
reject(new Error('failed to upload file'));
console.log("fail to upload file")
},
complete: function () {
console.log("complete to upload file");
}
})
});
});
})).then(_this.switchTab());
},
//发布按钮
releaseOss: function (title, content) {
var _this = this;
console.log("===this is releaseOss");
//获取照片数组
var photoArr = app.globalData.postData.photoArray;
//获取时间
var date = this.data.date;
var userToken = this.data.userToken;
//时间搓
var expire = this.data.expire;
//获取当前时间搓
......@@ -133,50 +177,13 @@ Page({
_this.oss();
expire = this.data.expire;
}
//传给阿里云的参数
var policy = this.data.policy;
var accessid = this.data.accessid;
var securityToken = this.data.securityToken;
var signature = this.data.signature;
var uploadUrlend = this.data.uploadUrlend;
console.log("policy: " + policy);
console.log("signature: " + signature);
console.log("accessid: " + accessid);
//传给阿里云的参数-end
var newPhoto = '';
var photoArrsm = '';
//由于微信小程序生成的临时路径在上传阿里云的时候不需要上传.所以需要对路径进行处理,但是在手机端上传和PC端上传,图片临时路径的前缀不同,所以需要进行分别的处理
if (photoArr[0].indexOf('http://tmp/') != -1) {
photoArrsm = uploadUrlend + photoArr[0].replace('http://tmp/', "");
}
if (photoArr[0].indexOf('wxfile://') != -1) {
photoArrsm = uploadUrlend + photoArr[0].replace('wxfile://', "");
}
var tag = app.globalData.postData.photoTag
var category = "心情"
var strUrl = config.oss_callback_url
var callback_param = {
'callbackUrl': strUrl,
'callbackBody': 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}&tag=' + encodeURI(encodeURI(tag)) + '&title=' + encodeURI(encodeURI(title)) + '&content=' + encodeURI(encodeURI(content)),
'callbackBodyType': "application/x-www-form-urlencoded",
}
var base64_callback_body = base64.encode(JSON.stringify(callback_param));
var babyData = {
'Filename': '${filename}',
'name': 'photoArr[0]',
'key': uploadUrlend + '${filename}',
'policy': policy,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
'callback': base64_callback_body,
'signature': signature,
'x-oss-security-token': securityToken
}
this.uploadAli(babyData, photoArr)
this.uploadAli(tag, title, content, photoArr)
},
switchTab() {
app.globalData.postData = {}
wx.switchTab({
url: '/pages/discover/discover'
});
......
增值产品-小程序及app/nyx_app_key/api/src/main/java/cn/com/fun/nyxkey/api/repository/Rockwell_keyMapper.java
package cn.com.fun.nyxkey.api.repository;
package cn.com.fun.nyxkey.api.repository;
......@@ -37,6 +37,7 @@ public interface Rockwell_keyMapper {
/* post api */
List<Rockwell_keyV_post_info> getV_post_info(Rockwell_keyT_postQuery rockwell_keyT_postQuery);
void addT_post(Rockwell_keyT_post rockwell_keyT_post);
void addT_postLike(Rockwell_keyT_post rockwell_keyT_post);
/* area api */
List<Rockwell_keyV_area_total> getCityList();
......
增值产品-小程序及app/nyx_app_key/api/src/main/java/cn/com/fun/nyxkey/api/service/Rockwell_keyService.java
package cn.com.fun.nyxkey.api.service;
package cn.com.fun.nyxkey.api.service;
......@@ -48,7 +48,7 @@ public interface Rockwell_keyService {
* 数据流 小程序客户端 -> 阿里云oss -> callback回应用服务器 -> AddT_post
* */
int Rockwell_keyServiceAddT_post(String userId, String noteImage, String tag, String title, String content) throws UnsupportedEncodingException;
int Rockwell_keyServiceAddT_postLike(String postId);
/* member pos api */
JSONResult Rockwell_keyServiceGetCityList();
......
增值产品-小程序及app/nyx_app_key/api/src/main/java/cn/com/fun/nyxkey/api/service/impl/Rockwell_keyServiceImpl.java
package cn.com.fun.nyxkey.api.service.impl;
package cn.com.fun.nyxkey.api.service.impl;
......@@ -306,14 +306,11 @@ public class Rockwell_keyServiceImpl implements Rockwell_keyService {
public int Rockwell_keyServiceAddT_post(String userId, String noteImage, String tag, String title, String content) throws UnsupportedEncodingException {
LOGGER.debug("find Rockwell_keyServiceAddT_post");
System.out.println("find Rockwell_keyServiceAddT_post");
String endpoint = aliyunOssEndpoint; // 请填写您的 endpoint
String bucket = aliyunOssBucket; // 请填写您的 bucketname
String host = "http://" + bucket + "." + endpoint + "/"; // host的格式为 bucketname.endpoint
Rockwell_keyT_post rockwell_keyT_post = new Rockwell_keyT_post();
rockwell_keyT_post.setPostId("pid_"+UUID.randomUUID().toString());
rockwell_keyT_post.setUserId(userId);
rockwell_keyT_post.setTag(URLDecoder.decode(tag, "UTF-8"));
rockwell_keyT_post.setNoteImage(host+noteImage);
rockwell_keyT_post.setNoteImage(noteImage);
rockwell_keyT_post.setTitle(URLDecoder.decode(title, "UTF-8"));
rockwell_keyT_post.setContent(URLDecoder.decode(content, "UTF-8"));
rockwell_keyT_post.setCreateDatetime(new Date());
......@@ -323,6 +320,18 @@ public class Rockwell_keyServiceImpl implements Rockwell_keyService {
return 0;
}
/*
1.3 添加点赞
*/
public int Rockwell_keyServiceAddT_postLike(String postId){
LOGGER.debug("find Rockwell_keyServiceAddT_postLike");
Rockwell_keyT_post rockwell_keyT_post = new Rockwell_keyT_post();
rockwell_keyT_post.setPostId(postId);
rockwell_keyMapper.addT_postLike(rockwell_keyT_post);
return 0;
}
/* member pos api */
public JSONResult Rockwell_keyServiceGetCityList()
{
......
增值产品-小程序及app/nyx_app_key/api/src/main/java/cn/com/fun/nyxkey/api/web/controller/NyxApiController.java
package cn.com.fun.nyxkey.api.web.controller;
package cn.com.fun.nyxkey.api.web.controller;
......@@ -262,10 +262,21 @@ public class NyxApiController {
@RequestParam(value = "pageNum", required = false, defaultValue = "1") int pageNum,
@RequestParam(value = "pageCount", required = false, defaultValue = "5") int pageCount
) {
return keyService.Rockwell_keyServiceGetV_post_info(tag, title, top, pageNum, pageCount);
}
// 4.1 为post添加点赞 2020-05-19
@ApiOperation(value="添加点赞", notes="添加点赞")
@ApiImplicitParams({
@ApiImplicitParam(name = "postId", value = "postId", required = false, dataType = "String", defaultValue = "pid_123"),
})
@RequestMapping(value = "/nyx/post/like", method = RequestMethod.GET)
public void RockwellAddKeyPostike(
@RequestParam(value = "postId", required = false, defaultValue = "pid_123") String postId
) {
keyService.Rockwell_keyServiceAddT_postLike(postId);
}
// 5.0 member pos api
@ApiOperation(value="获取citylist", notes="获取citylist")
@ApiImplicitParams({})
......
增值产品-小程序及app/nyx_app_key/api/src/main/java/cn/com/fun/nyxkey/api/web/controller/OssApiController.java
package cn.com.fun.nyxkey.api.web.controller;
package cn.com.fun.nyxkey.api.web.controller;
......@@ -68,11 +68,12 @@ public class OssApiController {
@RequestParam(value = "tag", required = false, defaultValue = "0") String tag,
@RequestParam(value = "title", required = false, defaultValue = "0") String title,
@RequestParam(value = "content", required = false, defaultValue = "0") String content,
@RequestParam(value = "category", required = false, defaultValue = "0") String category
@RequestParam(value = "image", required = false, defaultValue = "0") String image,
@RequestParam(value = "userId", required = false, defaultValue = "0") String userId
) throws UnsupportedEncodingException {
System.out.println("===callback_\n");
System.out.println("===filename: "+filename+"&tag="+tag+"&title="+title+"&content="+content+"&category="+category);
keyService.Rockwell_keyServiceAddT_post("uid_123",filename, tag, title, content);
System.out.println("===filename: "+filename+"&tag="+tag+"&title="+title+"&content="+content+"&image="+image+"&userId="+userId);
keyService.Rockwell_keyServiceAddT_post(userId, image, tag, title, content);
JSONObject result = new JSONObject();
result.put("Status","OK");
return result;
......
增值产品-小程序及app/nyx_app_key/api/src/main/resources/cn/com/fun/nyxkey/api/repository/Rockwell_keyMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
......@@ -261,6 +261,18 @@ limitations under the License.
values (#{postId}, #{userId}, #{tag} , #{noteImage}, #{title}, #{content}, #{createDatetime}, #{updateDatetime})
</insert>
<!-- key post 更新post中的num_like记录-->
<!--
UPDATE tbl_post
SET num_like=num_like+1
WHERE post_id='pid_123'
-->
<select id="addT_postLike" parameterType="cn.com.fun.nyxkey.api.domain.Rockwell_keyT_post">
UPDATE tbl_post
SET num_like=num_like+1
WHERE post_id=#{postId}
</select>
<!-- post api 4.1 从 view_post_info 获取 post信息
-->
<select id="getCityList" resultType="cn.com.fun.nyxkey.api.domain.Rockwell_keyV_area_total">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论