day03|Vue-Element

Ajax

• 介绍

  

 

  

• Axious

 axios案例

 

 

前后端分离开发

介绍

 YAPI

YApi:YApi Pro-高效、易用、功能强大的可视化接口管理平台 

前端工程化

• 环境准备

 

• Vue项目

 vue项目-配置端口

• Vue项目开发流程

 

Element

• 快速入门

 

组件：组件 | Element

常见组件

• Table表格

• Pagination分页

• Dialog对话框

• Form表单

案例

• 基本页面布局

<template>
  <div>
    <!-- 基本布局结构 -->
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias智能学习辅助系统</el-header>
      
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
              <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                <el-menu-item index="1-1">部门管理</el-menu-item>
                <el-menu-item index="1-2">员工管理</el-menu-item>
              </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
        <el-table :data="tableData">
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="140"></el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作" >
                <el-button type="primary" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>

        </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data () {
        return {
            tableData:[]
        }
    }
};
</script>

<style>
</style>

• 页面组件实现

• axious异步加载数据

Vue路由

 

 

打包部署

 

 

 问题

已解决！！！！！

重新安装一遍，任务管理器（ctrl+shift+esc）后台显示nginx.exe正在运行。并没有占用端口号

 

 

原本是没有错误日志的，重新安装一遍就有了。