微课商城系统开发: 配置路由与视图;商品首页后端数据渲染;

配置路由与视图

两个app里面分别创建urls文件,然后在主url文件中配置路径。
在这里插入图片描述
第一行是商城的主页;第二行是课程的详细页,里面要传入课程的id;第三行是课程视频播放页,传入课程id;第四行是视频流,课程视频播放页中,会以流的形式向视频流索要mp4的播放。然后,我们通过Alt+enter的快捷键方式来快速创建视图函数。
在这里插入图片描述
然后,用户的urls文件。第一行是用户的主页;第二行,已经购买的课程;第三行,加入购物车的课程;第四行,登陆;第五环,注册;第六行,注销;第七行,把某个course添加到购物车里,是需要把它对应的id传入,在数据库中完成增删改查。第八行,加入购物车。
在这里插入图片描述
然后在views文件中创建相应的视图函数。

商品首页后端数据渲染

首先,我们拿到前端为我们开发好的静态资源,各种html文件,我们要把它们作为模板。把静态资源文件复制粘贴到pycharm的根文件路径当中。然后,把所有的html文件全部拖拽到templetes文件夹中。然后,我们找到course app的views文件,然后找到index handler首页视图处理器。这样,就渲染到了index.html这个首页。
在这里插入图片描述
但是,我们启动,然后查看首页的时候,发现并没有加载成想要的样式。原因在于,静态文件夹没有配置。我们需要找到settings文件,然后在里面加入staticfiles,这样去配置静态文件。
在这里插入图片描述
然后我们刷新页面,发现可以访问到静态资源了。这里面是因为我们上面输入了static,那么就会在服务器中寻找static文件夹,然后找到每个文件的地址,进行url拼接。那么打个比方,我要在网页中看2.jpg,就直接在网址中输入img,2.jpg,就可以在网页中看到图片了。
然后,我们看模板文件,发现里面有大量的相似内容,可以对模板进行处理。利用模板继承,我们新建一个base.html,点击index.html,然后f5,会帮我们复制出一个跟index一模一样的base.html。然后让所有的html文件都继承base.html。我们对base进行处理,先观察结构,然后block。
在这里插入图片描述
在这里插入图片描述
对article和footer都进行block处理。然后,我们对浏览器最左上角显示的名称也进行处理。
在这里插入图片描述
因为每个页面的header和footer都是相同的,而主体部分,article的内容不一样,所以我们把base文件的article部分的内容进行删除。
在这里插入图片描述
然后,我们依次将每个html文件都对base文件进行继承,然后重写标题,重写article。
在这里插入图片描述
在这里插入图片描述
把底下article里面的所有内容全部剪切,黏贴到重写的这里面,然后再把其余所有的内容全部删除。我们重新刷新网页,显示效果和原来应该是一样的。然后,我们把其他所有的html文件都进行这样的继承和重写。

下面,渲染商品具体的课程种类和课程信息

在course的views文件中,导类,然后完善index handler这个视图函数。
在这里插入图片描述
然后,我们把index html里面的一些原有内容删掉,因为那是之前写的原版的article。
在这里插入图片描述
删掉之后,我们改成这样,两个for循环,遍历课程种类和课程内容。然后里面做一些相应的修改。
在这里插入图片描述
在这里插入图片描述
但是如果现在刷新页面会出现问题,因为一开始存储了一个图片和一个mp4文件在根路径当中。
在这里插入图片描述
这里,只需要在后台管理里面,把这个图片和mp4文件重新上传一下。那么,我们再在static里面找的时候,就会发现文件出现在了那儿。然后,我们把根路径下的文件删掉。
这会儿,再刷新页面,就okay了。同时,我们可以对第二个课程的课程种类在admin中进行管理,重新编辑,再回到首页看看。

发布了16 篇原创文章 · 获赞 0 · 访问量 640

猜你喜欢

转载自blog.csdn.net/weixin_45620570/article/details/104092242
今日推荐