《全栈之巅》学习笔记-技能编辑页

最新推荐文章于 2024-09-26 16:55:21 发布
最新推荐文章于 2024-09-26 16:55:21 发布
阅读量168 收藏
点赞数
分类专栏： 全栈之巅-学习笔记 文章标签： vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42301205/article/details/105355693
版权

技能编辑-'Vue+Element+Nodejs+Mongodb'

1、将英雄编辑页得内容用tab包裹

      <!-- value的值默认未el-tab-pane得第一个name -->
      <el-tabs value="basic" type="border-card">
        <el-tab-pane label="基本信息" name="basic">

          <el-form-item label="名称" >
        <el-input v-model="model.name"></el-input>
      </el-form-item>

      <el-form-item label="称号" >
        <el-input v-model="model.title"></el-input>
      </el-form-item>

      <el-form-item label="头像" >
        <!-- :action:表单提交地址,on-success:成功之后做什么,before-upload:上传之后做什么 -->
        <el-upload
          class="avatar-uploader"
          :action="$http.defaults.baseURL + '/upload'"
          :show-file-list="false"
          :on-success="afterUpload"
        >
          <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
          <img v-if="model.avatar" :src="model.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="类型" >
        <!-- 加multiple就可以多选 -->
        <el-select v-model="model.categories" multiple >
          <el-option v-for="item of categories" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>


        <!-- 分数 -->
      <el-form-item label="难度" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.difficult"></el-rate>
      </el-form-item>

        <!-- 分数 -->
      <el-form-item label="技能" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.skills"></el-rate>
      </el-form-item>


        <!-- 分数 -->
      <el-form-item label="攻击" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.attack"></el-rate>
      </el-form-item>


        <!-- 分数 -->
      <el-form-item label="生存" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.survive"></el-rate>
      </el-form-item>

    </el-form-item>

      <el-form-item label="顺风出装" >
        <!-- 加multiple就可以多选 -->
        <el-select v-model="model.items1" multiple >
          <el-option v-for="item of items" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="逆风出装" >
        <!-- 加multiple就可以多选 -->
        <el-select v-model="model.items2" multiple >
          <el-option v-for="item of items" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用技巧">
        <el-input type="textarea" v-model="model.usageTips"></el-input>
      </el-form-item>

      <el-form-item label="对抗技巧">
        <el-input type="textarea" v-model="model.battleTips"></el-input>
      </el-form-item>

      <el-form-item label="团战技巧">
        <el-input type="textarea" v-model="model.teamTips"></el-input>
      </el-form-item>


        </el-tab-pane>
      </el-tabs>

2、添加技能列表

        <el-tab-pane label="技能" name="skills">
          <!-- type默认为按钮，type="text"为文字链接样式 -->
          <!-- 数据中skills必须是数组 -->
          <el-button style="margin-bottom:1rem;" size="small" @click="model.skills.push({})"><i class="el-icon-plus"></i>添加技能</el-button>
          <el-row type="flex" style="flex-wrap:wrap">
            <!-- :md="12"表示在普通屏幕上一行显示两个框 -->
            <el-col :md="12" v-for="(item,i) in model.skills" :key="i">
              <el-form-item label="名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-upload
                  class="avatar-uploader"
                  :action="$http.defaults.baseURL + '/upload'"
                  :show-file-list="false"
                  :on-success="afterUpload"
                >
                  <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
                  <img v-if="item.icon" :src="item.icon" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="描述">
                <!-- 大文本框 -->
                <el-input v-model="item.description" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="小提示">
                <el-input v-model="item.tips" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        
  data(){
    return{
      categories:[],
      items:[],
      model:{
        name: '',
        avatar: '',
        scores:{
          difficult:0
        },
        skills:[]
      },
    }
  }

3、技能添加页面代码

<template>
  <div class="about">
    <h1>{{id ? "编辑":"新建"}}英雄</h1>
    <el-form label-width="120px" @submit.native.prevent="save">

      <!-- value的值默认未el-tab-pane得第一个name,也可自己指定 -->
      <el-tabs value="skills" type="border-card">
        <el-tab-pane label="基本信息" name="basic">

          <el-form-item label="名称" >
        <el-input v-model="model.name"></el-input>
      </el-form-item>

      <el-form-item label="称号" >
        <el-input v-model="model.title"></el-input>
      </el-form-item>

      <el-form-item label="头像" >
        <!-- :action:表单提交地址,on-success:成功之后做什么,before-upload:上传之后做什么 -->
        <el-upload
          class="avatar-uploader"
          :action="$http.defaults.baseURL + '/upload'"
          :show-file-list="false"
          :on-success="afterUpload"
        >
          <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
          <img v-if="model.avatar" :src="model.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="类型" >
        <!-- 加multiple就可以多选 -->
        <el-select v-model="model.categories" multiple >
          <el-option v-for="item of categories" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>


        <!-- 分数 -->
      <el-form-item label="难度" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.difficult"></el-rate>
      </el-form-item>

        <!-- 分数 -->
      <el-form-item label="技能" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.skills"></el-rate>
      </el-form-item>


        <!-- 分数 -->
      <el-form-item label="攻击" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.attack"></el-rate>
      </el-form-item>


        <!-- 分数 -->
      <el-form-item label="生存" >
        <el-rate style="margin-top:0.6rem" :max="9" show-score v-model="model.scores.survive"></el-rate>
      </el-form-item>

    </el-form-item>

      <el-form-item label="顺风出装" >
        <!-- 加multiple就可以多选 -->
        <el-select v-model="model.items1" multiple >
          <el-option v-for="item of items" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="逆风出装" >
        <!-- 加multiple就可以多选 -->
        <el-select v-model="model.items2" multiple >
          <el-option v-for="item of items" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用技巧">
        <el-input type="textarea" v-model="model.usageTips"></el-input>
      </el-form-item>

      <el-form-item label="对抗技巧">
        <el-input type="textarea" v-model="model.battleTips"></el-input>
      </el-form-item>

      <el-form-item label="团战技巧">
        <el-input type="textarea" v-model="model.teamTips"></el-input>
      </el-form-item>


        </el-tab-pane>

        <el-tab-pane label="技能" name="skills">
          <!-- type默认为按钮，type="text"为文字链接样式 -->
          <!-- 数据中skills必须是数组 -->
          <el-button style="margin-bottom:1rem;" size="small" @click="model.skills.push({})"><i class="el-icon-plus"></i>添加技能</el-button>
          <el-row type="flex" style="flex-wrap:wrap">
            <!-- :md="12"表示在普通屏幕上一行显示两个框 -->
            <el-col :md="12" v-for="(item,i) in model.skills" :key="i">
              <el-form-item label="名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <!-- 将res.url赋值到item.icon上，res => item.icon = res.url -->
                <!-- res => $set(item,'icon',res.url,将res.url赋值在item主体的icon属性上 -->
                <el-upload
                  class="avatar-uploader"
                  :action="$http.defaults.baseURL + '/upload'"
                  :show-file-list="false"
                  :on-success="res => $set(item,'icon',res.url)"
                >
                  <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
                  <img v-if="item.icon" :src="item.icon" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="描述">
                <!-- 大文本框 -->
                <el-input v-model="item.description" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="小提示">
                <el-input v-model="item.tips" type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="danger" @click="model.skills.splice(i,1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>

      </el-tabs>

      <el-form-item style="margin-top: 1rem;">
        <el-button type="primary" native-type="submit">上传</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props:{
    id:{}
  },
  data(){
    return{
      categories:[],
      items:[],
      model:{
        name: '',
        avatar: '',
        scores:{
          difficult:0
        },
        skills:[]
      },
    }
  },
  methods:{
    afterUpload(res){
      console.log(res)
      //vue提供的方法(赋值主体，赋值的属性，res.url),效果类似this.model.icon = res.url
      // this.$set(this.model,'avatar',res.url)
      //上面data中设置了属性就可以用这个方法了，推荐使用
      this.model.avatar = res.url
    },
    async save(){
      if(this.id){
        this.$http.put(`/rest/heroes/${this.id}`,this.model)
      }else{
        this.$http.post('/rest/heroes',this.model)
      }
      this.$router.push('/heroes/list')
      this.$message({
        type:'success',
        message:'保存成功'
      })
    },
    async fetch(){
      const res = await this.$http.get(`/rest/heroes/${this.id}`)
      // this.model = res.data
      this.model = Object.assign({},this.model,res.data)
    },
    async fetchCategories(){
      const res = await this.$http.get(`/rest/categories`)
      this.categories = res.data
    },
    async fetchItems(){
      const res = await this.$http.get(`/rest/items`)
      this.items = res.data
    }
  },
  created(){
    this.fetchCategories()
    this.fetchItems()
    this.id && this.fetch()
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
  }
  .avatar {
    width: 5rem;
    height: 5rem;
    display: block;
  }
</style>
隔壁憨憨
关注
专栏目录
解决vue中data对象重新赋值无效(未更改)的问题
奔跑的面条博客
08-20 3万+
vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{}，那么后面在方法用普通的js语法赋值会无效 这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效，需...
说说vue.set() (this.$set) 的用法
热门推荐
如影随风
11-02 4万+
这段时间工作上经常操作数组数据，并且要求实时更新视图数据，这个时候首先想到的是 vue.set() 方法（注：当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。），该方法的使用首先要在页面引入vue,应该这样写：import Vue from 'vue'，这样才能在组件全局获取到vue这个实例对象。如果你觉得引入麻烦，推荐使用vue.set的别名this.$set。那么...
全栈开发学习(Node+Vue+Mongodb)(六)——图片上传
qiaoqiaobanzqq的博客
02-17 388
在本系列第四篇文章中简单介绍了一下引入elementUI的图片上传组件，但是没有进行详细说明，本文将详细介绍如何上传图片。 1 后端部分 新建上传路由 app.post('/admin/api/upload',async(req,res)=>{ const file=req.file res.send(file) }) 创建中间件 需要先在server中安装...
vue动态生成表单输入框，并动态生成v-model（动态生成v-model遇到的坑）
weixin_41308436的博客
07-05 9664
动态生成v-model时不能直接使用string[‘name’]=value，无法编辑，这时需要使用this.$set
《全栈之巅》学习笔记-英雄编辑页
weixin_42301205的博客
04-05 245
英雄管理+'Vue+Element+Nodejs+Mongodb'1、Main.vue中创建英雄列2、新建HeroList.vue和HeroEdit.vue3、路由中引用HeroList.vue和HeroEdit.vue4、添加英雄模型Hero.js5、英雄编辑页（HeroEdit.vue） 1、Main.vue中创建英雄列 <el-menu-item-group> ...
全栈工程师-阅读笔记-自制
12-21
全栈工程师-阅读笔记-自制，是我在阅读《全栈工程师》一书的读书感想，如果帮助，最好多下载几下，我想要积分
SpringBoot3 全栈指南教程-尚硅谷学习笔记 2023年
09-15
SpringBoot3全栈指南教程是针对开发者们深入理解并熟练运用Spring Boot 3框架的一份综合教程，由知名教育机构尚硅谷在2023年发布。这份教程旨在帮助学习者掌握Spring Boot 3的核心概念、特性以及如何将其应用于实际...
python全栈3期104天-课件与源码.zip
09-28
这个压缩包中包含的"python全栈3期-课件与源码"，意味着我们有机会接触到一个为期104天的系统性学习计划，旨在帮助学员从基础到高级，全面掌握Python全栈开发技能。课程结构可能包括了逐步进阶的课程内容，从基础...
冰河的渗透实战笔记-冰河.pdf
05-18
冰河整理的全网首个开源的以实战案例为背景的渗透实战笔记，全书共442页，共计37万字（不计空格）。整本书的内容涵盖：Kali基础、渗透工具、木马制作、钓鱼链接生成、爆破密码、内存溢出攻击、web渗透、数据提权、...
高级java笔试题-Full-Stack-Developer-Note:全栈工程师学习笔记
06-03
高级java笔试题 Full-Stack-Developer-Note ...这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步. 本人学习技术交流群:482787625 进群请注明理由:来自gi
$set()的正确使用方式
weixin_30920091的博客
02-25 368
vue给对象新增属性，并触发视图更新 如下代码：给student对象新增age属性 data () { return { student: { name: '', sex: '' } } } 众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新 ...
图片的上传与删除
weixin_44365179的博客
10-14 913
图片的上传 图片的上传一般我们是将图片上传到服务器，然后将文件静态托管，再返回图片的url，并不是将图片直接存为base64编码格式，这样我们的网页就不会太大，否则会加载很慢。 前端请求 用的Element的上传组件 <el-upload :action="$http.defaults.baseURL + '/upload/card_img'" list-type="picture-...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 555
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
Vue3通过$emit实现子向父传递数据
weixin_74261199的博客
09-23 383
子组件通过触发事件，并传递数据，父组件在使用子组件时就可以绑定子组件事件，在事件处理函数中拿到子组件传来的数据。
基于Node.js+Express+MySQL+VUE实现的计算机毕业设计旅游推荐网站
计算机程序开发设计
09-26 525
越来越多的人开始注重旅游的品质和体验，追求个性化、多样化的旅游方式。总之，本次计算机毕业设计项目旨在开发一款功能完善、用户友好的旅游推荐网站，通过先进的技术手段和创新的设计理念来满足广大旅游爱好者的个性化、高质量旅游需求。因此，本次计算机毕业设计项目选择开发一款旅游推荐网站，旨在通过先进的技术手段和创新的设计理念，打造一个更加符合用户需求、更加智能化的旅游信息平台。实现个性化的旅游推荐：通过分析用户的浏览历史、搜索记录和行为习惯，网站将能够为用户推荐符合其兴趣和需求的旅游产品和目的地。
计算机毕业设计宠物领养网站我的发布领养领养用户信息/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序
最新发布
计算机程序开发设计
09-26 1202
Node.js‌：‌Node.js是一个开源、跨平台的JavaScript运行环境，允许在服务器端运行JavaScript代码。‌为解决传统服务器阻塞问题，Node.js采用单线程模式，使用事件驱动、非阻塞和异步模型等技术提高性能。‌基于Google的V8引擎，优化应用程序的传输量和规模，提高代码复用性和可维护性。‌可用于构建Web应用、API接口项目、跨平台桌面应用等，同时支持读写和操作数据库、创建命令行工具等。Node.js支持模块化编程，可将代码拆分成独立并互相依赖的小模块，便于管理和维护。
解决sortablejs+el-table表格内限制回撤和拖拽回撤失败问题
爱吃水果和蔬菜__yaya的博客
09-26 87
【代码】解决sortablejs+el-table表格内限制回撤和拖拽回撤失败问题。
JavaEE全栈学习笔记
Unix学习笔记则涵盖了Unix的基础知识、命令、文件系统权限、连接类型、程序范例、网络命令以及Shell脚本编程，这些都是开发者在Unix或类Unix环境中工作时必须掌握的技能。 CoreJava笔记关注Java的基础，包括Java ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值