、依次創建項目和創建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 了! 中有詳細介紹。
自定義頁面,總是需要一個 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
*請認真填寫需求信息,我們會在24小時內與您取得聯系。