下拉选择框

<!‐‐查询表单‐‐>
<el‐form :model="params">
<el‐select v‐model="params.siteId" placeholder="请选择站点">
<el‐option
v‐for="item in siteList"
:key="item.siteId"
:label="item.siteName"
:value="item.siteId">
</el‐option>
</el‐select>
页面别名：<el‐input v‐model="params.pageAliase" style="width: 100px"></el‐input>
<el‐button type="primary" v‐on:click="query" size="small">查询</el‐button>
</el‐form>

先默认写数据在mounted钩子函数内初始化数据

下拉框和页面别名的输入框

params参数增加siteId和pageAliase

上面的下拉和文本框通过v-model双向绑定了siteId和pageAliase

把json对象拼装成key -value的形式。这里我们使用querystring这个工具类

测试

转载于:https://www.cnblogs.com/wangjunwei/p/11566772.html

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_03-自定义查询页面-前端...相关推荐

2023年最新黑马程序员Java微服务项目--学成在线
正式上线Java微服务项目<学成在线> 项目对程序员的重要性不用播妞多说了吧更重要的是这次是完整!实战!企业级!项目! 划重点:全新发布!正式上线! <学成在线>项目以在 ...
学成在线--18.新增课程（课程分类查询）
文章目录一.需求分析二.课程分类查询介绍三.数据结构四.数据格式五.数据模型六.Api接口七.服务器端 1.Dao 1)定义mapper 2)定义mapper映射文件 2.Service ...
微服务实战项目-学成在线-课程发布模块
学成在线-课程发布模块 1 模块需求分析 1.1 模块介绍课程信息编辑完毕即可发布课程,发布课程相当于一个确认操作,课程发布后学习者在网站可以搜索到课程,然后查看课程的详细信息,进一步选课.支付.在 ...
前端网页项目-学成在线案例
典型的企业级网站目的是为了整体感知企业级网站布局流程,复习以前知识准备素材和工具: 学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...
学成在线--1.CMS接口开发
文章目录 0.定义CMS 1.CMS页面管理 2.需求分析 3.模型类介绍 4.定义请求及响应类型 5.定义接口 6.创建CMS工程结构 7.Dao 1)创建Dao,继承MongoRepository ...
Java的新项目学成在线笔记-day10（三）
1.4 测试CMS一键发布接口 1.4.1 配置虚拟主机在nginx配置课程详情页面的虚拟主机,实现访问:www.xuecheng.com/course/detail/.....html. #静态资 ...
Java的新项目学成在线笔记-day10（一）
1 课程发布 1.1 需求分析课程发布后将生成正式的课程详情页面,课程发布后用户即可浏览课程详情页面,并开始课程的学习. 课程发布生成课程详情页面的流程与课程预览业务流程相同,如下: 1.用户进入教 ...
Java的新项目学成在线笔记-day9（七）
3 课程预览技术方案 3.1 需求分析课程预览是为了保证课程发布后的正确性,通过课程预览可以直观的通过课程详情页面看到课程的信息是否正确, 通过课程预览看到的页面内容和课程发布后的页面内容是一致的. ...
学成在线--2.CMS前端页面查询开发
文章目录 0.思路总结 1.创建CMS模块的目录架构 2.创建页面并配置路由 1)在page目录新建page_list.vue,扩展名为.vue. 2)在cms的router下配置路由. 3)在bas ...
学成在线--7.CMS页面管理开发（异常处理）
文章目录 1.异常处理的问题分析 2.异常处理流程 3.可预知异常处理 1.自定义异常类 2.异常抛出类 3.异常捕获类 4.异常处理测试 1)定义错误代码 2)异常处理测试 4.不可预知异常处理 1 ...

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_03-自定义查询页面-前端...

测试

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_03-自定义查询页面-前端...相关推荐

最新文章

热门文章