# pethome-vue

**Repository Path**: coderyeah/pethome-vue

## Basic Information

- **Project Name**: pethome-vue
- **Description**: 基于vue的宠物之家前端功能界面
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-09-02
- **Last Updated**: 2022-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pethome

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

##使用fastmock模拟前端数据接口
```
{
"totals":100,
"data|5":[{
'id': '@increment',
'username': '@cname',
'dept': '@name',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'birthday': '@date("yyyy-MM-dd")',
'age': '@integer(1, 100)',
'state': '@integer(0,2)',
}]
}
```

##分页组件以及axios使用
~~~
`import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";

Vue.use(ElementUI)`

//发送请求的公共路径
axios.defaults.baseURL = 'https://www.fastmock.site/mock/d766d205ace54331e25258d25016eb54/pethome'
//对vue对象属性扩展
Vue.prototype.$http = axios
~~~

-----------------------------------------
~~~
**`<el-pagination
style="margin-top: 20px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="pageSizes"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>`**
~~~
---------------------------------------------
~~~
`**  data() {
return {
page: 1,  //第几页
size: 10, //每页条数
total: 0,
pageSizes: [5, 10, 20, 50, 100],
tableData: [],
loading: true,
nshow: false,
show: true
}
},**`
~~~