爬虫（3）- vue的使用

爬虫（3）- vue的使用

vue这边采用vue-admin-template框架。
下载地址：vue-admin-trmplate框架
同时参考文档有
Vue Router
Element有各个组件的使用说明
Vue说明文档
其通过接口读取的数据的方式
表格发送请求—调用API中函数—发送请求给后端—得到反馈—表格通过函数取得数据—采用el-table方式显示数据。
若想动态切换表格，则在发送请求的时候，传一定的参数即可。

下面是具体的实现操作。
在vue.config.js中配置代理.，注释掉before: require('./mock/mock-server.js')

proxy: {
      '/api/': {
        // target: process.env.VUE_APP_BASE_API, // 你请求的第三方接口
        target: 'http://127.0.0.1:5000/',
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          // 路径重写，
          '^/api/': '' // 替换target中的请求地址
        }
      }
    }

同时

调整login的api接口

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

这样子可以解决登录失败的问题

之后就是表格加载数据。
api

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/data',
    method: 'get',
    params
  })
}

表格的vue文件

<template>
  <div class="app-container">
    <el-form>
      类别选择：
      <el-select v-model="value2" placeholder="请选择" clearable @change="datachange(value2)">
        <el-option
          v-for="item in option"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      &nbsp;&nbsp;&nbsp; 具体选项：
      <el-select v-model="value3" multiple placeholder="请选择" @change="datachange1(value3)">
        <el-option
          v-for="item in option1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form>
    <br>
    <el-table
      v-loading="listLoading"
      :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" width="300">
        <template slot-scope="scope">
          {{ scope.row.RecruitPostName }}
        </template>
      </el-table-column>
      <el-table-column label="所属事业群" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :style=" scope.row.BGName | filter">{{ scope.row.BGName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="岗位地点" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.CountryName }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="岗位种类" width="200" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.bgnameCategoryName | statusFilter">{{ scope.row.CategoryName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="发布时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.LastUpdateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="详细类别">
        <template slot-scope="scope">
          <span>{{ scope.row.CategoryId | dataFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="button" @click="ifClick(scope.row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      />
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    filter(BgName) {
      const statusMap = {
        WXG: 'color:Red',
        CSIG: 'color:Green',
        IEG: 'color:Yellow',
        PCG: 'color:Blue',
        TEG: 'color:Orange',
        CDG: 'color:cyan',
        S1: 'color:darkblue',
        S2: 'color:crimson',
        S3: 'color:coral',
        公司其他组织: 'color:cadetblue',
        TME: 'color:grey'
      }
      return statusMap[BgName]
    },
    dataFilter(id) {
      const statusMap = {
        40001001: '技术研发类',
        40001002: '质量管理类',
        40001003: '技术运营类',
        40001004: '安全技术类',
        40001005: 'AI、算法与大数据',
        40001006: '企管类',
        40002001: '设计类',
        40002002: '游戏美术类',
        40003001: '产品类',
        40003002: '游戏产品类',
        40003003: '项目类',
        40004: '营销与公关',
        40005001: '销售类',
        40005002: '客服类',
        40006: '内容',
        40007: '财务',
        40008: '人力资源',
        40009: '法律与公共策略',
        40010: '行政支持',
        40011: '战略与投资'
      }
      return statusMap[id]
    }
  },
  data() {
    return {
      total: 0,
      list: [],
      listLoading: true,
      pagesize: 10,
      currentPage: 1,
      option: [],
      option1: [],
      value2: '',
      value3: '',
      key1: '',
      key2: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
      this.keys = this.$refs.tree.getCheckedKeys()
    },
    fetchData() {
      this.listLoading = true
      getList({ select: this.key1, select_after: this.key2 }).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.option = response.option
        this.option1 = response.option1
        this.listLoading = false
      })
    },
    current_change: function(currentPage) {
      this.currentPage = currentPage
    },
    mounted: function() {
    },
    ifClick(row) {
      // 跳转到外部页面
      // window.location.href = row
      this.$router.push({
        // path: '/tencent/newtable/formnew',
        name: 'formnew',
        params: {
          Requirement: row.Requirement,
          Responsibility: row.Responsibility,
          RecruitPostName: row.RecruitPostName
        }
      })
      console.log(this.$router)
    },
    datachange(value) {
      this.key1 = value
      this.fetchData()
    },
    datachange1(value) {
      this.key2 = value
      console.log(this.key2)
      this.fetchData()
    }
  }
}
</script>

加载了选项框,可以根据用户选择类别切换数据。

详细信息跳转的界面：

<template>
  <div class="app-container">
    <el-form ref="formnew" :model="form" label-width="120px">
      <el-form-item label="名称">
        <el-input readonly v-model="form.RecruitPostName"/>
      </el-form-item>
      <el-form-item label="工作职责">
        <el-input type="textarea" :rows="10" readonly v-model="form.Responsibility"/>
      </el-form-item>
      <el-form-item label="工作要求">
        <el-input type="textarea" :rows="10" readonly v-model="form.Requirement"/>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

export default {
  data() {
    return {
      form: {
        RecruitPostName: '',
        Requirement: '',
        Responsibility: ''
      },
      // value: new Date()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
  //读取前一个路由传输的信息（表格）
    fetchData() {
      console.log(this.$router.history.current.params)
      this.form.Requirement = this.$router.history.current.params.Requirement
      console.log(this.form)
      this.form.Responsibility = this.$router.history.current.params.Responsibility
      this.form.RecruitPostName = this.$router.history.current.params.RecruitPostName
      console.log(this.$route.params)
    }
    // onSubmit() {
    //   this.$message('submit!')
    // },
    // onCancel() {
    //   this.$message({
    //     message: 'cancel!',
    //     type: 'warning'
    //   })
    // }
  }
}

</script>

<style scoped>
.line {
  text-align: center;
}
</style>