大家好,我是小张~
之前不是说要做一个项目么,上篇文章实现了一个单网页应用,集成了图片OCR文本识别
功能模块:PaddleOCR + Django 实现一个OCR在线识别网站,一起来玩呀,
本篇将沿着之前的工作继续完善项目,由于之前单页面体验很不好,只有一个页面需要用户自己在浏览器里面输入url 地址才能展现,
如果项目中有一个导航栏的话那用户体验就非常棒了,每个导航菜单栏绑定一个路由,连接一个单页,用户点击菜单栏的方式来实现页面跳转
因此,本篇文章主要开发的功能有两点:
- 1,页面导航栏开发,以及路由绑定;
- 2,在之前项目页面中再添加一个菜单:富文本编辑器菜单
本次项目完善因为主要是页面视觉方面的一些完善,主要改动的是前端 Vue 页面,后端 模块暂时没有改动。
最终效果如下:
此时 Vue脚手架的路径树如下;
│ .gitignore
│ babel.config.js
│ jsconfig.json
│ list.txt
│ package-lock.json
│ package.json
│ README.md
│ tsconfig.json
│ vue.config.js
│
├─public
│ favicon.ico
│ index.html
└─src
│ App.vue
│ main.ts
│ router.ts
│ shims-vue.d.ts
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─layout
│ MainContent.vue
│ SideBar.vue
│
└─page
├─editor
│ htmlEditor.vue
│
└─paddle
textOcrPage.vue
加入导航栏
导航栏用到了 Element-Plus 中的 Menu
组件,因为目前项目中所有的导航栏信息比较少,不是通过后端接口获取,因此这里导航栏相关信息都是写死的,但每个meau-item
关联一个路由路径,使得用户通过点击方式来进行跳转。
SideBar.vue
<template>
<aside class="site-sidebar">
<div class="site-sidebar__inner">
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="1"
text-color="#fff"
@open="handleOpen"
@close="handleClose">
<el-menu-item index="1" @click="$router.push({ path: '/' })">
<el-icon><location /></el-icon>
<span>首页</span>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<el-icon><icon-menu /></el-icon>
<span>DL模型</span>
</template>
<el-menu-item index="2-1" @click="$router.push({ path: '/paddle-ocr' })">
<span>OCR 识别</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3" >
<template #title>
<el-icon><document /></el-icon>
<span>工具Utils</span>
</template>
<el-menu-item index="3-1" @click="$router.push({ path: '/html-editor' })">
<span> 富文本</span>
</el-menu-item>
</el-sub-menu>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>待开发</span>
</el-menu-item>
</el-menu>
</div>
</aside>
</template>
<script lang="ts" setup>
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
}
const handleClose = (key: string, keyPath: string[]) => {
}
</script>
<style scoped>
.site-sidebar{
position: fixed;
top: 0px;
left: 0;
bottom: 0;
z-index: 1020;
width: 230px;
overflow: hidden;
background-color: #545c64;
}
.site-sidebar__inner{
height: 100%;
padding-bottom: 15px;
overflow-y: scroll;
}
</style>
布局组件
导航栏组件定义好之后,需要定义下整体内容布局:一般导航栏放置在左侧,右边放置内容区,因此可以定义一个主组件,左侧为导航栏组件,右边通过 vue-router 的<router-view>
插槽机制根据路由切换来控制右侧内容区内容的变换,
布局组件 MainContent.vue
如下:
<template>
<div>
<side-bar>
</side-bar>
<div class="site-content__wrapper">
<router-view></router-view>
</div>
</div>
</template>
<script>
import SideBar from './SideBar.vue'
import {
ref} from 'vue'
export default{
setup() {
},
components: {
SideBar
}
}
</script>
<style scoped>
.site-content__wrapper{
margin-left: 230px;
}
</style>
定义嵌套路由
嵌套路由的 router-view
的使用规则,需要在父组件路由中配置 children
项,而children
是一个数组路由,如下方代码块router.ts
所示,定义了三个路由路径分别对应三个子组件(由于vue3版本建议开发者使用typescript
作为主要开发语言,因此这里大部分脚本用 ts
代替 js
集成):
/'
------------------->HelloWorld.vue
/paddle-ocr
------------------->textOcrPage.vue
/html-editor
------------------->htmlEditor.vue
import {
createRouter,createWebHashHistory} from 'vue-router'
const routes = [
{
path: '/',
component: ()=>import('@/layout/MainContent.vue'),
children: [
{
path: '/',
component:()=> import('@/components/HelloWorld.vue')
},
{
path: '/paddle-ocr',
component:()=> import('@/page/paddle/textOcrPage.vue')
},
{
path: '/html-editor',
name:'HTML-EDITOR',
component:()=> import('@/page/editor/htmlEditor.vue')
},
]
},
]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router;
然后再在 main.ts
脚本中 引入router,挂载到主组件中
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
小结
好了,以上就是本篇文章的全部内容了,主要分为两方面内容:1,将 Quill 富文本组件集成在 Vue脚手架中,2,对项目进行完善,加入导航侧边栏来实现路由跳转。
项目全部代码获取方式,关注微信公号:小张Python,后台回复关键字:dl_interated 即可