整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          在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 組件只有在 beforeMountmounted 鉤子中才能訪問 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


          主站蜘蛛池模板: 久久久精品人妻一区二区三区蜜桃 | 中文日韩字幕一区在线观看| 国产一区二区电影| 国产一区二区三区免费观看在线| 亚洲欧美国产国产一区二区三区| 亚洲AV无码一区二区三区网址| 免费日本一区二区| 一区二区三区精品| 成人中文字幕一区二区三区| 久久91精品国产一区二区| 精品视频一区二区三区在线观看 | 国内精自品线一区91| 日本在线一区二区| 久久精品岛国av一区二区无码| 精品亚洲AV无码一区二区 | 高清一区二区三区视频| 无码一区二区三区在线| 午夜视频久久久久一区| 亚洲熟妇av一区二区三区| 亚洲av午夜精品一区二区三区| 狠狠综合久久av一区二区| 亚洲AV乱码一区二区三区林ゆな| 在线观看免费视频一区| 亚洲电影一区二区| 国产福利一区二区三区| 亚洲美女视频一区| 色多多免费视频观看区一区| 国产一区二区女内射| 清纯唯美经典一区二区| 国产成人av一区二区三区不卡 | 中文字幕精品无码一区二区三区| 国产在线视频一区二区三区| 日本强伦姧人妻一区二区| 四虎一区二区成人免费影院网址| 亚洲国产精品一区二区第四页| 国产在线一区二区三区| 视频在线观看一区二区| 制服美女视频一区| 丰满人妻一区二区三区视频53| 久久成人国产精品一区二区| 无码一区二区三区视频|