目录

python-web商品前端展示pycharm可视化工具

目录

python–web商品前端展示(pycharm可视化工具)

我们做好后端的操作(用户的管理,商品的添加删除,都是后端我们要进行操作的,后端在我的博客也有,希望对你有帮助)之后就需要做前端将商品展示给顾客。

  1. 我们将在views文件中定义我们视图函数 ,当浏览器 向服务器发送一个http请求时,这些函数将被调用。

    在views里先导入我们的数据库

    .models使我们当前文件夹的models文件,该文件里定义了我们的商品类Product

from .models import Product#导入我们的商品库

在这个函数里获取商品的信息

def index(request):#调用index函数的地址在urls中被定义着
    #获取商品的数据有很多种方式,.get()获得单一产品,等等
    products = Product.objects.all()#返回所有的商品数据
    #return HttpResponse('hello word')
  1. 创建一个HTML模板来讲这个产品列表呈现给用户

    1.创建一个包templates在我们的应用包下(不是Django自带的包),在templates下建一个index.html文件

    2.我们现在html中写点东西用于测试,

<h1>Products</h1>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

3.再回到views

def index(request):#调用index函数的地址在urls中被定义着
    #获取商品的数据有很多种方式,.get()获得单一产品,等等
    products = Product.objects.all()#返回所有的商品数据
    return render(request,'index.html',{'products':products})
    #render是渲染函数要导入,提供三个参数,请求对象,模板,传给模板的字典

执行

https://i-blog.csdnimg.cn/blog_migrate/4cddac9c8927f2c18d5dd366c15626fe.png

4.接下来创建我们的商品模板

<h1>Products</h1>
<ul>
    {% for product in products %}
        <li>{{ product.name }} (${{ product.price }})</li>

    {% endfor %}
</ul>

5.商品模块好了,我们还要用一些框架来进行修饰, bookstrap框架

新建一个base.html,在这里面编写框架,一般都是找现成的,

并在其中挖个孔,把index.html放进去

https://i-blog.csdnimg.cn/blog_migrate/4a2fd89a1dc47be2a2e0ee993ff34c48.png

6.把两个html联系起来

https://i-blog.csdnimg.cn/blog_migrate/af6f79d175c46ce57a14bb570a35509e.png

7.这就是整个商品的显示,带图片。 https://i-blog.csdnimg.cn/blog_migrate/1a8339918620011e8f69365a4996e538.png