基于VUE框架的美团类药品点单管理系统

基于VUE框架的美团类药品点单管理系统摘要：2019年12月以来，中国湖北省武汉市爆发新型冠状病毒引发的肺炎疫情，并通过人传人的感染方式快速向全国其他地区扩散。全国上下万众一心抗击病毒，湖北广东浙江等24省市启动重大卫生突发事件一级响应，采用最严厉的防控措施，做到“内防扩散，外防输入”，很多人都选择居家隔离不敢外出，无接触外卖成为了他们采购必备生活物资的一个当下很热门的途径。在网络基础设施非常完善的时代里，为我们解决传统叫外卖存在的问题成为可能。针对传统叫外卖方式效率低下和满足不了人们快节奏生活的需求的问题，分析了O2O外卖模式，采用B/S开发模式、MVVM设计模式开发一个基于Vue的药品点单管理系统具有非常重要的意义，解决传统打电话叫外卖繁琐的流程带来的效率问题，在线处理订单和药品等数据，提高数据利用率和商家利润。B/S模式将作为药品点单管理系统的实现模式，浏览器支持市面上大多数Web浏览器，比如firefox，IE等。而服务器采用Node.js搭建的服务器。Element-ui、css、js等将被作为前端的开发语言，VisualStudioCode将被作为开发工具；同样也将Node.js作为服务器端的开发语言，使用Vue框架进行前后端的整合，使用vue-cli脚手架快速搭建vue项目，一个比较直观的方式开发和调试，而数据库支持使用MySQL数据库，使用php-study快速开启Mysql服务，避免与电脑原先的存在的其他类型数据库冲突。药品点单管理系统的实现将会让药品通过网络管理进而可以处理客人的订单让客人足不出户即可买到想要的药品，会给他们的安全提供很大的保障，而且减少了人流量对于防控疫情带来非凡的意义。关键词：药品，管理，VueOrdermanagementsystemofmeituandrugsbasedonVueframeworkAbstract：SinceDecember2019,Coronavirusdisease2019(COVID-19)brokeoutinWuhan,Hubei,China,andspreadrapidlytootherpartsofthecountrythroughhumantohumaninfection.ThewholecountryisunitedinfightingtheCoronavirusdisease2019(COVID-19).Hubei,Guangdong,Zhejiangandother24provinceslaunchedthefirst-classresponsetomajorhealthemergenciesandadoptthemoststringentpreventionandcontrolmeasures.Achieve"internalnon-proliferation,externalantiinput".Manypeoplechoosetoliveinisolationanddarenotgoout.Contactlessdeliveryhasbecomeaverypopularwayforthemtopurchasenecessarylivinggoodsandmaterials.Intheeraofperfectnetworkinfrastructure,itispossibletosolvetheproblemoftraditionaltakeout.Inviewofthelowefficiencyofthetraditionaldeliverymethodandtheinabilitytomeettheneedsofpeople'sfast-pacedlife.AnalysingO2Odeliverymode,AdoptingB/Sdevelopmentmode、MVVMdesignpatternisveryimportanttodevelopamedecineordermanagementsystembasedonVue.Solvingtheefficiencyproblemcausedbythetediousprocessoftraditionalcallingtakeout,Onlineprocessingoforders,drugsandotherdata.Improvingdatautilizationandbusinessprofits.B/Smodewillbeusedastherealizationmodeofdrugpointsinglemanagementsystem.Browsersupportsmostwebbrowsersonthemarket,suchasFirefox,ie,etc.TheserverisbuiltbyNode.js.ElementUI,CSS,JS,etc.willbeusedasthedevelopmentlanguageofthefrontend.Visualstudiocodewillbeusedasadevelopmenttool.Node.jsisalsousedastheserver-sidedevelopmentlanguage.UsingVueframeworkforfrontandbackintegration.Atthesametime,UsingVuecliwhichdevelopinganddebuginginamoreintuitivewayscaffoldsrapidconstructionVueproject.ThedatabasesupportsMySQLdatabase,UsingPHPstudysoftwaretorapidlyopenMySQLservice,avoidingconflictswithothertypesofdatabasesthatoriginallyexistedonthecomputer.Therealizationofthedrugordermanagementsystemwillenablethedrugtobemanagedthroughthenetworkandthendealwiththeordersoftheguests,sothattheguestscanbuythedesireddrugswithoutleavingthehouse,Itwillprovideagreatguaranteefortheirsafetyandreducetheflowofpeople,whichisofgreatsignificanceforthepreventionandcontroloftheepidemic.Keyword：medicine,management,Vue目录第1章绪论 第1章绪论1.1系统开发的背景及意义2019年12月以来，中国湖北省武汉市发现新型冠状病毒引发的肺炎疫情，并通过人传人的感染方式向全国其他地区扩散，全国上下万众一心抗击疫情，湖北广东浙江等24省市启动重大卫生突发事件一级响应，采用最严厉的防控措施，做到内防扩散，外防输入，很多人都选择居家隔离不敢外出，无接触外卖成为了他们采购必备物资的一个当下很热门的途径。该系统模拟了一个美团类的药品点单外卖系统，疫情期间外出成为了一次具有风险的“探险”，尤其是医院药店等，有很多人有着不同的基础疾病，他们需要通过治疗该病的药物长期治疗，出去买药会加大他们感染病毒的几率，而且根据相关信息，这次感染新型冠状病毒的肺炎死亡病例中，绝大多数是患有基础疾病的老年人，所以美团类的药品点单系统的设计，会给他们的安全提供很大的保障，而且减少了人流量对于防控疫情也有相当大的帮助。本文研究和开发一个线上的订单管理系统，以及客户端与服务器的交互。在“互联网+”的浪潮下，多种生活服务业态发生着颠覆性的变化，“懒人经济”成为了一种经济现象。随着互联网的不断发展，各种网络外卖已经成为了人们的主流生活方式之一。近年来中国外卖产业链逐步完善，外卖市场逐步成熟。人们开始创新外卖，实现外卖内容，外卖形式的多样化，而且也根据疫情的发展，药品外卖点单就应运而生。Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。该系统的研制具有以下意义：实现网上下单，无接触药品外卖，响应国家号召，为防控疫情贡献一份力量发挥创新精神，实现外卖商品多样化，满足消费者各方面的需求为学校的项目研究提供样本对前端Vue框架的深入研究，以及探讨前端技术的发展1.2国内外外卖系统发展状况和前端技术研究现状1.2.1国内外外卖系统发展状况在我国，随着网络技术的发展与完善，网上所提供的服务都已经渐渐成熟，互联网现阶段，餐饮业带动外卖市场发展，新时代以来，大众的消费观念和消费渠道都有了很大的变化，外卖更是一个重要的分支，近几年来，外卖行业市场规模逐年扩大，保持两位数增长，2017年达到2046亿元，同比增长23.1%，用户规模也达到3亿人，较2016年增长15%，预计未来将还有一定的上升空间，经过前期在快节奏的城市生活里，外卖渐渐成为了成为了生活必需品。现在的外卖早就不仅仅是提供送餐服务，还可以满足消费者生活方方面面的需求。 在国外，以网上订餐系统为主，主要以OpenTable为典型。面对餐厅，开发软件出售预定系统软件，可以实时的反映餐厅当前容量和座位使用，并不热衷于外卖行业。1.2.2国内外前端技术研究现状前端开发虽然起步时间晚，但是发展势头迅猛，在各种新技术、新标准的推动下，各大互联网公司也开始重视Web产品的前端重构与开发。现在的开发的web新产品的页面交互也越来越丰富，视觉效果也越来越绚丽。随着互联网的迅猛发展，用户对Web前端的使用体验、交互操作流程、外观有了更高的要求。特别是Web系统中越来越多的数据处理和业务逻辑开始偏向前端，而旧的编程方式普遍存在的问题有代码组织混乱，CSS和JavaScript代码混合在HTML代码中；代码的格式问题突出，不够整洁；页面布局随意；网站整体性能差等导致web前端工作量扩大，代码量增加。如果采用传统的方式开发设计前端，会导致前期开发度和后期维护度增加，可扩展性变差。为了解决这些问题，基于MVVM模式的Vue.js应运而生，并且收到了国内前端开发人员的追捧。1.3系统开发环境与开发工具8GB的windows10x64操作系统，因为速度、可靠性和适应性而备受关注和使用结构化查询语言（SQL）进行数据库管理的MySQL，Redis5.0.2被作为药品订单管理系统的数据缓存支持，以上环境将作为系统的开发环境。VisualStudioCode被作为的浏览器端和服务器端的开发工具，Vue框架将被服务器端作为开发框架，采用$http的网络请求，其简化了开发过程，以上工具将作为系统的开发工具。1.4主要研究内容本文主要介绍了在Vscode和Vue-Cli可视化面板中用当前流行的Vue框架开发一个药品订单管理系统的过程。系统主要实现了对药品，用户，权限，订单，数据的管理，包括了药品管理、用户管理、权限管理，订单管理等几模块，相应的完成了对药品，用户，订单信息的统计录入、查询、维护管理和用户权限分配等工作，使客户对系统的信息管理变得方便快捷，提高了工作效率和服务水平，节省了人力物力，同时使得系统工作规范化、科学化和信息化。论文的主要研究内容如下：药品点单外卖管理系统整体采用前后端分离的开发模式，使用vscode开发工具和vue-cli脚手架进行开发，其中项目是基于Vue技术栈的SPA项目，后端主要负责操作数据库，为前端项目提供相应的API接口；前端主要负责绘制页面，同时基于ajax技术调用后端的API接口。系统主要用到的前后端技术栈包括前端项目技术栈：Vue，Vue-Router的路由，Element-UI的前端UI组件库，Axios发起网络数据请求，Echarts绘制图形报表；后端技术栈：Node.js的JavaScirpt的运行环境，基于Node.js平台的Web开发框架Express,状态保持工具Jwt，数据库Mysql，操作数据库的框架Sequelize。对药品点单外卖系统进行了长期的调查和需求分析，并在需要分析的基础上进行了前后端系统的详细设计，包括了系统的总体架构、前端页面UI和功能的设计、后台数据的处理、前后端的对接、数据库的选取及设计和系统功能每个子模块的设计。前后端分离的开发模式见图1.1：图1.1前后端分离的开发模式在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML页面，后端不再控制前端的效果，用户看到什么样的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后端仅仅需要提供一套逻辑对外提供数据即可，并且前端与后端的耦合度相对较低，在这种模式中，我们通常将后端开发的每个视图都成为一个接口，或者API，前端通过访问接口来对数据进行增删改查。总结一句话，后台负责提供数据，前端负责数据展示，职责分离，分工明确。第2章系统需求分析2.1系统需求分析需求分析就是调查清楚用户的实际要求，和用户达成共识，并且分析和表达这些需求[34]。典型的需求分析包括了以下几个步骤：需要调查系统的整体情况，了解各个模块的组成和职责等，为业务流程分析做准备。调查系统的业务活动情况，包括各个模块输入和使用了什么数据；如何加工处理这些数据，输出什么信息，在那个模块上面体现，输出结果的格式是什么，在熟悉业务活动的基础上，协助用户明确对新系统的各种要求，包括信息要求，处理要求、完整性要求。对前面的调查结果进行初步分析，分析的目标是解决“系统必须做什么”，也就是说确定系统具备哪些功能的问题。药品点单外卖管理系统的需求如下：药品管理：药品信息的增加，删除，修改，查询。管理员通过药品管理页面对药品进行增加删除修改查询的基本操作，从而对药品的种类、来源商家、数量等详细内容和各类报表的数据进行实时统计并展现给用户，用户则只能查询药品信息。药店管理：药店信息的增加，删除，查询。管理员通过药店管理页面对药店进行增加删除查询的基本操作，从而对药店的基本信息、信用评级等进行实时统计并展现给用户。用户则只能查询药店信息用户管理：管理员通过用户管理对用户进行修改，删除和查询的基本操作，从而对用户的基本信息进行修改，定期删除行为不当的用户和“僵尸”用户。用户无法访问这一模块订单管理：管理员通过订单管理对订单进行修改和查询的基本操作，从而对订单的基本信息进行修改。用户登录：使用账户密码登录到主页中，如果不登录则无法使用本系统。权限管理：用户和管理员分别拥有不同的权限2.2系统功能需求 根据客户对药品点单系统的要求，功能模块主要包括药品管理、权限管理、用户管理、订单管理四大模块，系统的功能模块结构如图所示：图2.1系统的功能模块结构1.药品管理药品列表模块（1）添加药品添加药品是在添加药品的页面对新的药品进行登记。添加药品需要填写药品的详细信息。包括：药品名称、药品种类、药品编号、药品库存数量、所处药店，生产日期，生产商家等内容。通过权限管理，管理员具有添加药品的功能权限，用户不具有添加药品的功能权限。（2）删除药品删除药品是在商品列表页面根据药品的id对已登记的药品进行删除。如按照新颁发的国家标准，有些药物不能由药店进行售卖，统一由医院管理的情况下，要对此类药品进行删除。通过权限管理，管理员具有删除药品的功能权限，用户不具有删除药品的功能权限。（3）修改药品修改药品是在商品页面对已进货的药品进行修改信息。修改药品是修改药品的详细信息的功能。包括：药品名称、药品种类、药品编号、药店来源，生产日期，是否处方药，生产商家等内容。通过权限管理，管理员具有修改药品的功能权限，用户不具有修改药品的功能权限。（4）查询药品查询药品是在药品管理页面对已进货的药品进行模糊查询。查询药品的功能是根据药品的名称属性进行模糊查询从而想要获得某个具体的药品信息。管理员和用户均具有此项功能的权限。药品分类模块（1）添加分类添加分类是在商品分类页面添加新的药品分类区分开不同的药品。添加分类的功能是在商品分类页面点击添加分类按钮弹出添加分类的对话框，在分类名称的文本框中输入分类名称，如果填写的是二级或者三级的分类则需要选择相应的父级分类后点击确定提交请求。通过权限管理，管理员具有修改药店的功能权限，用户不具有修改药店的功能权限。（2）删除分类删除分类是在商品分类页面删除无用的分类。删除分类的功能是在商品分类页面点击删除分类按钮，通过分类的id删除对应的分类。通过权限管理，管理员具有修改药店的功能权限，用户不具有修改药店的功能权限。2.药店管理（1）添加药店添加药店是在添加药店的页面对新的药店进行登记。添加药店需要填写药店的详细信息。包括：药店名称、药店编号、药店地址、药店评级、药店负责人、药店联系电话等内容。通过权限管理，管理员具有添加药品的功能权限，用户不具有添加药店的功能权限。（2）删除药店删除药店是在药品管理页面对已登记的药店进行删除。如果药店评级太低或被用户投诉次数过多，或者出现倒闭的情况则需要对此类药店进行删除。通过权限管理，管理员具有删除药店的功能权限，用户不具有删除药店的功能权限。（3）修改药店修改药店是在修改药店页面对已经存放在数据库的药店信息进行修改。修改药品是修改药品的详细信息的功能。包括：药店名称、药店编号、药店地址、药店评级、药店负责人、药店联系电话等内容。通过权限管理，管理员具有修改药店的功能权限，用户不具有修改药店的功能权限。（4）查询药店查询药店是在药店管理页面对已进货的药店进行模糊查询。查询药店的功能是根据药店的名称，编号等属性进行模糊查询从而想要获得某个具体的药店信息。管理员和用户均具有此项功能的权限。3.用户管理（1）删除用户删除用户是在用户管理页面对已登记的用户进行删除，删除的用户不能再登录此系统享用此系统的服务。如果用户信用太低或存在“僵尸”用户的情况则需要对此类药店进行删除。通过权限管理，管理员具有删除用户的功能权限，用户不具有删除用户的功能权限。（2）修改用户修改用户是在修改用户页面对已经存放在数据库的用户信息进行修改。修改用户是修改用户的详细信息的功能。包括：用户名称，用户账号，性别，电话号码等内容。通过权限管理，管理员具有修改用户的功能权限，用户不具有修改用户的功能权限。（3）查询用户查询用户是在用户管理页面对已注册的用户进行模糊查询。查询用户的功能是根据用户的名称进行模糊查询从而想要获得某个具体的用户信息。通过权限管理，管理员具有查询所有用户信息的权限，用户不具有查询其他用户的权限。（4）添加用户添加用户是在用户管理页面由管理员进行增加用户的操作。添加用户的功能具体操作是在用户管理页面点击添加用户的按钮弹出添加用户的对话框dialog，然后在文本框中填写用户名密码邮箱手机等个人信息然后点击确定把用户信息提交到数据库。通过权限管理，管理员具有查询所有用户信息的权限，普通用户没有这个权限。（5）分配角色分配角色是在用户管理页面由管理员进行分配角色的操作。分配角色的功能具体操作是在用户管理页面点击分配角色的按钮弹出分配角色的对话框dialog，然后根据显示的原来角色可以在文本框中修改成新的角色。通过权限管理，管理员具有分配角色的权限，普通用户没有这个权限。4.权限管理 （1）添加角色添加角色是在角色列表页面由管理员进行添加角色的操作进而让客户可以添加更多类型的角色方便区分不同使用本系统的用户进而给他们分配不同的权限。添加角色的功能具体操作是在角色列表页面点击添加角色的按钮弹出添加角色的对话框dialog，然后再文本框中填写角色名称，角色描述等信息然后点击确定把用户信息提交到数据库，最后刷新页面获取新的列表。通过权限的设定，管理员具有添加角色的权限，普通用户没有这个权限。（2）修改角色修改角色是在角色列表页面由管理员进行修改角色的操作。添加角色的功能具体操作是在角色列表页面点击编辑的按钮弹出修改角色的对话框dialog，然后再文本框中修改角色名称，角色描述等信息然后点击确定把用户信息提交到数据库，最后刷新页面获取新的列表。通过权限的设定，管理员具有修改角色的权限，普通用户没有这个权限。（3）删除角色删除角色是在角色列表页面由管理员进行删除角色的操作。删除角色的功能具体操作是在角色列表页面点击删除的按钮根据角色的Id进行删除，最后刷新页面获取新的列表。通过权限的设定，管理员具有修改角色的权限，普通用户没有这个权限。（4）分配权限分配权限是在角色列表页面由管理员进行分配权限的操作。分配权限的功能具体操作是在角色列表页面点击分配权限的按钮弹出分配权限的对话框，在对话框中使用树形控件显示出一二三级权限，勾选复选框给不同的角色添加相应的权限。通过权限的设定，管理员具有修改角色的权限，普通用户没有这个权限。（5）删除权限删除权限是在角色列表页面由管理员进行删除权限的操作。删除权限的功能具体操作是在角色列表页面点击角色列表的展开列弹出下拉框由标签tag组件显示一二三级权限，然后通过tag标签的closable事件实现删除权限的功能。通过权限的设定，管理员具有删除权限的权限，普通用户没有这个权限。5.订单管理（1）修改订单修改订单是在订单管理页面由管理员进行修改订单的操作。修改订单的功能具体操作是在订单管理页面点击修改按钮弹出修改对话框通过权限的设定，管理员具有删除权限的权限，普通用户没有这个权限。2.3UML系统建模2.3.1用例图图2.3管理员用例图2.3.2用例规约表2-1登录用例规约表用例编号2-1用例名称登录功能描述当游客登录之后，身份变为普通用户。执行者游客、管理员前置条件药品点单外卖管理系统正常运行。后置条件如果是游客，游客身份变为普通用户；如果是管理员，成功进入系统。涉众利益游客登录之后，可以进行下单、查看药品药店信息等操作；商家登录注册后，可以进行药品管理、订单管理，药店信息管理，用户管理等操作。基本路径游客：1.登陆系统2.进入系统管理员：1.登陆系统2.系统操作扩展无字段列表用户：1.邮箱、用户名、密码、手机号商家：1.邮箱、用户名、密码、手机号业务规则无备注无表2-2药品信息用例规约表用例编号2-2用例名称药品信息管理功能描述当用户进入XXX外卖系统用户端的时候，餐厅的基本信息将会在药品列表页面罗列，包括药品名称、药品种类、药品价格、药品生产日期，来源厂家等信息每次显示十条，可以搜索自己想要的药品名称管理员进入系统可以对具体的药品信息实现增删改操作执行者用户、管理员前置条件进入药品点单外卖管理系统浏览器端后置条件显示药品的信息。涉众利益用户可以获得店铺准确的信息，管理员可以对药品进行增删改操作基本路径游客：1.登陆系统2.进入首页3.进入商品列表页面4.查看或搜索管理员：1.登陆系统2.进入首页3.进入商品列表页面4.查看或搜索5.增加删除修改操作扩展在搜索栏输入商店名称可以进行搜索字段列表1.药品名称；2.药品价格；3.药品种类；4.生产日期；业务规则无备注无表2-3商品分类用例规约表用例编号2-3用例名称商品分类功能描述管理员进入药品分类页面管理药品的分类，用户查看分类执行者用户，管理员前置条件进入药品点单管理系统浏览器端后置条件分类被增加删除或查看分类涉众利益充分地管理数据基本路径游客：1.登陆系统2.进入首页3.进入商品分类页面4.查看管理员：1.登陆系统2.进入首页3.进入商品分类页面4.查看5.增加删除操作扩展展开列看多层商品分类字段列表1.分类名称；2.是否有效；3.排序；业务规则无备注无表2-4用户管理用例规约表用例编号2-4用例名称用户管理功能描述管理员可以查看并增删改用户或分配角色执行者管理员前置条件进入药品点单外卖管理系统浏览器端后置条件管理员新增或修改或删除个人资料成功。涉众利益管理员为系统管理用户基本路径1.1.登陆系统2.进入首页3.进入用户页面4.查看5.增加删除修改操作6.分配角色扩展无字段列表1.用户名;2.密码（不显示）;3.邮箱;4.电话5.角色6.状态业务规则无备注无表2-5权限管理用例规约表用例编号2-5用例名称用户管理功能描述管理员可以添加角色，删除角色，并分配权限执行者管理员前置条件进入药品点单外卖管理系统浏览器端后置条件管理员新增或删除角色成功同时分配相对应的权限涉众利益管理员为角色分配权限基本路径1.登陆系统2.进入首页3.进入角色列表页面4.查看5.增加删除操作6.为角色分配或删除权限扩展无字段列表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设置管理状态业务规则无备注无2.4本章小结本章对系统进行了需求分析，并且进行了系统的功能设计。根据文档的要求，设备管理系统的功能的设计主要包括药品管理、药店管理、权限管理、订单管理，角色管理等模块。另外，本章从超级管理员、用户、经理等几个重要角色的角度对系统进行了UML建模，给出了各自的功能用例图和用例规约。

第3章系统设计3.1系统功能设计本系统由浏览器端系统和服务器系统组成。3.1.1浏览器端登录功能：首页是登陆页面，输入用户名密码进行登录，登录完成之后进入欢迎页面，用户可以查看或搜索信息但是不能修改，管理员可以进行增加修改删除等各项操作用户管理：管理员进入用户管理页面，各个用户的信息用表格的形式展示在主页，同时有分页的功能，可以实现增加删除修改用户的操作，同时可以为用户分配相应的角色，用户没有权限进入这个页面。权限管理:管理员进入角色列表页面，各个用户的角色信息用表格的形式展示在主页，可以实现增加删除角色的操作，同时可以为用户分配相应的权限，展开列打开可以直观地查看角色的权限，并且可以删除对应的权限，用户没有权限进入这个页面。分类参数管理：管理员进入分类参数页面，选择三级药品分类，不选择则无法进行下一步操作，可以为具体的药品添加修改删除动态参数和静态属性。药品分类管理：管理员进入药品分类管理页面，药品分类信息用表格的形式展示在主页，同时有分页的功能，可以实现增加删除分类的操作药品列表管理：管理员进入药品列表管理页面，药品的信息用表格的形式展示在主页，同时有分页的功能，可以实现增加删除修改药品的操作订单管理：管理员进入药品列表管理页面，订单的信息用表格的形式展示在主页，同时有分页的功能，可以实现删除修改药品的操作3.1.2服务器系统服务器负责为前端页面提供数据3.2药品点单管理系统类图图3.1药店点单管理系统类图

3.3药品点单管理系统顺序图1.用户或管理员登录顺序图图3.2用户或管理员登录顺序图2.管理员添加用户顺序图图3.3管理员添加用户顺序图3.管理员编辑用户顺序图图3.4管理员编辑用户顺序图4.管理员删除用户顺序图图3.5管理员删除用户顺序图5.管理员添加药品顺序图图3.6管理员添加药品顺序图6.管理员分配权限顺序图图3.7管理员分配权限顺序图3.4药品点单管理系统活动图1.管理员用户管理活动图图3.8管理员用户管理活动图2.管理员权限管理活动图图3.9管理员权限管理活动图

3.管理员药品管理活动图图3.10管理员药品管理活动图4.管理员订单管理活动图3.11管理员订单管理活动图

3.5数据库设计一个完整的系统必须有一个良好的数据库支持作为数据来源，如果想提高系统的健壮性，那么就得把数据库设计好。以下是对用户表、药品表、角色表、订单表的设计，后台数据库采用MySQL。sp_user(用户信息表),表的详细数据见下表3-2用户信息表：表3-2用户信息表列名数据类型是否为空主外键描述user_idintNotnull主键用户编号usernamevarchar(128)Notnull用户名passwordvarchar(64)Notnull登录密码user_sexenumNotnull用户性别user_emailvarchar(64)Notnull电子邮箱user_telvarchar(32)Notnull手机号码user_qqvarchar(32)NotnullQQ号码sp_goods(药品信息表)，表的详细的数据见下表3-3药品信息表：表3-3药品信息表列名数据类型是否为空主外键描述goods_idintNotnull主键药品编号goods_namevarchar(255)Notnull药品名称goods_pricedecimal(10,2)Notnull药品价格goods_numberint(8)Notnull联系电话cat_idsmallint(5)Notnull类型Idgoods_introducetextNotnull介绍cat_one_idsmallint(5)Notnull一级分类Idcat_two_idsmallint(5)Notnull二级分类Idcat_three_idsmallint(5)Notnull三级分类Idsp_category（分类表），表的详细数据见下表3-4商家表：表3-4商家表列名数据类型是否为空主外键描述cat_idint(32)Notnull主键分类Idcat_namevarchar(255)Notnull分类名称cat_pidint(32)Notnull分类父Idcat_levelint(4)Notnull分类层级cat_deletedInt(2)Notnull是否删除sp_order（订单表），表的详细数据见表3-5订单表：表3-5订单表列名数据类型是否为空主外键描述order_idint(10)Notnull主键订单Iduser_Idmediumint(8)Notnull外键会员Idorder_numbervarchar(32)Notnull订单编号order_pricedecimal(10,2)Notnull订单总金额order_payenumNotnull支付方式3.6网络接口设计网络接口采用API接口（ApplicationProgrammingInterface，应用程序接口），应用程序接口又称为应用编程接口，是一组定义、程序及协议的集合，通过API接口实现计算机软件之间的相互通信。接口地址为：`:8888/api/private/v1/`，基于Token的身份验证，使用HTTPStatusCode标识状态，数据返回格式统一使用JSON。3.7本章小结本章首先对药品点单管理系统的浏览器端和服务器端进行了系统功能的详细设计，然后画出了药品点单管理系统的类图、顺序图、和部分的活动图与状态图，更加直观地展示了药品点单管理系统的各个功能；接下来是对药品点单管理系统的数据库进行设计；最后是对药品点单管理系统网络接口进行设计。第4章系统实现4.1药品点单管理系统浏览器端（Browser）系统实现1.启动好后台服务器后，在命令行cmd中写入vueui启动vue-cli脚手架图4.1启动vue-cli脚手架2.编译，启动项目。如图4.2图4.2编译、启动项目3.用户管理页面分页效果，如图4.3图4.3用户管理页面UI主要的代码实现：queryInfo:{query:'',//当前的页数pagenum:1,//当前每页显示多少条数据pagesize:2//监听PageSize改变的事件handleSizeChange(newSize){console.log(newSize)this.queryInfo.pagesize=newSizethis.getUserList()},//监听页码值改变的事件handleCurrentChange(newPage){console.log(newPage)this.queryInfo.pagenum=newPagethis.getUserList()4.添加用户功能表单验证如图4.4，添加成功如图4.5，4.6图4.4添加用户功能表单验证效果主要代码实现：email:[{required:true,message:'请输入邮箱',trigger:'blur'},{validator:checkEmail,trigger:'blur'}],mobile:[{required:true,message:'请输入手机',trigger:'blur'},{validator:checkMobile,trigger:'blur'}]//验证邮箱规则varcheckEmail=(rule,value,cb)=>{//验证手机号正则表达式constregEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/if(regEmail.test(value)){returncb()}cb(newError('请输入合法的邮箱'))}//验证手机号规则varcheckMobile=(rule,value,cb)=>{//验证手机号正则表达式constregMobile=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if(regMobile.test(value)){//合法的手机号returncb()}cb(newError('请输入合法的手机号'))}图4.5添加对话框提交添加用户代码实现：addUser(){this.$refs.addFormRef.validate(asyncvalid=>{if(!valid)return//可以发起添加用户的网络请求const{data:res}=awaitthis.$http.post('users',this.addForm)if(res.meta.status!==201){this.$message.error('添加用户失败')}this.$message.success('添加用户成功')//隐藏添加用户的对话框this.addDialogVisible=false//重新获取用户列表数据this.getUserList()})},4.修改用户如下图，其中用户名不允许被修改图4.6修改用户修改用户代码实现：editUserInfo(){this.$refs.editFormRef.validate(asyncvalid=>{if(!valid)return//发起修改用户信息的数据请求const{data:res}=awaitthis.$http.put('users/'+this.editForm.id,{email:this.editForm.email,mobile:this.editForm.mobile})if(res.meta.status!==200){returnthis.$message.error('更新用户信息失败！')}//关闭对话框this.editDialogVisible=false//刷新数据列表this.getUserList()//提示修改成功this.$message.success('更新用户信息成功！')})},5.删除用户如下图图4.7删除用户删除用户代码实现：asyncremoveUserById(id){//弹框询问用户是否删除数据constconfirmResult=awaitthis.$confirm('此操作将永久删除该用户,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).catch(err=>err)//如果用户确认删除，则返回值为字符串confirm//如果用户取消了删除，则返回值为字符串cancel//console.log(confirmResult)if(confirmResult!=='confirm'){returnthis.$('已取消删除')}const{data:res}=awaitthis.$http.delete('users/'+id)if(res.meta.status!==200){returnthis.$message.error('删除用户信息失败！')}this.$message.success('删除用户信息成功！')this.getUserList()},6.角色列表展开列效果如下，点击x可以删除权限图4.8角色列表展开列asyncremoveRightById(role,rightId){//弹框提示用户是否删除constconfirmResult=awaitthis.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).catch(err=>err)if(confirmResult!=='confirm'){returnthis.$('取消了删除！')}const{data:res}=awaitthis.$http.delete(`roles/${role.id}/rights/${rightId}`)if(res.meta.status!==200){returnthis.$message.error('删除权限失败!')}//this.getRolesList()role.children=res.data},7.角色列表分配权限效果，点击复选框可以添加权限并显示已有的权限图4.9角色列表分类权限分配权限代码实现：//点击为角色分配权限asyncallotRights(){constkeys=[...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()]constidStr=keys.join(',')const{data:res}=awaitthis.$http.post(`roles/${this.roleId}/rights`,{rids:idStr})if(res.meta.status!==200){returnthis.$message.error('分配权限失败!')}this.$message.success('分配权限成功!')this.getRolesList()this.setRightDialogVisible=false}8.分类参数UI效果，选中三级分类才能为药品添加参数，不选分类不能选中按钮图4.10分类参数UI效果不选分类不能显示部分主要代码：//证明选中的不是三级分类if(this.selectedCateKeys.length!==3){this.selectedCateKeys=[]this.manyTableData=[]this.onlyTableData=[]return}9.选中三级分类为药品添加静态或动态参数图4.11分类参数添加参数部分添加代码实现：editParams(){this.$refs.editFormRef.validate(asyncvalid=>{if(!valid)returnconst{data:res}=awaitthis.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,{attr_name:this.editForm.attr_name,attr_sel:this.activeName})4.2药品点单管理系统服务器端（Server）系统实现1.连接数据库代码实现："db_config":{ "protocol":"mysql", "host":"", "database":"medicine_webshop", "user":"root", "password":"999999", "port":3306 }2.用户模型实现： db.define("ManagerModel",{ mg_id:{type:'serial',key:true}, mg_name:String, mg_pwd:String, mg_time:Number, role_id:Number, mg_mobile:String, mg_email:String, mg_state:Number },{ table:"sp_manager" });3.通过关键词查询用户功能的数据库语句sql="SELECT*FROMsp_managerasmgrLEFTJOINsp_roleasroleONmgr.role_id=role.role_id";4.修改商品的后台实现代码//修改商品router.put("/:id", //参数验证 function(req,res,next){ if(!req.params.id){ returnres.sendResult(null,400,"商品ID不能为空"); } if(isNaN(parseInt(req.params.id)))returnres.sendResult(null,400,"商品ID必须是数字"); next(); }, //业务逻辑 function(req,res,next){ varparams=req.body; goodServ.updateGood(req.params.id,params,function(err,newGood){ if(err)returnres.sendResult(null,400,err); res.sendResult(newGood,200,"创建商品成功"); })(req,res,next); });4.3本章小结本章主要介绍浏览器端（browser）和服务器端（server）各自的系统实现，用截图和代码直观地展示出业务逻辑。

第5章系统测试5.1系统测试的目的测试并不仅仅是为了要找出错误。通过分析错误产生的原因和错误的分布特征。可以帮助项目管理者发现当前所采用的软件过程的缺陷，以便改进。同时，通过分析也能帮助我们设计出有针对性的检测方法，改善测试的有效性。找出软件中的bug是系统测试的最重要的目的，系统的bug可能存在于系统、功能、过程、数据和编码中，我们需要在各个方面上进行测试以找到系统的漏洞并修复。在系统设计和实现过程中检查出来的错误和缺陷需要在系统试运行当中通过系统测试来实现，所以系统测试阶段是软件开发中必不可少的部分。5.2系统测试的意义在软件泛滥的信息时代，软件的质量参差不齐，因此，为了杜绝低质量的软件的蔓延，系统测试是一个不可或缺的阶段。经过针对整个产品系统的测试，可以找出系统中难以发现的漏洞，有利于提高药品订单管理系统的质量，使用户的体验更加好。5.3测试用例及结果药品订单管理系统测试，表5-1为浏览器端的测试用例及结果，表5-1用户端测试用例及结果用例编号用例名称测试目的测试结果U-1TestUserLogin测试用户输入正确的密码才能登陆用户输入正确的密码才能登陆U-2TestUserList测试用户列表的分页功能用户列表的分页功能正常U-3TestUserAdd测试添加用户网页提示添加用户成功，数据库有信息U-4TestUserEdit测试编辑用户网页提示更新用户成功，数据库有信息U-5TestUserDelete测试删除用户网页提示更新用户成功，数据库有信息U-6TestUserSerach测试查询用户用户列表显示正常U-7TestRoleList测试角色列表和展开列能否正常显示角色列表和展开列正常显示U-8TestRoleAdd测试添加角色网页提示添加角色成功，数据库有信息U-9TestRoleDelete测试删除角色网页提示删除角色成功，数据库有信息U-10TestRights测试分配权限网页提示分配权限成功，数据库有信息U-11TestGoodsList测试药品列表能否正常显示和查询药品列表正常显示和查询U-12TestGoodsAdd测试添加药品网页提示添加成功，数据库有信息U-13TestGoodsEdit测试编辑药品网页提示更新成功，数据库有信息U-14TestGoodsDelete测试删除药品网页提示删除成功，数据库有信息U-15TestParamsList测试参数列表能否正常显示药品列表正常显示U-16TestParamsListAdd测试添加药品动态参数和静态属性网页提示添加成功，数据库有信息U-17TestCateList测试分类列表能否正常显示分类列表正常显示U-18TestCateAdd测试添加分类网页提示添加成功，数据库有信息U-19TestCateDelete测试删除药品网页提示删除成功，数据库有信息5.4本章小结本章开头说明系统测试的目的以及意义然后给出了测试用例，证明了药品订单管理系统的大部分功能是没有问题的。

第6章结束语6.1全文总结通过这几个月不懈的努力，基于Vue的药品订单管理系统设计与实现到这里基本结束了。基于Vue的药品订单管理系统在界面设计上使用灰色白色调，向用户展现了一种简洁大方；Element-UI+js被作为前端开发语言，同样Node.js被服务器端作为开发语言，同时使用了非常优秀且简易的轻量级框架Vue框架来优化开发流程，用API接口实现前后端对接，经过我对各个数据库的综合分析之后，MySQL被作为药品订单管理系统的数据支持。目前，基于基于Vue的药品订单管理系统在这些工具的支持下基本能运作。6.2论文展望由于时间比较紧，所以基于Vue的药品订单管理系统没有加入验证码功能，所以如果有机会和条件，基于基于Vue的药品订单管理系统会加入当今最后欢迎的手机验证码和邮箱验证码；而且，基于Vue的药品订单管理系统的设计与实现没有用到注册功能，如果以后有时间会接入极光推送，基于Vue的药品订单管理系统的设计与实现的各个功能模块可能有点简单，后期会优化；最后，如果以后有机会将会加上骑手管理。

参考文献[1]NicholasC.Zakas,JavaScript高级程序设计（第3版）人民邮电出版社，2012年03月[2]朴灵，深入浅出Node.js人民邮电出版社，2013年12月[3]刘汉伟，Vue.js从入门到项目实战清华大学出版社，2019年3月[4]梁灏，Vue.js实战清华大学出版社，2017年10月[5]唐汉明等，深入浅出MySql人民邮电出版社，2014年1月[6]张工厂，MySql5.7从入门到精通清华大学出版社，2019年4月[7]王珊，李盛恩，数据库基础与应用[M]北京：人民邮电出版社，2008[8]张海藩,牟勇敏，软件工程导论（第6版），清华大学出版社，2013月8月[9]纳拉辛哈·卡鲁曼希[India]，数据结构与算法经典问题解析，机械工业出版社，2018年11月[10]AdamFreeman，ExtendingVue.js《ProVue.js2》，2018年9月[11]朱二华，基于Vue.js的Web前端应用研究，《科技与创新》[12]张璇.MOOC在线教学模式的启示与再思考[J].江苏广播电视大学学报，2013（5）：5-10.

[13]赵国海，张岩.基于HTML5开发跨平台在线教育系统[J].科技创业家，2013（8）：46.

[14]张幸芝，徐东东，贾菲.基于响应式Web设计的教务系统移动平台研究与建设[J].软件，2013（6）：5-7.

[15]刘春华.基于HTML5的移动互联网应用发展趋势[J].移动通信，2013（09）：64-68.

[16]赵爱美.基于HTML5和_NET的移动学习平台研究与实现[J].河南科技学院学报，2013（8）：62-66.

致谢写到这里，已是药品订单管理系统的设计与实现的尾声了，一个系统的设计与实现不单单是自己一个人能够完成的，还需要他人的帮助，如指导老师、舍友、家人等，所以，我非常感谢他们在我做这给系统期间有形和无形的帮助，有些他们无形的帮助或许我感觉不到，但对我有着非凡的影响。在这里我需要特别感谢潘伯新老师了，从大二开始教我们数据库SQLServer到最后作为我的指导老师，可以说他是我做药品订单管理系统的设计与实现帮助最大的人了。最后，感谢广州大学松田学院为我们提供学习的平台，感谢广大松田计算机科学与技术系各个科任老师的辛勤付出。父母恩，恩师情，同窗谊，陈再拜谢。此番拜离，情深意长，一语难表。惟寄此情于心，再起征程，谨拜文以闻。

HYPERLINK如何给电脑重做系统给电脑重做系统，自己学学，可少花钱，哈哈[图]

一、准备工作:

如何重装电脑系统

首先，在启动电脑的时候按住DELETE键进入BIOS，选择AdvancedBIOSFeatures选项，按Enter键进入设置程序。选择FirstBootDevice选项，然后按键盘上的PageUp或PageDown键将该项设置为CD-ROM，这样就可以把系统改为光盘启动。

其次，退回到主菜单，保存BIOS设置。（保存方法是按下F10，然后再按Y键即可）

1.准备好WindowsXPProfessional简体中文版安装光盘,并检查光驱是否支持自启动。

2.可能的情况下，在运行安装程序前用磁盘扫描程序扫描所有硬盘检查硬盘错误并进行修复，否则安装程序运行时如检查到有硬盘错误即会很麻烦。

3.用纸张记录安装文件的产品密匙(安装序列号)。

4.可能的情况下，用驱动程序备份工具(如:驱动精灵2004V1.9Beta.exe)将原WindowsXP下的所有驱动程序备份到硬盘上(如∶F:Drive)。最好能记下主板、网卡、显卡等主要硬件的型号及生产厂家，预先下载驱动程序备用。

5.如果你想在安装过程中格式化C盘或D盘(建议安装过程中格式化C盘)，请备份C盘或D盘有用的数据。

二、用光盘启动系统:

(如果你已经知道方法请转到下一步),重新启动系统并把光驱设为第一启动盘,保存设置并重启。将XP安装光盘放入光驱,重新启动电脑。刚启动时，当出现如下图所示时快速按下回车键，否则不能启动XP系统光盘安装。如果你不知道具体做法请参考与这相同的-->如何进入纯DOS系统:

光盘自启动后,如无意外即可见到安装界面,将出现如下图1所示

查看原图

全中文提示,“要现在安装WindowsXP,请按ENTER”，按回车键后,出现如下图2所示

查看原图

许可协议,这里没有选择的余地，按“F8”后如下图3

HYPERLINK

查看原图

这里用“向下或向上”方向键选择安装系统所用的分区，如果你已格式化C盘请选择C分区，选择好分区后按“Enter”键回车，出现下图4所示

查看原图

这里对所选分区可以进行格式化,从而转换文件系统格,或保存现有文件系统,有多种选择的余地,但要注意的是NTFS格式可节约磁盘空间提高安全性和减小磁盘碎片但同时存在很多问题MacOS和98/Me下看不到NTFS格式的分区,在这里选“用FAT文件系统格式化磁盘分区(快),按“Enter”键回车，出现下图5所示

查看原图

格式化C盘的警告,按F键将准备格式化c盘,出现下图6所示

HYPERLINK

查看原图

由于所选分区C的空间大于2048M(即2G),FAT文件系统不支持大于2048M的磁盘分区,所以安装程序会用FAT32文件系统格式对C盘进行格式化,按“Enter”键回车，出现下图7所示

查看原图图7中正在格式化C分区;只有用光盘启动或安装启动软盘启动XP安装程序,才能在安装过程中提供格式化分区选项；如果用MS-DOS启动盘启动进入DOS下,运行i386\winnt进行安装XP时,安装XP时没有格式化分区选项。格式化C分区完成后,出现下图8所示

被过滤广告

查看原图

图8中开始复制文件,文件复制完后，安装程序开始初始化Windows配置。然后系统将会自动在15秒后重新启动。重新启动后,出现下图9所示

HYPERLINK

查看原图

9

查看原图

过5分钟后，当提示还需33分钟时将出现如下图10

HYPERLINK

查看原图

区域和语言设置选用默认值就可以了，直接点“下一步”按钮，出现如下图11

查看原图

这里输入你想好的姓名和单位，这里的姓名是你以后注册的用户名，点“下一步”按钮，出现如下图12

HYPERLINK

查看原图

如果你没有预先记下产品密钥（安装序列号）就大件事啦！这里输入安装序列号，点“下一步”按钮，出现如下图13

HYPERLINK

查看原图

安装程序自动为你创建又长又难看的计算机名称,自己可任意更改，输入两次系统管理员密码，请记住这个密码，Administrator系统管理员在系统中具有最高权限，平时登陆系统不需要这个帐号。接着点“下一步”出现如下图14

查看原图

日期和时间设置不用讲,选北京时间，点“下一步”出现如下图15

HYPERLINK

查看原图

开始安装,复制系统文件、安装网络系统，很快出现如下图16

查看原图

让你选择网络安装所用的方式，选典型设置点“下一步”出现如下图17

HYPERLINK

查看原图

点“下一步”出现如下图18

HYPERLINK

查看原图

继续安装，到这里后就不用你参与了，安装程序会自动完成全过程。安装完成后自动重新启动，出现启动画面，如下图19

HYPERLINK

查看原图

第一次启动需要较长时间，请耐心等候，接下来是欢迎使用画面，提示设置系统，如下图20

查看原图

点击右下角的“下一步”按钮，出现设置上网连接画面，如下图21所示

HYPERLINK

查看原图

点击右下角的“下一步”按钮，出现设置上网连接画面，如下图21所示

查看原图

这里建立的宽带拨号连接,不会在桌面上建立拨号连接快捷方式,且默认的拨号连接名称为“我的ISP”(自定义除外);进入桌面后通过连接向导建立的宽带拨号连接,在桌面上会建立拨号连接快捷方式,且默认的拨号连接名称为“宽带连接”(自定义除外)。如果你不想在这里建立宽带拨号连接,请点击“跳过”按钮。

在这里我先创建一个宽带连接,选第一项“数字用户线(ADSL)或电缆调制解调器”,点击“下一步”按钮，如下图22所示

HYPERLINK

查看原图

目前使用的电信或联通(ADSL)住宅用户都有帐号和密码的,所以我选“是,我使用用户名和密码连接”,点击“下一步”按钮，如下图23所示

查看原图

输入电信或联通提供的帐号和密码,在“你的ISP的服务名”处输入你喜欢的名称,该名称作为拨号连接快捷菜单的名称,如果留空系统会自动创建名为“我的ISP”作为该连接的名称,点击“下一步”按钮，如下图24所示

查看原图

已经建立了拨号连接,微软当然想你现在就激活XP啦,不过即使不激活也有30天的试用期,又何必急呢?选择“否,请等候几天提醒我”,点击“下一步”按钮，如下图25所示

HYPERLINK

查看原图

输入一个你平时用来登陆计算机的用户名，点下一步出现如下图26

HYPERLINK

查看原图

点击完成，就结束安装。系统将注销并重新以新用户身份登陆。登陆桌面后如下图27

HYPERLINK

查看原图

六、找回常见的图标

在桌面上点开始-->连接到-->宽带连接，如下图32

查看原图

左键点“宽带连接”不放手，将其拖到桌面空白处,可见到桌面上多了一个“宽带连接”快捷方式。结果如下图33

HYPERLINK

查看原图

然后，右键在桌面空白处点击，在弹出的菜单中选“属性”，即打开显示“属性窗口”如下图34

查看原图

在图中单击“桌面”选项卡，出现如下图35

HYPERLINK

查看原图

在图中的左下部点击“自定义桌面”按钮，出现如下图36

查看原图

在图中的上部，将“我的文档”、“我的电脑”、“网上邻居”和“InternetExplorer”四个项目前面的空格上打钩，然后点“确定”，再“确定”，你将会看到桌面上多了你想要的图标。如下图37

键盘上每个键作用!!!

F1帮助

F2改名

F3搜索

F4地址

F5刷新

F6切换

F10菜单

CTRL+A全选

CTRL+C复制

CTRL+X剪切

CTRL+V粘贴

CTRL+Z撤消

CTRL+O打开

SHIFT+DELETE永久删除

DELETE删除

ALT+ENTER属性

ALT+F4关闭

CTRL+F4关闭

ALT+TAB切换

ALT+ESC切换

ALT+空格键窗口菜单

CTRL+ESC开始菜单

拖动某一项时按CTRL复制所选项目

拖动某一项时按CTRL+SHIFT创建快捷方式

将光盘插入到CD-ROM驱动器时按SHIFT键阻止光盘自动播放

Ctrl+1,2,3...切换到从左边数起第1,2,3...个标签

Ctrl+A全部选中当前页面内容

Ctrl+C复制当前选中内容

Ctrl+D打开“添加收藏”面版(把当前页面添加到收藏夹中)

Ctrl+E打开或关闭“搜索”侧边栏(各种搜索引擎可选)

Ctrl+F打开“查找”面版

Ctrl+G打开或关闭“简易收集”面板

Ctrl+H打开“历史”侧边栏

Ctrl+I打开“收藏夹”侧边栏/另:将所有垂直平铺或水平平铺或层叠的窗口恢复

Ctrl+K关闭除当前和锁定标签外的所有标签

Ctrl+L打开“打开”面版(可以在当前页面打开Iternet地址或其他文件...)

Ctrl+N新建一个空白窗口(可更改,Maxthon选项→标签→新建)

Ctrl+O打开“打开”面版(可以在当前页面打开Iternet地址或其他文件...)

Ctrl+P打开“打印”面板(可以打印网页,图片什么的...)

Ctrl+Q打开“添加到过滤列表”面板(将当前页面地址发送到过滤列表)

Ctrl+R刷新当前页面

Ctrl+S打开“保存网页”面板(可以将当前页面所有内容保存下来)

Ctrl+T垂直平铺所有窗口

Ctrl+V粘贴当前剪贴板内的内容

Ctrl+W关闭当前标签(窗口)

Ctrl+X剪切当前选中内容(一般只用于文本操作)

Ctrl+Y重做刚才动作(一般只用于文本操作)

Ctrl+Z撤消刚才动作(一般只用于文本操作)

Ctrl+F4关闭当前标签(窗口)

Ctrl+F5刷新当前页面

Ctrl+F6按页面打开的先后时间顺序向前切换标签(窗口)

Ctrl+F11隐藏或显示菜单栏

Ctrl+Tab以小菜单方式向下切换标签(窗口)

Ctrl+Enter域名自动完成[url=].**.com[/url](内容可更改,Maxthon选项→地址栏→常规)/另:当输入焦点在搜索栏中时,为高亮关键字

Ctrl+拖曳保存该链接的地址或已选中的文本或指定的图片到一个文件夹中(保存目录可更改,Maxthon选项→保存)

Ctrl+小键盘'+'当前页面放大20%

Ctrl+小键盘'-'当前页面缩小20%