Vue, App与我(十三)
2024-05-13 02:17:26
Vue, App与我(十三)
前言:
- Big-man需要开发一个论坛模块, 论坛模块的话，简而言之, 就是一个发帖和回帖的模块。但是Big-man的这个论坛模块还是比较复杂的。在接下来的实现中Big-man会进一步地去进行分析。所以Big-man怀着好奇的心态进入了移动端的论坛模块。
首页:
- 从这个首页的设计图上就可以得出, 需求是多么地繁杂，特别是涉及到图片上传这一块，原来的头像更换代码, 也是相当于图片上传。代码如下:
<template><div><div class="navTop"><i class="iconfont back" onclick="javascript:history.go(-1)"></i><span class="navCon">图片</span><span class="publish" v-on:click="updateUser()" style="display:none;">保存</span></div><div class="ask pt45"><div class="tips"><p class="tips_title">修改图片</p> </div><div class="text"><div id="app"><img id="picture_sourceimg" :src="picture" width="600" height="800"><input type="hidden" id="picture" name="picture" value="picture" ref="picture"> <div class="weui_uploader_input_wrp" v-on:click="changeUpload()"></div></div></div></div></div>
</template><input type="hidden" id="picture" name="picture" value="picture" ref="picture">- input 标签代码中的
type=hidden是定义隐藏的字段，这里这样写主要是想要通过样式实现如下的效果:
- 查看如下的样式修饰代码:
<style scoped>
.navTop .publish{ height:0.45rem; padding-right:0.15rem; color:#ffffff; font-size:0.15rem; line-height:0.45rem;}
.pt45{ padding-top:0.45rem; overflow:hidden;}
.ask{ overflow:hidden; }
.ask .text{ overflow:hidden; padding:0.15rem;}
.ask .text textarea{ width:90%; padding:5%; overflow:hidden; border:none; outline:none; background:#ffffff;}
.ask .tips{ padding:0 0.15rem; overflow:hidden; color:#a5a5a5; font-size:0.12rem;background-color: #E8E5E5;padding-bottom:0.15rem;}
.tips .tips_title{font-size:20px;font-weight:500;padding-top:0.15rem;color:#000000}
ul { list-style: none outside none; margin:0; padding: 0; }
li { margin: 0 10px; display: inline; }
#app{overflow: hidden;text-align: center;}
img {overflow: hidden; width: 150px;height:150px; border-radius: 150px; border: 1px solid #284baa; margin: auto;float: left;display: inline;margin-bottom: 10px;}
.weui_uploader_input_wrp {float: right;position: relative;margin-right: 9px;margin-bottom: 9px;width: 77px; height: 77px;border: 1px solid #d9d9d9;}
.weui_uploader_input_wrp:before {width: 2px;height: 39.5px;}
.weui_uploader_input_wrp:after {width: 39.5px;height: 2px;}
.weui_uploader_input_wrp:before {content: " ";position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);background-color: #d9d9d9;}
.weui_uploader_input_wrp:after, .weui_uploader_input_wrp:before {content: " ";position: absolute; top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);background-color: #d9d9d9;}
.weui_uploader_input {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.weui_uploader_file {float: left; margin-right: 9px;margin-bottom: 9px;width: 79px;height: 79px;background: no-repeat 50%;background-size: cover;}
#picture_uploadimg{float: right;}
.photoclose {position: absolute;display: block;right: 0;top: 0;margin: 2px 2px 0 0;width: 23px;background: #fff;}
.photoshow {display: block;float: left;position: relative;margin-right: 8px;margin-top: 8px;overflow: hidden;zoom: 1;}.contain {width:100%; height:300px;border:1px solid #ccc;}
</style>- 其中最为主要的是实现图片上传的这部分代码:
<script>
import Error from '../components/Error.vue'
import Tab from '../components/Tab.vue'
import Config from '../config.js'
import {Toast} from 'mint-ui'
import Store from '../store.js'export default {components: {Error,Tab},data () {return {isError: false,error: '',picture:'',whoami: 'user/whoami/',govUrl:'user/update/'}},beforeMount: function(){if(Store.getAuthUid()){this.$http.get(this.whoami,{}).then((response) => {const ret = JSON.parse(response.data);if(ret && ret['code'] === 0){if(!ret['picture']){if(ret['wx_picture']){this.picture = ret['wx_picture']}else{this.picture = Config.defaultPic}}else{this.picture = Config.baseUrl + ret['picture']}}else{this.$router.push('/login')return}})}else{this.$router.push('/login')return}},methods: {fullUrl: function(url) {return Config.baseUrl + url},defaultPicUrl:function(){return Config.defaultPic},changeUpload:function(e){var share = {action: 'uploadImage',Authorization: 'Xyapp ' + Store.getAuthUid(),api: '/user/upload/'}if(window.postMessage) window.postMessage(JSON.stringify(share),'*');return true},updateUser: function(){var picture = this.$refs.picture.valuethis.getUpdate(picture)},getUpdate(picture) {this.$http.post(this.govUrl,{picture:picture} ).then( (response) => {const ret = JSON.parse(response.data || "[]")if(ret && ret.code === 0){Toast('操作成功!')this.$router.push('/userset')}else{Toast(ret.msg)this.error = (ret && ret.msg) || ""this.isError = true}},(response) => {this.isError = truethis.error = ""if(callback) callback.call(this)});}}
}
</script>changeUpload()函数事件也就是图片的加载事件, 具体代码如下:
changeUpload:function(e){var share = {action: 'uploadImage',Authorization: 'Xyapp ' + Store.getAuthUid(),api: '/user/upload/'}if(window.postMessage) window.postMessage(JSON.stringify(share),'*');return true
},- 在以上的代码中, Big-man在书写的时候还犯了一个致命的错误，且这个错误是因为Big-man的经验不足造成的，比如如下的代码:
Authorization: 'Xyapp ' + Store.getAuthUid(),Authorization: 'Xyapp' + Store.getAuthUid(),
- 这两段代码大家可以仔细的推敲一下，在Big-man的书写过程当中就犯了这个错误，由此分享出来以供大家参考，引以为戒。
- 在图像上传的时候, Big-man的这个项目沿用的是以前的代码, 也就是每点击一下去执行一下
changeUpload()函数，而action的函数是在打包代码里面，这里的Big-man的打包代码是react-native。如下便是代码:
import config from "../config/config";
import ImagePicker from 'react-native-image-picker'; //第三方相机
import {Platform, Alert} from 'react-native'
import Log from "../utils/LogUtil";
var UpLoadImage = {//上传图片upload: function(message,callback,showTips,hidTips) {Log.log("####进入方法内："+message.api);config.Authorization = message.Authorization;let photoOptions = {//底部弹出框选项title:'请选择',cancelButtonTitle:'取消',takePhotoButtonTitle:'拍照',chooseFromLibraryButtonTitle:'选择相册',quality:0.3,allowsEditing:true,noData:false,storageOptions: {skipBackup: true,path:'images'}};// 选择图片ImagePicker.showImagePicker(photoOptions,(response) => {if (response.didCancel){Log.log('User cancelled image picker');return;} else if (response.error) {Log.log('ImagePicker Error: ', response.error);return;} else if (response.customButton) {Log.log('User tapped custom button: ', response.customButton);return;}if (Platform.OS === 'ios') {const source = {uri: response.uri.replace('file://', ''), isStatic: true};this.uploadImageNetWork(source.uri,callback,message,showTips,hidTips);} else {const source = {uri: response.uri, isStatic: true};this.uploadImageNetWork(source.uri,callback,message,showTips,hidTips);}});},// 上传图片的网络请求uploadImageNetWork : function(uri,callback,message,showTips,hidTips) {let split = uri.split('/');let p = split[split.length - 1];// 这里还没有对 Uri 的非空判断let formData = new FormData();let file = {uri, type: 'multipart/form-data', name: p}; // name截取Uri的最后字段formData.append("file",file); //这里的files就是后台需要的keyshowTips();fetch(config.api+message.api,{method:'post',// mode: "cors",// 允许跨域访问headers:{'Authorization':config.Authorization,'Content-Type':'multipart/form-data',},body:formData,}).then((response) => {if (response.ok){hidTips();Alert.alert('提示','上传成功',[{text:'确定',onPress:()=>{}}]);callback();}else {hidTips();Alert.alert('提示','上传失败',[{text:'确定',onPress:()=>{}}]);}}).catch((e)=>{hidTips();Alert.alert('提示','系统错误',[{text:'确定',onPress:()=>{}}]);});}
}
export default UpLoadImage- 更新图片的逻辑很是复杂，Big-man会在接下来分析一下图片的上传过程。
进入图片更新页面之前:
- 在进入图片更新之前, Big-man需要去插入一条空的数据， 类似于下面的代码:
common: function () {let type = 3this.$http.get(this.barAddUrl + type + '/').then((response) => {const ret = JSON.parse(response.data || "[]")if(ret && ret.code === 0) {this.id = ret.idthis.$router.replace('/postcommon/' + this.id)} else {Toast(ret.msg)}})
},- 因为Big-man书写的论坛里面还存在帖子的类型(活动帖和普通帖), 所以在这一步同时也需要上传一个类型(
type值)，接下来看数据分析:
barAddUrl的代码分析:
$app->get('/bar/add/{type}/', function($request, $response, $args) {global $g_tbwuserid,$timestamp,$g_city_id;if ($g_tbwuserid > 0) {$bar = [];$bar['type'] = $args['type'];$bar['istop'] = 1;$bar['addtime'] = $timestamp;$bar['cityid'] = $g_city_id;$ret = template_add('cache_postbar', NO_CHECK_POWER, $bar, $request,$response);}else{$ret['code'] = 1;$ret['msg'] = COMMENT_LOGIN;return_result($request, $response, $ret);}return $response;
});- 后台是采用
PHP书写的代码, 这样的操作是为了方便图片的插入， Big-man这样去想过这个数据的走势，图片需要插入，但是图片处理需要与bar的主键值(也就是上图中的id值)结合起来(不然怎么知道这张图片是是那个帖子的图片了)，但是这个id值是DataBase自带的自增属性值(这里Big-man并没有对每一个帖子设计一个主键值，因为MySQL中自带的数据库递增值，很明显可以处理完这类的需求)，对于操作过的小伙伴们很明白这一点的，所以我在图片上传的页面需要知道这个id值，如下图:
- 上图中的
linkid也就是我这里的barid，与这个barid对应的也就是上述中的id值。
插入一条空数据:
- 很多的小伙伴可能会存在像Big-man这样的疑问，为什么需要去插入一条空数据了？插入一条空数据有什么意义了？
- 占过座的伙伴们或者暗恋过别人的伙伴们就比较好理解这个内容，为什么了？因为这群伙伴很明白自己所占的东西虽然是空白的没人使用，但是却是实实在在属于自己的物品。
- 插入图片前插入一条空数据也是同样的道理的，虽然那是一条空的数据, 但是却是属于这部分上传图片的空数据，当图片上传进来的时候，就回归到这条空数据上的。当其他数据想要来强行插入的时候，不好意思，没有那个通行证的同志不准进入。
图片上传刷新页面:
react-native中的机制，上传图片是app触发的，所以需要查看app的代码。代码在上一部分已经给出，react-native老实说Big-man不是很熟悉， 曾经在一个大项目中接触过几个简单的功能，曾经的Big-man还被一位经验丰富的面试官打击了，曾经的历程就不再赘述。
react基本语法:
- Big-man先来解释一下
react的基本语法:ReactDOM.render(): 就这个问题曾经有一位伙伴问过Big-man这个问题,React中的render()如何理解, Big-man沉思了一下，就在这时这位伙伴又发过来说是不是渲染的含义，Big-man就回复了如果你在牛津英汉词典或者有道翻译上都是这个解释，而且还会出现是计算机专业名称解释，但是如果是渲染的话，Big-man想不通，浏览器加载任何一个静态的html文件，也会称作浏览器渲染，但是为什么html文件里面没有render这个词汇，既然是说react中的render，Big-man就应该从react这群开发者”怪咖”出发，
Jackdan9 Thinking
Vue, App与我(十三)相关推荐
- Vue进阶（五十三）：vue-cli 脚手架 webpack.prod.conf.js 配置文件详解
文章目录 一.前言 二.optimize-css-assets-webpack-plugin 插件 三.拓展阅读 一.前言 webpack.prod.conf.js 配置文件是webpack生产环境核 ...
- Vue实战篇三十三：实现新闻的浏览历史
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue app.js文件过大，带宽占用过大，优化方案（持续优化）
Vue app.js文件过大,带宽占用过大,优化方案 前言 最近我的网站在使用的过程中发现加载缓慢问题,在没有缓存的情况下页面打开速度需要五秒,这对于用户体验来说是不友好的.通过查找网上的方案 我实验 ...
- Vue, App与我（二）
Vue, App与我(二) 前言: 进过上一章的讲解,Big-man已经理解了项目的搭建,接下来就是项目的具体代码了. 还有就是Webpack的配置说明Big-man在上面仅仅是简单的引用,所以Big ...
- Vue, App与我（八）
Vue, App与我(八) App的新功能: Big-man这里先要提供一张图吧: 一级菜单: 一级菜单也就是所谓图片的头部,返回按钮加抢购再加拼单,实现这个一级菜单还是比较简单,接下来是Big-ma ...
- vue app.js ＜!doctype html＞报错 Unexpected token ‘＜‘ 作者:哇塞大嘴好帅
vue app.js <!doctype html>报错 Unexpected token '<' 作者:哇塞大嘴好帅 作者:哇塞大嘴好帥(哇塞大嘴好帅) 首先我们看下错误 确保我们 ...
- Vue进阶（四十三）：Vuex之Mutations详解
文章目录 一.前言 二.如何使用 mutations ? 三.源码分析 四.拓展阅读 一.前言 通俗理解mutations,里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就是把处理数据 ...
- vue App.vue router 过渡效果, keep-alive 结合使用示例
1, router.js配置 每个路由的index值 2, router.js配置 每个路由的keepAlive值 app.vue 代码 <template><div id=&quo ...
- 1.微信回到首页直接退出网页 2.vue app返回直接退出问题, 首页返回两次退出解决
问题描述: 1.项目是VUE写的, 之前返回一直是写的返回按键使用this.$router.go(-1)返回, 这样会导致返回会一直返回上一级历史,很多时候体验会非常不好, 但是使用指定路由的方式又会 ...
最新文章
- Vue2.x开发饿了么项目（header部分）
- PID控制方法及C语言其实现
- Springboot中艾特Controller和艾特RestController之间的区别
- [渝粤教育] 西南科技大学 英美文学 在线考试复习资料
- 智能不属于计算机理论,讨论：计算机如何能提出自己的理论
- 12.二叉树的序遍历
- 02.gcc入门（下）
- “阿里离职女高管”蹭马云热度遭阿里高管打假：重新定义高管
- 句句真研—每日长难句打卡Day2
- 简易网络视频播放器android
- vim 使用、设置笔记
- xshell连接Linxu系统乱码
- 简单谈谈MySQL优化利器-慢查询
- 400毫米降水线每年150公里北移
- 人工智能 之 机器学习常用算法总结 及 各个常用分类算法精确率对比
- UI设计培训之用户画像-带你认清的你的用户
- ADAS/AD控制器模块开发01 - 行业背景、基本概念名词介绍
- 欧拉图论定理 公式及证明
- Windows7下安装docker记录
- 【综述专栏】基于深度学习的深度图补全