leyou_04_使用vue.jsは、ページを作成 - AJAXを使用してブランドのクエリを完了するために、

1. vue.jsは、ページを作成します

　プラグインの使用テンプレートVuetify 1.1

　　UIコンポーネントは、中国の公式ウェブサイト：httpsを：//vuetifyjs.com/zh-Hans/getting-started/quick-start

　の効果を達成するために1.2

　1.3 Brand.vue最初のページを作成します

< テンプレート> 
  < スパン> 
    こんにちは
  </ スパン> 
</ テンプレート> 

< スクリプト> 
  エクスポートデフォルト{ 
    名：" マイブランド" 
  } 
</ スクリプト> 

<！ - スコープ：ノードのみに作用する現在のコンポーネントの現在のスタイル- > 
< スタイルはスコープ> 

</ スタイル>

　　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;

leyou_04_使用vue.jsは、ページを作成 - AJAXを使用してブランドのクエリを完了するために、

おすすめ