沈阳网站维护,app开发公司哪个好,登录不了建设银行网站,租二级目录做网站文章目录前言一、导航栏的实现1.路由配置2.使用 NavMenu 组件二、图书管理页面2.1. LibraryIndex.vue2.SideMenu.vue3.Books.vue前言
之前讲过使用 Element 辅助前端页面的开发#xff0c;但是只用到了比较少的内容#xff0c;这一篇我们来做一下系统的核心页面——图书管理…
文章目录前言一、导航栏的实现1.路由配置2.使用 NavMenu 组件二、图书管理页面2.1. LibraryIndex.vue2.SideMenu.vue3.Books.vue前言
之前讲过使用 Element 辅助前端页面的开发但是只用到了比较少的内容这一篇我们来做一下系统的核心页面——图书管理页面的前端部分旨在熟悉 Vue 的更多特性。
一、导航栏的实现
我们的项目虽然本质上是单页面应用但表面上有多个功能页面比如首页、图书馆、笔记本等后期根据情况还可以把一些功能集中起来做一个后台管理页面。为了方便用户在这三个页面之间切换我们需要添加一个导航栏。
这个导航栏的要求很简单
能够在每个页面显示美观
1.路由配置
为了实现第一个要求我们需要把导航栏放在其它页面的父页面中对 Vue 来说就是父组件之前我们讲过App.vue 是所有组件的父组件但把导航栏放进去不合适因为我们的登录页面中不应该显示导航栏。
为了解决这个问题我们在 src/components 目录下直接新建一个组件命名为 Home.vue原始代码如下
templatedivrouter-view//div
/templatescript
export default {name: Home
}
/scriptstyle scoped/style
这里和 App.vue 一样写入了一个 router-view/也就是子页面组件显示的地方。
接下来来建立路由的父子关系。注意我们在一个组件中通过导入引用了其它组件也可以称之为父子组件但想要通过 控制子组件的显示则需要进行路由的相关配置。
打开 router/index.js 修改代码如下
import Vue from vue
import Router from vue-router
// 导入编写的组件
import AppIndex from /components/home/AppIndex
import Login from /components/Login
import Home from /components/HomeVue.use(Router)export default new Router({mode: history,routes: [// 下面是固定写法{path: /home,name: Home,component: Home,// home页面并不需要被访问到redirect: /index,children: [{path: /index,name: AppIndex,component: AppIndex,meta: {requireAuth: true}}]},// 下面是固定写法{path: /login,name: Login,component: Login}]
})注意我们并没有把首页的访问路径设置为 /home/index仍然可以通过 /index 访问首页这样配置其实是感受不到 /home 这个路径的存在的。之后再添加新的页面可以直接在 children 中增添对应的内容。
2.使用 NavMenu 组件
打开 Element 的文档找到 NavMenu 组件相关内容
https://element.eleme.cn/2.0/#/zh-CN/component/menu
主要有顶栏、侧栏两种导航样式我们选择顶栏型点击显示代码 这个顶栏其实有两个上面的是没有底色的下面的是有底色的。 这些代码基本涵盖了各种用法我们可以选择自己需要的部分并根据下面的文档对它进行改造。
我们在 components 文件夹里新建一个 common 文件夹用来存储公共的组件并在该文件夹新建一个组件 NavMenu.vue经过我修改的代码如下
templateel-menu:default-active/indexroutermodehorizontalbackground-colorwhitetext-color#222active-text-colorredstylemin-width: 1300pxel-menu-item v-for(item,i) in navList :keyi :indexitem.name{{ item.navItem }}/el-menu-itema href#nowhere stylecolor: #222;float: right;padding: 20px;更多功能/ai classel-icon-menu stylefloat:right;font-size: 45px;color: #222;padding-top: 8px/ispan styleposition: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: boldWhite Jotter - Your Mind Palace/span/el-menu
/templatescriptexport default {name: NavMenu,data () {return {navList: [{name: /index, navItem: 首页},{name: /jotter, navItem: 笔记本},{name: /library, navItem: 图书馆},{name: /admin, navItem: 个人中心}]}}}
/scriptstyle scopeda{text-decoration: none;}span {pointer-events: none;}
/style这里需要解释两点。
第一在 el-menu 标签中我们开启了 router 模式在 Element 文档中的解释如下 第二我们通过 v-for 指令把 navList 数组渲染为一组 el-menu-item 元素也即导航栏的内容。当然我们也可以分开写这种用法只是显得 six 一些当需要动态更改列表内容时就很有用了
另外为了美观我还加了点别的东西都很基础就不多说了。
接下来我们需要把这个组件放在 Home.vue 中。
修改 Home.vue 的代码如下
templatedivrouter-view//div
/templatescript
import NavMenu from ./common/NavMenu
export default {name: Home,components: {NavMenu}
}
/scriptstyle scoped/style
启动前后端项目测试一下
npm run dev这样我们访问 http://localhost:8080/index 就会在顶部出现导航栏。这时我们还没有别的页面可以访问所以点击按钮就跳到了空白的页面。 嗯首页也啥也没有。这个页面我不打算多说什么大家可以把它作为一个纯粹的展示页面练习一下 html、css 之类。我做的首页源码可以在 GitHub 上下载下来参考使用大致是这样的。
二、图书管理页面
这是我们的核心页面我们先把它设计出来以后再去实现具体的功能。
我拍脑袋想了一下页面大概需要以下内容
1、图书展示区域2、分类导航栏3、搜索栏4、页码
2.1. LibraryIndex.vue
在 src/components 中新建文件夹 library新建组件 LibraryIndex.vue作为图书页面的根组件代码如下
templateel-containerel-aside stylewidth: 200px;margin-top: 20pxswitch/switch!--SideMenu/SideMenu--/el-asideel-main!--books/books--/el-main/el-container
/templatescriptexport default {name: AppLibrary
}
/scriptstyle scoped/style注释掉的部分是接下来需要编写的组件。这里我们使用了 Element 提供的 Container 布局容器把整个页面分为了侧边栏和主要区域两个部分详细了解请参考
https://element.eleme.cn/2.0/#/zh-CN/component/container 接下来我们配置这个页面的路由修改 router/index.js 代码如下
import Vue from vue
import Router from vue-router
// 导入编写的组件
import AppIndex from /components/home/AppIndex
import Login from /components/Login
import Home from /components/Home
import LibraryIndex from ../components/library/LibraryIndexVue.use(Router)export default new Router({mode: history,routes: [// 下面是固定写法{path: /home,name: Home,component: Home,// home页面并不需要被访问到redirect: /index,children: [{path: /index,name: AppIndex,component: AppIndex,meta: {requireAuth: true}},{path: /library,name: Library,component: LibraryIndex,meta: {requireAuth: true}}]},// 下面是固定写法{path: /login,name: Login,component: Login}]
})P.S 关于 router 的配置已经写了许多次了接下来为了节省篇幅我就只贴出来主要修改的部分啦
访问 http://localhost:8080/library 发现可以访问了当然页面还是空白的但是出现了导航栏可以测试一下在首页和图书馆页面之间切换。
2.SideMenu.vue
编写一个侧边栏组件。放在 src/components/library 文件夹中代码如下
templateel-menuclasscategoriesdefault-active0selecthandleSelectactive-text-colorredel-menu-item index0i classel-icon-menu/ispan slottitle全部/span/el-menu-itemel-menu-item index1i classel-icon-menu/ispan slottitle文学/span/el-menu-itemel-menu-item index2i classel-icon-menu/ispan slottitle流行/span/el-menu-itemel-menu-item index3i classel-icon-menu/ispan slottitle文化/span/el-menu-itemel-menu-item index4i classel-icon-menu/ispan slottitle生活/span/el-menu-itemel-menu-item index5i classel-icon-menu/ispan slottitle经管/span/el-menu-itemel-menu-item index6i classel-icon-menu/ispan slottitle科技/span/el-menu-item/el-menu
/templatescript
export default {name: SideMenu
}
/scriptstyle scoped.categories {position: fixed;margin-left: 50%;left: -600px;top: 100px;width: 150px;}
/style在 LibraryIndex.vue 中使用这个组件
templateel-containerel-aside stylewidth: 200px;margin-top: 20pxswitch/switchSideMenu/SideMenu/el-asideel-main!--books/books--/el-main/el-container
/templatescript
import SideMenu from ./SideMenu
export default {name: AppLibrary,components: {SideMenu}
}
/scriptstyle scoped/style
访问 http://localhost:8080/library 查看效果
3.Books.vue
最后我们用一个组件来显示图书。这个组件比较复杂初始代码如下
templatedivel-row styleheight: 840px;!--search-bar/search-bar--el-tooltip effectdark placementrightv-foritem in books:keyitem.idp slotcontent stylefont-size: 14px;margin-bottom: 6px;{{item.title}}/pp slotcontent stylefont-size: 13px;margin-bottom: 6pxspan{{item.author}}/span /span{{item.date}}/span /span{{item.press}}/span/pp slotcontent stylewidth: 300px classabstract{{item.abs}}/pel-card stylewidth: 135px;margin-bottom: 20px;height: 233px;float: left;margin-right: 15px classbookbodyStylepadding:10px shadowhoverdiv classcoverimg :srcitem.cover alt封面/divdiv classinfodiv classtitlea href{{item.title}}/a/div/divdiv classauthor{{item.author}}/div/el-card/el-tooltip/el-rowel-rowel-pagination:current-page1:page-size10:total20/el-pagination/el-row/div
/templatescript
export default {name: Books,data () {return {books: [{cover: https://i.loli.net/2019/04/10/5cada7e73d601.jpg,title: 三体,author: 刘慈欣,date: 2019-05-05,press: 重庆出版社,abs: 文化大革命如火如荼进行的同时。军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展。但在按下发射键的那一刻历经劫难的叶文洁没有意识到她彻底改变了人类的命运。地球文明向宇宙发出的第一声啼鸣以太阳为中心以光速向宇宙深处飞驰……}]}}
}
/scriptstyle scoped.cover {width: 115px;height: 172px;margin-bottom: 7px;overflow: hidden;cursor: pointer;}img {width: 115px;height: 172px;/*margin: 0 auto;*/}.title {font-size: 14px;text-align: left;}.author {color: #333;width: 102px;font-size: 13px;margin-bottom: 6px;text-align: left;}.abstract {display: block;line-height: 17px;}a {text-decoration: none;}a:link, a:visited, a:focus {color: #3377aa;}
/style之后我们要实现的许多功能都与这个组件有关。目前用到的这部分需要注意的有
1、v-for 指令之后可以使用动态渲染这里我们用《三体》的内容作为一个默认值先查看效果。2、el-tooltip Element 提供的组件用于展示鼠标悬停时的提示信息。参考 https://element.eleme.cn/2.0/#/zh-CN/component/tooltip 3、slot 插槽及把标签中的内容插到父组件指定的地方这里我们插入了 el-tooltip 的 content 中。上述文档中亦有描述。4、封面图像标签中我们使用了 :srcitem.cover 这种写法: 其实是 v-bind: 的缩写用于绑定把标签的属性与 data 中的值绑定起来。5、搜索栏暂不理会6、分页使用 el-pagination 组件目前只是样式。 图书卡片的样式是模仿豆瓣读书做的。 最后把 Books 组件放在 LibraryIndex.vue 中并稍微修改一下样式
templateel-containerel-aside stylewidth: 200px;margin-top: 20pxswitch/switchSideMenu/SideMenu/el-asideel-mainbooks classbooks-area/books/el-main/el-container
/templatescript
import SideMenu from ./SideMenu
import Books from ./Books
export default {name: AppLibrary,components: {SideMenu, Books}
}
/scriptstyle scoped.books-area {width: 990px;margin-left: auto;margin-right: auto;}/styleP.S 以后添加组件之类的代码我也尽量只放关键部分大家要多尝试自己调试。
最后访问 http://localhost:8080/library 效果如下 功能完善之后是这个样子的 项目的源码在我的 GitHub 上可以下载下来参考
https://github.com/Antabot/White-Jotter
感谢大家的支持如果有想不清楚的问题请给我发个邮件我一定及时回复
