• Vue前后端项目开发指南(二)【首页的搭建】


    续上篇:Vue前后端项目开发指南(一)【前端项目的创建】


    创建完成的项目目录如下所示
    在这里插入图片描述
    主要有以下几个目录
    assets:是资源存放的目录
    components: 主要页面中的组件
    plugins:是所使用到的插件
    router:是项目的路由
    store:进行数据存储
    views:所使用到的页面
    App.vue:画面的进入点

    接下来我们要创建一个首页
    修改App.vue

    <template>
      <div id="app">
        <el-container style="height: 800px; border: 1px solid #eee">
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>USER</span>
          </el-header>
          <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    
            </el-aside>
            <el-main>
              <router-view/>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </template>
    
    <style>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;
    }
    </style>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    修改后的主页显示如下:
    在这里插入图片描述
    这里修改了布局,具体可以参考elementui的官网>>>container布局设计
    在这里插入图片描述
    此处想讲一下<router-view/>,router-view组件进行路由管理,对于页面局部刷新的场景,现在嵌套在<el-main>中,就能够对其进行页面替换了,之后增加了左侧目录之后,通过点击侧边跳转链接,就能够通过修改<router-view/>的内容进行页面替换了,非常方便。

    好的,随后给主页进行替换,切换到Home.vue

    <template>
      <div class="home">
        <el-table :data="tableData">
          <el-table-column prop="id" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="firstName,lastName" label="Name" width="300">
            <template slot-scope="scope">
              {{scope.row.firstName}} {{scope.row.lastName}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="Address" width="300">
          </el-table-column>
          <el-table-column prop="city" label="City" width="200">
          </el-table-column>
          <el-table-column label="Manage">
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          tableData: [{
            id: 1,
            firstName: 'Test',
            lastName: 'Test',
            address: 'Test',
            city: 'Test',
          }],
        }
      },
      methods: {
      },
      // 初始化加载数据
      created() {
      },
    };
    </script>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    效果如下图所示:
    在这里插入图片描述
    增加了一个表格,显示的了用户的数据,到此就完成了主页面的显示过程,下一篇我们会讲到后端的项目创建,通过读取数据库的数据来进行画面的显示。


    续下篇:Vue前后端项目开发指南(三)【后端Springboot项目的搭建】

  • 相关阅读:
    一个单身狗 和 两个单身狗
    【面试题】Golang垃圾回收机制(第五篇)
    力扣 23. 合并K个升序链表 顺序合并
    第十二章 信号(二)- 生产者消费者示例
    2022年ccpc威海站
    六所大学要增加计算机类硕士专业,三所大学将被撤销!2021年学位授权点审核名单公布...
    30天刷题训练(一)
    ManageEngine 第六次入选 Gartner® 安全信息和事件管理魔力象限™!
    Java常见面试题1-10
    计算机组成原理-流水线技术学习笔记1
  • 原文地址:https://blog.csdn.net/lujiachun1/article/details/125440316