在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开发环境

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

1. npm install element-plus --save

复制代码

由于对Element-Plus的组件的使用方法不是很熟练, 按照官网的说明我直接从Element-Plus提供的Vite的快速模版进行启动.
https://github.com/element-plus/element-plus-vite-starter
从Github上下载代码后展开,执行下列命令就可以启动一个Element-Plus的Demo服务了.

1. npm install
2. npm run dev

复制代码

按照前一篇Blog例子代码, 修改vite.config.ts,加入端口配置,将Vue的端口设置为8080

1. export default defineConfig({
2. ....
3.   server:{
4.     port:8080
5.   },
6. ....

复制代码

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

1. npm install vue-router@4
2. npm install --save graphql graphql-tag @apollo/client
3. npm install --save @vue/apollo-composable

复制代码

 
迁移代码

由于是后安装的vue-router,缺省的vue-router 没有设置, 建立与Frontend相同的目录

1. src/router
2. src/views

复制代码

将Blog项目中的Frontend中相关的代码Copy进入对应目录

1. src/router/index.ts
2. src/views/AllPosts.vue
3. src/views/AuthorView.vue
4. src/views/PostsByTag.vue
5. src/views/PostView.vue
6. src/componets/AuthorLink.vue
7. src/componets/PostLis.vue

复制代码

修改顶部菜单BaseHeader.vue

Element-UI模版提供的是顶菜单+左工具栏的UI模版, src/compoments/layout/BaseHeader.vue 为顶部菜单, BaseSide.vue为左边菜单.
这里我们修改BaseHeader.vue,修改后菜单项为

1. MyBlog --> HomeView.vue
2. Posts
3.    All Posts --> All Posts
4.    Add Post //将来实现
5.    Delete Post//将来实现
6. Tag ->根据Backend端的取得Tag的种类动态生成Tag菜单
7. HelloWord -->对应原Element-UI的Helloworld的例子

复制代码

由于需要根据BackEnd端的Tag查询结果动态生成Tag,我们为BaseHeader.vue加入Props :tagItems
Baseheader.vue代码具体修改如下:

1. <template>
2.   <el-menu class="el-menu-demo" mode="horizontal" :router= true>
3.     <el-menu-item index="/">My Blog</el-menu-item>
4.     <el-sub-menu index="2">
5.       <template #title>Posts</template>
6.       <el-menu-item index="/posts">All Posts</el-menu-item>
7.       <el-menu-item index="2-1">Add Post</el-menu-item>
8.       <el-menu-item index="2-2">Delete Post</el-menu-item>
9.       <el-sub-menu index="2-4">
10.         <template #title>...</template>
11.         <el-menu-item index="2-4-1">item one</el-menu-item>
12.         <el-menu-item index="2-4-2">item two</el-menu-item>
13.         <el-menu-item index="2-4-3">item three</el-menu-item>
14.       </el-sub-menu>
15.     </el-sub-menu>
17.     <el-sub-menu v-if="tagItems.length" index="tags" >
18.       <template #title>Tags</template>
19.       <el-menu-item v-for="tagInfo in tagItems" :index="tagInfo.path">
20.         {{ tagInfo.name }}
21.       </el-menu-item>
22.     </el-sub-menu>
23.     <el-menu-item v-else :index="tags" disabled>Tags</el-menu-item>
25.     <el-menu-item :index="msg" >HelloVue</el-menu-item>
27.     <el-menu-item h="full" @click="toggleDark()">
28.       <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height);">
29.         <i inline-flex i="dark:ep-moon ep-sunny" />
30.       </button>
31.     </el-menu-item>
32.   </el-menu>
33. </template>

复制代码

 其中需要注意的几点:

• 将菜单项与vue-router结合起来,菜单项的index属性为router/index.ts中设置的URL path, 需要设置el-menu
  1. :router= true

  复制代码
• HelloWorld.vue 其中需要属性msg,为了在菜单中进行配置,我们需要在index.ts中将HelloWord.vue的URL的prop设置为true
  

1.   
2. const router = createRouter({
3. ...  
4.     {
5.       <strong>path: </strong><strong>'/hello/:msg'</strong>,
6.       name: 'HellowWorld',
7.       component: () => import("../components/HelloWorld.vue"),
8.      <strong> props: </strong><strong>true </strong>
9.     },
10. ...

复制代码

将HelloWorld.vue Component的Prop属性作为参数来传递
修改App.vue

在App.vue中加入从Backend通过GraphQL取Tags的代码, 将Tags数组传递给BaseHeader.vue,将改为

1. <template>
2.   <el-config-provider namespace="ep" >
3.     <BaseHeader :tagItems="tags"/>
4.    
5.       <BaseSide />
6.       
7.         
8.         <RouterView/>
9.       
10.    
11.   </el-config-provider>
12. </template>

复制代码

在Backend中加入Tags的查询

backend/blog/scheme/py

1. class Query(graphene.ObjectType):
2.     ....
3.     tags = graphene.List(TagType)
4.     .....
5.     def resolve_tags(root,info):
6.         return (
7.             models.Tag.objects.all()
8.         )

复制代码

 
修改main.ts加入router,Apollo相关的代码

1. import { DefaultApolloClient } from '@vue/apollo-composable'
2. import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
4. // HTTP connection to the API
5. const httpLink = createHttpLink({
6.   uri: 'http://localhost:8000/graphql',
7. })
9. // Cache implementation
10. const cache = new InMemoryCache()
12. // Create the apollo client
13. const apolloClient = new ApolloClient({
14.   link: httpLink,
15.   cache,
16. })
18. const app = createApp({
19.     setup () {
20.       provide(DefaultApolloClient, apolloClient)
21.     },
22.   
23.     render: () => h(App),
24.   })
26. app.use(router)

复制代码

 
至此blog相关的代码迁移完成, 可以完成Posts List等操作了,但是页面相对不太好看,下一步我们使用Element-UI的控件进行对应改造即可.
使用Element-UI改造Posts等相关的Vue

在技术打通之后,UI的改造就是细心+审美的工作了,按照我自己的意思进行了修改,具体的修改就不赘述了,直接参考代码即可.
 

来源:https://www.cnblogs.com/magicduan/p/17315028.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！