wex5 实战 用户点评与提交设计技巧
最近遇到很多同学做毕业设计,其中有一项是用户点评与提交。功能并不复杂,同学们又不会,做为一个完整的功能,如果用wex5来设计开发,事半功倍。今天就以景区实战来向大家展示wex5的高效与强大。半天可以设计完成。来看效果
一 效果演示:
二 设计思路:
根据景点id,图片id,用户id,过滤了当前评论id,基于wex5的data与组件绑定来实现
三 数据库设计:
1 用户
2 景区
3 城市
4 评论
三 前端界面设计与代码实现
1 门户页
window.userUUID = justep.Bind.observable();
window.userState = justep.Bind.observable();
用户ID和登陆状态,用全局变量控制,并赋于可观察属性,用于页面绑定。相关教程看我博文(全局可观察变量)
window.userUUID="C755FC6F0B500001808552F016903AE0";
window.userState="1";
门户页测试给值,便于测试。打包后可以注释掉。
2 根据城市过滤景区
城市选择是一个下拉列表,根据change事件得到选中值,并触发景区viewData过滤并异步刷新
3 点击景区进入景区详情页
将景区id传到详情页
4 景区和评论过滤
四 发表评论切换,并控制评论框弹出与隐藏,
1 先看效果:
发表评论按钮 ,点击后,切换成取消评论
确定发表后,如果评论过,将评论框隐藏,否则如果内容不为空,将评论提交。
2 发表评论与取消评论,同一个按钮,显示文字label切换
this.commentState 在model中定义为boolean变量,用于点于切换
$(".commentInput")为textarea对像,用css选择器先择后,用jQruery方法下拉与上滑。
3 提交评论数据
逻辑不复杂,进行了注释。
4 评论至顶,用data组件的自带orderby,真是超简单。
5 手机号码*号显示与拼接
用绑定当前行的方法,强制转换成字符串,进行substring,然后多行拼接。得到手机号码151******3123的形式。真是简单高效。
五 通过wex5制作评论提交,可以得出以下几点:
1 wex5开发效率高,代码量少
2 绑定技术,js综合运用,界面UI设计更灵活
3 数据与代码逻辑简单易懂
wex5 实战 用户点评与提交设计技巧的更多相关文章
- .NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程
写在前面 这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解 ...
- 深圳市共创力推出《以用户为中心的设计UCD方法与实战》课程!
以用户为中心的设计(UCD)方法与实战 课程特色 现在以市场为中心.科技为基础.体验为卖点的商业社会里,用户体验是赢得用户青睐的关键特性.苹果.google.腾讯等顶级企业的成功充分说明了这一点.如何 ...
- .NET框架设计(常被忽视的C#设计技巧)
阅读目录: 1.开篇介绍 2.尽量使用Lambda匿名函数调用代替反射调用(走进声明式设计) 3.被忽视的特性(Attribute)设计方式 4.扩展方法让你的对象如虎添翼(要学会使用扩展方法的设计思 ...
- objc@interface的设计哲学与设计技巧
blog.sunnyxx.com 我是前言 学习objc时,尤其是先学过其他编程语言再来看objc时,总会对objc的类声明的关键字interface感到有点奇怪,在其它面向对象的语言中通常由clas ...
- WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心 流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...
- WPF界面设计技巧(10)-样式的继承
原文:WPF界面设计技巧(10)-样式的继承 PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnb ...
- WPF界面设计技巧(9)—使用UI自动化布局
原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...
- WPF界面设计技巧(8)—自制山寨版CheckListBox
原文:WPF界面设计技巧(8)-自制山寨版CheckListBox 近年来IT市场山寨横行啊,我们今天也来发扬一下山寨精神,搞个自制的CheckListBox出来. 喏,CheckListBox 就是 ...
- .NET框架设计—常被忽视的C#设计技巧
.NET框架设计—常被忽视的C#设计技巧 阅读目录: 1.开篇介绍 2.尽量使用Lambda匿名函数调用代替反射调用(走进声明式设计) 3.被忽视的特性(Attribute)设计方式 4.扩展方法让你 ...
随机推荐
- linux vps安装kloxo配置全部过程
第一步如何登录Linux VPS进行远程(SSH)管理 很多人可能用过免费虚拟主机,但绝没有用过好用的免费服务器租用,仅有的少数免费服务器都只针对有较高访问量的大站(以交换广告为条件),而普通小站是无 ...
- Ant和Maven的作用是什么?两者之间功能、特点有哪些区别?
Ant和Maven都是基于Java的构建(build)工具.理论上来说,有些类似于(Unix)C中的make ,但没有make的缺陷. Ant是软件构建工具,Maven的定位是软件项目管理和理解工具. ...
- linux添加环境变量(centos)
1.查看当前环境变量 #echo $PATH 2.增加环境变量 #vi /etc/profile export PATH=/usr/path/bin:$PATH 3.生效 #source /etc/p ...
- Java_Map_Map详解
本博客为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/8867065 1.Map概述 Map<K,V> Map集 ...
- iOS索引列开发详解
做苹果开发的朋友在地区列表可能会遇到在页面的右侧有一列类似与导航的索引列,这次有机会遇到了,细细研究了一下,原来没有想象中的困难,只需要简单的几步就能做出自己的索引列.本来想和搜索条在一块讲解,后来考 ...
- iOS10新特性
1.Siri API 的开放自然是 iOS 10 SDK 中最激动人心也是亮眼的特性.Apple 加入了一套全新的框架 Intents.framework 来表示 Siri 获取并解析的结果. 在 i ...
- 从Nginx的Web请求处理机制中剖析多进程、多线程、异步IO
Nginx服务器web请求处理机制 从设计架构来说,Nginx服务器是与众不同的.不同之处一方面体现在它的模块化设计,另一方面,也是最重要的一方面,体现在它对客户端请求的处理机制上. Web服务器和客 ...
- vbs让电脑发音说话
Dim vbs1 'set vbs1 = WScript.CreateObject("WScript.Shell") set vbs1 = WScript.CreateObject ...
- 在Eclipse 中使用tomcat8
最新版本的Eclipse让人不支持 Tomcat 8,该方法让Eclipse能使用Tomcat8 第一步:下载最新版本Eclipse for Java EE 第二步:到WTP downloads pa ...
- SQL用先进先出存储过程求出库数量
create table t( id ,), name ),--商品名称 j int, --入库数量 c int, --出库数量 jdate datetime --入库时间 ) ,,'2007-12- ...