制作一个静态网站源码分享(纯静态网站源码)

大家好，今天来为大家解答制作一个静态网站源码分享这个问题的一些问题点，包括纯静态网站源码也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

声明：本次文章是看了B站上的视频和分享的代码笔记后，自己敲了一遍代码。然后再敲一遍代码的同时写文章梳理逻辑，看不懂的同学可以去看原文章和视频。文章如有雷同，可联系我删除！视频链接：https://www.bilibili.com/video/BV1pq4y1W7a1?spm_id_from=333.999.0.0

博客目录：

一、基于Django+mysql的点餐系统设计–第一篇(开篇：确认需求功能、数据库设计、程序设计)

二、基于Django+mysql的点餐系统设计–第二篇(搭建工程、前后端调试)

三、基于Django+mysql的点餐系统设计–第三篇(编写后台员工管理页面)

四、基于Django+mysql的点餐系统设计–第四篇(编写后台菜品分类管理功能)

五、基于Django+mysql的点餐系统设计–第五篇(编写后台店铺管理页面)

六、基于Django+mysql的点餐系统设计-第六篇(编写后台菜品管理页面)

七、基于Django+mysql的点餐系统设计-第七篇(编写后台会员管理页面及后台系统技术点总结)

八、基于Django+mysql的点餐系统设计-第八篇(H5手机移动端点餐：主页调试-静态页面)

本章源码下载地址：https://github.com/hopeSuceess/testorder/tree/testorder_20220526_01

本章开始编写H5手机移动端点餐的代码，不同于后台管理子系统，H5手机移动端点餐在用户访问到浏览页后，涉及到的增删改查的操作基本都在这一个页面完成。本章的主要任务是主页调试，首先将前端的css、font、img、js文件夹引入到static/mobile目录下。

然后在templates/mobile目录下引入base.html和index.html

这里说下base.html和index.html：base.html是父页面，搭建了H5手机移动端点餐页面的主框架。作为餐品浏览主页的index.html，首先要继承base.html.

这次为了方便调试，index.html里面的餐品信息没有接收后端传过来的信息进行遍历，而是把index.html写成了静态页面，也就是餐品信息在前端固定写好了，如下图：

{%extends&39;%}\n{%loadstatic%}\n\n{%blockmainbody%}\n<!–头部–>\n<headerclass=&34;id=&34;>\n<divclass=&34;>\n<h1>田老师红烧肉-朝阳将台路店</h1>\n</div>\n<!–通知公告/客服电话–>\n</header>\n\n<!–搜索内容–>\n<divclass=&34;id=&34;>\n<iclass=&34;></i>\n</div>\n\n<!–内容区–>\n<articleclass=&34;>\n\n<!–左侧栏目–>\n<divclass=&34;id=&34;>\n<pclass=&34;>分类导航</p>\n<ahref=&34;onclick=&34;>双拼套餐</a>\n<ahref=&34;onclick=&34;class=&34;>盖饭</a>\n<ahref=&34;onclick=&34;>小菜</a>\n<ahref=&34;onclick=&34;>汤/饮料</a>\n</div>\n\n<!–右侧产品–>\n<divclass=&34;>\n<!–产品列表–>\n<olclass=&34;id=&34;style=&34;>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;javascript:doCartAdd(1)&34;list-cart&34;icon-cartadd&34;line&34;34;>\n<divclass=&34;><imgsrc=&39;/mobile/img/img05.jpg&34;alt=&34;></div>\n<divclass=&34;><h3>乌拉圭进口牛肋条</h3><font>BTV推荐，全网独家热销</font><b>￥59.00</b><p>乐果派旗舰店</p></div>\n</a>\n<ahref=&34;class=&34;><iclass=&34;></i></a>\n</li>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n</ol>\n<olclass=&34;id=&34;style=&34;>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n</ol>\n<olclass=&34;id=&34;style=&34;>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n<liclass=&34;>\n<ahref=&&34;pro-img&34;{%static&39;%}&34;&34;pro-con&34;34;class=&34;><iclass=&34;></i></a>\n</li>\n</ol>\n<br><br>\n</div>\n\n<!–购物车–>\n<divclass=&34;id=&34;>\n\n<divclass=&34;>\n<buttonclass=&34;onclick=&34;><iclass=&34;></i>清空</button>\n<buttonclass=&34;><iclass=&34;></i></button>\n</div>\n\n<divclass=&34;>\n<ulclass=&34;>\n<!–li>\n<imgsrc=&34;alt=&34;><p>家乐都有机里脊肉500g</p><span>￥150.00</span>\n<divclass=&34;><button><iclass=&34;></i></button><inputtype=&34;readonlyclass=&34;value=&34;><button><iclass=&34;></i></button></div>\n</li>\n<li>\n<imgsrc=&34;alt=&34;><p>法国猪肋排1kg/袋</p><span>￥150.00</span>\n<divclass=&34;><button><iclass=&34;></i></button><inputtype=&34;class=&34;value=&34;><button><iclass=&34;></i></button></div>\n</li>\n<li>\n<imgsrc=&34;alt=&34;><p>乌拉圭进口（无骨）牛肋条约1kg</p><span>￥150.00</span>\n<divclass=&34;><button><iclass=&34;></i></button><inputtype=&34;class=&34;value=&34;><button><iclass=&34;></i></button></div>\n</li–>\n</ul>\n</div>\n\n<divclass=&34;>\n共计：<span>￥0.00</span>\n</div>\n</div>\n\n</article>\n\n<!–底部栏目–>\n<menu>\n<ahref=&34;><iclass=&34;></i>切换店铺</a>\n<!–ahref=&34;><iclass=&34;></i>订单</a–>\n<ahref=&34;id=&34;><iclass=&34;><span>0</span></i>购物车</a>\n<ahref=&34;><iclass=&34;></i>我的</a>\n<a><buttononclick=&39;&34;>去结算</button></a>\n</menu>\n\n<!–弹出圈圈loading–>\n<divclass=&34;style=&34;><i></i></div>\n{%endblock%}\n\n\n{%blockmyjavascript%}\n<scripttype=&34;>\nfunctiondoselectList(ob,m){\n$(&sortNava&34;select&34;select&34;ol.list-content&34;34;+m).show();\nreturnfalse;\n}\n\ncartlist=[];\n\nfunctiondoCartAdd(id){\nshoplist=[{&39;:1,&39;:&39;,&39;:&39;,&39;:35.00,&39;:1},{&39;:2,&39;:&39;,&39;:&39;,&39;:90.00,&39;:1}];\nshop=shoplist[id-1];\nvarb=true;\nfor(vari=0;i<cartlist.length;i++){\nif(cartlist[i].id==id){\nb=false;\ncartlist[i].num+=1;\nbreak;\n}\n}\nif(b){\ncartlist.push(shop);\n}\ndoShowCart();\n\n}\n\nfunctiondoCartClear(){\ncartlist=[];\ndoShowCart();\n}\n\nfunctiondoShowCart(){\nvarcartContent=$(&cartContentdiv.cartContentListul.line-li&34;<li>&39;<imgsrc=&39;+cartlist[i].cover_pic+&34;alt=&34;><p>&39;</p><span>￥&39;</span>&39;<divclass=&34;><button><iclass=&34;></i></button><inputtype=&34;readonlyclass=&34;value=&39;+cartlist[i].num+&34;><button><iclass=&34;></i></button></div>&34;</li>&34;34;).html(&34;+total);\n$(&orderCarti.icon-cartspan&path(&39;,admin.site.urls),\n39;&name=&39;：在前端代码中通过name值也能找到此处路由\npath(&39;,index.index,name=&34;)\n]

说完了url控制器，咱们看下views层怎么实现。因为前端是静态页面，view层只需将访问链接渲染到静态页面index.html上就可以，因此非常简单，看下面代码：

defindex(request):\nreturnrender(request,&34;)

因为是调试，前端用的静态页面，所以不需要调用Models层。现在写完了url控制器和views层、templates层，可以启动程序访问页面调试了，访问：http://localhost:8000/mobile/页面展示正常，如下图：

经过上面的调试说明H5手机移动端点餐的主页面是调试通了，接下来咱们将静态页面改为动态页面，这里说的是静态页面，下一篇开始说主页的动态页面和切换店铺

好了，文章到这里就结束啦，如果本次分享的制作一个静态网站源码分享和纯静态网站源码问题对您有所帮助，还望关注下本站哦！