开发者社区> shy丶gril> 正文

【斗医】【16】Web应用开发20天

2016-05-24 2205

简介：
+关注继续查看
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://qingkechina.blog.51cto.com/5552198/1541813

    在本文完成下挑战书的功能，其中里面也涉及到富文本编辑器的使用

1、生成challenge数据表

  在D:\medical\war\etc\db.txt文本中增加数据表challenge脚本，然后通过navicat工具把数据表在mysql中生成

1
2
3
/*创建挑战书记录表*/
CREATE TABLE CHALLENGE(challengeId int PRIMARY KEY NOT NULL, userId VARCHAR(20), title VARCHAR(128), depId int, prescript TEXT, challengers VARCHAR(256))
ENGINE=InnoDB DEFAULT CHARSET=UTF8

2、challenge数据表hibernate配制

  在D:\medical\war\etc\mapping目录下生成challenge.hbm.xml文件，里面填写如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE hibernate-mapping PUBLIC  
        "-//Hibernate/Hibernate Mapping DTD 3.0//EN"  
        "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">  
   
<hibernate-mapping package="com.medical.server.dao">
    <class name="ChallengeDAO" table="CHALLENGE">
        <id name="challengeId" column="challengeId" type="int">
            <generator class="increment"></generator>
        </id>
        <property name="userId" column="userId" />
        <property name="depId" column="depId" />
        <property name="title" column="title" />
        <property name="prescript" column="prescript" />
        <property name="challengers" column="challengers" />
    </class>
</hibernate-mapping>


3、定义challenge.hbm.xml对应的POJO类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
package com.medical.server.dao;
 
/**
 * 斗医系统发布挑战书处理类
 * 
 * @author qingkechina 2014-08-18
 */
public class ChallengeDAO
{
    /**
     * 挑战ID
     */
    private int challengeId = 0;
     
    /**
     * 挑战人
     */
    private String userId = null;
     
    /**
     * 科室ID
     */
    private int depId = 0;
     
    /**
     * 挑战标题
     */
    private String title = null;
     
    /**
     * 挑战内容
     */
    private String prescript = null;
     
    /**
     * 被挑战人
     */
    private String challengers = null;
     
    public int getChallengeId()
    {
        return challengeId;
    }
     
    public void setChallengeId(int challengeId)
    {
        this.challengeId = challengeId;
    }
     
    public String getUserId()
    {
        return userId;
    }
     
    public void setUserId(String userId)
    {
        this.userId = userId;
    }
     
    public int getDepId()
    {
        return depId;
    }
     
    public void setDepId(int depId)
    {
        this.depId = depId;
    }
     
    public String getTitle()
    {
        return title;
    }
     
    public void setTitle(String title)
    {
        this.title = title;
    }
     
    public String getPrescript()
    {
        return prescript;
    }
     
    public void setPrescript(String prescript)
    {
        this.prescript = prescript;
    }
     
    public String getChallengers()
    {
        return challengers;
    }
     
    public void setChallengers(String challengers)
    {
        this.challengers = challengers;
    }
}


4、由于涉及到对数据表challenge数据的读取与写入操作，所以定义一个ChallengeUtil类对POJO进行操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package com.medical.server.util;
 
import org.hibernate.Session;
import org.hibernate.Transaction;
 
import com.medical.frame.util.FrameDBUtil;
import com.medical.server.dao.ChallengeDAO;
 
/**
 * 斗医系统服务端挑战书工具类
 * 
 * @author qingkechina 2014-08-18
 */
public class ChallengeUtil
{
    /**
     * 把挑战书记录入库
     */
    public static void insertChallenge(String userId, String title, int depId, String prescript, String challengers)
    {
        ChallengeDAO challengeDao = new ChallengeDAO();
        challengeDao.setChallengers(challengers);
        challengeDao.setDepId(depId);
        challengeDao.setPrescript(prescript);
        challengeDao.setTitle(title);
        challengeDao.setUserId(userId);
         
        Session session = FrameDBUtil.openSession();
        Transaction transaction = session.beginTransaction();
        session.save(challengeDao);
        transaction.commit();
        FrameDBUtil.closeSession();
    }
     
}


5、当用户登录系统在浏览器中发布挑战书时，需要调用到业务逻辑处理，所以定义PublishChallengeAction业务Java类，里面涉及对数据的校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
package com.medical.server.data;
 
import com.google.gson.Gson;
import com.medical.frame.FrameCache;
import com.medical.frame.FrameDefaultAction;
import com.medical.frame.FrameException;
import com.medical.frame.bean.FramePathBean;
import com.medical.frame.bean.FrameResultBean;
import com.medical.frame.constant.FrameErrorCode;
import com.medical.frame.util.FrameUtil;
import com.medical.server.dao.UserDAO;
import com.medical.server.util.ChallengeUtil;
 
/**
 * 斗医系统发布挑战书处理类
 * 
 * @author qingkechina 2014-08-18
 */
public class PublishChallengeAction extends FrameDefaultAction
{
    /**
     * 全局Gson对象
     */
    private final static Gson gson = new Gson();
     
    @Override
    public String execute()
        throws FrameException
    {
        // 用户尚未登录系统
        UserDAO loginUser = FrameCache.getInstance().getUserBySession(session);
        if (loginUser == null)
        {
            FrameResultBean resultBean = new FrameResultBean();
            resultBean.setErrorCode(FrameErrorCode.USER_NOT_LOGIN_ERROR);
            resultBean.setErrorDesc(FrameUtil.getErrorDescByCode(resultBean.getErrorCode()));
            return gson.toJson(resultBean);
        }
         
        // 获取挑战标题
        String title = this.getParameter("title");
        if (FrameUtil.isEmpty(title))
        {
            FrameResultBean resultBean = new FrameResultBean();
            resultBean.setErrorCode(FrameErrorCode.CHANLLENGE_TITLE_EMPTY);
            resultBean.setErrorDesc(FrameUtil.getErrorDescByCode(resultBean.getErrorCode()));
            return gson.toJson(resultBean);
        }
         
        // 获取科室ID
        int depId = -1;
        String departValue = getParameter("departId");
        if (FrameUtil.isEmpty(departValue) == false)
        {
            depId = Integer.valueOf(departValue);
        }
        if (depId == -1)
        {
            FrameResultBean resultBean = new FrameResultBean();
            resultBean.setErrorCode(FrameErrorCode.CHANLLENGE_DEP_EMPTY);
            resultBean.setErrorDesc(FrameUtil.getErrorDescByCode(resultBean.getErrorCode()));
            return gson.toJson(resultBean);
        }
         
        // 获取挑战药方内容、挑战人
        String prescript = getParameter("prescript");
        String challengers = getParameter("challengers");
        // 写入数据库
        ChallengeUtil.insertChallenge(loginUser.getUserId(), title, depId, prescript, challengers);
         
        // 设置返回路径
        FramePathBean pathBean = new FramePathBean();
        pathBean.setErrorCode(200);
        pathBean.setForwardPath("index.act?timestamp=" + System.currentTimeMillis());
        return gson.toJson(pathBean);
    }
}


6、如何调用到PublishChallengeAction业务处理类呢？我们在D:\medical\war\WEB-INF\config\challenge\challenge-data.xm定义，内容如下：

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<business-config>
    <!--发布挑战书-->
    <business name="publishChallenge" business-class="com.medical.server.data.PublishChallengeAction" />
</business-config>


从上面的配置可以看出，当界面上触发按钮时，调用到publishChallenge的JS方法，从而触发业务逻辑。那么界面是什么样的呢？

wKioL1PyHLzho6wIAAEXjD_lwkw395.jpg


7、在上面的这个界面原型中，药方使用纯文本描述，理论上讲只要使用textarea标签就可以了，考虑到有时还可能会上传一些中药材的图片或病情图片，所以有一个上传图片的功能，这里面就需要使用HTML的富文本编辑器了。

    关于HTML富文本编辑器有很多，像百度的ueditor、Twitter的Bootstrap、Tower的Simditor等等，我们这里选择Kindeditor，为什么选择它呢？主要原因是我没有使用过，呵呵。

    下面就随着我进入Kindeditor世界吧！

（1）进入http://kindeditor.net/down.php下载

（2）下载后把kindeditor解压medical应用的war\js目录下

（3）由于我们使用的是Tomcat容器，所以只保留JSP的功能即可（即删除kindeditor下的asp、asp.net和php目录）

（4）由于medical应用并非发布版本，所以不需要压缩后的js（即删除kindeditor-min.js、kindeditor-all-min.js文件）

（5）有一个examples文件夹，从名称上看应该是一个使用示例，我们可以通过这学习这个例子快速入门

    完成了上述准备工作，下面就可以步入kindeditor之旅了！

8、定义challenge.html来绘制出上述界面（在D:\medical\war\module\challenge下增加challenge.html文件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html>
    <head>
        <title>斗医</title>
        <!--利于搜索引擎查询-->
        <meta name="description" content="斗医是一个医学交流平台" />
        <meta name="keywords" content="医学,交流,讨论" />
        <!--设置字符集-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <!--页面不缓存-->
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache,must-revalidate" />
        <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
        <!--引入外部文件-->
        <link rel="stylesheet" type="text/css" href="theme/navigation/navigation.css">
        <link rel="stylesheet" type="text/css" href="theme/challenge/challenge.css">
        <script src="js/common/jquery.js"></script>
        <script src="js/kindeditor/kindeditor-all.js"></script>
        <script src="js/common/common.js"></script>
        <script src="js/challenge/challenge.js"></script>
    </head>
 
    <body>
        <!--系统导航菜单-->
        <div id="system_navigation_menu"></div>
 
        <!--系统内容部分-->
        <div class="system_content">
            <div class="challenge_content_wrapper">
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_title_id" placeholder="写下您的问题"></textarea>
                </div>
                <div class="challenge_hint_info">
                    已超出<label class="challenge_hint_warn" id="challenge_title_hint_id"></label>字
                </div>
 
                <div class="challenge_text_desc">选择所属科室（必填）：</div>
                <div class="challenge_depart_wrapper" id="challenge_depart_id"></div>
 
                <div class="challenge_text_desc">
                    药方说明（可选）：
                    <span class="challenge_editor_switch" id="challenge_editor_switcher" display="default"></span>
                </div>
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_prescript_id" placeholder="写下病人神、色、形、态、舌象等症状......"></textarea>
                </div>
                <div class="challenge_hint_info">
                    已超出<label class="challenge_hint_warn" id="challenge_prescript_hint_id"></label>字
                </div>
 
                <div class="challenge_text_desc">挑战人（可选）：</div>
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_challenger_id" placeholder="选择您的挑战人"></textarea>
                </div>
 
                <div class="challenge_text_desc">
                    <a href="javascript:publishChallenge()" class="challenge_confirm_publish">发布</a>
                </div>
            </div>
        </div>
    </body>
</html>


9、定义上面HTML对应的CSS样式文件（在D:\medical\war\theme\challenge下增加challenge.css文件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*********************************************************************/
/*                           系统下战书样式                          */
/*********************************************************************/
.challenge_content_wrapper{
    width: 710px;
    margin: 20px auto;
    font-size: 13px;
    border: 1px solid #CCC;
    overflow: hidden;
}
 
.challenge_textarea_wrapper{
    margin: 5px;
    padding: 8px 5px;
    line-height: 15px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
    border-radius: 3px;
    background: #FFF;
    border: 1px solid #ccc;
    color: #222;    
}
 
.challenge_richtext_wrapper{
    margin: 5px;
    padding: 0;
    line-height: 15px;
    background: #FFF;
    color: #222;    
}
/*********************************************************************/
/*                       下战书TextArea公共样式                      */
/*********************************************************************/
.challenge_textarea_wrapper textarea{
    height: 20px;
    line-height: 20px;
    width: 100%;
    vertical-align: bottom;
    /*移除滚动条*/
    overflow: hidden;
    /*自动换行*/
    word-wrap: break-word;
    /*移除边框*/
    border: 0;
    background-color: #FFF;
    /*去除改变大小拖拽柄*/
    resize: none;
    font-size: 13px;
    border-radius: 5px;
}
 
.challenge_textarea_wrapper textarea:focus{
    outline: 0;
    outline-offset: -2px;
}
 
/*********************************************************************/
/*                            药方说明样式                           */
/*********************************************************************/
.challenge_text_desc{
    margin: 25px 5px 0 6px;
}
 
.challenge_depart_wrapper{
    margin: 5px;
    line-height: 15px;
    background-color: #FFF;
    color: #222;
    overflow: hidden;
}
 
.challenge_depart_item, .challenge_depart_item_selected{
    float: left;
    min-width: 55px;
    width: auto;
    height: 22px;
    line-height: 22px;
    font-size: 13px;
    text-align: center;
    margin-right: 8px;
    background-color: #E1EAF2;
    border-radius: 6px;
    cursor: pointer;
}
 
.challenge_depart_item:hover, .challenge_depart_item_selected{
    color: #FFF;
    background-color: #225599;
}
 
#challenge_prescript_id{
    height: 80px;
    min-height: 80px;
}
 
.challenge_editor_switch{
    float: right;
    width: 16px;
    height: 16px;
    /*若无属性背景图片无法显示*/
    display: inline-block;
    background-image: url(../navigation/navigation.png);
    background-repeat: no-repeat;
    background-position: -80px -127px;
    cursor: pointer;
}
 
/*********************************************************************/
/*                            文本提示信息                           */
/*********************************************************************/
.challenge_hint_info{
    text-align: right;
    margin-right: 5px;
    font-size: 13px;
    color: #999;
    display: none;
}
 
.challenge_hint_warn{
    color: #C33;
}
 
/*********************************************************************/
/*                             下战书按钮                            */
/*********************************************************************/
.challenge_confirm_publish{
    float: right;
    margin: 0 3px 10px 0;
    color: #FFF;
    font-size: 14px;
    line-height: 1.7;
    padding: 4px 10px;
    display: inline-block;
    text-align: center;
    background-color: #1575D5;
    border: 1px solid #0D6EB8;
    border-radius: 3px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
}


10、为了响应界面上的动作，所以需要在D:\medical\war\js\challenge下增加challenge.js文件，该文件中有三个方法值得读者粗略地读一下，它们分别是bindEvent2Switcher、initInputComponent和publishChallenge，分别对应富文本与纯textarea切换按钮、自适应textarea高度和发布挑战书。其内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
(function( window){
    $(document).ready(function(){
        // 生成系统菜单
        generateSystemMenu();
        // 选择下战书系统菜单
        selectSystemMenu("system_challenge_menu");
        // 获取用户简要信息
        getBreifUserInfo();
        // 初始化文本框
        initInputComponent();
        // 初始化科室类别数据
        initDepartData();
        // 切换开关按钮绑定事件
        bindEvent2Switcher();
    });
 
    // 当前选中的科室ID
    var CURRENT_SELECTED_ITEM = -1;
 
    // 当前编辑器ID
    var CURRENT_HTML_EDITOR = null;
 
    /**
     * 初始化文本框
     */
    function initInputComponent(){        
        var textareaArray = new Array("challenge_title_id", "challenge_prescript_id", "challenge_challenger_id");
        // 进入页面"标题textarea"获取焦点
        $("#" + textareaArray[0]).focus();
         
        $.each(textareaArray, function(i, item){
            var dynamicItem = $("#" + item);
            // 绑定PlaceHolder
            bindPlaceHolder(dynamicItem);
             
            dynamicItem.bind("keyup", function(event){
                // 设置textArea高度自适应
                autoAdaptHeight(this);
                // 长度超长时给出提示信息
                setLengthHint(this);
            });
        });
    }
 
    /**
     * textarea高度自适应
     */
    function autoAdaptHeight(component){
        var paddingTop = parseInt($(component).css("padding-top"));
        var paddingBtm = parseInt($(component).css("padding-bottom"));
        var scrollHeight = component.scrollHeight;
        var height = $(component).height();
 
        // 判断是否为chrome浏览器
        if(window.navigator.userAgent.indexOf("Chrome") > 0){
            if(scrollHeight - paddingTop - paddingBtm > height){
                $(component).css("height", scrollHeight); 
            }
            return;              
        }
        $(component).css("height", scrollHeight);
    }
 
    /**
     * textarea长度超出时提示
     */
    function setLengthHint(component){
        if(component.id == "challenge_title_id"){
            if(!component.value){
                return;
            }
 
            var titleId = $("#challenge_title_hint_id");
            if(component.value && component.value.length > 96){
                titleId.parent().show();
            } else {
                titleId.parent().hide();
            }
 
            titleId.text(component.value.length - 96);
        }
    }
 
    /**
     * 初始化科室类别数据
     */
    function initDepartData(){
        asyncRequest("gainDepart.data", null, function(result){
            var resultJson = eval(result);
            if(!resultJson){
                return;
            }
 
            $("#challenge_depart_id").empty();
            $.each(resultJson, function(i, item){
                var departItem = $("<div />").attr("class", "challenge_depart_item").attr("id", "challenge_depart_id_" + item.depId).text(item.depName);
                departItem.click(function(){
                    if(CURRENT_SELECTED_ITEM != -1 && CURRENT_SELECTED_ITEM != item.depId){
                        $("#challenge_depart_id_" + CURRENT_SELECTED_ITEM).attr("class", "challenge_depart_item");
                    }
                    CURRENT_SELECTED_ITEM = item.depId;
                    $("#challenge_depart_id_" + item.depId).attr("class", "challenge_depart_item_selected");
                });
                $("#challenge_depart_id").append(departItem);
            });
        });
    }
     
    /**
     * 切换开关按钮绑定事件
     */
    function bindEvent2Switcher(){
        var switcher = $("#challenge_editor_switcher");
        var display = switcher.attr("display");
 
        switcher.click(function(){
            var parent = $("#challenge_prescript_id").parent();
            if(display === "default"){
                // 设置父div样式
                parent.removeClass("challenge_textarea_wrapper").addClass("challenge_richtext_wrapper");
                // 设置编辑框的当前样式
                display = "custom";
                switcher.attr("display", "custom");
                var options = {resizeType: 0, items: ["bold", "italic", "underline", "strikethrough", "|", "insertorderedlist", "insertunorderedlist", "|", "image"]};
                CURRENT_HTML_EDITOR = KindEditor.create("#challenge_prescript_id", options);
            }
            else
            {
                // 设置父div样式
                parent.removeClass("challenge_richtext_wrapper").addClass("challenge_textarea_wrapper");
                // 设置编辑框的当前样式
                display = "default";
                switcher.attr("display", "default");
                CURRENT_HTML_EDITOR = null;
                KindEditor.remove("#challenge_prescript_id");
            }
        });
    }
 
    /**
     * 发布挑战书
     */
    function publishChallenge(){
        // 判断挑战话题
        var challengeTitle = $.trim($("#challenge_title_id").val());
        if(!challengeTitle){
            showSystemGlobalInfo("亲，您还没有写下问题呢~~~");
            return;
        }
        // 判断挑战科室
        if(CURRENT_SELECTED_ITEM === -1){
            showSystemGlobalInfo("亲，您还没有选择科室呢~~~");
            return;
        }
        // 挑战医方内容        
        var challengePrescript = $.trim($("#challenge_prescript_id").val());
        if(CURRENT_HTML_EDITOR){
            challengePrescript = CURRENT_HTML_EDITOR.html();
        }        
        // 挑战人
        var challengers =  $.trim($("#challenge_challenger_id").val());
 
        var data = {"title": challengeTitle, "departId": CURRENT_SELECTED_ITEM, "prescript": challengePrescript, "challengers": challengers};
        asyncRequest("publishChallenge.data", data, function(result)
        {
            // 跳转到相应页面
            var resultJson = eval(result);            
            top.location = resultJson.forwardPath;
        });
    }
 
    /**
     * 对外公开接口
     */
    window.publishChallenge = publishChallenge;
})( window );


11、下面验证一下效果：在浏览器中输入http://localhost:8080/medical，在菜单上选择“下战书”，在下战书页面输入相应的信息后点击“发布”，如下图：

wKiom1PyHyfRd1LKAAEdyIfYEY8285.jpg12、点击发布成功后进入系统主页面，若看到内容变化不用着急，因为这个功能尚未实现，我们查看一下数据库是否把此记录追加成功？

wKioL1PyIXWAi-DuAAIgQcOsn8s732.jpg

OK，富文本的简单应用就这样实现了，后面有机会再详细研读原码！





本文出自 “青客” 博客，请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1541813

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

JavaScript 前端开发 Java
web应用开发
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
DDD实践问题之 - 关于论坛的帖子回复统计信息的更新的思考 3715 ENode 2.6 架构与设计简介以及全新案例分享 7176 关于CAP定理的个人理解 4091 分享一个异步任务在遇到IO异常时支持递归回调的辅助方法 2364 写了一个简单的NodeJS实现的进程间通信的例子 7568
相关文章
小W子
web应用开发线上联系（题解）
1.改一下css文件，index引用的css文件名不对；
42 0
InfoQ
Serverless 时代，这才是 Web 应用开发正确的打开方式
如同 iPhone 当年颠覆了诺基亚，Serverless 的出现也带来了一种全新的、颠覆式的云开发架构模式。
91 0
努力滴码农
web 应用开发最佳实践之一：避免大型、复杂的布局和布局抖动
web 应用开发最佳实践之一：避免大型、复杂的布局和布局抖动
46 0
jerrywangsap
web 应用开发最佳实践之一：避免大型、复杂的布局和布局抖动
web 应用开发最佳实践之一：避免大型、复杂的布局和布局抖动
80 0
ezpod
目标全平台的Flutter支持Web应用开发了！
Flutter作为一个可移植的UI框架，已经支持现代Web应用开发了！我们很开心已经发布了SDK预览版，这样你可以在Web浏览器里直接运行你的Flutter UI代码。 原文链接：Flutter Web - 目标全平台开发的Flutter再下一城！- 汇智网 Flutter Web的目标 从去年Beta版发布以来，客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了。
2500 0
chenyou16
基于阿里云打造『云原生』Web应用——『懒猪行』Web应用开发实践
『懒猪行』专注于境外自由行S2B业务，涉及分销、终端用户服务、供应链等多个服务环节，随着业务规模的不端增加，我们一直在探索Web应用开发的最佳实践，以加快Web应用的迭代效率，为B/C端用户创造更多价值。
3181 0
leoliu168
基于SSM的Java Web应用开发原理初探
SSM开发Web的框架已经很成熟了，成熟得以至于有点落后了。虽然如今是SOA架构大行其道，微服务铺天盖地的时代，不过因为仍有大量的企业开发依赖于SSM，本文简单对基于SSM的Java开发做一快速入门，方便读者尽快把握脉络，理解Java Web开发的主轴，便于做进一步深入学习。
1335 0
mmss
spring boot 2.0之web应用开发
web应用开发 简介 spring boot 非常适合进行web程序开发。可以通过使用spring-boot-starter-web快速创建一个内嵌tomcat或Jetty，或netty的应用。
8802 0
技术mix呢
《基于MVC的JavaScript Web富应用开发》读书笔记一：MVC和类
911 0
技术小胖子
【斗医】【14】Web应用开发20天
754 0
+关注
shy丶gril
文章
问答
作者高分内容
更多
DDD实践问题之 - 关于论坛的帖子回复统计信息的更新的思考 3715 ENode 2.6 架构与设计简介以及全新案例分享 7176 关于CAP定理的个人理解 4091 分享一个异步任务在遇到IO异常时支持递归回调的辅助方法 2364 写了一个简单的NodeJS实现的进程间通信的例子 7568
文章排行榜
最热
最新
1 重识Flutter 非常用Slivers组件速览 - part3 84061
2 无缝切换？从Vue到React 81241
3 fastjson2为什么这么快 74339
4 Meetup 报名丨 共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64335
5 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63313
6 结构化总结与结构化思考之《金字塔原理》总结 56114
7 C语言进阶——指针进阶试题讲解（万字长文详解） 54806
8 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 53927
9 快速开发光伏电站数字孪生运维系统（一） 44477
10 操作系统课程设计：新增linux驱动程序 41744
11 IoT设备的数据格式ProtoBuf转JSON 41038
12 重构的核心-让代码保持整洁 40240
13 【Linux】-- 开发工具yum、vim、gcc、g++、gdb、make、makefile使用介绍（一） 39756
14 IoT设备数据业务价值洞察实践 37817
15 【C++修炼之路】类和对象（中）—— 筑基篇 37098
16 Hive数据倾斜的原因以及常用解决方案 33011
17 高并发编程之阻塞队列 32541
18 Spring 事务【隔离级别与传播机制】 30306
19 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29331
20 计网之初识网络(理解网络传输的基本流程) 27823
1 Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架 56
2 性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线 86
3 身份证实名认证接口验证不一致的原因 60
4 JVM学习.03 类加载机制 58
5 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `object` out of START_ARRAY token 139
6 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported 136
7 官宣｜Apache Flink 1.17 发布公告 294
8 基于阿里云eRDMA的GPU实例大幅提升多机训练性能 175
9 基于阿里云弹性GPU服务的神龙AI加速引擎无缝提升AI训练性能 136
10 重构计算，驱动视界：阿里云视觉计算思考与实践 144
11 阿里巴巴发布《城市数字孪生能力平台总体技术要求》企业标准， 促进数字孪生互联互通生态建设 300
12 基础篇丨链路追踪（Tracing）其实很简单 84
13 全新升级｜ECS成熟度评估与洞察，助你精准定位运维风险 86
14 网络平台挑选实名制认证API接口的注意事项 105
15 vika维格表 x 阿里云计算巢：SaaS 云端私有化部署，助力企业数字化转型 261
16 为什么 C# 可能是最好的第一编程语言 149
17 Airwallex 基于 Flink 打造实时风控系统 115
18 IoT小程序在展示中央空调采集数据和实时运行状态上的应用 22848
19 深入理解事务 15997
20 机器学习算法（一）: 基于逻辑回归的分类预测 23541
相关课程
更多
Python Web 框架 Flask 快速入门
30532
31
去学习
Python Web 框架 Django 快速入门
30317
4
去学习
网络安全攻防 - Web渗透测试
2730
40
去学习
Nginx企业级Web服务实战
604
11
去学习
体验-使用 kubect 部署 web 应用到 k8s 集群
409
1
去学习
云开发Web应用训练营
532
5
去学习
推荐文章
参与OCR文档自学习产品评测，赢Airpods 2 参与云效代码管理Codeup评测，赢Redmi Watch 3 参与IoT小程序框架评测，赢CHERRY机械键盘 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多