在Django+Vue3+GraphQL的Blog例子代碼中引入Element-Plus UI Framework

Vue3的UI Framework中有Element-Plus、BalmUI、Quasar、PrimeVue、Ant Design Vue等UI Framework.

Element-Plus是Element-UI的Vue3版,Element-UI的使用人數的基數較大,Github上的Star數也較多,就選擇了Element-Plus作為這個Blog項目的UI Framework.

UI Framework的好處就是提供了相較裸Html+CSS開發起來更好看和方便一些.

Element-Plus在國內有鏡像站點,參看起來速度相對快一些. Element-Plus國內鏡像站點.

代碼可以從Github上取得https://github.com/magicduan/django_vue_graphql/releases/tag/base_0.2

配置Element-UI開發環境

如果在已有的項目中安裝的用包管理器安裝最方便了.

 npm install element-plus --save

由於對Element-Plus的組件的使用方法不是很熟練, 按照官網的說明我直接從Element-Plus提供的Vite的快速模版進行啟動.

https://github.com/element-plus/element-plus-vite-starter

從Github上下載代碼後展開,執行下列命令就可以啟動一個Element-Plus的Demo服務了.

npm install
npm run dev

按照前一篇Blog例子代碼, 修改vite.config.ts,加入埠配置,將Vue的埠設置為8080

export default defineConfig({
....
  server:{
    port:8080
  },
....

使用npm 安裝vue-router、apollo-client

npm install vue-router@4
npm install --save graphql graphql-tag @apollo/client
npm install --save @vue/apollo-composable

遷移代碼

由於是後安裝的vue-router,預設的vue-router 沒有設置, 建立與Frontend相同的目錄

src/router
src/views

將Blog項目中的Frontend中相關的代碼Copy進入對應目錄

src/router/index.ts
src/views/AllPosts.vue
src/views/AuthorView.vue
src/views/PostsByTag.vue
src/views/PostView.vue
src/componets/AuthorLink.vue
src/componets/PostLis.vue

修改頂部菜單BaseHeader.vue

Element-UI模版提供的是頂菜單+左工具欄的UI模版, src/compoments/layout/BaseHeader.vue 為頂部菜單, BaseSide.vue為左邊菜單.

這裡我們修改BaseHeader.vue,修改後菜單項為

MyBlog --> HomeView.vue
Posts 
   All Posts --> All Posts
   Add Post //將來實現
   Delete Post//將來實現
Tag ->根據Backend端的取得Tag的種類動態生成Tag菜單
HelloWord -->對應原Element-UI的Helloworld的例子

由於需要根據BackEnd端的Tag查詢結果動態生成Tag,我們為BaseHeader.vue加入Props :tagItems

Baseheader.vue代碼具體修改如下:

<script setup lang="ts" >
import { toggleDark } from '~/composables';
import { ref } from 'vue';
const props = defineProps({
  tagItems:{type:Array,required:true, default:[]}
})

const msg = ref("/hello/\"Hello Vue 3.0 + Element Plus + Vite\"")

</script>
<template>
  <el-menu class="el-menu-demo" mode="horizontal" :router= true>
    <el-menu-item index="/">My Blog</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Posts</template>
      <el-menu-item index="/posts">All Posts</el-menu-item>
      <el-menu-item index="2-1">Add Post</el-menu-item>
      <el-menu-item index="2-2">Delete Post</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>...</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <el-sub-menu v-if="tagItems.length" index="tags" >
      <template #title>Tags</template>
      <el-menu-item v-for="tagInfo in tagItems" :index="tagInfo.path">
        {{ tagInfo.name }}
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="tags" disabled>Tags</el-menu-item>

    <el-menu-item :index="msg" >HelloVue</el-menu-item>

    <el-menu-item h="full" @click="toggleDark()">
      <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height);">
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>
  </el-menu>
</template>

 其中需要註意的幾點:

• 將菜單項與vue-router結合起來,菜單項的index屬性為router/index.ts中設置的URL path, 需要設置el-menu

  :router= true

• HelloWorld.vue 其中需要屬性msg,為了在菜單中進行配置,我們需要在index.ts中將HelloWord.vue的URL的prop設置為true

  
const router = createRouter({
...  
    {
      path: '/hello/:msg',
      name: 'HellowWorld',
      component: () => import("../components/HelloWorld.vue"),
      props: true  
    },
...

將HelloWorld.vue Component的Prop屬性作為參數來傳遞

修改App.vue

在App.vue中加入從Backend通過GraphQL取Tags的代碼, 將Tags數組傳遞給BaseHeader.vue,將<HelloWord .../>改為<routerview/>

<script setup lang="ts">
import HomeView from './views/HomeView.vue';
import HelloWorld from './components/HelloWorld.vue';
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
import { computed } from '@vue/reactivity';

const {result,loading,error} =  useQuery(gql`
  query getTags{
    tags {
          name
    }
  }
`)

const tags = computed(()=>{
  let tagsArray = []
  if (result.value){
    result.value?.tags.forEach(tagName => {
      let tagInfo = {path:"/tag/"+tagName.name,name:tagName.name}
      tagsArray.push(tagInfo)
    });
  }
  return tagsArray

})

</script>
<template>
  <el-config-provider namespace="ep" >
    <BaseHeader :tagItems="tags"/>
    <div style="display: flex">
      <BaseSide />
      <div>
        <!-- <HelloWorld msg="Hello Vue 3.0 + Element Plus + Vite" @changeTags ='changTags'/>  -->
        <RouterView/> 
      </div>
    </div>
  </el-config-provider>
</template>

<style>
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

.element-plus-logo {
  width: 50%;
}
</style>

在Backend中加入Tags的查詢

backend/blog/scheme/py

class Query(graphene.ObjectType):
    ....
    tags = graphene.List(TagType)
    .....
    def resolve_tags(root,info):
        return (
            models.Tag.objects.all()
        )

修改main.ts加入router,Apollo相關的代碼

import { DefaultApolloClient } from '@vue/apollo-composable'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

// HTTP connection to the API
const httpLink = createHttpLink({
  uri: 'http://localhost:8000/graphql',
})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

const app = createApp({
    setup () {
      provide(DefaultApolloClient, apolloClient)
    },
  
    render: () => h(App),
  })

app.use(router)

至此blog相關的代碼遷移完成, 可以完成Posts List等操作了,但是頁面相對不太好看,下一步我們使用Element-UI的控制項進行對應改造即可.

使用Element-UI改造Posts等相關的Vue

在技術打通之後,UI的改造就是細心+審美的工作了,按照我自己的意思進行了修改,具體的修改就不贅述了,直接參考代碼即可.