前后端分离项目：第一天

首先编辑了基础的前端页面，使用Vue编辑，样式模板采用element-ui。

主要编辑了以下内容：

        

在src/App.vue中：

<template>
  <div id="app">
    <!--头部栏header-->
    <div style="height: 60px; line-height: 60px; background-color: white; margin-bottom: 3px;">
      <img src="@/assets/logo.png" alt="" style="width:40px; position: relative; top: 10px;left: 20px;">
      <span style="margin-left: 30px; font-size: 24px;">医院管理系统</span>
    </div>
    <!--侧边栏和主体-->
    <div style="display: flex;">
      <!--侧边栏导航-->
        <div style="width: 200px;min-height: calc(100vh - 63px); overflow: hidden; margin-right: 2px; background-color: white;">
          <el-menu :default-active="$route.path" router class="el-menu-demo" default-openeds="[1]">
            <el-menu-item index="/">
              <i class="el-icon-s-order"></i>
              <span>患者中心</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-unfold"></i>
                <span>常用功能</span>
              </template>
              <el-menu-item index="/about">
                <i class="el-icon-s-finance"></i>
                <span>住院信息</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      <!--主体数据-->
        <div style="flex: 1;background-color: white;">
          <router-view/>
        </div>
    </div>
  </div>
</template>

app.vue中，定义了vue的首页，效果如下：

     

也就是将基础的布局写完了，写在App.vue中

其次就是要编辑src/viewsHomeView.vue 

<template>
  <div>
    <!-- 搜索表单 -->
    <div style="margin-bottom: 20px;">
      <el-input style="width: 240px;margin-left: 10px;margin-top: 10px;" placeholder="请输入名称"></el-input>
      <el-input style="width: 240px; margin-left: 10px;" placeholder="请输入联系方式"></el-input>
      <el-button style="margin-left: 15px;margin-top: 10px;" type="primary"><i class="el-icon-search"></i>搜索</el-button>
    </div>

      <el-table :data="tableData" stripe>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top:20px">
        <el-pagination
          :page-size="20"
          small
          layout="prev, pager, next"
          :total="tableData.length">
        </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [
        {name:'张三', age:32 ,sex:'男',phone:'129390293',status:'康复'},
        {name:'李四', age:19 ,sex:'女',phone:'992019928',status:'一级伤病'},
        {name:'王五', age:32 ,sex:'男',phone:'129390293',status:'死亡'},
        {name:'张三', age:32 ,sex:'男',phone:'129390293',status:'康复'},
        {name:'李四', age:19 ,sex:'女',phone:'992019928',status:'一级伤病'},
        {name:'王五', age:32 ,sex:'男',phone:'129390293',status:'死亡'},
        {name:'张三', age:32 ,sex:'男',phone:'129390293',status:'康复'},
        {name:'李四', age:19 ,sex:'女',phone:'992019928',status:'一级伤病'},
        {name:'王五', age:32 ,sex:'男',phone:'129390293',status:'死亡'},
        {name:'张三', age:32 ,sex:'男',phone:'129390293',status:'康复'},
        {name:'李四', age:19 ,sex:'女',phone:'992019928',status:'一级伤病'},
        {name:'王五', age:32 ,sex:'男',phone:'129390293',status:'死亡'},
        {name:'张三', age:32 ,sex:'男',phone:'129390293',status:'康复'},
        {name:'李四', age:19 ,sex:'女',phone:'992019928',status:'一级伤病'},
        {name:'王五', age:32 ,sex:'男',phone:'129390293',status:'死亡'}
      ]
    }
  }
}
</script>

这里定义了基础的搜索框、信息栏和页面翻页效果

总结：

        第一天主要做了前端页面，练习了Vue的同时学习了模块化操作，即element-ui