在django的html中用table顯示書籍信息的操作步驟

、依次創建項目和創建APP，APP名為Books

2、在F:\IT2\PYTHON\test1\demo14\Books\models.py中編寫代碼，代碼如下：

from django.db import models

# Create your models here.

class Books(models.Model):
    name=models.CharField("讀書",max_length=100,null=False)
    author=models.CharField("作者",max_length=100,null=False)
    price=models.FloatField("價格",max_length=100)
    sales=models.IntegerField("銷量")
    class Meta:
        db_table="Books"
    def __str__(self):
        return "書籍的名稱是：{}，書籍的作者是：{}，書籍的價格是：{}，書籍的銷量是：{}".format(self.name,self.author,self.price,self.sales)

3、在F:\IT2\PYTHON\test1\demo14\Books\views.py中編寫代碼，代碼如下：

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
from .models import Books
def index(request):
    context={
        "types":["讀書","旅行","運動","工作"]
    }
    return render(request,'index.html',context=context)

def add(request):
    book=Books(name="水滸傳",author="施耐庵",price=60,sales=1000)
    book.save()
    print(book)
    return HttpResponse("書籍添加成功")
def add2(request):
    book=Books(name="西游記",author="吳承恩",price=79,sales=600)
    book.save()
    print(book)
    return HttpResponse("書籍添加成功")
def add3(reeuqst):
    book=Books(name="三國演義",author="羅貫中",price=99,sales=10200)
    book.save()
    print(book)
    return HttpResponse("書籍添加成功")
def add4(request):
    book=Books(name="紅樓夢",author="曹雪芹",price=101,sales=10300)
    book.save()
    print(book)
    return HttpResponse("書籍添加成功")

def showall(request):
    books=Books.objects.all()
    print(books)
    return render(request,"Books.html",context={"books":books})

4、在F:\IT2\PYTHON\test1\demo14\Books\urls.py中編寫代碼設置APP路由，代碼如下：

from django.urls import path

from . import views

urlpatterns=[
    path('',views.index,name="首頁"),
    path('add/',views.add,name="書籍"),
    path('add2/',views.add2,name="書籍2"),
    path('add3/',views.add3,name="書籍3"),
    path('add4/',views.add4,name="書籍4"),
    path('showall/',views.showall,name="展示所有"),
]

5、在F:\IT2\PYTHON\test1\demo14\demo14\urls.py里設置項目路由，代碼如下：

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('Books/',include("Books.urls")),
]

6、在F:\IT2\PYTHON\test1\demo14\demo14\settings.py設置項目配置文件，配置的地方代碼如下：


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Books',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

7、創建F:\IT2\PYTHON\test1\demo14\templates\Books.html，并編寫代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>書籍頁</title>
</head>
<body>
<table border="1">

<tr>
    <th>書籍名稱</th>
    <th>書籍作者</th>
    <th>書籍價格</th>
    <th>書籍銷量</th>
</tr>
    {%for book in books%}
    <tr>

    <td>{{book.name}}</td>
    <td>{{book.author}}</td>
    <td>{{book.price}}</td>
    <td>{{book.sales}}</td>

    </tr>
    {%endfor%}
</table>
</body>
</html>

8、創建F:\IT2\PYTHON\test1\demo14\templates\index.html，編寫代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
</head>
<body>
{%for type in types%}
{{type}}
{%endfor%}
</body>
</html>

9、在終端中輸入命令 python manage.py runserver，運行結果如下圖所示：

10、在瀏覽器輸入網址http://127.0.0.1:8000/Books/showall/，回車后，瀏覽器呈現的頁面如下圖所示：

在pycharm編輯器里運行的結果如下圖所示：

是我大二的課設內容，閑著沒事拿出來整理一下。很low我也不想拿出來優化，適合小白看看

注：其實這部分不太想整理，一是我做的效果真的很丑，二是內容比較簡單，可以參考JAVAWEB入門書籍，會一點css,javascript,html,jsp就可以了。看著內容很多，其實你只需要學最基礎的就可以做，差不多三天就可以學完。重點是編譯環境的配置，其實也可以直接用txt寫好以后改后綴，但是這種方式需要你對幾種語言文件的后綴名和作用有一定的了解，我之前整理的《網絡開發構件概述》（分類：javaweb）里簡單的寫了，可以參考。

設計結果：

–最基礎的頁面index.html和頁面的設置index.css–

難點在菜單欄的設置，我采用的是<ul><li>標簽混合使用，再在css文件里設置其樣式和屬性。

其他的操作例如網上登錄，我用的是一個html文件和jsp文件，html文件就是做頁面和需要填寫的表單以及提交按鈕，jsp文件就是對填寫的內容進行獲取和存儲處理。

家長社區需要三個文件，首先是頁面html也是一個表單填寫要發送的信息并提交，第一個jsp文件就是獲取填寫信息并給第二個jsp顯示，在顯示的時候用到javascript函數處理顯示內容，在這里沒有做過多的設置，僅僅是簡單的頁面刷新。

有需要完整代碼的，可以私信我。

家好，我是楊成功。

自從《前端開發實戰派》出版以后，好多買過的小伙伴都聯系我，問我有沒有電子書？紙質書在公司看不方便，一些現成的代碼沒辦法復制。

確實沒有電子版，我也聽大家的建議上微信讀書，結果那邊審核沒通過。我想不行我自己搞一個電子書唄，給買了紙書的朋友免費閱讀，方便他們隨時查閱。

經過一番調研，VitePress 的 UI 我最喜歡，擴展性也非常好，所以就用它來搭建。

新建項目

在一個空文件夾下，使用命令生成項目：

sh
復制代碼$ npx vitepress init

全部使用默認選項，生成結構如下：

圖中的 .vitepress/config.mts 就是 VitePress 的配置文件。另外三個 .md 文件是 Markdown 內容，VitePress 會根據文件名自動生成路由，并將文件內容轉換為 HTML 頁面。

為了代碼更優雅，一般會把 Markdown 文件放在 docs 目錄下。只需要添加一個配置：

js復制代碼// config.mts
export default defineConfig({
  srcDir: 'docs',
});

改造后的目錄結構是這樣：

安裝依賴并運行項目：

sh復制代碼$ yarn add vitepress vue
$ yarn run docs:dev

前期設計的難點

電子書的內容不完全對外開放，只有買過紙書的人才能閱讀。和掘金小冊差不多，只能看部分內容，登錄或購買后才能解鎖全部章節。

而 VitePress 是一個靜態站點生成器，默認只解析 Markdown。要想實現上述的功能，必須用到純 Vue 組件，這需要通過擴展默認主題來實現。

擴展默認主題，也就是擴展 VitePress 的原始 Vue 組件，達到自定義的效果。

遵循這個思路，我們需要擴展的內容如下：

添加登錄頁面，允許用戶登錄。
添加用戶中心頁面，展示用戶信息、退出登錄。
修改頭部組件，展示登錄入口。
頁面根組件，獲取當前用戶狀態。
修改內容組件，無權限時不展示內容。

當然了還需要接入幾個接口：

登錄/注冊接口。
獲取當前用戶信息接口。
驗證當前用戶權限的接口。

擴展默認主題

擴展默認主題，首先要創建一個 .vitepress/theme 文件夾，用來存放主題的組件、樣式等代碼。該文件夾下新建 index.ts 表示主題入口文件。

入口文件導出主題配置：

js復制代碼// index.ts
import Layout from './Layout.vue';

export default {
  Layout,
  enhanceApp({ app, router, siteData }) {
    // ...
  },
};

上面代碼導入了一個 Layout.vue，這個組件是自定義布局組件：

vue復制代碼<!-- Layout.vue -->
<script setup>
import DefaultTheme from 'vitepress/theme';

const { Layout } = DefaultTheme;
</script>

<template>
  <Layout>
    <template #nav-bar-content-after>
      <button>登錄</button>
    </template>
  </Layout>
</template>

為啥需要這個組件呢？因為該組件是項目根組件，可以從兩個方面擴展：

（1）使用自定義插槽。

Layout 組件提供了許多插槽，允許我們在頁面的多處位置插入內容。比如上面代碼中的 nav-bar-content-after 插槽，會在頭部組件右側插入登錄按鈕。

具體有哪些插槽，詳見這里。

（2）做全局初始化。

當刷新頁面時，需要做一些初始化操作，比如調用接口、監聽某些狀態等。

這個時候可以使用 Vue 的各種鉤子函數，比如 onMounted：

js復制代碼// Layout.vue
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  console.log('初始化、請求接口');
});
</script>

如何定制內容組件？

VitePress 的內容組件，會把所有 Markdown 內容渲染出來。但是如果用戶沒有登錄，我們不允許展示內容，而是提示用戶登錄，就像掘金小冊這樣：

定制內容組件，核心是在內容渲染的區域加一個判斷：如果用戶登錄且驗證通過，渲染內容即可；否則，展示類似上圖的提示登錄界面。

接下來我翻了 VitePress 的源碼，找到了這個名為 VPDoc.vue 的組件：

github.com/vuejs/vitep…

在上方組件大概 46 行，我找到了內容渲染區域：

就在這個位置，添加一個判斷，就達到我們想要的效果了：

js復制代碼<main class="main">
  <Content
    class="vp-doc"
    v-if="isLogin"
    :class="[
      pageName,
      theme.externalLinkIcon && 'external-link-icon-enabled'
    ]"
  />
  <div v-else>
    <h4>登錄后閱讀全文</h4>
    <button>去登錄</button>
  </div>
</main>

那怎么讓這個修改生效呢？

VitePress 提供了一個重寫內部組件的方案。將 VPDoc.vue 組件拷貝到本地，按照上述方法修改，重命名為 CusVPDoc.vue。

在配置文件 .vitepress/config.ts 中添加重寫邏輯：

js復制代碼// config.ts
export default defineConfig({
  vite: {
    resolve: {
      alias: [
        {
          find: /^.*\/VPDoc\.vue$/,
          replacement: fileURLToPath(new URL('./components/CusVPDoc.vue', import.meta.url)),
        },
      ],
    },
  },
});

這樣便實現了自定義內容組件，電子書截圖如下：

添加自定義頁面

添加自定義頁面，首先要創建一個自定義組件。

以登錄頁面為例，創建一個自定義組件 CusLogin.vue，編寫登錄頁面和邏輯，然后將其注冊為一個全局組件。在 Markdown 頁面文件中，直接使用這個組件。

注冊全局組件的方法，是在主題入口文件中添加以下配置：

js復制代碼// .vitepress/theme/index.ts
import CusLogin from './components/CusLogin.vue'

export default {
  ...
  enhanceApp({ app}) {
    app.component("CusLogin", CusLogin); // 注冊全局組件
    // ...
  },
} satisfies Theme;

最后，新建 Markdown 文件 login.md，寫入內容如下：

md復制代碼---
layout: page
---

<CusLogin />

現在訪問路由 “/login” 就可以看到自定義登錄頁面了。

全局狀態管理

涉及到用戶登錄，那么必然會涉及在多個組件中共享登錄信息。

如果要做完全的狀態管理，不用說，安裝 Pinia 并經過一系列配置，可以實現。但是我們的需求只是共享登錄信息，完全沒必要再裝一套 Pinia，使用組合式函數就可以了。

具體怎么實現，在另一篇文章 Vue3 新項目，沒必要再用 Pinia 了！中有詳細介紹。

接入 Bootstrap

自定義頁面，總是需要一個 UI 框架。上面的登錄頁面中，我使用了 Bootstrap。

Vitepress 使用 UI 框架有一個限制：必須兼容 SSR。因為 Vitepress 本質上使用了 Vue 的服務端渲染功能，在構建期間生成多個 HTML 頁面，并不是常見的單頁面應用。

這意味著，Vue 組件只有在 beforeMount 或 mounted 鉤子中才能訪問 DOM API。

而 Bootstrap 不需要打包構建就可以使用 UI，非常適合 Vitepress。

首先安裝 Bootstrap：

sh
復制代碼$ yarn add bootstrap

然后在主題入口文件中引入 Sass 和 JS 文件：

js復制代碼import 'bootstrap/scss/bootstrap-cus.scss';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

按常理說，這樣就可以了，但是實際運行會報錯：找不到某個 DOM API。

還記得那個限制嗎？必須兼容 SSR！因此不能直接引入 JS 文件。

解決方法是在自定義布局組件 Layout.vue 中通過異步的方式引入：

js復制代碼// .vitepress/theme/Layout.vue
onMounted(() => {
  import('bootstrap/dist/js/bootstrap.bundle.min.js');
});

這樣就大功告成了，你可以使用 Bootstrap 中豐富的 UI。

最終的電子書效果：《前端開發實戰派》，歡迎點評。

作者：楊成功鏈接：https://juejin.cn/post/7355759709167910923

在線咨詢

上一篇：CSS 文本超出隱藏
下一篇：JavaScript代碼的三種引入方式「操作演示」

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商