前端环境搭建(谷粒学院)(学习）

前端环境搭建(谷粒学院)（学习）

在下载了Vue_admin_temeple_master框架的基础上搭建开发环境

1.在控制台中输入npm install将依赖全部下载

2.将config中的index.js中的useLine属性改为false

注意：

config–>dev配置要改成自己的后端接口

环境搭建基本完成

在api中的url对应着后端请求路径

首先编写目录树，也就是Vue路由

router–>index.js

{
  path: '/teacher',
  component: Layout,
  redirect: '/edu/teacher/AllTeacher',
  name: '讲师管理模块',
  meta: { title: '讲师管理模块', icon: 'example' },
  children: [
    {
      path: 'AllTeacher',
      name: '全部讲师',
      component: () => import('@/views/edu/teacher/AllTeacher'),
      meta: { title: '全部讲师', icon: 'table' }
    },
    {
      path: 'PageTeacher',
      name: '分页查询讲师',
      component: () => import('@/views/edu/teacher/PageTeacher'),
      meta: { title: '分页查询讲师', icon: 'tree' }
    }
  ]
},

后面在views中编写路由改变页面

vivews–>edu–>teacher–>pageTeacher.vue

<template>
  <div id="app">
    <h1>分页查询讲师</h1>
  </div>
</template>

<script>
import teacher from '@/api/edu/pageTeacher'
export default {
  data(){
    return{
      list:null,
      page:1,
      // limit:10,//每页记录数
      // total:0,//总记录数
      // teacherQuery:{} //条件封装对象
      teacher:null
    }
  },
  methods:{
    addTeacher(){
      teacher.addTeacher(this.teacher)
        .then(response=>{
          console.log(response);
        })
        .catch(err=>{
          console.log(err)
        })
    },
  },
  created(){
    this.addTeacher();
  },
  mounted() {

  }

}
</script>

同理，另一个页面也要处理

注：router中的index.js解析

path要改成自己的路径

redirect为默认显示子页面（选取默认显示页面）

meta:

​ name:自己定义的页面名

​ icon:图标

component: () => import('@/views/edu/teacher/AllTeacher'),

表示跳转的页面

3.编写核心文件

views:

pageTeacher:

<script>import teacher from '@/api/edu/pageTeacher'

export default {
  data(){
    return{
      list:null,
      page:1,
      // limit:10,//每页记录数
      // total:0,//总记录数
      // teacherQuery:{} //条件封装对象
      teacher:null
    }
  },
  methods:{
    addTeacher(){
      teacher.addTeacher(this.teacher)
        .then(response=>{
          console.log(response);
        })
        .catch(err=>{
          console.log(err)
        })
    },
  },
  created(){
    this.addTeacher();
  },
  mounted() {

  }

}</script>

4.使用element_ui编写数据显示格式

 <!-- 表格 -->
<el-table
  :data="list"
  border
  fit
  highlight-current-row>

  <el-table-column
    label="序号"
    width="70"
    align="center">
    <template slot-scope="scope">
      {{ (page - 1) * limit + scope.$index + 1 }}
    </template>
  </el-table-column>

  <el-table-column prop="name" label="名称" width="80" />

  <el-table-column label="头衔" width="80">
    <template slot-scope="scope">
      {{ scope.row.level===1?'高级讲师':'首席讲师' }}
    </template>
  </el-table-column>

  <el-table-column prop="intro" label="资历" />

  <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

  <el-table-column prop="sort" label="排序" width="60" />

  <el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
      <router-link :to="'/teacher/edit/'+scope.row.id">
        <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
      </router-link>
      <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

注：这是在如下模板中的代码

<template>
  <div id="app">
    <h1>分页查询讲师</h1>
  </div>
</template>

好，这个前端代码基本实现

后面编写后端代码

只需要加上一个跨域问题解决注解即可

@CrossOrigin