leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询

1.使用vue.js搭建页面

 1.1使用的模板插件Vuetify

  中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start

 1.2要实现的效果

 1.3创建Brand.vue初始化页面

<template>
  <span>
    hello
  </span>
</template>

<script>
  export default {
    name: "myBrand"
  }
</script>

<!-- scoped:当前样式只作用于当前组件的节点 -->
<style scoped>

</style>

 

  1.4首先是一个5列的表格 选用这个

  1.5复制模版

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="brand"
      :pagination.sync="pagination"
      :total-items="totalDesserts"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </div>
</template>

  

  headers:表头信息,是一个数组也就是表格的列信息

  text:表格列的名称   value:该列关联的字段   align:对齐方式   sortable:是否需要排默认false

headers: [
          {text: ‘品牌id‘, value: ‘id‘, align: ‘center‘, sortable: true},
          {text: ‘品牌名称‘, value: ‘name‘, align: ‘center‘, sortable: false},
          {text: ‘品牌LoGo‘, value: ‘image‘, align: ‘center‘, sortable: false},
          {text: ‘品牌首字母‘, value: ‘letter‘, align: ‘center‘, sortable: true},
          {text: ‘操作‘, align: ‘center‘, sortable: false},

        ],
  • items:要在表格中展示的数据,数组结构,每一个元素是一行。在这里应该是品牌集合
  • pagination.sync:分页信息,包含了当前页,每页大小,排序字段,排序方式等。加上.sync代表服务端排序,当用户点击分页条时,该对象的值会跟着变化。监控这个值,并在这个值变化时去服务端查询,即可实现页面数据动态加载了。
  • total-items:总条数,在这里是品牌的总记录数
  • loading:boolean类型,true:代表数据正在加载,会有进度条。false:数据加载完毕。 
<template slot="items" slot-scope="props">
   这段就是在渲染每一行的数据。Vue会自动遍历上面传递的items属性,并把得到的对象传递给这段template中的props.item属性。我们从中得到数据,渲染在页面即可。

1.6页面搭建完成接下来只需要使用watch监控页面数据发生改变时发送相应的ajax请求

<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div>
    <v-layout class="px-3 pb-2">
      <v-flex xs2>
        <v-btn color="info" small>新增品牌</v-btn>
      </v-flex>
      <v-spacer/>
      <v-flex xs4>
        <v-col cols="12" sm="6" md="3">
          <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-col>
      </v-flex>
    </v-layout>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :toatl-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{props.item.id}}</td>
        <td class="text-xs-center">{{props.item.name}}</td>
        <td class="text-xs-center"><img v-if="props.item.image" v-bind:src="props.item.image" width="130" height="40"/>
        </td>
        <td class="text-xs-center">{{props.item.letter}}</td>
        <td class="text-xs-center">
          <v-btn color="success" small>修改</v-btn>
          <v-btn color="error" small>删除</v-btn>
        </td>

      </template>

    </v-data-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        totalDesserts: 0,
        desserts: [],
        loading: true,
        options: {},
        headers: [
          {text: ‘品牌id‘, value: ‘id‘, align: ‘center‘, sortable: true},
          {text: ‘品牌名称‘, value: ‘name‘, align: ‘center‘, sortable: false},
          {text: ‘品牌LoGo‘, value: ‘image‘, align: ‘center‘, sortable: false},
          {text: ‘品牌首字母‘, value: ‘letter‘, align: ‘center‘, sortable: true},
          {text: ‘操作‘, align: ‘center‘, sortable: false},

        ],
        brands: [],
        pagination: {},
        totalBrands: 0,
        loading: false,
        key: "",//搜索条件
      }
    },
  }
</script>

<style scoped>

</style>

在列的最后增加一列图标
<template slot="items" slot-scope="props">
        <td class="text-xs-center">
          <v-btn color="success" small>修改       <v-icon>edit</v-icon>//用一个图标来代替修改 </v-btn>
          <v-btn color="error" small>删除</v-btn>
        </td>
</template>

增加按钮和搜索框

<v-layout class="px-3 pb-2"><!--代表是一行 -->
      <v-flex xs2><!--设置宽度 -->
        <v-btn color="info" small>新增品牌</v-btn>
      </v-flex>
      <v-spacer/> <!--自动补全中的的空间 -->
      <v-flex xs4>
        <v-col cols="12" sm="6" md="3">
          <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-col>
      </v-flex>
    </v-layout>

1.7对搜索框和分页,排序,每页记录数进行监控当数据发生改变时调用ajax

//监控
watch:{
      key(){
        this.loadBrands();
      },
      pagination:{
//深度监控
        deep:true,
        handler(){
          this.loadBrands();
        }
      }
},

1.8发送ajax方法

methods: {
      loadBrands() {
        this.$http.get("/item/brand/page", {
          params: {
            page:this.pagination.page,//当前页
            rows:this.pagination.rowsPerPage,//每页记录数
            sortBy:this.pagination.sortBy,//排序字段
            desc:this.pagination.descending,//是否降序
            key: this.key//搜索条件
          }
        }).then(resq =>{
          this.brands=resq.data.items;
          this.totalBrands=resq.data.total;
        })
      }
    },
this.$http.get("/item/brand/page", 通过vue.js的原型去配置的在http.js中定义了
Vue.prototype.$http = axios;// 将axios添加到 Vue的原型,这样一切vue实例都可以使用该对象

1.9config.js中请求地址的自动拼接 发送的任何请求都会自动拼接api

const baseUrl = ‘http://api.leyou.com‘
  api: `${baseUrl}/api`,

2.后台的处理(使用restful风格)

2.1拿到ajax传递的参数

@RestController
@RequestMapping("brand")
public class BrandController {

    @Autowired
    private BrandService brandService;
    @GetMapping("page")
    public ResponseEntity<PageResult<Brand>> queryBrandPage(
            @RequestParam(value = "page", defaultValue = "1") Integer page,
            @RequestParam(value = "rows", defaultValue = "5") Integer rows,
            @RequestParam(value = "storyBy", required = false) String storyBy,
            @RequestParam(value = "desc", defaultValue = "false") boolean desc,
            @RequestParam(value = "key", required = false) String key) {

           PageResult<Brand> result=brandService.queryBrandPage(page,rows,storyBy,desc,key);
        System.out.println(result);
           return  ResponseEntity.ok(result);
    }
}

2.2在servicer中处理//分页//过滤//排序//查询//结果集的封装

通过通用mapper操作数据库

@Service
public class BrandService {
    @Autowired
    private BrandMapper brandMapper;

    public PageResult<Brand> queryBrandPage(Integer page, Integer rows, String storyBy, boolean desc, String key) {
        //分页   mapper自带的分页助手
        PageHelper.startPage(page, rows);

        //过滤  select * from tb_brand where name like "%"+key+"%" or letter==key order by storyBy  desc
        Example example = new Example(Brand.class);
        if (StringUtils.isNotBlank(key)) {
            example.createCriteria().orLike("name", "%" + key + "%").orEqualTo("letter", key.toUpperCase());
        }

        //排序
        if (StringUtils.isNotBlank(storyBy)) {
            String orderByClause=storyBy+(desc? " desc":" asc");
            example.setOrderByClause(orderByClause);
        }

        //查询
        List<Brand> list = brandMapper.selectByExample(example);
        if (CollectionUtils.isEmpty(list)){
            throw  new LyException(ExceptionEnum.BRAND_NOT_FOND);
        }
        //帮我们把查询到的结果List进行封装  封装的结果集里面有Total,pageNum,pageSizedeng
        PageInfo<Brand> info = new PageInfo<>(list);

        //封装结果集
        PageResult<Brand> result = new PageResult<Brand>(info.getTotal(),list);

        return result;

    }
}
 PageInfo<Brand> info = new PageInfo<>(list);帮我们把查到的sql语句结果强转为PageInfo对象
PageInfo对象中定义了很多的分页属性例如:
private static final long serialVersionUID = 1L;
    //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;
    //当前页面第一个元素在数据库中的行号
    private int startRow;
    //当前页面最后一个元素在数据库中的行号
    private int endRow;
    //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List<T> list;
 

原文地址:https://www.cnblogs.com/asndxj/p/11568720.html

时间: 2024-10-28 09:40:55

leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询的相关文章

基于webpack和vue.js搭建开发环境

前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理……不忍直视2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的……3.数据的渲染使用模板引擎,这就意味着你要

基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)

人类的发展得益于对追求不断的提升,在能活着的基础上是否要活得潇洒一点,技术的发展亦如是.在公司作为一个最最最最最最最底层的搬砖码农,经历了两个版本的铸(zhe)炼(mo)之后,我痛下决心今后一定要:…………..一定要和产品惺(shi)惺(bu)相(liang)惜(li). 开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5

vue.js单页面应用实例

一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

vue.js实现页面倒计时跳转功能

需求分析: 页面倒计时5秒后进入系统主页,数字需要实时更新! <template> <div class=""> <h1>欢迎来到Vue.js项目首页</h1> <h2>你将在<span style="color:red">{{time}}</span>秒后进入系统</h2> </div> </template> <script> ex

ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

 一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自己的职业发展还是很有帮助的.毕竟,现在都快到9102年了,如果你还是只会 Web Form,或许还是能找到很多的工作机会,可是,这真的不再适应未来的发展了.如果你准备继续在 .NET 平台下进行开发,适时开始拥抱开源,拥抱 ASP.NET Core,即使,现在工作中可能用不到. 雪崩发生时,没有一

vue.js:搭建开发环境及构建项目

发环境的搭建 安装node.js 直接下一步就好, 注意安装的位置 Node.js官网:https://nodejs.org/en/ 验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口.输入node -v即可得到对应的Node.js版本. npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm. 输入npm -v可得到npm的版本. 注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0

Vue.js搭建官方项目的步骤

搭建官方项目模板步骤:  1.npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法.这两个有一定的区别,我们都知道package.json  中有一个 "dependencies" 和 "devDependencies" 的.dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runt

Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目. 在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识.作为一个之前以PHP+模版引擎为主的开发,从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验

vue.js的快速入门使用

1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: ? 中文:https://cn.vuejs.org/ ? 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ vue.js目前有1.x.2.x和3.x 版本,我们学习2.x版本的. 1.2 vue.js库的基本使用