教材网站开发实录（5）首页

　　首页目前长这样：
　　原本打算用Laravelmix做前端工程流，只可惜能力有限，没有成功，放弃了。最终选择了直接使用vue2和elementui的cdn地址。
　　以下记录步骤：html：！DOCTYPEhtmlhtmlheadmetacharsetUTF8！importCSSlinkrelstylesheethrefhttps：unpkg。comelementuilibthemechalkindex。csslinkrelstylesheethrefhttps：cdn。bootcss。comgithubmarkdowncss2。10。0githubmarkdown。min。cssstyle。elrow｛marginbottom：20：lastchild｛marginbottom：0；｝｝。elcol｛borderradius：4｝。bgpurpledark｛background：99a9｝。bgpurple｛background：d3dce6；｝。bgpurplelight｛background：e5e9f2；｝。gridcontent｛borderradius：4minheight：36｝。rowbg｛padding：10px0；backgroundcolor：f9｝styleheadbodyelrowelcol：span6imgdatav73637230srcc2021imgdataimg。jpgdatasrcimgq01。71396。comblugbe754ae329811c32。jpgelementlogoclassnavlogoelcolelcol：span18elinputvmodelinputplaceholder请输入内容elinputelcolelrowelpiderelpiderelrowelcol：span6eltreecurrentnodekey3vbind：highlightcurrenthinodekeyid：defaultexpandedkeys〔1〕：datatreeData：propsdefaultPropsnodeclickhandleNodeClickeltreeelcolelcol：span18｛｛！！content！！｝｝elcolelrowelbacktoptarget。pagecomponentscrolliclasseliconcarettopielbacktopbody！importVuebeforeElement！importJavaScripthtml
　　使用了element中的layout做页面布局。左侧导航使用了tree组件。
　　注意：拿到后端的json数据后，需要eval将json字符串转成对象。后端
　　数据库存储的文本内容就是markdown格式。markdown格式在前端无法直接显示，所以在输出前转化成html了，使用的这个包composerrequireerusevparsedown。
　　菜单因为是无限菜单，所以要用递归去找子菜单：functiongetCategory（data，parentid0）｛treearray（）；foreach（dataaskv）｛if（v〔parentId〕parentid）｛unset（data〔k〕）；if（！empty（data））｛childrenself：：getCategory（data，v〔id〕）；if（！empty（children））｛v〔children〕｝｝v〔label〕v〔name〕；if（v〔id〕4）｛v〔highlightcurrent〕｝tree〔〕v；｝｝｝明天做什么
　　明天做搜索，使用LaravelScount。希望一切顺利。