Vue开发入门（三）- 项目实战

ChasingTheDawn
283 阅读2分钟

简介

项目实战代码

项目前端所需要的功能模仿 github.com/githublitao… 的前端功能，界面的话使用 vue-element-admin 开发。

参考 github.com/PanJiaChen/…

目录结构：

1.配置侧边栏

在router/index.js进行路由配置

配置项示意： panjiachen.github.io/vue-element…

  • 单页面路由配置

    • router/index.js中对Dashboard的配置

  • 多层级页面路由配置

    • 在router/modules/nested.js配置层级，在router/index.js中导入nestedRouter
2.侧边栏菜单示例

效果是 ：侧边栏一级菜单为“项目管理”，二级菜单为“项目首页”、“项目列表”

  • 在src/views文件夹下，新建project文件夹，project文件夹下新建ProjectHome.vue和ProjectList.vue作为“项目首页”、“项目列表”的显示页面。

  • 侧边栏配置

    router/index.js

    在配置/icon,后增加配置/project:

    {
    path: '/project',
    component: Layout,
    // 重定向
    redirect: '/project/home',
    name: 'projectAdmin',
    meta: {
    	// 菜单栏上的名字和图表
      title: '项目管理',
      icon: 'tree'
    },
    // 二级菜单
    children: [
      {
        path: 'home',
        // 指向的页面
        component: () => import('@/views/project/ProjectHome'),
        meta: {
          title: '项目首页',
          icon: 'chart'
        }
      },
      {
        path: 'list',
        component: () => import('@/views/project/ProjectList'),
        name: 'projectUpdate',
        meta: {
          title: '项目列表',
          icon: 'tree-table'
        }
      }
    ]

  },

3.写项目首页ProjectHome.vue

图示：

  • 栅格化布局介绍

  • 布局 ：使用element中布局的分栏间隔

  • 卡片：使用element中卡片的卡片阴影

<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="6">
        <h2>项目概况</h2>
      </el-col>
    </el-row>
    <!-- 一行三列 + 卡片   -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">项目类型</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">test01</div>
          <div class="fontContent">项目版本</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">最近更新时间</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 一行三列 + 卡片   -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">接口数量</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">通用状态码</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">项目三天内动态</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 一行三列 + 卡片   -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">项目组成员</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">自由测试接口并生成测试报告</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="fontTitle">Web</div>
          <div class="fontContent">创建时间</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ProjectHome'
}
</script>

<style scoped>
  /* 与左边有一点间隔 */
  .main {
    margin-left: 30px;
  }
  /* 卡片标题 */
  .fontTitle {
    margin-top: 20px;
    font-size: 1.5em;
    font-weight: bold;
  }
  /* 卡片内容 */
  .fontContent {
    margin-top: 30px;
  }
  /* 每行卡片的间距 */
  .el-row {
    margin-top:20px;
  }
</style>
4.和服务端交互

上面的项目版本、最近更新时间、接口数量等都不是写死的，通过请求后端接口获得，再展示在页面上。

使用127.0.0.1:8000/v01/projects?name=接口项目二 根据name关键字查询项目的接口来示例。

响应数据示例：（因为接口没实现好，假设这个接口返回的数据就是该页面需要的数据）

{
    "code": "0000",
    "message": "操作成功",
    "data": [
        {
            "id": 4,
            "name": "接口项目二",
            "version": "v1.0",
            "type": "Web",
            "status": true,
            "LastUpdateTime": "2020-10-26 02:41:27",
            "createTime": "2020-10-26 02:41:27",
            "description": "接口项目二示例"
        }
    ]
}

  • 在src/api文件夹中新建project.js

    所有的接口都在src/api文件夹中管理

    import request from '@/utils/request'

export function projectInfo(query) {
  return request({
    url: '/projects',
    method: 'get',
    params: query,
    baseURL: 'http://127.0.0.1:8080/v01'
  })
}

  • ProjectHome.vue中<script>部分

    <script>
import { projectInfo } from '@/api/project'
export default {
  name: 'ProjectHome',
  data() {
    return {
    	// 此处应该是：project:{}，由于跨域访问的问题，后面解决，先把返回写死
      projects:{
        "id" : 4,
        "name": "接口项目二",
        "version": "v1.0",
        "type": "Web",
        "status": true,
        "LastUpdateTime": "2020-10-26 02:41:27",
        "createTime": "2020-10-26 02:41:27",
        "description": "接口项目二示例"
      }
    }
  },
  created() {
    this.getProjectInfo()
  },
  methods: {
    getProjectInfo() {
    	// 调用接口
      projectInfo({ name: '接口项目二' }).then(result => {
      	//给projects 赋值，result.data表示响应数据
        this.projects = result.data.data
      })
    }
  }
}
</script>

  • 使用变量替换响应返回的数据

    ProjectHome.vue

  • 效果

5.使用过滤后端

最近更新时间，我们要展示年月日，所以要使用过滤后端，过滤掉后面的时分秒。

  • 在src/filter/index.js中添加过滤方法

    export function dateOnly(value) {
  console.log(value.split()[0])
  return value.split(' ')[0]
}

  • 在main.js中注册

    // register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

  • 在ProjectHome.vue中使用过滤方法

    <div class="fontTitle">{{projects.LastUpdateTime | dateOnly}}</div>
<div class="fontContent">最近更新时间</div>

<div class="fontTitle">{{projects.createTime | dateOnly}}</div>
<div class="fontContent">创建时间</div>

  • 效果

avatar
文章
阅读
粉丝