HTML基础五-starrysky页面动起来
Starrysky前端框架
链接:https://pan.baidu.com/s/1P8mPrHZjyRtzw1NWnAx-9w
提取码:cjl5
接口文档:https://www.showdoc.cc/xinghan
Element开发组件
https://element.eleme.cn/#/zh-CN
1、启动前端页面
打开index.html
2、在index里创建文件
2.1 创建一个叫mjz的目录
复制一份<dd></dd>标签
<dd data-name="console" > <!--<iframe src="starrysky_v2/test.html">test</iframe>--> <a lay-href="starrysky_v2/mjz.html">mjz</a> </dd>
2.2 在starrysky_v2目录下创建一个mjz.html
3、开发mjz页面
3.1 把样式和组件库导入到mjz.html里
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
检查
3.2 添加一个搜索输入框、下拉框、搜索按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mjz</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <div id="search"> <el-form :inline="true" :model="query_search" class="demo-form-inline"> <el-form-item> <el-input v-model="query_search.search" placeholder="搜索"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="query_search.project" placeholder="活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> </div> </div> <!-- import Vue before Element --> <script src="../js/vue.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: { query_search: { search: '', project: '' } }, methods: { onSubmit() { console.log('submit!'); } } }) </script> </body> </html>
注意:VUE必须防止Element前
3.3 添加项目下拉选项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mjz</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <div id="search"> <el-form :inline="true" class="demo-form-inline"> <el-form-item> <el-input v-model="query_search.search" placeholder="搜索"></el-input> </el-form-item> <el-form-item> <el-select v-model="query_search.project"> <el-option v-for="item in projects" :key="item.name" :value="item.id" :label="item.name"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">添加</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">运行</el-button> </el-form-item> </el-form> </div> </div> <!-- import Vue before Element --> <script src="../js/vue.js"></script> <script src="../js/axios.min.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="../js/config.js"></script> <script> new Vue({ el: '#app', data: { query_search: { search: '', project: '' }, projects:[] }, methods: { onSubmit() { console.log('submit!'); }, get_project_data(){ axios({ method:'get', url:host + '/api/project' }).then((response)=>{ this.projects = response.data.data; }) } }, created:function () { // 请求项目接口,获取项目数据 this.get_project_data() } }) </script> </body> </html>
3.4 获取用例集合信息,在前端显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mjz</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <div id="search"> <el-form :inline="true" class="demo-form-inline"> <el-form-item> <el-input v-model="query_search.search" placeholder="搜索"></el-input> </el-form-item> <el-form-item> <el-select v-model="query_search.project"> <el-option v-for="item in projects" :key="item.id" :value="item.id" :label="item.name"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="search">查询</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">添加</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">运行</el-button> </el-form-item> </el-form> </div> <div id="table"> <el-table ref="multipleTable" :data="case_collection_data" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="集合名称" width="120"> <template slot-scope="scope"> <el-button type="text">{{scope.row.name}}</el-button> </template> </el-table-column> <el-table-column prop="desc" label="描述" width="120"> </el-table-column> <el-table-column prop="project_name" label="归属项目" show-overflow-tooltip> </el-table-column> <el-table-column prop="case_count" label="用例数量" show-overflow-tooltip> </el-table-column> <el-table-column prop="report_name" label="测试报告" show-overflow-tooltip> <el-button>查看</el-button> </el-table-column> <el-table-column prop="user" label="创建用户" show-overflow-tooltip> </el-table-column> <el-table-column label="状态" show-overflow-tooltip> <template slot-scope="scope"> <el-tag type="danger">{{ scope.row.status|replaceStatus }}</el-tag> </template> </el-table-column> <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip> </el-table-column> <el-table-column prop="address" label="操作" show-overflow-tooltip> <el-button>选择用例</el-button> <el-button type="danger">删除</el-button> </el-table-column> </el-table> </div> <div id="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_search.page" :page-sizes="[5,10]" :page-size="query_search.limit" layout="total, sizes, prev, pager, next, jumper" :total="count"> </el-pagination> </div> </div> <!-- import Vue before Element --> <script src="../js/vue.js"></script> <script src="../js/axios.min.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="../js/config.js"></script> <script> new Vue({ el: '#app', data: { query_search: { search: undefined, project: undefined, page: 1, limit: 5 }, projects: [], case_collection_data: [], multipleSelection: [], count: 0, }, methods: { search() { this.get_page_data() }, handleSizeChange(val) { this.query_search.limit = val; this.get_page_data() }, handleCurrentChange(val) { this.query_search.page = val; this.get_page_data() }, handleSelectionChange(val) { let ids = []; for (var num in val) { ids.push(val[num].id) } this.multipleSelection = ids; }, onSubmit() { console.log('submit!'); }, get_project_data() { axios({ method: 'get', url: host + '/api/project' }).then((response) => { this.projects = response.data.data; }) }, get_page_data() { axios({ method: 'get', url: host + '/api/case_collection', params: this.query_search }).then((response) => { this.case_collection_data = response.data.data; this.count = response.data.count; }) } }, created: function () { // 请求项目接口 获取项目数据 this.get_project_data(); // 获取页面的数据 this.get_page_data() }, filters: { replaceStatus(status) { if (status == 3) { return '运行中' } } } }) </script> </body> </html>
HTML基础五-starrysky页面动起来的更多相关文章
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...
- Bootstrap <基础二十三>页面标题(Page Header)
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- day 70 Django基础五之django模型层(二)多表操作
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...
- day 56 Django基础五之django模型层(二)多表操作
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...
- 玩转HTML5移动页面(动效篇)(转载)
本文转载自: 玩转HTML5移动页面(动效篇)
随机推荐
- [LeetCode] 238. Product of Array Except Self 除本身之外的数组之积
Given an array nums of n integers where n > 1, return an array output such that output[i] is equ ...
- webrtc笔记(3): 多人视频通讯常用架构Mesh/MCU/SFU
问题:为什么要搞这么多架构? webrtc虽然是一项主要使用p2p的实时通讯技术,本应该是无中心化节点的,但是在一些大型多人通讯场景,如果都使用端对端直连,端上会遇到很带宽和性能的问题,所以就有了下图 ...
- Vue.js 源码分析(四) 基础篇 响应式原理 data属性
官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...
- 云原生生态周报 Vol. 12 | K8s 1.16 API 重大变更
本文作者:源三.临石.张磊.莫源 业界要闻 1. K8s 1.16 将废弃一系列旧的 API 版本 影响面涉及 NetworkPolicy.PodSecurityPolicy.DaemonSet, D ...
- Prometheus监控学习笔记之Prometheus查询无数据或者Grafana不显示数据的诡异问题
0x00 概述 Prometheus和Grafana部署完成后,网络正常,配置文件正常,抓取agent运行正常,使用curl命令获取监控端口数据正常,甚至Prometheus内的targets列表内都 ...
- QT+OpenGL(04)—freetype库的编译
1.freetype库的下载 https://www.freetype.org/download.html freetype-2.10.0.tar.bz2 2.解压 3.进入 freetype-2. ...
- java 图书馆初级编写
import java.util.Scanner; import java.util.Arrays; public class book { public static void main(Strin ...
- ucoreOS_lab1 实验报告
由于我个人不太懂 AT&T 语法,在完成实验的过程中遇到了相当大的阻碍,甚至有点怀疑人生,我是否心太大了,妄想在短时间内学懂大清的课程.ucoreOS_lab1 这个实验前前后后做到了现在才勉 ...
- EFLAGS寄存器(标志寄存器)
这篇文章不是从0开始的,前面还有一些汇编基础指令以及进制,我都没写,时间问题,还是今天空闲,我才想补一下博文,后面我陆续会把前面知识点渐渐补上.我不会重0基础讲起,中间会以.汇编.C.C++交叉的形式 ...
- Java打印9*9乘法表
废话不多说直接贴代码, 先放一个标准的正三角形状的 for (int i = 1; i <= 9; i++) { for (int j = 1; j <= i; j++) { System ...