最近遇到很多同学做毕业设计,其中有一项是用户点评与提交。功能并不复杂,同学们又不会,做为一个完整的功能,如果用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 实战 用户点评与提交设计技巧的更多相关文章

  1. .NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

    写在前面 这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解 ...

  2. 深圳市共创力推出《以用户为中心的设计UCD方法与实战》课程!

    以用户为中心的设计(UCD)方法与实战 课程特色 现在以市场为中心.科技为基础.体验为卖点的商业社会里,用户体验是赢得用户青睐的关键特性.苹果.google.腾讯等顶级企业的成功充分说明了这一点.如何 ...

  3. .NET框架设计(常被忽视的C#设计技巧)

    阅读目录: 1.开篇介绍 2.尽量使用Lambda匿名函数调用代替反射调用(走进声明式设计) 3.被忽视的特性(Attribute)设计方式 4.扩展方法让你的对象如虎添翼(要学会使用扩展方法的设计思 ...

  4. objc@interface的设计哲学与设计技巧

    blog.sunnyxx.com 我是前言 学习objc时,尤其是先学过其他编程语言再来看objc时,总会对objc的类声明的关键字interface感到有点奇怪,在其它面向对象的语言中通常由clas ...

  5. WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心

    原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心 流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...

  6. WPF界面设计技巧(10)-样式的继承

    原文:WPF界面设计技巧(10)-样式的继承 PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnb ...

  7. WPF界面设计技巧(9)—使用UI自动化布局

    原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...

  8. WPF界面设计技巧(8)—自制山寨版CheckListBox

    原文:WPF界面设计技巧(8)-自制山寨版CheckListBox 近年来IT市场山寨横行啊,我们今天也来发扬一下山寨精神,搞个自制的CheckListBox出来. 喏,CheckListBox 就是 ...

  9. .NET框架设计—常被忽视的C#设计技巧

    .NET框架设计—常被忽视的C#设计技巧 阅读目录: 1.开篇介绍 2.尽量使用Lambda匿名函数调用代替反射调用(走进声明式设计) 3.被忽视的特性(Attribute)设计方式 4.扩展方法让你 ...

随机推荐

  1. 【转】logback logback.xml常用配置详解(一)<configuration> and <logger>

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...

  2. .net core 1.0 中的asp.net identity 的基本使用 序言

    2016年6月底,微软发不了vs2015 up3,在这个版本中,微软做了一些改变,本人目前也尚在学习使用之中,现把学习和使用的心得写出来,错误之处请大家指正. 开发环境:vs2015 UP3   项目 ...

  3. Unity运行时检测Altas使用情况

    UI贴图在游戏中内存大小中占的分量非常非常大,尤其对于前期对UI没有规划的项目,无论是包量还是内存大小都是需要花费很多时间去优化.如果涉及到战斗场景和逻辑场景的情况下,常用的做法就是把两个场景使用的a ...

  4. php 读取文件

    <?php /** *@param string $ip *@return string ip对应的地区 */ function getLocation($ip) { $ip_file_path ...

  5. 205 Reset Content

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html The server has fulfilled the request and the ...

  6. ASP.NET MVC 项目中 一般处理程序ashx 获取Session

    1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和aaa=Session["xxx"].ToString( ...

  7. dynamodb golang query one Item

    golang  dynamodb  query  oneItem  and unmarshal  to object // +build example package main import ( / ...

  8. inline--行内元素

    其实在网页中有看不见的基线,就像作业本上面的一行一行的线,但是我们看不见. div是块状元素,独占一行,用div控制文字的颜色会使得文字换行,使用float可以改善,但是它不会浮在相应的位置: < ...

  9. 系统右键自定义功能-右键备份【C#】

    平时在某些公司发布网站的时候,都是手动备份文件,以免发布错误,做回滚使用.频繁的发布,在做备份的时候也会稍稍浪费点时间.当然在一些大的公司都会有一些自动发布系统,就不会出现这种问题了,对这种问题,我做 ...

  10. Oracle的DML语言必备基础知识

      前提是咱们都已经对常用的数据操纵语言非常熟悉了,对标准SQL: SELECT子句                --指定查询结果集的列 DROM子句                 --指定查询来 ...