一、搭建项目前端环境

1、vue-admin-template模板

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

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

2、搭建环境

# 解压压缩包
# 进入目录
cd vue-admin-template-master# 安装依赖
npm install# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

3、修改登录功能

3.1、创建登录接口

创建LoginController

@RestController
@RequestMapping("/admin/vod/user")
@CrossOrigin
public class LoginController {/*** 登录* @return*/@PostMapping("login")public Result login() {Map<String, Object> map = new HashMap<>();map.put("token","admin");return Result.ok(map);}/*** 获取用户信息* @return*/@GetMapping("info")public Result info() {Map<String, Object> map = new HashMap<>();map.put("roles","[admin]");map.put("name","admin");map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");return Result.ok(map);}/**         * 退出* @return*/@PostMapping("logout")public Result logout(){return Result.ok();}
}

3.2、修改登录前端

（1）修改接口路径

（2）修改js文件

import request from '@/utils/request'export function login(data) {return request({url: '/admin/vod/user/login',method: 'post',data})
}export function getInfo(token) {return request({url: '/admin/vod/user/info',method: 'get',params: { token }})
}export function logout() {return request({url: '/admin/vod/user/logout',method: 'post'})
}

二、跨域问题

1、什么是跨域

（1）浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 。前后端分离开发中，需要考虑ajax跨域的问题。

（2）跨域的本质：浏览器对Ajax请求的一种限制

（3）这里我们可以从服务端解决这个问题

2、配置

在Controller类上添加注解

@CrossOrigin //跨域

三、设置自定义路由

1、修改路由

修改 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',name: 'Dashboard',children: [{path: 'dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '硅谷课堂后台管理系统', icon: 'dashboard' }}]},// 讲师管理{path: '/vod',component: Layout,redirect: '/vod/course/list',name: 'Vod',meta: {title: '点播管理',icon: 'el-icon-bank-card'},alwaysShow: true,children: [{path: 'teacher/list',name: 'TeacherList',component: () => import('@/views/vod/teacher/list'),meta: { title: '讲师列表' }},{path: 'teacher/create',name: 'TeacherCreate',component: () => import('@/views/vod/teacher/form'),meta: { title: '添加讲师' },hidden: true},{path: 'teacher/edit/:id',name: 'TeacherEdit',component: () => import('@/views/vod/teacher/form'),meta: { title: '编辑讲师' },hidden: true}]},{ path: '*', redirect: '/404', hidden: true }
]

2、创建vue组件

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

3、form.vue

<template><div class="app-container">讲师表单</div>
</template>

4、list.vue

<template><div class="app-container">讲师列表</div>
</template>

四、讲师分页列表

1、定义api

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

import request from '@/utils/request'const api_name = '/admin/vod/teacher'export default {//讲师列表pageList(page, limit, searchObj) {return request({url: `${api_name}/${page}/${limit}`,method: `post`,data: searchObj})}
}

2、初始化vue组件

src/views/vod/teacher/list.vue

<template><div class="app-container">jiang'shi列表</div>
</template>
<script>
import teacherApi from '@/api/vod/teacher'
export default {// 定义数据模型data() {return {}},// 页面渲染成功后获取数据created() {this.fetchData()},// 定义方法methods: {fetchData() {}}
}
</script>

3、定义data

  // 定义数据模型data() {return {list: [], // 讲师列表total: 0, // 总记录数page: 1, // 页码limit: 10, // 每页记录数searchObj: {}, // 查询条件multipleSelection: []// 批量删除选中的记录列表}},

4、定义methods

  methods: {fetchData() {// 调用apiteacherApi.pageList(this.page, this.limit, this.searchObj).then(response => {debuggerthis.list = response.data.recordsthis.total = response.data.total})},}

5、表格渲染

<!-- 表格 -->
<el-table:data="list"borderstripe@selection-change="handleSelectionChange"><el-table-column type="selection"/><el-table-columnlabel="#"width="50"><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="90"><template slot-scope="scope"><el-tag v-if="scope.row.level === 1" type="success" size="mini">高级讲师</el-tag><el-tag v-if="scope.row.level === 0" size="mini">首席讲师</el-tag></template></el-table-column><el-table-column prop="intro" label="简介" /><el-table-column prop="sort" label="排序" width="60" /><el-table-column prop="joinDate" label="入驻时间" width="160" /><el-table-column label="操作" width="200" align="center"><template slot-scope="scope"><el-button type="text" size="mini" @click="removeById(scope.row.id)">删除</el-button><router-link :to="'/vod/teacher/edit/'+scope.row.id"><el-button type="text" size="mini">修改</el-button></router-link></template></el-table-column>
</el-table>

6、分页组件

  <!-- 分页组件 --><el-pagination:current-page="page":total="total":page-size="limit":page-sizes="[5, 10, 20, 30, 40, 50, 100]"style="padding: 30px 0; text-align: center;"layout="total, sizes, prev, pager, next, jumper"@size-change="changePageSize"@current-change="changeCurrentPage"/>

7、顶部查询表单

<!--查询表单-->
<el-card class="operate-container" shadow="never"><el-form :inline="true" class="demo-form-inline"><el-form-item label="名称"><el-input v-model="searchObj.name" placeholder="讲师名" /> </el-form-item><el-form-item label="头衔"><el-select v-model="searchObj.level" clearable placeholder="头衔"><el-option value="1" label="高级讲师"/><el-option value="0" label="首席讲师"/></el-select></el-form-item><el-form-item label="入驻时间"><el-date-pickerv-model="searchObj.joinDateBegin"placeholder="开始时间"value-format="yyyy-MM-dd" /></el-form-item><el-form-item label="-"><el-date-pickerv-model="searchObj.joinDateEnd"placeholder="结束时间"value-format="yyyy-MM-dd" /></el-form-item><el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button><el-button type="default" @click="resetData()">清空</el-button>
</el-form>
</el-card>

分页和清空方法

    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”changePageSize(size) {this.limit = sizethis.fetchData()},// 改变页码，page：回调参数，表示当前选中的“页码”changeCurrentPage(page) {this.page = pagethis.fetchData()},// 重置表单resetData() {this.searchObj = {}this.fetchData()},

五、讲师删除

1、定义api

src/api/vod/teacher.js

  removeById(id) {return request({url: `${api_name}/remove/${id}`,method: `delete`})},

2、定义methods

src/views/vod/teacher/list.vue

使用MessageBox 弹框组件

// 根据id删除数据
removeById(id) {this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {return teacherApi.removeById(id)}).then((response) => {this.fetchData()this.$message.success(response.message)})
},

六、讲师新增

1、定义api

src/api/vod/teacher.js

save(teacher) {return request({url: `${api_name}/save`,method: `post`,data: teacher})
},

2、初始化组件

src/views/vod/teacher/form.vue

<template><div class="app-container"><!-- 输入表单 --><el-form label-width="120px"><el-form-item label="讲师名称"><el-input v-model="teacher.name" /></el-form-item><el-form-item label="入驻时间"><el-date-picker v-model="teacher.joinDate" value-format="yyyy-MM-dd" /></el-form-item><el-form-item label="讲师排序"><el-input-number v-model="teacher.sort" :min="0"/></el-form-item><el-form-item label="讲师头衔"><el-select v-model="teacher.level"><!--数据类型一定要和取出的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.intro"/></el-form-item><el-form-item label="讲师资历"><el-input v-model="teacher.career" :rows="10" type="textarea"/></el-form-item><!-- 讲师头像 --><el-form-item label="讲师头像"></el-form-item><el-form-item><el-button type="primary" @click="saveOrUpdate()">保存</el-button></el-form-item></el-form></div>
</template>

3、实现新增功能

<script>
import teacherApi from '@/api/vod/teacher'
export default {data() {return {BASE_API: 'http://localhost:8301',// 初始化讲师默认数据teacher: {sort: 0,level: 1},saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交}},// 页面渲染成功created() {},methods: {saveOrUpdate() {// 禁用保存按钮this.saveBtnDisabled = trueif (!this.teacher.id) {this.saveData()} else {this.updateData()}},// 新增讲师saveData() {// debuggerteacherApi.save(this.teacher).then(response => {this.$message({type: 'success',message: response.message})this.$router.push({ path: '/vod/teacher/list' })})},// 根据id更新记录updateData() {}}
}
</script><style scoped>.avatar-uploader .avatar-uploader-icon {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar-uploader .avatar-uploader-icon:hover {border-color: #409EFF;}.avatar-uploader img {width: 178px;height: 178px;display: block;}
</style>

七、讲师修改-数据回显

1、定义api

src/api/vod/teacher.js

getById(id) {return request({url: `${api_name}/get/${id}`,method: `get`})
},

2、组件中调用api

methods中定义fetchDataById

// 根据id查询记录
fetchDataById(id) {teacherApi.getById(id).then(response => {this.teacher = response.data})
},

3、页面渲染前调用fetchDataById

  // 页面渲染成功created() {if (this.$route.params.id) {this.fetchDataById(this.$route.params.id)}},

八、讲师修改-更新

1、定义api

  updateById(teacher) {return request({url: `${api_name}/update`,method: `put`,data: teacher})},

2、组件中调用api

methods中定义updateData

// 根据id更新记录
updateData() {// teacher数据的获取teacherApi.updateById(this.teacher).then(response => {this.$message({type: 'success',message: response.message})this.$router.push({ path: '/vod/teacher/list' })})
},

3、完善saveOrUpdate方法

saveOrUpdate() {// 禁用保存按钮this.saveBtnDisabled = trueif (!this.teacher.id) {this.saveData()} else {this.updateData()}
},

九、讲师批量删除

1、定义api

src/api/vod/teacher.js

batchRemove(idList) {return request({url: `${api_name}/batch-remove`,method: `delete`,data: idList})
},

2、初始化组件

src/views/vod/teacher/list.vue

在table组件上添加 批量删除 按钮

<!-- 工具按钮 -->
<el-card class="operate-container" shadow="never"><i class="el-icon-tickets" style="margin-top: 5px"></i><span style="margin-top: 5px">数据列表</span><el-button class="btn-add" @click="add()" style="margin-left: 10px;">添加</el-button><el-button class="btn-add" @click="batchRemove()" >批量删除</el-button>
</el-card>

在table组件上添加复选框

<!-- 表格 -->
<el-table:data="list"borderstripe@selection-change="handleSelectionChange"><el-table-column type="selection"/>

3、实现功能

data定义数据

multipleSelection: []// 批量删除选中的记录列表

完善方法

// 批量删除
batchRemove() {if (this.multipleSelection.length === 0) {this.$message.warning('请选择要删除的记录！')return}this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 点击确定，远程调用ajax// 遍历selection，将id取出放入id列表var idList = []this.multipleSelection.forEach(item => {idList.push(item.id)})// 调用apireturn teacherApi.batchRemove(idList)}).then((response) => {this.fetchData()this.$message.success(response.message)}).catch(error => {if (error === 'cancel') {this.$message.info('取消删除')}})
},
// 当多选选项发生变化的时候调用
handleSelectionChange(selection) {console.log(selection)this.multipleSelection = selection
},

十、讲师模块接口

1、讲师模块

@Api(tags = "讲师管理")
@RestController
@RequestMapping(value="/admin/vod/teacher")
@CrossOrigin
public class TeacherController {@Autowiredprivate TeacherService teacherService;//查询所有讲师列表@ApiOperation("查询所有讲师")@GetMapping("findAll")public Result findAll(){/*try {int i = 10/0;} catch (Exception e) {throw new GgktException(201,"出现自定义异常");}*/List<Teacher> list = teacherService.list();return Result.ok(list);}@DeleteMapping("remove/{id}")public Result remove(@PathVariable Long id){boolean flag = teacherService.removeById(id);if(flag){return Result.ok(null);}else {return Result.fail(null);}}//条件查询分页列表@ApiOperation(value = "获取分页列表")@PostMapping("findQueryPage/{page}/{limit}")public Result index(@ApiParam(name = "page", value = "当前页码", required = true)@PathVariable Long page,@ApiParam(name = "limit", value = "每页记录数", required = true)@PathVariable Long limit,@ApiParam(name = "teacherVo", value = "查询对象", required = false)@RequestBody(required = false) TeacherQueryVo teacherQueryVo) {//创建page对象，传递当前页和每页记录数Page<Teacher> pageParam = new Page<>(page, limit);//获取条件值String name = teacherQueryVo.getName();//讲师名称Integer level = teacherQueryVo.getLevel();//讲师级别String joinDateBegin = teacherQueryVo.getJoinDateBegin();//开始时间String joinDateEnd = teacherQueryVo.getJoinDateEnd();//结束时间//封装条件QueryWrapper<Teacher> wrapper = new QueryWrapper<>();if(!StringUtils.isEmpty(name)) {wrapper.like("name",name);}if(!StringUtils.isEmpty(level)) {wrapper.eq("level",level);}if(!StringUtils.isEmpty(joinDateBegin)) {wrapper.ge("join_date",joinDateBegin);}if(!StringUtils.isEmpty(joinDateEnd)) {wrapper.le("join_date",joinDateEnd);}//调用方法得到分页查询结果IPage<Teacher> pageModel = teacherService.page(pageParam, wrapper);return Result.ok(pageModel);}@ApiOperation(value = "新增")@PostMapping("save")public Result save(@RequestBody Teacher teacher) {teacherService.save(teacher);return Result.ok(null);}@ApiOperation(value = "获取")@GetMapping("get/{id}")public Result get(@PathVariable Long id) {Teacher teacher = teacherService.getById(id);return Result.ok(teacher);}@ApiOperation(value = "修改")@PutMapping("update")public Result updateById(@RequestBody Teacher teacher) {teacherService.updateById(teacher);return Result.ok(null);}@ApiOperation(value = "根据id列表删除")@DeleteMapping("batchRemove")public Result batchRemove(@RequestBody List<Long> idList) {teacherService.removeByIds(idList);return Result.ok(null);}
}

【Vue实战】使用vue-admin-template模板开发后台管理相关推荐

1. 视频教程-vue 实战培训课程-Vue

   vue 实战培训课程 从事it开发7年以上,HP.Mysql.linux.apache,nginx,lvs,docker,golang,lua,python,c/c++等技术,对服务化分布式存储.ms ...

2. Android家长老师家校校园通(IDEA开发,后台管理,前台app)

   [源码下载] 手把手教做Android家长老师家校校园通(IDEA开发,后台管理,前台app)视频教程 开发工具: AndroidStudio  Idea  Mysql 技术栈: Web端 后台前端: ...

3. 用vue(element ui)快速开发后台管理

   平时我们在用vue开发网站后台管理的时候.比如说要写管理文章的功能,要先去写列表页面,编辑页面,添加页面.另外还需要程序提供对应的增删改查接口 图片上传接口等等,那么有没有一种快速的方法.可以用程序来 ...

4. python管理数据库设计_Pycharm+Django+Python+MySQL开发 后台管理数据库

   Django框架十分简单易用,适合搭建个人博客网站.网上有很多教程,大多是关于命令行操作Django,这里分享一些用最新工具进行Django开发过程,主要是PyCharm太强大,不用有点可惜. 第一次 ...

5. 使用 妹子UI 开发后台管理页面

   使用 Amaze UI 开发漂亮的后台管理页面,管理端登录页面.管理端列表页面.管理端保存页面. 页面布局样式使用固定定位和flex实现. 创作时间:2022年10月9日09:21:36 登录页面效果 ...

6. UI素材模板|网站后台管理的表单可临摹优秀模板

   管理平台都有共同的特点:业务逻辑复杂,信息数据海量,而之前的页面因为没有考虑到使用 场景和用户习惯,因此信息量更加庞大,这让我在做更新迭代的时候更加的难做. UI 设计师的简单要实现的简单目标:1.保 ...

7. 微信小程序学习之Template模板开发

   WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用.使用 name 属性,作为模板的名字.然后在 <template/> 内定义代码片段,使用 is 属性 ...

8. 最新vue实战视屏 vue2.x thinkPHP5.0后台 nodejs+mong0DB

   需要资源的请前往  https://download.csdn.net/download/weixin_42406046/10524670

9. 使用vue-admin-template基础模板开发后台管理系统必会技能

   1.必会一 :vue-cli vue-admin-template的使用建立在vue-cli(脚手架)基础上.官网 2.必会二 : vue-router 路由是个很重要的角色,可以管控登录权限,负责页 ...

10. ace admin java 整合 开发 后台框架,aceadmin_HTML5 java

    1. 模块化.服务化,流程化,耦合度低.扩展性好,灵活度高,工具类封装完整,干净利索,调用简单方便 2. 提供Rest服务,支持APP手机应用(android和ios)接口.php..net.易语言. ...

最新文章

1. 再遭质疑:Chrome、Safari自动填信息可能会泄密
2. python设置全局变量失败_Python全局变量与global关键字常见错误解决方案
3. 随机化算法-----模拟退火
4. V210 UART TX 流程
5. 【elasticsearch系列】windows安装kibana
6. 老板催你交圣诞海报设计？PSD源文件素材，直接编辑
7. 拓扑容差如何修改_如何做到全屋WIFI无死角，MESH组网对比有哪些优势？
8. IOS UIColor 自定义颜色
9. elasticsearch-head后台运行
10. 按键精灵打怪学习-窗口绑定技能
11. 和风天气OUC——通过搜索城市快速查询天气
12. 1.16 隐藏不需要打印的内容 [原创Excel教程]
13. 欧姆龙nb触摸屏通信_313C和欧姆龙NB触摸屏怎么通讯
14. 厉害了，大米云Linux搭建Wordpress环境
15. php微信消息通知,php实现微信小程序消息通知
16. 六大IT运维服务管理问题总结
17. hypermedia_Hypermedia REST API简介
18. mybatis简单查询
19. 接入华为广告不断收到onRewardAdFailedToLoad error 3？
20. 相机光学（一）——成像系统分辨率的理论

热门文章

1. MySQL中增删改查的例子
2. 跑revit计算机硬件要求,什么样的电脑能流畅跑Revit？Revit对电脑配置要求
3. 博尔顿大学介绍让学生们在9月重返校园的创新措施
4. 谈的话马上得到了聚众传媒创始人虞峰、博客中国创始人方兴东及携程网创始人之一的季琦等三位嘉宾的一致响应
5. APP开发者常用的4种推广渠道
6. APP推广|小众APP推广渠道，总有适合你的。
7. 详解：字符转换函数（大写转小写，小写转大写）
8. 安装LR11 时，安装Microsoft Visual c++2005 sp1运行时组件，就会提示命令行选项语法错误，键入“命令/?”可获取帮肋信息
9. 1.7 F1方程式冠军
10. [BZOJ2109]Plane 航空管制