（硅谷课堂项目）Java开发笔记5：讲师管理模块前端

已于 2022-08-20 17:10:41 修改
阅读量595 收藏
点赞数 1
分类专栏： Java项目 文章标签： 前端 java vue.js ajax
于 2022-08-20 16:59:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45700663/article/details/126441777
版权

文章目录

（硅谷课堂项目）Java开发笔记5：讲师管理模块前端

ggkt_5_2

一、设置路由定义

1、修改路由

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

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

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'


export const constantRoutes = [
  {
    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',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

  {
    path: '/vod',
    component: Layout,
    redirect: '/vod/teacher/list',
    name: 'vod',
    meta: { title: '讲师管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'teacher/list',
        name: 'TeacherList',
        component: () => import('@/views/vod/teacher/list'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'teacher/create',
        name: 'TeacherCreate',
        component: () => import('@/views/vod/teacher/form'),
        meta: { title: '添加讲师', icon: 'tree' }
      },
      {
        path: 'teacher/edit/:id',
        name: 'TeacherEdit',
        component: () => import('@/views/vod/teacher/form'),
        meta: { title: '编辑讲师' },
        hidden: true
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
2、创建vue组件

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

ggkt_5_1

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 {
	//讲师列表
    //讲师条件查询分页
    //current当前页 limit每页记录数 searchObj条件对象
    pageList(current, limit, searchObj) {
        return request({
            url: `${api_name}/findQueryPage/${current}/${limit}`,
            method: `post`,
            //使用json格式传递 写法 data:searchObj
            //使用普通格式传递 写法 params:searchObj
            data: searchObj
        })
    }
}
2、初始化vue组件

src/views/vod/teacher/list.vue

<template>
  <div class="app-container">
    医院设置列表
  </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() {
      // 调用api
      teacherApi.pageList(this.page, this.limit, this.searchObj).then(response => {
        debugger
        this.list = response.data.records
        this.total = response.data.total
      })
    },
  }
5、表格渲染
<!-- 表格 -->
<el-table
  :data="list"
  border
  stripe
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"/>
  <el-table-column
    label="#"
    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-picker
      v-model="searchObj.joinDateBegin"
      placeholder="开始时间"
      value-format="yyyy-MM-dd" />
  </el-form-item>
  <el-form-item label="-">
    <el-date-picker
      v-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 = size
      this.fetchData()
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    // 重置表单
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },

全部代码：

<template>
  <div class="app-container">
    讲师列表
    <!--查询表单-->
  <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-picker
          v-model="searchObj.joinDateBegin"
          placeholder="开始时间"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="-">
        <el-date-picker
          v-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>

<!-- 工具按钮 -->
<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>

    <!-- 表格 -->
    <el-table
      :data="list"
      border
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>
      <el-table-column
        label="#"
        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>
      <!-- 分页组件 -->
    <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"
    />

  </div>
</template>

<script>
//引入定义接口js文件
import teacherApi from '@/api/vod/teacher'
export default {
  data() {  //初始值
    return {
      list: [], // 讲师列表
      total: 0, // 总记录数
      page: 1, // 当前页码
      limit: 10, // 每页记录数
      searchObj: {}, // 查询条件
      multipleSelection: []// 批量删除选中的记录列表
    }
  },
  created() { //页面渲染之前
    this.fetchData()
  },
  methods:{ //具体方法
    //批量删除
    batchRemove() {
      //判断非空
      if(this.multipleSelection.length===0) {
        this.$message.warning('请选择要删除的记录！')
        return
      }
      this.$confirm('此操作将删除该讲师信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var idList = []
          // [1,2,3]
          //遍历数组
          for(var i=0;i<this.multipleSelection.length;i++) {
            var obj = this.multipleSelection[i]
            var id = obj.id
            //放到数组
            idList.push(id)
          }
          //调用接口删除
          teacherApi.batchRemove(idList)
            .then(response => {
                //提示
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //刷新
                this.fetchData()
            })
        })
    },
    //复选框发生变化，调用方法，选中复选框行内容传递
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    //跳转到添加表单页面
    add() {
      this.$router.push({path:'/vod/teacher/create'})
    },
    fetchData() {
      //ajax
      teacherApi.pageList(this.page,this.limit,this.searchObj)
        .then(response => {
          this.list = response.data.records
          this.total = response.data.total
        })
    },
    //改变每页显示记录数
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },
    //改变页码数
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },
    //清空
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    //讲师删除
    removeById(id) {
      this.$confirm('此操作将删除该讲师信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用接口删除
          teacherApi.removeById(id)
            .then(response => {
                //提示
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //刷新
                this.fetchData()
            })
        })
    }
  }
}
</script>

三、讲师删除

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 弹框组件

 //讲师删除
    removeById(id) {
      this.$confirm('此操作将删除该讲师信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用接口删除
          teacherApi.removeById(id)
            .then(response => {
                //提示
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //刷新
                this.fetchData()
            })
        })
    }

四、讲师新增

1、定义api

src/api/vod/teacher.js

//添加讲师
    save(teacher){
        return request({
            url:`${api_name}/saveTeacher`,
            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 = true
      if (!this.teacher.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    // 新增讲师
    saveData() {
    // debugger
      teacherApi.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>

五、讲师修改-数据回显

ggkt_5_3

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 = true
  	if (!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"
  border
  stripe
  @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)
    })
    // 调用api
    return 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
},
Gerrar_d
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
硅谷课堂-智慧星球-尚硅谷项目笔记和代码 2022年
09-26
硅谷课堂项目具有很强的实用性，业务场景贴近实际，技术应用紧跟市场潮流，完全按照市场需求开发。既是对主流 Java 技术的系统性梳理和整合，同时也是各种主流技术实际应用的练兵场，能够帮助 Java 程序员积累项目...
硅谷课堂-智慧星球 Day 5~Day 8——尚硅谷项目笔记 2022 年
末影小黑xh的博客
10-04 78
修改 src/router/index.js 文件，重新定义 constantRouterMap。注意： 每个路由的 name 不能相同。 2、创建 vue 组件 在 src/views 文件夹下创建以下文件夹和文件。 4、list.vue 二、教师分页列表 1、定义 api 创建文件 src/api/vod/teacher.js。 2、初始化 vue 组件 src/views/vod/teacher/list.vue 3、定义 data 4、定义 methods 5、表格渲染 6、分页组件 7、
硅谷课堂-公众号云点播 硅谷课堂微服务项目实战笔记
IT大神帅杰的博客
07-17 910
硅谷课堂开发笔记，硅谷课堂总结，公众号云点播 硅谷课堂微服务项目实战笔记
Java项目硅谷课堂学习笔记-P10-后台系统公众号部分
qq_45498432的博客
09-07 530
Java项目硅谷课堂学习笔记-P10-后台系统公众号部分
Vue的学习与简单使用
weixin_45506970的博客
05-07 728
一、介绍 1、Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官方网站：https://cn.vuejs.org 2、初始Vue.js 创建 demo.html...
（硅谷课堂项目）Java开发笔记2：项目概述，搭建项目环境和开发讲师管理接口
weixin_45700663的博客
08-19 2531
（硅谷课堂项目）Java开发笔记2：项目概述，搭建项目环境和开发讲师管理接口
12.1工作学习记录 硅谷课堂项目 mp功能
qq_42585768的博客
12-01 130
业务上的异常分类：全局异常处理 特定异常处理 自定义异常处理 全局异常处理是AOP实现的 发生异常时 会先找是否存在特定异常 不存在的话 才抛出全局异常 私以为是在异常类中配置了以后 抛出异常时会在切面上输出一些消息。问题解决：前端登录没有登录得进去 其实是状态码设置 后端跟前端有出入 前端设置的成功状态码是20000而后端是200 所以登录不进去 只是回复一个“成功”的message 改成相同的就可以了。注意启动类的位置是在包的外层 跟service这些包平级。
硅谷课堂第四课-讲师管理模块前端
fegus的博客
07-18 275
修改src/router/index.js文件，重新定义constantRouterMap**注意**每个路由的name不能相同pathpathtrue},//首页{path[{path{title'硅谷课堂后台管理系统',icon'dashboard'}}]},//讲师管理{path{title'点播管理',icon[{path{title'讲师列表'}},{path{title${}${}${}url${...
Java项目硅谷课堂学习笔记-P1项目概述以及MybatisPlus使用
qq_45498432的博客
07-21 718
Java项目硅谷课堂学习笔记-P1项目概述以及MybatisPlus使用
基于 SpringCloud + Vue 的硅谷课堂前后端分离微信公众号项目
Spring-_-Bear 的 CSDN 博客
11-04 1274
基于 SpringCloud + Vue.js 的硅谷课堂系统，是一款基于微信公众号 B2C 模式的在线学习平台，包含直播、教学与微信消息服务三大模块。包含后台管理系统和移动应用系统交互接口，平台支持直播、腾讯云视频点播、微信支付、微信授权登录、微信菜单、微信消息与腾讯云文件存储等一系列功能，为学员构建了一个全方位的在线学习平台。
java项目三尚硅谷员工调度系统.rar
12-09
跟着视频敲下来的版本，不完全和原版相同，可以参考
Spring5-尚硅谷框架课堂笔记.rar
08-10
spring详解
基于黑马和尚硅谷视频的SSM框架学习笔记
03-28
这是一个基于黑马和尚硅谷视频的SSM框架学习笔记，主要使用Java语言编写，同时包含JavaScript和CSS文件。项目包含100个文件，其中主要文件类型包括78个PNG图片文件、12个Markdown文档、3个JPG图片文件、3个CSS文件、...
element-ui的bug记录
nick_zhang的博客
04-29 494
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1385
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
最新发布
前端开发博客
05-03 893
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 296
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 312
createWs("测试数据", (res) => {
尚硅谷vue项目实战硅谷甄选笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值