四、前端layout及页面跳转
1、在src/components目录下创建Header Aside Main
Header.vue:
<template>
<header>
<div>
<h1 style="margin-top: 0px;color: #425049;font-size:30px; ">XXX系统测试平台</h1>
</div>
</header>
</template>
<script>
export default {
name: "Header",
data() {
return {
}
}
}
</script>
<style scoped>
</style>
Main.vue
<template>
<div>main div</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
Aside.vue
<template>
<div style="height: 100%">
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2"
@open="handleOpen"
@close="handleClose"
@select="handSelect"
router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-submenu index="1-1">
<template slot="title">选项1</template>
<el-menu-item index="/test1">选项1-1</el-menu-item>
<el-menu-item index="/test2">选项1-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航二</span>
</template>
<el-menu-item index="/test3">选项2-1</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside",
methods: {
handleOpen(key, keyPath) {
console.log("打开：", key, keyPath);
},
handleClose(key, keyPath) {
console.log("关闭：", key, keyPath);
},
handSelect(key, keyPath) {
console.log("选择：", key, keyPath);
}
}
}
</script>
<style>
.menu-item-li {
height: auto;
}
.el-menu {
height: 100%;
}
</style>
2、修改index.vue，引入Header Aside Main
导入页面：
import Header from "./Header";
import Aside from "./Aside";
import Main from "./Main";
在export中加入 components:{Header,Aside,Main}
更新后的index.vue如下：
<template>
<div class="container">
<el-container style="height: 100%">
<el-header><Header/></el-header>
<el-container>
<el-aside width="200px"><Aside/></el-aside>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import Header from "./Header";
import Aside from "./Aside";
import Main from "./Main";
export default {
name: 'Index',
components:{Header,Aside,Main},
props: {
msg: String
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #FFFFFF;
color: #333;
text-align: left;
}
body > .el-container {
margin-bottom: 40px;
}
.container{
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%;
}
.el-submenu [class^=el-icon-]{
height: 20px;
}
</style>
3、创建页面
在src下面新建目录views，views中创建测试页面，test1.vue、test2.vue、test3.vue
以test1.vue为例：
<template>
<div>
这是test1
</div>
</template>
<script>
export default {
name: "test1"
}
</script>
<style scoped>
</style>
4、新页面路由配置
修改src/router下路由index.js，增加子目录的跳转路径，修改后index.js如下：
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: index,
children: [
{
path: '/test1', component: () => import('@/views/test1')
},
{
path: '/test2', component: () => import('@/views/test2')
},
{
path: '/test3', component: () => import('@/views/test3')
}
]
}
]
})
5、左侧菜单配置对应的路径
五、前后端交互
1、更新test3.vue，具体如下：
<template>
<div>
<el-descriptions title="数据展示">
<el-descriptions-item label="默认查询结果：">{{ data1 }}</el-descriptions-item>
</el-descriptions>
<el-button type="primary" @click="Submit">提交</el-button>
<el-descriptions>
<el-descriptions-item label="点击按钮后的查询结果：">{{ data2 }}</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script>
export default {
data() {
return {
data1: '',
data2: '',
}
},
created() {
this.$http.get('http://127.0.0.1:8000/api/test1')
.then((response) => {
var res = JSON.parse(response.bodyText)
console.log(res)
if (res.msg == 'success') {
this.data1 = res.data
} else {
this.$message.error('接口返回错误啦 ')
console.log(res['msg'])
}
})
},
methods: {
Submit() {
this.$http.get('http://127.0.0.1:8000/api/testapi')
.then((response) => {
var res = JSON.parse(response.bodyText)
console.log(res)
if (res.msg == 'success') {
this.data2 = res.data
} else {
this.$message.error('接口返回错误啦 ')
console.log(res['msg'])
}
})
}
}
}
</script>
<style scoped>
</style>
其中：created代码初始化的数据，method代码按调用的函数
2、前后端交互
2.1、通过后端服务，访问前端页面
a.打包前端代码：npm run build
b.配置静态文件：
settings文件中的STATICFILES_DIRS列表 添加 [(os.path.join(BASE_DIR,'appweb/dist/static'))]
c.启动后台服务，即可访问前端页面
目前看这种方式有问题，待后续定位
2.2 启动后台服务，通过前端地址访问页面
只需要解决跨域问题即可：
解决方法：用 django 的第三方包 django-cors-headers 来解决跨域问题
参考：Django+VUE交互——第二部分中 10、解决跨域问题
https://i.cnblogs.com/posts/edit;postId=16588204
六、展示
标签：VUE,res,分离,Aside,Django,Header,vue,import,Main From： https://www.cnblogs.com/like1824/p/16588204.html