14年工作回顾(一)

前言

本文开始会把之前项目中遇到的一些问题进行分类整理,并得出其经验值。也许其本身在今天的技术架构中没有任何实用价值,但在项目开发中能有举一反三的作用。

关于网站cms

在14年开始的前端工作中,很大一部分工作是开发维护cms的站点项目。主要是基于javaeecms搭建的基于内容的网站栏目的管理和内容的管理。其中遇到和总结的一些经典问题进行了记录和个人简单的总结。

cms网站问题列表(一 )

以下的问题属于网站开发中的问题:

  • 添加栏目的时候必须按顺序设置栏目模型 (设置为独占一行的)内容模型 (设置必要的内容) 栏目模型全选 内容模型选择部分 内容模型的内容类型为必选的
  • 添加栏目之前 要先添加对应的栏目以及页面的对应的模版 然后设置 设置样式时 设置左侧菜单 顶部菜单 列表页面 详情页面 网站地图
  • 选中效果以及对应的js 可以看到对应的关联样式 其中的id必须准确的对应后台的数据
  • 现在本地测试效果 然后生产添加栏目 对应的文件以及图片传到对应的地址即可
  • 一级栏目是添加不了的 可以通过添加一个二级栏目 然后修改目录为顶级栏目
  • 栏目中如果需要标题 则加标题图

总结:从上面的问题中可以分类总结,其核心问题是 :网站栏目的设置教程 ; 样式与数据的对应关系 ;

cms网站问题列表(二)

1 栏目的配置流程要正确 2 必要的页面文件一定有 3 如果需要图片支持 栏目模型的文件要加上标题图 内容图 4 内容模型的内容类型一定要有 5 生产与测试的位置 图片路径是不一致的 6 configure 中配置图片路径 imgurl=/opt/apache-tomcat-test-hnsxzptcms-17055/zjkjyycms 7 u.xml 浙一网站的要配置成home目录的 /opt/apache-tomcat-test-hnsxzptcms-17055/zjkjyycms/u luence =”/opt/apache-tomcat-test-hnsxzptcms-17055/zjkjyycms/lucene 8 全文检索的功能,中,生成索引的文章目录时间不能太长

总结:从上面的问题列表中可以分析总结到: 1 栏目的配置流程问题,内容类型设置 2 页面中的必要文件,图片的使用; 3 不同环境的配置差别 4. 配置中需要增加图片部分的配置 5 个别功能点 :比如全文检索中是有使用建议的 6 服务器配置中需要设置成对应的项目地址,这个地址和项目有关,和图片有关

cms网站问题列表(三)

1 选中高亮样式 :

  • 首页以及横向导航的样式修改 和选中的效果
  • 左边切换的选中效果
  • 文章列表进入文章的显示以及选中效果
  • 文章内容的参数选中效果 以及上下一篇的选中效果

2 浏览器的兼容效果

3 窄屏适应问题

window.onresize = window.onload = function(){ 
     var lw = $(window).width();
            if( lw < 1024){
                $( ".footall").css( "width", "1024px");
                $( ".headerall").css( "width", "1024px");
                $( "#banner").css( "width", "1024px");
                $( ".bodytop").css( "width", "1024px");
            } else if(lw>=1024){
                 $( ".footall").css( "width", "100%");
                     $( ".headerall").css( "width", "100%");
                     $( "#banner").css( "width", "100%");
                     $( ".bodytop").css( "width", "100%");
            }
    } 

4 验证码 通用样式

 <div class= "input-block" style ="overflow :hidden;width:250px;">
                                      <input id ="code_text" type= "text"  class ="inputtext" placeholder="验证码" style=" float: left; width: 150px; padding-left: 0; text-align: left; padding: 0 10px" />
                                      <img id ="code_img2" width= "82px;" height ="36px;" style="margin-top: 0px;margin-left: 0px; float: right;" />
                                 </div >
style="float : left;width: 150px;padding-left :10px;text-align: left;"
width="82px;" height= "36px;" style ="margin-top: 0px;margin-left : 0px;float :right;"

5 站长统计:

http://tongji.cnzz.com/main.php?c=site&a=show&from=login

总结:从上面的问题列表中可以分析总结到: 1 对于一个项目中通用的交互需要总结分类,让ui、前端统一去统计,统一优化修改 2 浏览器的兼容效果是一个专题性质的,需要统一去测试,给出前端的兼容效果 3 对于宽屏窄屏,一般设计并没有做多种方案,所以这种方案建议前置提前让设计给出响应的ui交互稿,前端对应的在window.onsize或者onload方法中,进行更改样式,当然建议是通过修改类,而不是这样写一行行的样式代码。 4 对于有些常用的组件代码、样式或者功能,建议写成工具类,或者文档共享出来,没有的话,你也会像我这样复制粘贴到自己的记事本然后复制粘贴用,很低效。 5 目前比较常规的网站pv监测会是站长统计,当前也有其他更好的服务商提供,或者自己做数据埋点。(需要注意的是:如果你用了站长工具,那么对应的账号密码需要记住)

微信测试

设置运营者

路径以及规则:安全中心 里 管理员微信号 可以设置四个运营者 运营者都是可以绑定其他人的微信号 发送消息的

账号信息

需要你在一个方便的位置记录微信账号的相关信息,比如用户名,密码,appid,secret.

微信菜单的定义规则

目前自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单。一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“…”代替。

这部分主要是做需求评审的时候需要和产品统一确认沟通好,避免有风险的需求提出。

掌握健康 (微信模块)

使用原则: 互相独立,可以单独配置入口

包括了多个模块,每个模糊互相独立,有自己的业务流程,需要避免页面切换的死循环。

需要的颜色搭配

这里需要less做相关的配置,和设计统一思想。 主题颜色 、主题背景色、提示的背景颜色 、提示色、页面的背景颜色

问题小结 1

科室列表页面增加覆盖的效果\医院的网址全部用连接的形式\三星手机字体图标的解决方案 智能导诊的流程问题 \微信的地址问题\项目的更新与维护问题

问题小结 2

1抢救药物打不开 2 急救的文章标题显示不全 3 智能导诊 提示语多一个 的 4 健康咨询的加载下一页 变成手势 (带考虑)

页面显示

接口描述字段为空是否返回? 页面判断去空后不显示与否? 关于医生描述字段 是否需要追加其他显示字段

模块问题反馈

  • 医院简介部分 医院简介中展示的医院等级没有,可能功能设计上没有设计医院等级可编辑字段。 医院简介的可自定义的编辑字段,可自定义的展示字段的名称
  • 科室医生部分 分类的科室医生的,增加科室关联,科室分类表以及科室分类关联表 针对医生详情的展示字段,展示称谓,可自定义展示的字段,需要增加的字段。 其中对于小需求的变更是更改原项目页面还是说新建项目,是否做重复引用。
  • 健康资讯以及健康百科的部分 健康资讯 首页做区别,针对医院id不同的时候进入的首页不同,与后台配置相关,进入的为不同的页面。 之后如果需要对首页做特殊配置,应该怎么去实现?
  • 来院路线,增加百度地图以及腾讯地图的两个展示方法

第二版本参数使用说明 :

备注 :参数要按照标准格式填写 ;参数全部必填,设计相应的页面还需要另外的参数。

1 version_no 版本号 1.0, 1.1 等 ,默认是1.0,区别使用不同的版本。 2 hos_style_no 1-9999 医院风格编号 , 唯一标识风格号 ,默认是0,用于某些医院定制的风格 。 3 hos_name 医院名称 需要base64 的原方法加密过的 ,需要医院名称(全名) ,默认值是”掌握健康”, 用于显示页面的标题。 4 style_color 风格颜色 ,默认值 “darkgreen”, 两种 一种是简单的医院名称首字母简拼, 为医院定制的颜色,如sxzyy ;另一种是颜色英文名称 ,如black,green等。 5 client_type 页面类型 ,默认值 01,01 手机微信版, 02 手机支付宝版 ,03 手机客户端内嵌页面, 04 ipad页面 , 05 pc页面, 06 其他 。

地图调用腾讯地图代码(后续已经改为百度地图)

<iframe src="http://apis.map.qq.com/uri/v1/marker?marker=coord:30.257687,120.178216;title:浙大一院;addr:中国浙江省杭州市上城区庆春路79号&coord_type=2&referer=浙大一院微信" style="width: 100%;height: 100%;min-height: 500px;"></iframe>

菜单配置、样式文件生成,项目中的api转发配置

1 菜单配置地址 2 样式文件生成地址 3 配置的转发地址

<bean id= "zwjkxxx" class="xxx">
   <constructor-arg name= "url" value="http://api.ucmed.cn/api/xxx" />

微信菜单配置格式

最好做好备份,方便调整以及恢复,微信菜单的json格式需要牢记。(要注意连接符号 ,格式为json数据格式)

{
    "button": [
        {
            "name": "就医指南",
            "sub_button": [
                {
                    "type": "click",
                    "name": "智能导诊",
                    "key": "ZNDZ",
                    "sub_button": []
                }]
          }]
  }   

掌握健康微信小结

1 需要明确各个模块的地址,配置项,通用的主题色、相关色 2 需要明确模块与医院的匹配关系 3 对于问题要定位到具体模块,每个模块可以的话都追加其专门的负责人 4 针对持续维护、优化的功能点增加版本概念,针对重复可用的皮肤追加皮肤使用效果图,已经适用的医院 5 针对通用的颜色进行统计,支持皮肤生成,支持多端的支持显示 6 对于个别模块对第三方的依赖以及使用需要明细为教程,降低使用维护成本 7 熟练掌握微信菜单配置以及其生效时间,调试方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

vuejs开发H5页面总结

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开...

49390
来自专栏听雨堂

Android新手之旅(7) RadioButton的自定义

希望用到RadioGroup的功能,但遇到一些看似简单问题却无法解决:系统的图标太大却难以更换,在网上找解决方案。有些地方提到,由于用的是图片,所以无法缩小,...

27380
来自专栏Java3y

浅谈CDN、SEO、XSS、CSRF

CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN。 CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时...

52150
来自专栏Web 开发

Mac下面的IE8测试环境

微软提供的IE测试虚拟机里面,Window7的自带的最小版本IE是IE8,so,从IE8测试走起。Vista是个短命的产品,至于XP,让他退役吧。

14000
来自专栏iOSDevLog

Xcode 10

Xcode 10包含为所有Apple平台创建出色应用所需的一切。现在Xcode和Instruments在macOS Mojave上的新Dark Mode中看起来...

15820
来自专栏GopherCoder

Django:web框架的学习(3)

16230
来自专栏编程微刊

浅谈移动端页面无刷新跳转问题的解决方案

42840
来自专栏古时的风筝

webscraper 最简单的数据抓取教程,人人都用得上

这么简单的工具当然对环境的要求也很简单了,只需要一台能联网的电脑,一个版本不是很低的 Chrome 浏览器,具体的版本要求是大于 31 ,当然是越新越好了。目前...

52300
来自专栏阮一峰的网络日志

搭建了一个图片库

但是,事实上,这个网志的所有图片链接都是有效的,没有一个链接是坏的。无法显示只是因为被屏蔽了,只要你不在中国大陆,所有图片都能看到。

86430
来自专栏互联网杂技

AngularJS 对SEO是硬伤

在过去的2014年, 前端开发因为大量前端框架的出现开发模式有了巨大的改变,MVC这个web服务器端开发的模式,由于angularjs们的出现,变成了前端MVV...

83870

扫码关注云+社区

领取腾讯云代金券