专栏大纲： 《VUE+Django：手把手教你打造自己的电商独立站》专栏写作大纲
上一篇： 《VUE+Django：手把手教你打造自己的电商独立站》2.6 数据结构设计
根据详细设计，所有的页面都有公共的头部和底部，因此这2个部分可以作为独立的组件进行编码，在src/components目录下新建PageHeader.vue和PageFooter.vue两个文件
1 页面顶部实现
在PageHeader.vue中加入以下代码。本文使用了ElementUI实现页面控件，后续不再赘述。
<template> <div class="nav-bar"> <div class="container"> <div class="logo"> <img :src="logo" alt="Logo"> </div> <div class="banner"> <img :src="banner" alt="Banner"> </div> <div class="components"> <el-row> <el-col :span="10"> <el-input placeholder="请输入搜索内容"></el-input> </el-col> <el-col :span="10" style="margin-left: 10px" v-if="user"> <el-dropdown> <el-avatar :src="userImg"></el-avatar> <span>{{ user.username }}</span> <el-dropdown-menu> <el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>账号设置</el-dropdown-item> <el-dropdown-item> <router-link :to="LoginPage" @click.native="logout">退出</router-link> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> <el-col v-else :span="10" style="margin-left: 10px"> <el-button type="primary"> <router-link :to="LoginPage">登录</router-link> </el-button> <el-button type="primary"> <router-link :to="RegisPage">注册</router-link> </el-button> </el-col> </el-row> </div> </div> <div> <el-menu :default-active="1" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true"> <el-menu-item index="1">首页</el-menu-item> <el-menu-item index="2">商品集市</el-menu-item> <el-menu-item index="3">个人中心</el-menu-item> </el-menu> </div> </div> </template> <script> export default { name: "PageHeader", computed: { user(){ return null }, }, data() { return { userImg: require('../assets/user.png'), logo: require('../assets/logo.png'), banner: require('../assets/banner.png'), }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); }, logout(){ console.log(‘logout’); } }, } </script> <style scoped> .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .logo, .banner, .components { display: flex; flex-direction: column; justify-content: center; align-items: center; } .logo img, .banner img { max-width: 100%; height: auto; } .components el-row { width: 100%; } .components el-row el-col { margin-left: 10px; } </style>
template定义了整个网页顶部组件的页面元素，包括两个部分。
第一部分是顶部横向排列的logo、Banner、搜索按钮、注册按钮、登录按钮以及用户登录后显示信息的部分，根据用户信息是否存在确定显示的模块。
第二部分是使用el-menu构造的一个导航菜单，可以根据自己网页的结构增加，具体参考element.eleme.cn/#/zh-CN/com…
script部分目前只有当前这个组件的名称，注意使用ESLint时，组件的Name参数值至少是两个单词，否则会报错
style部分包含了组件的样式CSS，使用常见的CSS语法。scoped关键字表示启用了命名空间，不同组件中的同名标签定义不会互相影响
实现效果如下：
2 页面底部实现
在PageFooter.vue中加入以下示例代码。展示了一些基本内容，但是如果需要展示更多的信息，可以自行修改
<template> <div> <footer> <div class="contact-us"> <h4>联系我们</h4> <p>电话：123-456-7890</p> <p>邮箱：contact@website.com</p> <p>地址：123 Main St, City, State 12345</p> </div> <div class="site-map"> <h4>网站地图</h4> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品中心</a></li> <li><a href="#">购物车</a></li> <li><a href="#">个人中心</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <div class="record-info"> <p>备案号：123456789012345</p> <p>© 2021 Website. All Rights Reserved.</p> </div> </footer> </div> </template> <script> export default { name:"PageFooter", data() { return { }; }, props:{ imgHeight:{ type:String, default:'100px' } }, methods: { } }; </script> <style> /* Add your styles here */ footer{ display:flex; justify-content:center; } footer>div{ margin-left: 50px; } .contact-us{ display:inline-block; } .site-map{ display:inline-block; } </style>
3 注册组件和全局引入
对于PageHeader和PageFooter这种公共组件，可以注册后供其它组件或者页面使用。在src目录下创建一个global-components.js文件，其中增加以下代码。这样就可以在其他组件或者页面中直接引用注册好的组件。
import Vue from "vue"; import PageHeader from "@/components/PageHeader.vue"; import PageFooter from "@/components/PageFooter.vue"; Vue.component('PageHeader',PageHeader) Vue.component('PageFooter',PageFooter)
然后在main.js文件中导入global-components.js，这样其它页面或者文件就能使用这些组件了
import './global-components'
4 页面框架实现
在src/page文件夹下创建PageFrame.vue文件，加入以下代码
<template> <div> <PageHeader /> <router-view /> <PageFooter /> </div> </template> <script> export default { data() { return { }; }, }; </script> <style> /* Add your styles here */ </style>
在PageHeader组件下面放置了一个router-view组件，这是一个由vue-router提供的特殊组件，用于渲染匹配当前路由的组件。为什么要在这里加入这个组件呢？
还记得PageHeader.vue中使用el-menu创建的导航菜单吗？当用户点击导航菜单上不同选项时，我们希望能够跳转到不同的页面。由于PageHeader和PageFooter是公共组件，那么只需要改变这两个组件之间显示的内容就可以了。router-view就可以根据导航菜单的点击动作渲染不同的实际页面。后续我们要准备几个页面实现页面的切换。
