Day5 - 前端基础页面开发

一. 登录功能改造

vue-admin-template 模块默认的登录地址是 https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin，我们需要将其改成本地后端地址，才能访问自己的后台。

1. 前端 config/dev.env.js 文件：将 BASE_API 改为本地后端地址，我这里是 http://localhost:8081；
2. 后端增加一个登录接口，写好 login() 和 info() 方法，这里暂时不查数据库：

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin
public class EduLoginController {
    @PostMapping("login")
    public Result login() {
        return Result.ok().data("token", "admin");
    }

    @GetMapping("info")
    public Result getInfo() {
        return Result.ok().data("roles", "[admin]").data("name", "admin").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }
}

3. 修改前端 src/api/login.js 文件中的请求url，要与后端保持一致。

注意这里有2个问题：

1. 跨域问题：
   
   当从一个地址去访问另一个地址时，若 访问协议、IP地址、端口号中有一个不相同就叫做跨域。出现了跨域问题，有两种解决方案：
   （1）在后端controller中添加 @CrossOrigin 注解（每个都要加）；
   （2）通过网关解决。（后面再进行介绍）

2. 返回状态码
   vue-admin-template 默认通过 response 的 code 进行请求成功失败判定，而且默认 20000 表示成功，其他表示失败。所以后端请求成功时需要返回 code 为 20000。

二. 前端页面开发流程

在 vue-admin-template 页面模块上进行二次开发，需要以下三个步骤：

1. 在 src/router/index.js 中添加路由；

{
    path: '/teacher', //地址
    component: Layout,
    redirect: '/teacher/table', //重定向的地址
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/teacherList'), //关联跳转的页面
        meta: { title: '讲师列表', icon: 'table' } //title是显示在页面的标题
      },
      {
        path: 'add',
        name: '讲师添加',
        component: () => import('@/views/edu/teacher/addTeacher'),
        meta: { title: '讲师添加', icon: 'tree' }
      }
    ]
  },

2. 在 src/api 下编写页面中调用的方法（js）。

import request from '@/utils/request'

export function getTeacherList(page, size, queryCondition) {
  return request({
    url: `/eduservice/teacher/pageTeacherCondition/${page}/${size}`,
    method: 'post',
    data: queryCondition
  })
}

3. 在 src/views 下进行相应页面的编写（vue）；

<template>
    <div>
        讲师列表
    </div>
</template>

<script>
import {getTeacherList} from '@/api/edu/teacher/teacher.js'

export default {
    data() {
        return {
            teacherList: [],
            page: 1,
            size: 2,
            total: 0,
            queryCondition: {}
        }
    },

    created() {
        this.getTeacherList();
    },

    methods: {
        getTeacherList(page=1) {
            this.page = page
            getTeacherList(this.page, this.size, this.queryCondition)
            .then(response => {
                this.teacherList = response.data.records
                this.total = response.data.total
            })
            .catch(error => {

            })
        }
    }
}
</script>

另外，element-ui 中封装了各种样式的前端模块，可以很方便地进行调用：Element 官网

三. Element中重要基础

1. 基本属性

1. 输入框
   :v-model：输入框中绑定的对象（双向绑定）
   :value：绑定的值（单向绑定）

2. 表单
   :model ：表示该表单绑定的对象

3. table
   :data：table绑定的列表
   prop：table每一栏对应的属性
   < template slot-scope=“scope”>：这里的scope代表整个table， 取某一行只需要 scope.row

2. 分页显示

分页使用 el-pagination 标签实现， @current-change 保证每次翻页时都传入当前页数（隐式传入），查询到正确的数据显示。需要注意的一点是 getTeacherList 这个方法需要有一个入参，不然每次查到的都是第一页的内容。

<el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :current-page="page"
    :page-size="size"
    style="text-align:center"
    @current-change="getTeacherList">
</el-pagination>

getTeacherList(page=1) { //默认入参为1
	this.page = page
	getTeacherList(this.page, this.size, this.queryCondition)
	.then(response => {
	    this.teacherList = response.data.records
	    this.total = response.data.total
	})
}

3. 路由跳转

（1）在事件响应方法里，通过 this.$router.push({path: “xxxxx”}) 实现路由跳转；
（2）若点击页面上的按钮就进行页面跳转，还可以通过 router-link 标签进行跳转：

<el-table-column label="操作">
    <template slot-scope="scope">
        <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button size="mini" type="primary">编辑</el-button>
        </router-link>
    </template>
</el-table-column>

注意：上述两种方法都需要添加在 js 文件中添加路由，只不过此时路由状态是 hidden 的，即上述跳转的路径都在路由中声明了。

{
  path: 'edit/:id', //:id 相当于一个占位符，需要传入参数
  name: '讲师编辑',
  component: () => import('@/views/edu/teacher/addTeacher'),
  meta: { title: '讲师编辑', icon: 'tree' },
  hidden: true
}

四. 增删改查之编辑功能开发

前端基本功能包括增删改查，其中修改功能需要注意的点比较多，在这里详细说下。
（1）首先，修改与增加共用一个页面，只不过修改时需要反显数据（多一个查询操作），所以进入页面时，需要判断是否反显数据。由于修改时会传入该条记录的 id 值，所以我们通过路由中是否存在 id 参数（path中有 :id 占位符）来判断：

created() {
	if(this.$route.params && this.$route.params.id) {
		//反显数据
    	this.getTeacherInfo(this.$route.params.id)
    } 
}

（2）同样，在点击【提交】按钮时，也需要判断是新增还是修改。通过表单中是否存在id值来进行判断：

addOrEditTeacher() {
	if (!this.teacherForm.id) {
       this.addTeacher()
    } else {
        this.editTeacher()
    }
}

（3）开发完成后，有一个小bug。如果先点击了【编辑】反显了数据，再点击【新增】，反显的数据不会被清空。在上述 created 方法中，添加 else 分支清空表单也没有效果，这是因为由于两者共用了页面，created() 方法只会在开始时执行一次。正确的方法是使用 watch 进行监听，当路由发生变化时，即执行一下判断操作：

created() {
        this.init()
    },
watch: {
    //路由监听，每次路由发生变化都会执行
    $route(to, from) {
        this.init()
    }
},
methods: {
    init() {
        //通过判定路径中是否存在id参数来判断是否反显数据
        if(this.$route.params && this.$route.params.id) {
            this.getTeacherInfo(this.$route.params.id)
        } else {
        	//清空操作
            this.teacherForm = {}
        }
    }
}