AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2016-05-24 1925
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 RDS MySQL，高可用系列 2核4GB
RDS MySQL Serverless 高可用系列，价值2615元额度，1个月
简介：
原创作品，允许转载，转载时请务必以超链接形式标明文章  原始出处 、作者信息和本声明。否则将追究法律责任。 http://qingkechina.blog.51cto.com/5552198/1404845

在上文中完成用户注册/登录后显示用户名的功能，同时也谈了谈系统编码问题，本文重点聊聊“下战书”功能，里面涉及第三方在线HTML编辑器的问题。


一、Navicat for MySQL介绍

   由于4月8日微软正式放弃对Windows XP操作系统的支持，借此机会把斗医系统移到了Windows8操作系统上。由于Windows8与Windows XP的操作系统存在较大的差异，拿系统的开始菜单来讲：

   Windows XP进入MySQL命令行窗口的入口为：开始 > 所有程序 > MySQL > MySQL Server 5.5 > MySQL 5.5 Command Line Client

   Windows8我摸索出三种进入办法：

   （1）从搜索进入：把鼠标移到屏幕的右上角，选择“搜索”，在打开的“应用”中查找“MySQL 5.5 Command Line Client”，如下图所示：

wKiom1NNXKnAOcCZAAFr3pI4OIk864.jpg

   （2）使用“微软键 + R”，输入“cmd”打开命令行窗口，进入MySQL的bin路径，在窗口中输入mysql -u用户名 -p密码打开，如下图：

wKiom1NNXrWyfbGsAAJZV4foD28289.jpg

  （3）使用第三方Navicat for mysql工具


1、下载Navicat for Mysql

  进入http://www.navicat.com.cn/download/navicat-for-mysql用户根据自己的操作系统选择相应的试用版本。安装过程很简单，一路选择“下一步”即可。


2、试用版转正

   进入http://www.kuaipan.cn/file/id_46516780738283773.htm?f=www.yunvn.com下载补丁，下载后把PatchNavicat.exe复制到Navicat for Mysql的安装目录下，然后双击PatchNavicat.exe运行，在弹出的框中选择navicat.exe，如下图所示：wKiom1NNYVPR6vBjAAJjRvLFQME663.jpg


3、在

（1）在开始中打开Navicat for Mysql

（2）在工具栏中选择“连接 > MySQL”

（3）按下图配置数据库连接

wKioL1NNYtDBGW9OAAFVplMksNQ027.jpg

（4）配置完毕后选择“medical > medical > usertable”，即可查看数据表记录

wKioL1NNY_-jTZveAAJvHZwFLBw006.jpg


【备注】：从工具中可以看到用户的密码，这里是一种错误的设计，因为不安全。之所以前面没有处理，是为后续的安全保留的彩蛋


二、下战书功能

当游客进入一个景点时往往会在一个地方刻上XXX到此一游，这正符合了人的表现欲；从管理角度上讲若游客把自己的***号码也刻上，更有利于景点管理方确认当事人。对于一个网站也是如此，为了防止某些人破坏网站的纯洁性、正确性要求鉴别信息发表者的身份，如维基百科的编辑功能。斗医系统也是要求下战书的人先登录。

   古代战场上下战书，一般都是派一个机灵的人手持书信，到对方营地送到指定的人手中，对方明确给出不战或应战的信息后，送信人返回自己的营地。所以这里的就有三要素：战书的标题、战书的内容和挑战人。按此思路我们的下战书页面大致如下：

wKioL1NRSGnSO6deAABgqLiT9iQ470.jpg

1、下战书之前先登录

打开war\WEB-INF\config\sm\system-action.xml文件，定义跳转业务配置，如下：

<business name="challenge" mustlogin="true">

   <forward>

       <path name="success" path="/module/challenge/challenge.html" />

       <path name="failure" path="/module/challenge/challenge.html" />

   </forward>

</business>


2、处理必须登录业务

打开com.medical.frame.FrameDispatcher.java文件，抽象出getBusiness()方法

/**

* 由业务名称获取业务对象

*/

public FrameBusiness getBusiness(String busName, HttpServletRequest request)

   throws FrameException

{

   // 由动作名称获取业务对象

   FrameBusiness business = FrameCache.getInstance().getBusiness(busName);

   if (business == null)

   {

        throw new FrameException(FrameErrorCode.REQUEST_BUS_NOT_EXIST);

   }


   // 判断是否必须登录

   boolean isMustLogin = business.isMustLogin();

   if (isMustLogin == false)

   {

       return business;

   }


   // 若必须登录且用户已登录,则直接返回业务对象

   HttpSession session = request.getSession();

   UserDAO userDao = FrameCache.getInstance().getUserBySession(session);

   if (userDao != null)

   {

       return business;

   }

   else

   {

       FrameCache.getInstance().setPreActName(busName);

   }


   // 若必须登录且用户未登录,则返回登录业务对象

   return FrameCache.getInstance().getBusiness(FrameConstant.LOGIN_BUS_NAME);

}


3、修改com.medical.frame.FrameDispatcher.process()方法，调用上面的方法完成动作名称获取业务对象

// 由名称获取业务对象

FrameBusiness business = FrameCache.getInstance().getBusiness(busName);

FrameBusiness business = getBusiness(busName, request);


4、修改com.medical.server.data.UserLoginDataAction.execute()方法

// 4. 登录之前的前一个动作名称

String preActName = FrameCache.getInstance().getPreActName();

if (FrameUtil.isEmpty(preActName))

{

   preActName = "index.act?timestamp=" + System.currentTimeMillis();

}

else

{

   preActName += ".act?timestamp=" + System.currentTimeMillis();

}


// 5. 判断是注册还是登录

String isRegistUser = getParameter("isRegist");

if ("TRUE".equalsIgnoreCase(isRegistUser))

{

   return doRegistAction(userName, userAuth, preActName);

}

else

{

   return doLoginAction(userName, userAuth, preActName);

}


5、创建challenge.html文件

（1）在war\module\challenge下创建challenge.html文件

（2）在challenge.html文件的<head>元素中引入如下元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< 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/common/common.js" ></ script >
< script  src = "js/challenge/challenge.js" ></ script >

（3）在challenge.html文件的<body>元素中定义页面结构，如下：

1
2
3
4
<!--系统导航菜单-->
< div  id = "system_navigation_menu" ></ div >
<!--系统内容部分-->
< div  class = "system_content" >abcdefg</ div >

在Eclipse中启动Tomcat后，在浏览器中输入http://localhost:8080/medical，点击“下战书”菜单，打开的页面如下：

wKioL1NVQ6LT-a2KAACnrNjpWKo393.jpg

仔细的您一定会发现“下战书”菜单背景颜色没有被选中，另外用户名是“登录”，这方面不用户体验极差。


6、选择菜单后菜单设置相关颜色值

（1）在war\js\common\common.js的generateSystemMenu()中对“下战书”菜单项绑定ID

systemMenu += '<li id="system_challenge_menu"><a href="challenge.act">下战书</a></li>';

（2）修改war\js\common\common.js的selectSystemMenu()方法，对其增加“下战书”ID

var menuArray = new Array("system_challenge_menu", "system_home_menu", "system_expert_menu", "system_login_menu");

（3）在war\js\challenge下创建challenge.js文件，并在文档加载完毕后调用selectSystemMenu()方法，如下：

(function( window){

   $(document).ready(function(){

       // 生成系统菜单

       generateSystemMenu();

       // 选择下战书系统菜单

       selectSystemMenu("system_challenge_menu");

   });

})( window );

在Eclipse中启动Tomcat后，在浏览器中输入http://localhost:8080/medical，点击“下战书”菜单，打开的页面如下：

wKioL1NWgTezZkLrAACmgc84ob4214.jpg


7、用户登录之后进入下战书页面，右上角显示用户名称

修改war\js\challenge\challenge.js文件，在文档加载完毕后调用common.js的getBreifUserInfo()方法，如下：

(function( window){

   $(document).ready(function(){

       // 生成系统菜单

       generateSystemMenu();

       // 选择下战书系统菜单

       selectSystemMenu("system_challenge_menu");

       // 获取用户简要信息

       getBreifUserInfo();

   });

})( window );

在Eclipse中启动Tomcat后，在浏览器中输入http://localhost:8080/medical，点击“下战书”菜单，打开的页面如下：

wKioL1NWhEiBmiVMAACqfOhMWNg816.jpg


8、下战书页面开发

（1）完善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
< 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/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_textarea_wrapper" >
                     < textarea  id = "challenge_kind_id"  placeholder = "选择问题所属科室" ></ textarea >
                 </ div >
                 < div  class = "challenge_text_desc" >药方说明（可选）：</ 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 = "#"  class = "challenge_confirm_publish" >发布</ a >
                     < a  href = "#"  class = "challenge_cancel_publish" >取消</ a >
                 </ div >
             </ div >
         </ div >
     </ body >
</ html >

（2）完善war\js\challenge\challenge.js文件，内容如下：

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
( function ( window){
     $(document).ready( function (){
         // 生成系统菜单
         generateSystemMenu();
         // 选择下战书系统菜单
         selectSystemMenu( "system_challenge_menu" );
         // 获取用户简要信息
         getBreifUserInfo();
         // 初始化文本框监听器
         initInputListener();
     });
     /**
      * 初始化文本框监听器
      */
     function  initInputListener(){
         var  textareaArray =  new  Array( "challenge_title_id" ,  "challenge_kind_id" ,  "challenge_prescript_id" ,  "challenge_challenger_id" );
         $.each(textareaArray,  function (i, item){
             var  dynamicItem = $( "#"  + item);
             dynamicItem.bind( "propertychange" ,  function (event){
                 this .style.height =  this .scrollHeight -2 +  "px" ;
             });
             dynamicItem.bind( "input" ,  function (event){
                 this .style.height =  this .scrollHeight - 2 +  "px" ;
             });
         });
     }
})( window );

（3）在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
/*********************************************************************/
/*                           系统下战书样式                          */
/*********************************************************************/
.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 ;  
}
/*********************************************************************/
/*                       下战书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_prescript_id{
     height :  80px ;
     min-height :  80px ;
}
/*********************************************************************/
/*                            文本提示信息                           */
/*********************************************************************/
.challenge_hint_info{
     text-align :  right ;
     margin-right :  5px ;
     font-size :  13px ;
     color :  #999 ;
     display :  none ;
}
.challenge_hint_warn{
     color :  #C33 ;
}
/*********************************************************************/
/*                             下战书按钮                            */
/*********************************************************************/
.challenge_cancel_publish, .challenge_confirm_publish{
     float :  right ;
     margin :  0  3px  10px  0 ;
     color :  #259 ;
     font-size :  13px ;
     line-height :  1.7 ;
     padding :  4px  10px ;
}
.challenge_cancel_publish:hover{
     text-decoration :  underline ;
}
.challenge_confirm_publish{
     font-size :  14px ;
     color :  #FFF ;
     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 );
}

【备注】：这里有一个技巧点，让TextArea自适应输入文本高度，感兴趣的朋友可以重点关注JS代码

在Eclipse中启动Tomcat后，在浏览器中输入http://localhost:8080/medical，点击“下战书”菜单，打开的页面如下：

wKioL1NfzjDxnE10AAC5selfbms733.jpg


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

文章标签：
云数据库 RDS MySQL 版
关系型数据库
MySQL
JavaScript
前端开发
应用服务中间件
关键词：
web开发
web应用开发
相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发，帮助IT从业者们通过“阿里云Web应用上云解决方案”，了解一个企业级Web应用上云的常见架构，了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品：云数据库RDS MySQL 版 阿里云关系型数据库RDS（Relational Database Service）是一种稳定可靠、可弹性伸缩的在线数据库服务，提供容灾、备份、恢复、迁移等方面的全套解决方案，彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
shy丶gril
目录
相关文章
游客u6vcprrm3r23y
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南，针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝（相对单位、媒体查询和窗口监听）详细介绍如何实现智能适配，并提供了多个实战案例，如宫格布局、对话框变形和自适应轮播图等。此外，还分享了调试技巧及工具推荐，帮助开发者快速上手并优化性能。最后鼓励读者实践探索，并提示更多官方资源等待发现。
游客u6vcprrm3r23y
133 0
土木林森
|
11月前
|
XML JSON API
ServiceStack：不仅仅是一个高性能Web API和微服务框架，更是一站式解决方案——深入解析其多协议支持及简便开发流程，带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架，支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程，提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑，安装简单，通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务，包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议，具备自动验证、自动过滤器等丰富功能，适合快速搭建高性能、可扩展的服务端应用。
土木林森
600 3
百岁001
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发，支持Web-UI的实时KingBase 连接器，三大模式无缝切换，效率翻倍！
TIS 是一款基于Web-UI的开源大数据集成工具，通过与人大金仓Kingbase的深度整合，提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入，兼容MySQL、PostgreSQL和Oracle模式，无需编写复杂脚本，操作简单直观，特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合，成为业界首个开箱即用的Kingbase CDC数据同步解决方案，助力企业数字化转型。
百岁001
1017 5
基于Flink CDC 开发，支持Web-UI的实时KingBase 连接器，三大模式无缝切换，效率翻倍！
游客4rnkeq2m7q5hy
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战：深入理解 Web 开发与 API 设计
在前几篇文章中，我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用，并通过实战项目帮助你掌握这些技术。
游客4rnkeq2m7q5hy
137 2
大树营养快线
|
10月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序？
Django 框架凭借其强大的功能、稳定性和可扩展性，几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统，Django 都能提供可靠的支持，帮助开发者快速构建高质量的应用。同时，其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
大树营养快线
361 67
mao29955
|
10月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手，通过明确目标、合理规划、规范开发、加强测试等一系列措施，实现组件的高效管理和利用，从而提高项目的整体开发效率和质量，为用户提供更好的体验。
mao29955
290 63
游客vr7vlllms7w34
|
9月前
|
前端开发 安全 JavaScript
2025年，Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线，涵盖了Web3领域的重要技术栈，如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求，随后详细介绍了每个技术点的学习资源和方法，旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
游客vr7vlllms7w34
1294 1
2025年，Web3开发学习路线全指南
土木林森
|
10月前
|
设计模式 前端开发 数据库
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用，涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容，并展示了实际代码示例，帮助读者快速掌握Django全栈开发的核心技术。
土木林森
587 45
东方睿赢
|
10月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义，TypeScript 能够在编码阶段发现潜在错误，提高代码质量；支持组件的清晰定义与复用，增强代码的可维护性；与 React、Vue 等框架结合，提供更佳的开发体验；适用于大型项目，优化代码结构和性能。随着 Web 技术的发展，TypeScript 的应用前景广阔，将继续引领 Web 开发的新趋势。
东方睿赢
200 2
东方睿赢
|
10月前
|
前端开发 API 开发者
Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
在Web开发中，前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例，详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理，全面展示了这两种技术的应用技巧，帮助Python Web开发者提升项目质量和开发效率。
东方睿赢
201 1

热门文章

最新文章

  • 1
    2025 热门的 Web 化容器部署工具对比：Portainer VS Websoft9
  • 2
    PolarDB Supabase最佳实践-Web应用
  • 3
    大模型如何赋能 Web 渗透测试？
  • 4
    Web Worker：让前端飞起来的隐形引擎
  • 5
    现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
  • 6
    WEB端交互元件库：Axure设计师的高效利器
  • 7
    Spring Cloud Gateway Server Web MVC报错“Unsupported transfer encoding: chunked”解决
  • 8
    java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
  • 9
    java-web部署模式概述
  • 10
    python web service开发
  • 1
    Web前端网站（三）- 记事本
    195
  • 2
    【优秀python web设计】基于Python flask的猫眼电影可视化系统，可视化用echart，前端Layui，数据库用MySQL，包括爬虫
    378
  • 3
    【优秀python web系统毕设】基于python的全国招聘数据分析可视化系统，包括随机森林算法
    700
  • 4
    【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统，django框架+bootstrap前端+echarts可视化，有后台有爬虫
    507
  • 5
    探索PHP的现代演进：从Web 1.0到Web 3.0
    92
  • 6
    构建高性能Web应用的最佳实践
    132
  • 7
    Web应用防火墙是什么？浅析如何提高抵御威胁实际效能
    109
  • 8
    【Mac os】如何在服务器上启动Jupyter notebook并在本地浏览器Web端环境编辑程序
    649
  • 9
    【网络安全】Web Hacking网络黑客手册，GitHub星标3.7K！
    171
  • 10
    【颠覆想象！】PHP 8横空出世：全新特性重塑Web开发格局，开发者必看的革命性变革之旅！
    138

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来
    • 下一篇
    阿里云 EMR Serverless Spark 版开启免费公测