Thisisacommunitythatmaybeusefultoyou One-to-onecommunication/interviewbrochure/resumeoptimization/jobsearchquestions,welcometojointhe”YudaoRapidDevelopmentPlatform“KnowledgePlanet.ThefollowingissomeinformationprovidedbyPlanet: “ProjectPractice(Video)”:Learnfrombooks,“practice”frompastevents “InternetHighFrequencyInterviewQuestions”:Studyingwithyourresume,springblossoms “ArchitecturexSystemDesign”:Overcomingdifficultiesandmasteringhigh-frequencyinterviewscenarioquestions “AdvancingJavaLearningGuide”:systematiclearning,themainstreamtechnologystackoftheInternet “Must-readJavaSourceCodeColumn”:Knowwhatitisandwhyitisso Thisisanopensourceprojectthatmaybeusefultoyou DomesticStarisa100,000+opensourceproject.Thefront-endincludesmanagementbackend+WeChatapplet,andtheback-endsupportsmonomerandmicroservicearchitecture. FunctionscoverRBACpermissions,SaaSmulti-tenancy,datapermissions,mall,payment,workflow,large-screenreports,WeChatpublicaccount,etc.: Bootaddress:https://gitee.com/zhijiantianya/ruoyi-vue-pro Cloudaddress:https://gitee.com/zhijiantianya/yudao-cloud Videotutorial:https://doc.iocoder.cn Source:Internet Multi-levelcachedesigninmicroservicearchitecture clientcache Applicationlayercaching CDNContentDeliveryNetwork Nginxcachemanagement Servicelayercaching In-processcache Distributedcacheservice Ensurecacheconsistency summary Todaywewilltalkaboutthetopicofcachingandseehowtodesignaneffectivemulti-levelcachearchitectureinamicroserviceenvironment.Itmainlyinvolvesthreeaspects: Client-sidecachingforwebapplications; Applicationlayerstaticresourcecaching; Servicelayermulti-levelcaching. First,let’sexplainthemulti-levelcachedesignofmicroservicearchitecture. Multi-levelcachedesigninmicroservicearchitecture Whenitcomestocaching,everysoftwareengineermustbefamiliarwithit.Itisthemostdirectwaytoimproveperformanceincurrentarchitecturedesign.Herewegiveanexample: Rediscache AssumethattheapplicationstoresrawdatainaMySQLdatabase.Asweallknow,theMySQLdatabasestoresdataontheharddisktopreventlossduetopowerfailure.However,duetothephysicaldesignoftheharddisk,eventhebest-performingenterprise-classSSDharddiskisanorderofmagnitudeworsethantheIOlevelofhigh-speeddevicessuchasmemory.Internetapplicationsrepresentedbye-commercecompaniessuchasTaobaoandJD.comaretypicalscenariosof”morereadingandlesswriting”.Therefore,weneedtoseparatethereadingandwritingofdatainthedesign.Whendataisloaded,itisdirectlyplacedonthediskforprocessing,whilemorethan90%ofthedatareadingoperationsareextractedfromthein-memoryNoSQLdatabaserepresentedbyRedis,andthehighthroughputofthememoryisusedtocompletethedataextractioninstantly.TheroleofRedishereiswhatweoftensaycache. Ofcourse,cachingisnotjustaformofreplacingharddiskswithmemory.Inadistributedarchitecture,cachinghasitsowndesignateachlayer.Let’sexplainitthroughthemulti-levelcachearchitecturediagramofthismicroserviceasthemainline. OverviewofXcachemulti-levelcachearchitecture Thisdiagramcontainsfourlayersfromtoptobottom:Client,applicationlayer,servicelayeranddatalayer. Backendmanagementsystem+userappletimplementedbasedonSpringBoot+MyBatisPlus+Vue&Element,supportingRBACdynamicpermissions,multi-tenancy,datapermissions,workflow,three-partylogin,payment,SMS,mallandotherfunctions Projectaddress:https://github.com/YunaiV/ruoyi-vue-pro Videotutorial:https://doc.iocoder.cn/video/ Clientcache TheXmallclientisabrowser.Atthebrowserlevel,wemainlycachestaticresourcessuchasimages,CSS,JS,andfontsinHTML. browsercache Let’staketheBaiduLogoimageasanexample.BaiducontrolsthevalidityperiodofthestaticimagethroughtheExpiresresponseheaderinHTTP.Expiresrepresentsexpirationtime.ThecurrentBaiduLogoexpirationtimeisFebruary8,2031,9:26:31.Duringthisperiodoftime,thebrowserwillcachetheimagelocallyasafile.Whenyouvisitagain,youwillseetheprompt”fromdiskcache”.Atthistime,thebrowserwillnolongermakeanactualrequesttotheserverandwillreaditdirectlyfromthelocalcomputer.Getcachedimages.BysettingExpiresonthebrowserside,thebandwidthlosscausedbyrepeatedrequestsforstaticresourcescanbegreatlyreduced.Thisisabasicandimportantsettinginhigh-concurrencywebapplications. Backendmanagementsystem+userappletimplementedbasedonSpringCloudAlibaba+Gateway+Nacos+RocketMQ+Vue&Element,supportingRBACdynamicpermissions,multi-tenancy,datapermissions,workflow,three-partylogin,payment,SMS,mallandotherfunctions Projectaddress:https://github.com/YunaiV/yudao-cloud Videotutorial:https://doc.iocoder.cn/video/ Applicationlayercache SowhereisExpiresset?Forthebrowser,itisjustaclientandisonlyresponsibleforreadingtheExpiresresponseheader.Expiresmustbesetattheapplicationlayer,thatis,CDNandNginx. CDNContentDeliveryNetwork ThefullnameofCDNisContentDeliveryNetwork,whichisthecontentdistributionnetwork.ItisthemaintechnicalmeansforthedistributionofstaticresourcesontheInternet. CDNContentDeliveryNetwork Chinaisavastcountry,withthousandsofkilometersfromBeijingtoShanghai.IfalargenumberofShanghaiuserswanttoaccesstheresourcesofserversinBeijingthousandsofmilesawayatthesametime,suchalongcommunicationwillinevitablybringhighdelaysandmoreuncontrollablefactorsaffectingdatatransmission.IfthereissomemechanismthatallowsstaticfilesinBeijingtobecachedonserversinShanghai,Shanghaiuserscanautomaticallyaccessthenearestservertoobtainresources.Thiscangreatlyreducenetworklatencyandimprovesystemavailability.ThedistributedcachingtechnologyjustmentionedistheCDN(contentdistributionnetwork)weoftenmention. Forwide-areaInternetapplications,CDNisalmostanecessaryinfrastructure,whicheffectivelysolvestheproblemsofconcentratedbandwidthoccupationanddatadistribution.Staticresourcessuchasimages,audioandvideo,CSS,andJSinwebpagescanbeobtainedfromthenearestCDNserver. ThecoreofCDNtechnologyis”smartDNS”.SmartDNSwillautomaticallydeterminethenearestaccessCDNnodebasedontheuser’sIPaddress.Let’stakethefollowingfigureasanexample: CDNexecutionprocess […]
Tag: multi-level
el-table merges cells with the same value + multi-level header
<el-table border :data=”costList” :span-method=”objectSpanMethod” > <el-table-column label=”Category” prop=”Category” width=”120″> </el-table-column> <el-table-column label=”Expense Account” prop=”Expense Account” width=”120″> </el-table-column> <el-table-column v-for=”(item, index) in costTitle” :key=”index” :label=”item.name” width=”120″ :prop=\ “item”> <el-table-column :label=”item.amount” width=”120″> <el-table-column v-for=”(val, ind) in item.data” :key=”ind” :label=”val.substr(val.length – 2)” :prop =”val” width=”120″> </el-table-column> </el-table-column> </el-table-column> </el-table> export default {<!– –> name: “OaZyfy”, data() {<!– –> […]
Teach you step by step to implement multi-level comments using gin+gorm+mysql
Article directory write in front Warehouse Address Database Design how to use Write in front Without further ado, let’s take a look at the final effect of multi-level comments: And comments can be nested forever, achieving unlimited comments and replies. It’s a bit similar to the comment section of Douyin app. Warehouse address Regarding the […]
Selection processing of el-table multi-level tree data
Achieve results Header <el-table ref=”elTable” v-loading=”loading” size=”mini” element-loading-text=”Loading” element-loading-spinner=”el-icon-loading” :data=”tableData” row-key=”id” border :row-class-name=”rowClassNameFun” :header-row-class-name=”headerRowClassName” @select=”selectFun” @select-all=”selectAllFun” > Method //Recursively process table tree data handleData(tableData) {<!– –> if (tableData.length !== 0) {<!– –> for (const item of tableData) {<!– –> // Used to handle hierarchical table selection (isSelect: false: unselected, true: selected, ‘half’: intermediate state) item.isSelect […]
Method to obtain map boundary data in real time in October 2023, multi-level linkage of provinces, cities, counties and streets [attached real-time geoJson data download]
First, let’s take a look at the renderings Online experience address: https://geojson.hxkj.vip, and provide real-time geoJson data file download The downloadable data includes provincial-level geojson administrative boundary data, municipal-level geojson administrative boundary data, district/county-level geojson administrative boundary data, provincial, city, and county street administrative code four-level linkage data (accurate to the township/street level), provincial Five-level […]
[Solar multi-level inverter] Research on solar-powered multi-level inverter using SPWM technology (simulink)…
?About the author: A Matlab simulation developer who loves scientific research. He cultivates his mind and improves his technology simultaneously. For cooperation on MATLAB projects, please send a private message. Personal homepage: Matlab Research Studio Personal credo: Investigate things to gain knowledge. For more complete Matlab code and simulation customization content, click Intelligent optimization algorithm […]
Dynamically rendering multi-level directories based on Vue+elementUI menu component
Dynamic rendering of multi-level directories based on Vue + elementUI menu component Description of requirements The backend interface is to query the list of child directories through the parent directory id, so I need to dynamically render a multi-level directory, and the directory depth is uncertain. Backend return data reference The more critical data is […]
MyBatis’ dynamic SQL, proxy mechanism and multi-level cache
Author: Xiaoyao Sean Introduction: A web website\game server back-end developer majoring in Java Home page: https://blog.csdn.net/Ureliable If you think the blogger’s article is good, you can support it three times~ If you need my support, please send a private message or leave a comment! MyBatis’ dynamic SQL, proxy mechanism and multi-level cache Preface 1. Dynamic […]
[Embedded] Use the MultiButton open source library to drive buttons and control multi-level interface switching
Table of Contents 1. Background description 2. References Three MultiButton open source library transplantation Four Design Implementation–Drive Button 5 Design Implementation–Interface Processing One background description You need to make a program that controls multi-level interface switching and interface actions through different keys. After consulting relevant information, I found that most applications on the Internet are […]
vue-router uses (route jump, related api, page jump with data, multi-level routing, route guard, two working modes of the router), series (localStorage, sessionStorage), combined api and configuration item api
1 vue-router usage 1 vue-router use 1.1 Route jump 1.2 Related APIs 1.3 Page jump, carrying data 1.4 Multi-level routing 1.5 Route guard 1.6 Two working modes of the router 2 localStorage, sessionStorage, cookie 3 vue3 introduction 4 Combined API and configuration item API 1 vue-router use -In the future, it is the switching of […]