B064-基础环境-前端环境 单页面组件 ElementUI Mock axios

搭建前端项目

脚手架

1.创建一个static web项目
2.基于脚手架安装webpack环境
 vue init webpack
 路由前和本身yes 后no
3.运行
 npm run dev

如果半路失败了，你可以直接在控制台输入：npm install
如果查看js有报错 请alt + 回车，切换es6语法
如果打开Vue页面，显示的是文本 需要在setting安装Vue插件

自己写第一个单页面

1.在src/components 里面copy + edit
2.在index.js中引入你自定义的组件

import HelloWorld2 from '@/components/HelloWorld2'

3.配置路由规则

   {
         path: '/hello',
         name: 'test',
         component: HelloWorld2
   }

浏览器访问

单页面组件

见文档

单页面组件的编写和使用步骤

一：单页面组件包含三个部分:
  1. html
    <template>
  2.css
    <style scoped>
  3.js(重要)
    export default {					里面相当于new vue里的内容
      name: 'test',
      data () {
        return {
          msg: '我自己写的第一个组件'
        }
      },
      methods:{
      },
      mounted(){
      },
      components:{
      }
    }

二：如何单页面
  将当前页面交给路由使用
  1.在路由中引入我们写好的组件
  2.配置路由规则

ElimentUi

入门

基于vue前端的ui框架, 有很多已经用vue开发好的可以直接引用的组件。我们可以使用这些组件快速开发前端项目。

1.安装
ctrl+c 终止批处理操作吗(Y/N)? y
npm i element-ui -S

2.引用
在main.js中Vue核心组件下面写入以下内容:
import ElementUI from ‘element-ui’; //引入核心js组件
import ‘element-ui/lib/theme-chalk/index.css’;//引入依赖的样式
Vue.use(ElementUI) //告诉使用

1.写component
2.路由引入组件
3.路由配置访问路径
npm run dev
浏览器访问

table案例

:data：绑定数据 v-model
el-table-column ：一列
prop：申明属性
label：表头/标签
保留一列宽度不写,以撑满对应行

mounted加载函数

Mockjs

是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。

1.使用mockjs来mock数据
2.需要将我们模拟的数据交给项目使用
0.通过页面中的钩子函数，发送请求从mock中拿数据
0.将mock返回的数据绑定给data中的属性tableData

1.下载安装mock.js
npm install mockjs

0.根目录创建demo1.js，加入如下代码 即1.使用mockjs来mock数据

let Mock=require('mockjs') 
let data=Mock.mock({ 
// name|规则:值
'list|5':[ 
{ 
'id':1, 
'name':'测试' 
} 
] 
}) 
console.log(JSON.stringify(data)) 

0.执行命令 node demo1.js

2.根目录新创建一个文件夹mock,然后文件夹下创建tableMock.js, tableMock.js里面copy代码, 用来模拟数据

import Mock from 'mockjs' 							// 引入mock	即1	使用mockjs来mock数据
var dataList = []
for (var i = 0; i < 15; i++) {
  dataList.push(Mock.mock({							//随机生成数据放入dataList
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }))
}

//index开始的位置 size 每页显示的条数 list 总体数据
function pagination(index, size, list) {
  return list.slice((index-1)*size, index*size)				//截取,用来分页,含前不含后
}

// 获取用户列表  
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {		//模拟接收ajax请求的后端接口
  var list =dataList;
  console.log(opts.body)
  var index = JSON.parse(opts.body).page;
  var size = 10;
  var total = list.length
  list = pagination(index, size, list)					//分页参数(currentPage,pageSize)
  return {
    'total': total,										//回调返回结果
    'data': list
  }
})

3.将自己mock的数据交给项目管理
main.js 引入 import tableMcock from “…/mock/tableMock”

然后需要使用axios来发送请求，获取模拟数据

axios

1.安装axios
npm install axios --save

2.引用axios
a.局部使用: 在script脚本中引入

import axios from "axios"

b.全局使用: 在main.js中引入

import axios from "axios"
//配置axios的全局基本路径 t
axios.defaults.baseURL='http://localhost:8080'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

代码使用：

<script>
export default {
  name: 'test',
  data(){
    return {
      tableData:[],//页面初始化的时候，不应该有数据
      total:0													//补充
    }
  },
  methods:{
     getTables(){
       this.$http.post("/user/list",{"currentPage":1})
         .then(result=>{
           result = result.data;
           this.tableData = result.rows;          //赋值
           this.total = result.total;
         })
         .catch(result=>{
           alert("报错了")
         })
     }
  },
  mounted(){							//在页面加载完成后触发  一般用来加载数据（从后端去拿数据）
    this.getTables();					//不要在这里发送ajax请求去获取数据
  }
}
</script>

EasyMock/fastmock

在线 mock 服务

department列表页实现

department.vue

<template>
  <div class="hello">
    <el-table
      :data="rows"
      height="500"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="160">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="280">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="400">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button  type="text" size="big">查看</el-button>
          <el-button type="text" size="big">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="right"
      background
      layout="prev, pager, next"
      :total=total
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="getDepartments"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'department',
  data () {
    return {
      rows:[],
      total:0,
      pageSize:10,
      currentPage:1
    }
  },
  methods:{
    /*handleCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getDepartments();
    },*/
    getDepartments(currentPage){
      if(currentPage){
        this.currentPage = currentPage;
      }
      this.$http.post("/department/list",{"currentPage":this.currentPage})
        .then(result=>{
          if(result){
            result = result.data;
            this.rows = result.rows;
            this.total = result.total;
          }
        }).catch(result=>{})
    }
  },
  mounted(){
    this.getDepartments();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
import myButton from '@/components/myButton'
import myTable from '@/components/myTable'
import department from '@/components/department'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'test',
      component: HelloWorld2
    },
    {
      path: '/myButton',
      name: 'myButton',
      component: myButton
    },
    {
      path: '/myTable',
      name: 'myTable',
      component: myTable
    },
    {
      path: '/department',
      name: 'department',
      component: department
    }
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)

/*全局引入我们的mock数据*/
import tableMcock from "../mock/tableMock"

import axios from 'axios'

//配置axios的全局基本路径 t
axios.defaults.baseURL='http://localhost:8080'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

tableMock.js

import Mock from 'mockjs' // 引入mock
var dataList = []
for (var i = 0; i < 100; i++) {
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'date': '@date("yyyy-MM-dd")'
  }))
}

//开始的位置 size 每页显示的条数 list 总结数据
function pagination(currentPage, pageSize, list) {
  // index = 2 size 10   list.slice(10,20)
  return list.slice((currentPage-1)*pageSize, currentPage*pageSize)
}
// 获取用户列表
Mock.mock(new RegExp('/department/list'), 'post', (opts) => {
  var list =dataList;
  console.log(opts.body)
  var currentPage = JSON.parse(opts.body).currentPage;
  var pageSize = 10;
  var total = list.length
  list = pagination(currentPage, pageSize, list)
  return {
    'total': total,
    'rows': list
  }
})

测试：http://localhost:8080/#/department

分页流程分析