超级公众号系统开发总结报告

内容	时间段	总体进度
从了解项目开发到完成所有页面编写，用假数据通过测试并上传	5/27--6/10	40%
一边复习一边后端交互测试数据	6/12--6/23	70%
完成“我的”页面所有接口测试	7/07--7/11	80%
接手倪虹升负责部分，改完剩下的BUG,并进行测试	7/10--7/13	100%

（由于和期末考试时间交叉，考虑到复习所以项目进度迟缓）

详情请见项目管理系统

5、费用

暂无

三、开发工作评价

1、项目开发的问题

前后端配合不紧密，反馈不到位、导致反馈后难以及时作出相应的修改，导致项目进度放慢
前端和后端相互之间了解过少，交流时没有准确表达自己的意思，前段听不懂后端的想法，后端听不懂前端的需求，导致编写时出现各种bug，降低开发效率。
前期对数据库了解不够，看不懂表之间的逻辑，没法根据自己的要求去改数据库数据。
前后端对原型理解不够，需要多次交涉才能理清某一个或多个功能的逻辑，导致项目进度迟缓。
由于前期开发文档不完善，前端原型不完善，出导致前端需要的数据没有以及没有实现功能的对应的接口等问题

2、对产品质量的评价

目前未出现问题。

3、对技术方法的评价

使用工具：

（1）IDEA：便于项目编写与测试

（2）Webstorm:对.jsp、.css、.js等文件进行初步样式编写（在此方面相较于idea更方便）

（3）Navicat Premium 12：让数据库可视化，方便查了看数据库数据

（4）RP：查看前端原型图

（5）PxCook：对页面中的颜色，边框阴影、页面字体、div长宽以及padding、margin大小等进行标注测量，方便页面样式编写，提高编写效率

（6）jcpicker.exe：测量原型页面中的颜色

4、出错原因的分析

对后端了解过少，导致沟通费力
前期对数据库理解过少，只会看数据，无法理解表之间的练习，以及字段含义
不会使用cookie

四、技术总结

1、$.ajax

上代码：

$(function () {
    $.ajax({
        type: "POST",//数据请求方式
        url: FC.ctx + "/front/noticeRecord/selectByExample",//数据请求地址
        dataType: "json",//数据格式
        data: {//请求参数，请参数为非必传或者无需传可以不填写参数
        },
        success: function (data) {//获取数据成功
            console.log(data);
         },
        error: function (e) {//获取数据失败
                       console.log("数据请求错误");
        }
    })
});

$.ajax的一些参数

1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。

7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
HTML：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

9.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。//一般省略
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
         }

10.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

error: function (e) {//获取数据失败
                       console.log("数据请求错误");
        }

11.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

2、ajax请求中contentType与dataType区别

contentType: 发送信息至服务器时内容编码类型，简单说告诉服务器请求类型的数据。

在调试js时候通过chrome的F12或firefox的firebug查看请求参数时，尤其请注意head

默认值: "application/x-www-form-urlencoded"

dataType：告诉服务器，我要想什么类型的数据，除了常见的json、XML，还可以指定 html、jsonp、script或者text

3、div实现信纸样式自适应（非图片实现）

效果图

上代码：

CSS:

background-image: linear-gradient(red 0px, transparent 0),  linear-gradient(to bottom, #EEEEEE 2px, transparent 0);

HTML：

<div class="noticeTitle" id="noticeTitle" onkeyup="noticeTitle()" contenteditable="true"></div>

实现可编辑文本框的方法有很多，比如常见的input 、textarea，但为什么要用div+contenteditable来实现呢？！

Input、textarea输入文字均无法根据enter键换行自行应行高，只能通过js来实现行高控制。
Textarea 在固定高度后，文本信息超出文本框后还想要完整显示文本信息，就只能忍受那个丑到不行的滚动条，而且隐藏边框后右下角还是会出现textarea文本框的标志（看下图）

本着最少代码实现最优效果，性能最优、以及样式不妥协的原则，就放弃了input+js和textarea这两种方法，转而寻找替代品。

咱往常用的div想一想，能自适应行高不用依赖js, border后也没有任何的标记，但是缺点是没法输入。

所以救星来了

HTML5 contenteditable 属性

语法

<element contenteditable="true|false">

属性值

值	描述
true	规定元素可编辑。
false	规定元素不可编辑。

该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能

所以div+contenteditable可以同时拥有自适应高度，和完全隐藏边框了。

其实这在我们熟知的新浪微博的文本输入框就是这样实现的

信纸背景实现：

实现方法：

图片背景法
CSS背景渐变色

因为要考虑到用户输入和查看的通知消息字数不会固定不变，所以只能用第二种方法实现

上代码：

/*发布消息内容*/

.noticeText{
   overflow: hidden;
   padding-top: 6px;
   min-height: 120px;
   width: 100%;
   border: 0px;
   line-height: 36px;
   color: #AAAAAA;
   text-indent: 2em;//首行缩进
   font-size: 18px;
   word-break:break-all;//在恰当的断字点进行换行
   font-weight: 600;
   font-family: "微软雅黑 Light";
   background: #FFFFFF;
   background-image: linear-gradient(red 0px, transparent 0),  linear-gradient(to bottom, #EEEEEE 2px, transparent 0);


   background-size: 36px 36px, 36px 36px, 142px 142px, 142px 142px;
   user-modify: read-write-plaintext-only;  /*复制粘贴时为纯文本格式*/
   -webkit-user-modify: read-write-plaintext-only;
}

利用css的线性渐变色来实现文字下方的灰色线条，模拟信纸格式

background-image: linear-gradient( 角度 , 颜色);

那什么是线性渐变呢？

线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色

这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。

如上图例子
CSS代码：

    background-image: linear-gradient(to right , #7A88FF, #7AFFAF);

如果渐变是从元素上边的紫色过度到下边的绿色，要使用 to bottom 关键字。
CSS代码：

 background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);

另外，还可以用 to bottom right 这样的关键字指定渐变的角度。使渐变从元素的左上角开始，到元素的右下角结束。
CSS代码：

background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);

渐变方向也不局限于只能使用关键字，还可以使用角度值指定渐变的方向。

角度值的写法：
在0~360之间的数字后面加上deg，指定过渡在哪个方向结束。

例如， 0deg 表示元素的顶边，所以过渡从底边开始，到顶边结束。

也就是说，

background-image: linear-gradient(to top, #7A88FF, #7AFFAF);

等价于：

background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);

角度的值按顺时针方向旋转，因此，90deg 表示元素的右边（与 to right 相同），180deg 表示元素的底边（与 to bottom 相同），270deg 表示元素的左边（与 to left 相同）。

使用角度值时，浏览器会绘制一条经过元素中心点的假象线。指定的角度就是这条线的角度，同时还指明过度在哪里结束。

CSS代码：

    background-image: linear-gradient(45deg, #7A88FF, #7AFFAF);

浏览器会绘制一条经过元素中心点的假想线，指向45°刻度，因此，这个过渡从元素的左下角开始，到右上角结束。

4、如何处理JSON数据中带有HTML标签

解决方法：jQuery html() 方法

官方规范性解释：

定义和用法

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。

语法

返回内容：

$(selector).html()

设置内容：

$(selector).html(content)

使用函数设置内容：

$(selector).html(function(index,currentcontent))

参数

描述

content

必需。规定被选元素的新内容（可包含 HTML 标签）。

function(index,currentcontent)

可选。规定返回被选元素的新内容的函数。

index - 返回集合中元素的 index 位置。
currentcontent - 返回被选元素的当前 HTML 内容。

通俗理解：

$("#data").html(result.root[0].articleContent);

“#data”：为html标签数据显示的指定div的ID
result.root[0].articleContent: 为获取到的html标签数据

5、Navicat E-R图

为什么要用这个E-R图呢？！8

在后端建立好数据库之后，前端或者其他开发人员想要了解数据库表与表之间的联系，在没有设计数据库的人的帮助下，就必须得一个一个去看表的注释，以及表与表之间的字段的联系，这还是在有注释的情况下。

但是有了E-R图，一切都感觉都是那么的自然而然、简洁明了，不需要一个个看注释就能理解表与表之间的关系。

能省力坚决不白费力气

首先生成ER图，必须建立表与表的外键，才能看到图表之间的联系。

生成ER图之后可以查看各个表之间的联系，可以打印模型，生成图片。

添加外键：使用Navicat for mysql添加外键约束
导出E-R关系图：使用Navicat生成ER关系图并导出

五、思想总结

谈谈前后端对接的那点事

随着前端Node.Js技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue、React、Angular......)井喷式发展,配合Node.Js服务端渲染引擎,目前前端能完成的工作不仅仅局限于CSS，JS等方面，很多系统的业务逻辑都可以放在前端来完成。

虽然Node.Js发展这么迅猛，但是后端也不是没事干，拿Java来说，Java自1990年起，至今已有近30年的发展史，其完善的生态圈自然是Node.Js无法撼动的

NodeJs的火热,让前端已经可以本地开启服务写接口的情况下,就类似服务端开启tomcat一样,在这样的情况下，前端框架VUE、React等都在此基础上,提供了一套完整的技术解决方案，解放了前后端，专注各自擅长的领域

前端后端交互，基本上是基于http+json的形式。后端专注于提供数据，更重要职责是维护系统架构的稳定，保证数据的安全。前端人员专注于交互，快速响应UI的变化。后台只需提供API接口，前端调用AJAX实现数据呈现。

可是就是仅仅这一个接口，在前后端对接的过程中,依然问题不少！

所以我们应该及时理清前后端合作的基本思路，最大限度的发挥前端分离的优势。

在项目负责人（产品经理）对前后端进行需求评估后，并分配各自理解清楚自己的业务量以及联调的工作量，评估开发时间。

1、开发准备：前后端集中在一起，商量需求中需要共同调用的部分，进行接口的口头协议交流。

2、接口定义：前后端一方中，前后端中的一方根据之前的口头协议拟定出一份详细的接口，并编写服务接口定义，有疑问的地方重新商量直至双方都没有问题。（建议后端开发人员定，需要前端人员评审）

3、开发阶段：双方根据协商出来的接口为基础进行开发，如在开发过程中发现需要新增或删除一些字段，重复步骤3。

(注意：前端在开发过程中记得实时更新接口，后端修改接口需要跟前端协商清楚再改，改后必须及时通知，改后必须及时通知，改后必须及时通知，重要的事说三遍！！！ )

4、前后端数据交互：双方独自的工作完成，开始前后端交互，如在交互过程发现有疑问，重复步骤3，直至交互完成。

5、提测阶段：将完成的需求提给测试人员，公司里会有专门的测试人员，如果没有，则需要前后端共同测试，避免问题的发生。

6、项目完工：如果有bug，重复步骤6和7，直至完工。

前后端分离虽然会增加前后端沟通成本，但是相较于它带来的总时间的减少是不值一提的。

前后端分离,简化了我们的开发方式,不同人专注于不同的领域,技术价值最大化,大大提高工作效率,我们在掌握这些技能的同时,也需要加强自身的发展,以适应当前的技术发展趋势,不管是前端还是后端,多了解一些，总是没错的,俗话说的好：“技多不压身”嘛。

发表评论