《通信软件开发与应用》课程结业报告

已于 2022-07-09 23:10:06 修改
阅读量140 收藏
点赞数
文章标签： vue.js
于 2022-07-09 22:17:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_53175673/article/details/125699059
版权

目录

结果展示

 项目简介

项目内容介绍

开发过程

总结

结果展示

 先上成果

 项目简介

使用前端技术框架vue搭建的动态网站-忍者管理系统.

项目内容介绍

通过表格展示忍者的信息,可以删除忍者，修改忍者信息，学习忍术，以及查看其所学忍术,以及最后的添加忍者。

开发过程

一.使用vue-cli,快速搭建项目，写好组件名showRenzhe.vue，下载好相关element-ui的依赖等。

二.开发过程-构建showRenzhe.vue

        1.构建好框架，一个el-header为标题，一个el-main为主体

        2.构建el-main 里面的内容------一个表格,来展示数据，并在其中每行放入操作按钮

        <el-table :data="tableData">
          <el-table-column
            prop="name"
            label="忍者名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="fight"
            label="忍者战力"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="level"
            label="忍者级别"
            width="200"
          ></el-table-column>
          <el-table-column label="操作" width="600">
            <template slot-scope="scope">
              <el-button
                type="danger"
                round
                size="small"
                circle="true"
                @click="deleteRenZhe(scope.row.id)"
                >删除忍者</el-button
              >
              <el-button
                type="primary"
                size="small"
                circle="true"
                @click="modifyRenZhe(scope.row.id)"
                >修改忍者</el-button
              >
              <el-button
                type="primary"
                size="small"
                circle="true"
                @click="studySkill(scope.row.id)"
                >学习技能</el-button
              >
              <el-button
                type="primary"
                size="small"
                circle="true"
                @click="scanSkill(scope.row.id)"
                >查看技能</el-button
              >
              <el-button @click="addRenZhe()" type="primary">添加忍者</el-button>
            </template>
          </el-table-column>
        </el-table>

        3.开始构造相关按钮触发的函数代码

    studySkill(id) {
      this.dialogFormVisible = true;
      this.form.id = id;
      // this.study();
    },
    modifyRenZhe(id) {
      this.dialogFormVisible2 = true;
      this.form2.id = id;
      // this.modify();
    },
    addRenZhe() {
      // console.log('调用addRenZhe');
      this.dialogFormVisible3 = true;
    },
    deleteRenZhe(id) {
      var that = this.tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == id) {
          that.splice(i, 1);
        }
      }
      alert("成功删除");
    },
    scanSkill(id) {
      var that = this.tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == id) {
          this.gridData = that[i].skill;
        }
      }
      this.dialogTableVisible = true;
    },

         4.这里每个按钮都会触发弹出框除了deleteRenZhe()

弹出框代码

        <el-dialog title="技能学习" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="技能名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="技能等级" :label-width="formLabelWidth">
              <el-input v-model="form.level" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="study()">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改忍者" :visible.sync="dialogFormVisible2">
          <el-form :model="form">
            <el-form-item label="忍者名" :label-width="formLabelWidth">
              <el-input v-model="form2.rname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者战力" :label-width="formLabelWidth">
              <el-input v-model="form2.rfight" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者等级" :label-width="formLabelWidth">
              <el-input v-model="form2.rlevel" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modify()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="添加忍者" :visible.sync="dialogFormVisible3">
          <el-form :model="form">
            <el-form-item label="忍者名" :label-width="formLabelWidth">
              <el-input v-model="form3.rname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者战力" :label-width="formLabelWidth">
              <el-input v-model="form3.rfight" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者等级" :label-width="formLabelWidth">
              <el-input v-model="form3.rlevel" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="技能信息" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column
              property="name"
              label="技能名"
              width="150"
            ></el-table-column>
            <el-table-column
              property="level"
              label="技能等级"
              width="150"
            ></el-table-column>
          </el-table>
        </el-dialog>

        5.这些弹出框中的确定按钮，会触发函数，来实现数据变化。

下面是对应的代码


    study() {
      // console.log("调用study");
      var that = this.tableData;
      // console.log("调用study1");
      for (var i = 0; i < that.length; i++) {
        // console.log("调用study1");
        if (that[i].id == this.form.id) {
          that[i].skill.push({ name: this.form.name, level: this.form.level });
          this.dialogFormVisible = false;
          alert(that[i].name + "成功学习技能:" + this.form.name);
          // console.log("111",this.tableData);
          return;
        }
      }
    },
    modify() {
      var that = this.tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == this.form2.id) {
          that[i].name = this.form2.rname;
          that[i].fight = this.form2.rfight;
          that[i].level = this.form2.rlevel;
          this.dialogFormVisible2 = false;
          // alert("成功修改");
          return;
        }
      }
    },
    add() {
      // console.log('调用add');
      this.tNum++;
      var t = { id: "", name: "", fight: "", level: "", skill: "" },
        that = this.form3;
      //  console.log('调用add');

      t.id = this.tNum;
      t.name = that.rname;
      t.fight = that.rfight;
      t.level = that.rlevel;
      t.skill = [];
      console.log("调用add");
      this.tableData.push(t);
      this.dialogFormVisible3 = false;
      // alert("成功添加");
    },

        6.添加上一些样式

<style>
.el-table th {
  display: table-cell !important;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>

当然按钮的样式，已经在前面的template代码里面。

三.遇到的问题以及解决方法

1.开始写好所有代码，开始测试时，发现按钮没响应。

解决方法:通过console.log(）打印对应的数据信息，发发现控制台也没有变化。最后才发现template的函数名和js的函数不一样,js的函数有一些命名没有遵从驼峰法，但上面的template代码是遵守的。

2.写好页面后,发现“操作”和下面的五个按钮对不齐

解决方法:反复观察源码，发现“操作”所在的el-table-column本应该也包含五个按钮,但我当时操作和五个按钮写到两个el-table-column去了

3.弹出框的标题占位置过多啦，但没有找到对应的样式，来修正它

这里"技能学习"就占太多空白啦，本来上下一共三行大小就好看啦.

总结

通过该作业，进一步加深了我对代码规范--驼峰命名法的重要性,还有遇到前端bug后，可以采用console.log()，加在相关代码对应地方，看看是哪一步数据没拿到，还是自己封装错啦，等等

最后该项目可以通过https://lumingfei0616.github.io/webFinalHomeWork/访问

附上该项目的该组件的全部代码

<template>
  <div>
    <el-container>
      <el-header>忍者管理系统 </el-header>
      <el-main>
        <el-table :data="tableData">
          <el-table-column
            prop="name"
            label="忍者名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="fight"
            label="忍者战力"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="level"
            label="忍者级别"
            width="200"
          ></el-table-column>
          <el-table-column label="操作" width="600">
            <template slot-scope="scope">
              <el-button
                type="danger"
                round
                size="small"
                circle="true"
                @click="deleteRenZhe(scope.row.id)"
                >删除忍者</el-button
              >
              <el-button
                type="primary"
                size="small"
                circle="true"
                @click="modifyRenZhe(scope.row.id)"
                >修改忍者</el-button
              >
              <el-button
                type="primary"
                size="small"
                circle="true"
                @click="studySkill(scope.row.id)"
                >学习技能</el-button
              >
              <el-button
                type="primary"
                size="small"
                circle="true"
                @click="scanSkill(scope.row.id)"
                >查看技能</el-button
              >
              <el-button @click="addRenZhe()" type="primary">添加忍者</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="技能学习" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="技能名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="技能等级" :label-width="formLabelWidth">
              <el-input v-model="form.level" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="study()">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改忍者" :visible.sync="dialogFormVisible2">
          <el-form :model="form">
            <el-form-item label="忍者名" :label-width="formLabelWidth">
              <el-input v-model="form2.rname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者战力" :label-width="formLabelWidth">
              <el-input v-model="form2.rfight" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者等级" :label-width="formLabelWidth">
              <el-input v-model="form2.rlevel" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modify()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="添加忍者" :visible.sync="dialogFormVisible3">
          <el-form :model="form">
            <el-form-item label="忍者名" :label-width="formLabelWidth">
              <el-input v-model="form3.rname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者战力" :label-width="formLabelWidth">
              <el-input v-model="form3.rfight" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="忍者等级" :label-width="formLabelWidth">
              <el-input v-model="form3.rlevel" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="技能信息" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column
              property="name"
              label="技能名"
              width="150"
            ></el-table-column>
            <el-table-column
              property="level"
              label="技能等级"
              width="150"
            ></el-table-column>
          </el-table>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "showRenzhe",
  methods: {
    studySkill(id) {
      this.dialogFormVisible = true;
      this.form.id = id;
      // this.study();
    },
    study() {
      // console.log("调用study");
      var that = this.tableData;
      // console.log("调用study1");
      for (var i = 0; i < that.length; i++) {
        // console.log("调用study1");
        if (that[i].id == this.form.id) {
          that[i].skill.push({ name: this.form.name, level: this.form.level });
          this.dialogFormVisible = false;
          alert(that[i].name + "成功学习技能:" + this.form.name);
          // console.log("111",this.tableData);
          return;
        }
      }
    },
    modifyRenZhe(id) {
      this.dialogFormVisible2 = true;
      this.form2.id = id;
      // this.modify();
    },
    modify() {
      var that = this.tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == this.form2.id) {
          that[i].name = this.form2.rname;
          that[i].fight = this.form2.rfight;
          that[i].level = this.form2.rlevel;
          this.dialogFormVisible2 = false;
          // alert("成功修改");
          return;
        }
      }
    },
    addRenZhe() {
      // console.log('调用addRenZhe');
      this.dialogFormVisible3 = true;
    },
    add() {
      // console.log('调用add');
      this.tNum++;
      var t = { id: "", name: "", fight: "", level: "", skill: "" },
        that = this.form3;
      //  console.log('调用add');

      t.id = this.tNum;
      t.name = that.rname;
      t.fight = that.rfight;
      t.level = that.rlevel;
      t.skill = [];
      console.log("调用add");
      this.tableData.push(t);
      this.dialogFormVisible3 = false;
      // alert("成功添加");
    },
    deleteRenZhe(id) {
      var that = this.tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == id) {
          that.splice(i, 1);
        }
      }
      alert("成功删除");
    },
    scanSkill(id) {
      var that = this.tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == id) {
          this.gridData = that[i].skill;
        }
      }
      this.dialogTableVisible = true;
    },
  },
  mounted() {},
  data() {
    return {
      //{sdept,smajor,sclass,sname}
      tNum: 5,
      tableData: [
        { id: 0, name: "漩涡鸣人(幼年)", fight: 20, level: "C", skill: [] },
        { id: 1, name: "宇智波佐助(幼年)", fight: 20, level: "C", skill: [] },
        { id: 2, name: "小樱(幼年)", fight: 20, level: "C", skill: [] },
        {
          id: 3,
          name: "卡卡西(青年)",
          fight: 100,
          level: "A",
          skill: [
            { name: "雷切", level: "S" },
            { name: "螺旋丸", level: "S" },
          ],
        },
        { id: 4, name: "宇智波佐助(博人传)", fight: 20, level: "D", skill: [] },
      ],
      // bridgename: "",
      tName: "",
      tLevel: "",
      tFight: "",
      tSkill: "",
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      form: {
        id: "",
        name: "",
        level: "",
        delivery: false,
        type: [],
      },
      form2: {
        id: "",
        rname: "",
        rfight: "",
        rlevel: "",
      },
      form3: {
        id: "",
        rname: "",
        rfight: "",
        rlevel: "",
      },
      gridData: [],
      dialogTableVisible: false,
    };
  },
};
</script>

<style>
.el-table th {
  display: table-cell !important;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>

lijiatu10086
关注
通信软件开发与应用课程结业报告
ii231的博客
06-18 518
通信软件开发与应用课程结业报告一. 任务要求二. 效果展示1.主页面2.子页面设计（1）人物介绍子页面（2）主题曲介绍子界面三. 实现过程1.主页面(1)导航条以及首页全屏图片显示(2)内容介绍，评论，以及剧照部分(3)人物介绍(4)Footer2.子页面(1)人物介绍子页面(2)主题曲介绍子页面四. 遇到的问题1.剧照gallery部分照片显示问题(未解决)2.将网页,mp3,以及大文件mp4托管到github的方法五. 总结 一. 任务要求 构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如
通信软件开发与应用》课程结业报告
qq_52772319的博客
07-09 248
我
《通信软件开发与应用》代码
06-18
《通信软件开发与应用》是一门深入探讨通信技术在软件开发中的应用的课程，而这里提供的"《通信软件开发与应用》代码"很显然是学生或参与者完成结业考核任务的一部分。这个任务涉及到创建一个静态网站，展示了他们...
Vue3 + TypeSrcipt 防抖、防止重复点击实例
BillKu的博客
06-08 313
1、编写防止重复点击组合式函数 hook，usePreventReClick.ts2、导入防止重复点击组合式函数 hook3、使用 preventReClick 防止重复点击......// 查询，加装 preventReClick 防抖器，防止重复点击preventReClick(async () => { // 改动1：增加防抖代码// 检查if (!!) {ElMessage.warning("请输入查询条件！");return;});// 改动2：增加防抖代码。
vue3 el-table表头样式（背景颜色，字体颜色）
LXMoon_的博客
06-06 415
表头样式
D3.js与vue3力导向图开发全流程
qq_38918953的博客
06-06 516
本文介绍了使用Vue 3、TypeScript和D3.js构建力导向图的实现方法。父组件D3ForceGraph接收图谱数据并渲染可视化图表，子组件负责D3.js的具体实现，包含节点样式配置、交互功能（如缩放）和箭头标记定义。通过模拟数据展示美国产品知识图谱，节点代表不同实体（国家、品牌、产品等），连线表示实体间关系。技术栈结合了Vue的组件化、D3.js的数据可视化能力以及Tailwind CSS的样式设计，实现了响应式、交互式的网络图谱展示。
vue-18（使用 Vuex 插件实现高级功能）
清幽竹客
06-05 1691
摘要 Vuex插件是扩展Vuex存储功能的有力工具。通过接收store实例作为参数，插件可以订阅变更和动作，实现持久化、日志记录、时间旅行调试等高级功能。核心使用场景包括状态持久化到本地存储、调试日志输出、状态历史回溯以及外部服务集成。典型实现方式包括store.subscribe监听变更、store.watch监视特定状态、store.subscribeAction拦截动作生命周期。插件还可针对命名空间模块进行优化，确保只响应特定模块的变更。这些机制为Vue应用程序提供了强大的状态管理扩展能力。
Svelte 核心语法详解：Vue/React 开发者如何快速上手？
ngd-b的博客
06-07 1284
摘要：Svelte是一个创新的前端框架，通过编译时优化提升性能。其组件结构包含<script>、<style>和HTML三部分，简洁易用。文章介绍了Svelte的基本用法，包括项目初始化、组件编译过程，并实现了一个简易的svelte-loader解析器。重点讲解了核心特性"Runes"中的$state响应式声明功能。虽然API变动频繁，但Svelte凭借简洁的设计和跨平台潜力值得关注。
vue实现气泡词云图
荤素菜鸟的博客
06-10 101
【代码】vue实现气泡词云图。
Vue3 PC端 UI组件库我更推荐Naive UI
weixin_63443072的博客
06-09 807
本文通过对Naive UI、Element Plus和Ant Design Vue三大主流Vue3 UI库的全面对比，揭示了Naive UI在多维度的卓越表现。从架构设计来看，Naive UI采用组合式开发理念，源码组织结构更合理，充分运用Vue3响应式特性；性能测试显示其在表格组件渲染、表单操作等场景下显著领先；开发体验方面，Naive UI提供近乎完美的TypeScript支持和高效的文档系统；独特的主题架构实现毫秒级切换。尽管社区规模稍逊，但其优异的性能、现代化架构和卓越的开发体验，使Naive UI
springboot整合VUE之在线教育管理系统简介
张晨光老师的播客
06-09 853
main.js负责将App.vue的代码整合起来创建应用，App.vue负责根层的组件，index.html负责将main.js打包形成的应用在网页中展示出来。课程信息：课程名称、介绍、学分、所属学院、上课教师、开班人数、上课时段、上课地点、已选人数。启动项目，启动完了项目终端会给我们一个链接，这个链接对应的地址就是本地服务器的网页，让我们打开终端给我们的链接。学生信息：用户名、密码、姓名、性别、学号、总学分、所属学院、角色。教师信息：用户名、密码、姓名、性别、职称、所属专业、角色。
VUE解决页面请求接口大规模并发的问题（请求队列）
qq_39691676的博客
06-07 709
【代码】解决页面请求接口大规模并发的问题。
v-bind 与 v-model 的区别与联系详解
最新发布
weixin_51288065的博客
06-10 704
理解二者区别能避免常见错误，在表单处理、组件通信等场景做出正确选择。v-bind 构建数据通道，v-model 实现动态交互，共同构成 Vue 数据驱动的核心机制。
antd-vue - - - - - a-table排序
Dark_programmer的博客
06-10 434
Ant Design Vue 表格排序功能解析 摘要：本文介绍了antd-vue中a-table组件的排序功能实现方法。主要内容包括： 基础排序配置：通过sorter对象中的compare函数定义排序逻辑，multiple属性设置排序优先级 代码示例：展示多列排序的实现，不同列的multiple值决定排序优先级顺序 进阶处理：针对数值型、字符串型等不同数据类型，提供了差异化的排序处理方案 注意事项：当排序列包含非数字类型时，需要根据数据类型定制compare函数 文章通过具体代码演示了如何实现表格的多列
Vue3 watch使用
2401_89806660的博客
06-10 861
在Vue 3中，监听数据变化主要有以下几种方式：官网👉🏻。
Vue Router的核心实现原理深度解析
qq_39279448的博客
06-05 354
利用浏览器的Hash API或History API实现前端路由通过路径匹配算法将URL映射到组件使用中间件模式实现路由守卫结合Webpack实现路由懒加载与Vue的响应式系统集成实现视图更新。
React hook之useRef
qq_39460057的博客
06-09 845
useRef提供了一种访问 DOM 节点的方式可以存储不会触发重新渲染的可变值在组件的整个生命周期内保持引用不变是集成第三方库和实现高级模式的利器。
北大青鸟S1结业项目：MyQQ聊天软件开发与数据库
S1结业项目是北大青鸟针对其软件工程类课程中的一项综合实践项目，旨在测试学生所学知识的综合运用能力，该项目通常要求学生完成一个具有实际应用场景的软件开发任务。 ### 知识点一：C# Winform C#是一种面向对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值