在线教育_Day05-项目讲师管理模块前端开发-阿里云开发者社区

一、vue-element-admin

1.1 简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

功能：介绍 | vue-element-admin功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

1.2 安装

# 解压压缩包

# 进入目录

cd vue-element-admin-master

# 安装依赖

npm install

# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/

npm run dev

二、项目的创建和基本配置

2.1 项目信息基本修改

2.1.1 创建项目

将vue-admin-template-master重命名为gl-edu

2.1.2 修改项目信息

修改项目中的package.json文件

{

"name": "gl-edu",

......

"description": "在线教育后台管理系统",

"author": "zjl <459380074@qq.com>",

......

}

2.1.3 修改端口号

如何需要修改端口号，可以在config/index.js中修改

port: 9528

2.1.4 项目的目录结构

├── build // 构建脚本

├── config // 全局配置

├── node_modules // 项目依赖模块

├── src //项目源代码

├── static // 静态资源

└── package.jspon // 项目信息和依赖配置

src

├── api // 各种接口

├── assets // 图片等资源

├── components // 各种公共组件，非公共组件在各自view下维护

├── icons //svg icon

├── router // 路由表

├── store // 存储

├── styles // 各种样式

├── utils // 公共工具，非公共工具，在各自view下维护

├── views // 各种layout

├── App.vue //***项目顶层组件***

├── main.js //***项目入口文件***

└── permission.js //认证入口

2.1.5 运行项目

npm run dev

2.2 登录页修改

src/views/login/index.vue（登录组件）中的第4行

<h3 class="title">在线教育后台管理系统</h3>

src/views/login/index.vue（登录组件）中的第28行

<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">

</el-button>

2.3 页面零星修改

2.3.1 标题

index.html（项目的html入口）

<title>在线教育后台管理系统</title>

修改后热部署功能，浏览器自动刷新

2.3.2 国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

2.3.3 icon

复制 favicon.ico 到根目录

2.3.4 导航栏文字

src/views/layout/components（当前项目的布局组件）Navbar.vue文件中第13行

<el-dropdown-item>

首页

</el-dropdown-item>

src/views/layout/components（当前项目的布局组件）Navbar.vue文件中第17行

2.3.5 面包屑文字

src/components（可以在很多项目中复用的通用组件）

src/components/Breadcrumb/index.vue第38行

meta: { title: '首页' }

三、Eslint语法规范型检查

3.1 ESLint简介

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调适。

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。让程序员在编码的过程中发现问题而不是在执行的过程中。

3.2 语法规则

ESLint 内置了一些规则，也可以在使用过程中自定义规则。

本项目的语法规则包括：两个字符缩进，必须使用单引号，不能使用双引号，语句后不可以写分号，代码段之间必须有一个空行等。

3.3 确认开启语法检查

打开 config/index.js，配置是否开启语法检查

useEslint: true,

可以关闭语法检查，建议开启，养成良好的编程习惯。

3.4 ESLint插件安装

vs code的ESLint插件，能帮助我们自动整理代码格式

3.5 插件的扩展设置

选择vs code左下角的“设置”，打开 VSCode 配置文件,添加如下配置

"files.autoSave": "off",

"eslint.validate": [

"javascript",

"javascriptreact",

"vue-html",

{

"language": "vue",

"autoFix": true

}

"eslint.run": "onSave",

"eslint.autoFixOnSave": true

四、登录改造

前台页面登录按钮访问的地址是:https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login。目前这个地址已经失效，如果我们点击登录，会出现报错的问题，登录不进去。

所以接下来，我们先写一个简单的登录接口，为了我们能登录进去，做一些功能。后期我们再一次完善该功能

把登录地址改造成：https://localhost:8001

4.1 修改配置文件请求地址

config文件夹里面有dev.env.js文件

4.2 编写后台登录功能

在登录时会调用两个方法，login登录方法和info登录之后获取用户信息的方法。所以在后台我们要创建两个方法实现登录。

4.2.1 编写EduLoginController

在edu-service模块中创建EduLoginController

@RestController

@RequestMapping("/eduservice/user")

public class EduLoginController {

@RequestMapping("/login")

public R login() {

return R.ok().data("token","admin");

}

@RequestMapping("/info")

public R info() {

HashMap<Object, Object> objectObjectHashMap = new HashMap<>();

return R.ok().data("roles", "[admin]").data("name", "admin").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");

}

4.2.2 修改前台页面访问路径

修改api文件夹login.js修改本地接口路径

4.3 解决跨域问题

以上内容我们修改之后,重启前端服务器和启动后台8001商品，进行访问登录，还是会出现无法登录问题。

此时我们打开浏览器控制台，查看报错信息。出现了跨域问题。

4.3.1 什么是跨域

通过一个地址去访问另外一个地址，这个过程如果有三个地方有任何一个地方不一样，就会出现跨域问题。

访问协议
ip地址
端口号

4.3.2 跨域解决方式

在Controller方法添加@CrossOrigin注解

使用网关解决(后面讲)

在今天我们使用注解方式解决跨域问题。再次进行访问。

五、前端框架使用步骤

5.1 添加路由

在src/router中的index.js文件添加我们想要的路由。

5.2 点击路由设置相应页面

点击某个路由我们要显示对应的页面。设置路由方式如下图:

在views文件夹下有一个文件table子文件夹，在table文件夹下有一个页面index文件，这个文件就是对应的页面。我们做讲师相应的模块时，就可以按照这个方式进行设置相应的页面。

5.3 创建文件和定义接口和参数

在api文件夹下，创建js文件，定义接口地址和参数。

5.4 在页面文件中引入js文件

在对应的vue页面文件中，引入定义好的接口js文件，调用方法实现功能。

引入语法

import 对象名 from '@/api/...'

5.5 使用Element-ui展示数据

以上工作做完之后，就可以在vue页面中，数据展示等。这里以table.vue为例进行展示。

template是elementui中的写法，用来展示布局

六、后台系统路由实现分析

6.1 入口文件中调用路由

在src/main.js

......

import router from './router' //引入路由模块

......

new Vue({

el: '#app',

router, //挂载路由

store,

render: h => h(App)

})

6.2 路由模块中定义路由

src/router/index.js

......

export const constantRouterMap = [

......

]

export default new Router({

......

routes: constantRouterMap

})

6.3 在线教育路由定义

6.3.1 复制icon图标

将vue-element-admin/src/icons/svg 中的图标复制到 gl-edu项目中

6.3.2 修改路由

修改 src/router/index.js 文件，重新定义constantRouterMap

注意：每个路由的name不能相同

export const constantRouterMap = [

{ path: '/login', component: () => import('@/views/login/index'), hidden: true },

{ path: '/404', component: () => import('@/views/404'), hidden: true },

// 首页

{

path: '/',

component: Layout,

redirect: '/dashboard',

children: [{

path: 'dashboard',

component: () => import('@/views/dashboard/index'),

meta: { title: '在线教育后台管理首页', icon: 'dashboard' }

}]

// 讲师管理

{

path: '/edu/teacher',

component: Layout,

redirect: '/edu/teacher/list',

meta: { title: '讲师管理', icon: 'peoples' },

children: [

{

path: 'list',

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

meta: { title: '讲师列表' }

{

path: 'create',

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

meta: { title: '添加讲师' }

{

path: 'edit/:id',

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

meta: { title: '编辑讲师', noCache: true },

hidden: true

}

]

{ path: '*', redirect: '/404', hidden: true }

]

6.3.3 创建vue组件

在src/views文件夹下创建以下文件夹和文件

6.3.4 list.vue

讲师列表

</div>

</template>

6.3.5 save.vue

讲师添加

</div>

</template>

6.3.5 重启进行测试

七、讲师前台功能实现

7.1 分页列表

7.1.1 定义api

创建文件 src/api/edu/teacher/teacher.js

import request from '@/utils/request'

export default {

// 此参数的名称要与后台接口的参数名称一致

getTeacherListPage(page,limit,teacherQuery) {

return request({

// url: '/eduservice/edu-teacher/pageTeacherCondition/'+page+'/'+limit,

// 推荐方式

url: `/eduservice/edu-teacher/pageTeacherCondition/${page}/${limit}`,

method: 'post',

// params 后台使用RequestBody接收数据，是要的json数据，所以不能使用params进行传参

data: teacherQuery // 把data对象转换成json进行传参

})

}

7.1.2 初始化vue组件

src/views/edu/teacher/list.vue

讲师列表

</div>

</template>

import teacher from '@/api/edu/teacher/teacher.js'

export default {

data() {// 定义数据

return {}

created() { // 当页面加载时获取数据

methods: {

}

</script>

7.1.3 定义data

data() {

return {

listLoading: true, // 是否显示loading信息

list: null, // 数据列表

total: 0, // 总记录数

page: 1, // 页码

limit: 10, // 每页记录数

teacherQuery: {}// 查询条件

}

7.1.4 定义methods

methods: {

getList(){

teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)

.then(response =>{ // 请求成功所调用的函数

console.log(response)

})

.catch(error =>{ // 请求成功所调用的函数

console.log(error)

})

}

进行测试，接口是否正常，最好都要重启前后台的服务器进行测试

7.1.5 填充后台传过来的数据

在method方法中，接收后台真实传递过来的数据，最后在页面列表中显示

getList() {

teacher

.getTeacherListPage(this.page, this.limit, this.teacherQuery)

.then((response) => {

this.listLoading = false

// 请求成功所调用的函数

// console.log(response)

this.list = response.data.rows;

this.total = response.data.total;

console.log("总记录数:" + this.list);

console.log("total:" + this.total);

})

.catch((error) => {

// 请求成功所调用的函数

console.log(error);

});

7.1.6 表格渲染

将接收到的列表数据，渲染到页面上

<el-table

v-loading="listLoading"

:data="list"

element-loading-text="数据加载中"

border

fit

highlight-current-row>

<el-table-column

label="序号"

width="70"

align="center">

</template>

</el-table-column>

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

<el-table-column label="头衔" width="80">

</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">

<router-link :to="'/edu/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>

7.1.7 分页组件

添加分页组件

<el-pagination

:current-page="page"

:page-size="limit"

:page-sizes="[5, 10, 20, 30]"

:total="total"

style="padding: 30px 0; text-align: center"

layout="total, sizes, prev, pager, next, jumper"

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

修改分页展示为中文提示

在main.js中引入中文element-ui包

import locale from 'element-ui/lib/locale/lang/zh-CN'

7.1.8 顶部查询表单

<el-form :inline="true" class="demo-form-inline">

<el-form-item size="medium">

<el-input v-model="teacherQuery.name" placeholder="讲师名" />

</el-form-item>

<el-form-item>

<el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔" size="medium">

<el-option :value="1" label="高级讲师" />

<el-option :value="2" label="首席讲师" />

</el-select>

</el-form-item>

<el-form-item label="添加时间">

<el-date-picker

v-model="teacherQuery.begin"

type="datetime"

placeholder="选择开始时间"

value-format="yyyy-MM-dd HH:mm:ss"

default-time="00:00:00"

size="medium"

</el-form-item>

<el-form-item>

<el-date-picker

v-model="teacherQuery.end"

type="datetime"

placeholder="选择截止时间"

value-format="yyyy-MM-dd HH:mm:ss"

default-time="00:00:00"

size="medium"

</el-form-item>

<el-button type="primary" size="medium" icon="el-icon-search" @click="fetchData()"

>查询</el-button

<el-button type="default" size="medium" @click="resetData()">清空</el-button>

</el-form>

注意：

element-ui的 date-picker组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时

设置 value-format="yyyy-MM-dd HH:mm:ss" 改变绑定的值

点击按键清空输入内容的方法

// 表单清空

resetData() {

this.teacherQuery = {}

}

7.1.9 测试

7.2 删除功能

7.2.1 定义api

在src/api/edu/teacher/teacher.js下添加以下方法

removeById(teacherId) {

return request({

url: `/eduservice/edu-teacher/${teacherId}`,

method: 'delete'

})

}

7.2.2 定义methods

src/views/edu/teacher/list.vue

使用MessageBox 弹框组件

// 根据id删除讲师

removeDataById(id) {

this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {

confirmButtonText: "确定",

cancelButtonText: "取消",

type: "warning",

}).then(()=>{

teacher.removeById(id).then(response =>{

this.$message({

type: 'success',

message: '删除成功!'

})

this.getList()

})

7.3 新增功能

7.3.1 定义api

在src/api/edu/teacher/teacher.js下添加以下方法

addTeacher(teacher) {

return request({

url: `/eduservice/edu-teacher/addTeacher`,

method: 'post',

data: teacher

})

}

7.3.2 初始化组件

src/views/edu/teacher/save.vue

html页面代码

<el-form label-width="120px">

<el-form-item label="讲师名称">

<el-input v-model="teacher.name"/>

</el-form-item>

<el-form-item label="讲师排序">

<el-input-number v-model="teacher.sort" controls-position="right" :min="0"/>

</el-form-item>

<el-form-item label="讲师头衔">

<el-select v-model="teacher.level" clearable placeholder="请选择">

<!--

数据类型一定要和取出的json中的一致，否则没法回填

因此，这里value使用动态绑定的值，保证其数据类型是number

-->

<el-option :value="1" label="高级讲师"/>

<el-option :value="2" label="首席讲师"/>

</el-select>

</el-form-item>

<el-form-item label="讲师资历">

<el-input v-model="teacher.career"/>

</el-form-item>

<el-form-item label="讲师简介">

<el-input v-model="teacher.intro" :rows="10" type="textarea"/>

</el-form-item>

<el-form-item>

<el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>

</el-form-item>

</el-form>

</div>

</template>

js代码

export default {

data() {

return {

teacher: {

sort: 0,

level: 1,

career: '',

intro: '',

avatar: ''

saveBtnDisabled: false // 保存按钮是否禁用,

}

methods: {

// 该方法要实现添加和修改两个功能

saveOrUpdate() {

this.saveBtnDisabled = true

this.saveTeacher()

// 保存

saveTeacher() {

}

</script>

7.3.3 实现新增功能

引入teacher api模块

import teacher from "@/api/edu/teacher/teacher.js";

完善saveTeacher方法

// 保存
saveTeacher() {
    teacher.addTeacher(this.teacher).then(response => {
        this.$message({
            type: 'success',
            message: '添加成功!'
        })
        // 重新查询数据，路由跳转
        this.$router.push({path:"/teacher/table"})
    })
},

7.4 回显功能

7.4.0 添加路由

在src/router下index.js文件，添加编辑功能路由

{
        path: 'edit/:id',
        name: '编辑讲师',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '编辑讲师', icon: 'tree' },
        hidden:true // 不显示
}

修改list.vue，设置修改按钮路由跳转路径

<router-link :to="'/teacher/edit/' + scope.row.id">

<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>

</router-link>

7.4.1 定义api

在src/api/edu/teacher/teacher.js下添加以下方法

// 根据id查询讲师
  getTeacherById(teacherId) {
    return request({
        url: `/eduservice/edu-teacher/getTeacherById/${teacherId}`,
        method: 'get'
    })
  }

7.4.2 组件中调用api

在save.vue文件的methods中定义根据讲师id查询的方法

// 根据讲师id查询讲师

getTeacherInfo(id){

teacher.getTeacherById(id).then(response =>{

this.teacher= response.data.item

})

7.4.3 页面渲染前调用getTeacherInfo

该页面是添加和修改共用一个页面，所以还是要判断什么时候是修改操作，什么时候是添加操作。

我们可以判断路径中是否有讲师id，如果有讲师id就是修改操作，反之则是添加操作。

created() {

console.log('created')

if (this.$route.params && this.$route.params.id) {

const id = this.$route.params.id

this.getTeacherInfo(id)

}

7.5 更新操作

7.5.1 定义api

在src/api/edu/teacher/teacher.js下添加以下方法

updateTeacherById(teacher) {
    return request({
        url: `/eduservice/edu-teacher/updateTeacherById`,
        method: 'post',
        data: teacher
    })
}

7.5.2 组件中调用api

在save.vue中的methods中定义updateTeacher方法

// 根据id更新记录 
updateTeacher() {
        this.saveBtnDisabled = true
        teacher.updateTeacherById(this.teacher).then(response => {
             this.$message({
                type: 'success',
                message: '修改成功!'
            })
            // 重新查询数据，路由跳转
             this.$router.push({path:"/teacher/table"})
        })
    }
7.5.3 完善saveOrUpdate方法
saveOrUpdate() {
    // 判断是修改还是添加
    // 根据teacher是否有id
    this.saveBtnDisabled = true;
    if(!this.teacher.id){
        this.saveTeacher()
    }else{
        this.updateTeacher()
    }
}

7.6 存在问题

vue-router导航切换时，如果两个路由都渲染同个组件，组件会重（chong）用,

组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新

因此：

1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容

2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，

如果是新增路由，则重新初始化表单数据

export default {

// 监听路由变化

watch: {
        $route(to, from) {
            console.log("watch $route");
            this.init();
        },
    },
    created() {
        console.log("created");
        // if (this.$route.params && this.$route.params.id) {
        //   const id = this.$route.params.id;
        //   this.getTeacherInfo(id);
        // } else {
        //   this.teacher = {};
        // }
        this.init()
    },
    methods: {
        // 抽取判断路径中是否有参数方法
        init() {
            if (this.$route.params && this.$route.params.id) {
                const id = this.$route.params.id;
                this.getTeacherInfo(id);
            } else {
                this.teacher = {};
            }
        },
    }
}
</script>

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

在线教育_Day05-项目讲师管理模块前端开发

一、vue-element-admin

1.1 简介

1.2 安装

二、项目的创建和基本配置

2.1 项目信息基本修改

2.1.1 创建项目

2.1.2 修改项目信息

2.1.3 修改端口号

2.1.4 项目的目录结构

2.1.5 运行项目

2.2 登录页修改

2.3 页面零星修改

2.3.1 标题

2.3.2 国际化设置

2.3.3 icon

2.3.4 导航栏文字

2.3.5 面包屑文字

三、Eslint语法规范型检查

3.1 ESLint简介

3.2 语法规则

3.3 确认开启语法检查

3.4 ESLint插件安装

3.5 插件的扩展设置

四、登录改造

4.1 修改配置文件请求地址

4.2 编写后台登录功能

4.2.1 编写EduLoginController

4.2.2 修改前台页面访问路径

4.3 解决跨域问题

4.3.1 什么是跨域

4.3.2 跨域解决方式

五、前端框架使用步骤

5.1 添加路由

5.2 点击路由设置相应页面

5.3 创建文件和定义接口和参数

5.4 在页面文件中引入js文件

5.5 使用Element-ui展示数据

六、后台系统路由实现分析

6.1 入口文件中调用路由

6.2 路由模块中定义路由

6.3 在线教育路由定义

6.3.1 复制icon图标

6.3.2 修改路由

6.3.3 创建vue组件

6.3.4 list.vue

6.3.5 save.vue

6.3.5 重启进行测试

七、讲师前台功能实现

7.1 分页列表

7.1.1 定义api

7.1.2 初始化vue组件

7.1.3 定义data

7.1.4 定义methods

7.1.5 填充后台传过来的数据

7.1.6 表格渲染

7.1.7 分页组件

7.1.8 顶部查询表单

7.1.9 测试

7.2 删除功能

7.2.1 定义api

7.2.2 定义methods

7.3 新增功能

7.3.1 定义api

7.3.2 初始化组件

7.3.3 实现新增功能