一、简介
《软件工程务实》是软件技术专业基础课程完成之后的一门软件项目开发过程管理与开发应用技术集成的课程，是将课堂理论学习与行业具体实践集合极为紧密的一门项目课程，它应用到了所有前导课程的知识，并在此基础上，扩充基础专业课程中的软件编程技术知识内容和技能的训练和学习。通过本课程中学习的相关知识与行业中应用的技能相吻合，理解如何整合已有的专业技术和新兴开发技术使用，进一步强化了软件编码能力和软件项目设计开发能力。
包含内容如下：
软件开发实践：学生在课程中会参与一个真实的软件开发项目，从需求分析到设计、编码、测试以及最终交付。这种实践有助于学生掌握软件开发的具体流程和技术。
团队协作与沟通：由于软件开发往往需要多人合作，因此这类课程通常着重培养学生的团队协作能力和沟通技巧。学生需要学会与团队成员有效地沟通、协调工作，并共同解决问题。
项目管理与实践技能：学生可能会学习项目管理的基本原则，如进度规划、资源分配、风险管理等。同时也会学习使用一些实践工具，如版本控制系统、持续集成工具等。
质量保障与测试：学生需要了解软件质量保障的重要性，学习如何进行软件测试、代码审查等活动，以确保最终交付的软件质量。
二、如何在阿里云创建团队项目
1、创建公司
登录阿里云云效：首先，访问阿里云云效官网（https://www.aliyun.com/product/devops），使用您的阿里云账号登录。
进入控制台：登录后，点击页面右上角的“控制台”按钮，进入云效的管理界面。
创建组织：在控制台中，找到“组织管理”选项，点击“创建组织”。在弹出的窗口中填写公司名称、选择行业和规模等信息。
设置权限：创建组织后，您可以根据需要设置不同的角色和权限，以便团队成员能够根据职责进行操作。
2、创建项目
进入组织：在组织列表中找到您刚刚创建的公司，点击进入。
创建项目：在组织页面中，找到“项目管理”选项，点击“创建项目”。填写项目名称、选择项目模板（如敏捷开发、瀑布流等）和其他相关信息。
配置项目：创建项目后，您可以根据项目的实际需求配置项目环境、部署流程、代码仓库等。
邀请成员：通过邮箱或者内部通讯录邀请团队成员加入项目，并为不同成员分配相应的角色和权限。
开始工作：完成上述步骤后，您的团队就可以开始在云效平台上进行项目开发、测试、部署等一系列工作了。
三、项目示例——关于音乐:猜你喜欢（简单示例）
<template>
<view class="like">
<image :src="currentSong.cover" class="cover-img" alt="专辑封面" />
<view class="song-info">
<text class="song-title">{{ currentSong.title }}</text>
<text class="artist">{{ currentSong.artist }}</text>
</view>
<view class="controls">
<button class="control-btn" @tap="prevSong">上一首</button>
<button class="control-btn" @tap="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
<button class="control-btn" @tap="nextSong">下一首</button>
</view>
<uni.audio :src="currentSong.url" :id="currentSong.id" :autoplay="isPlaying"></uni.audio>
</view>
</template>代码解释：
<view class="like">：定义一个名为"like"的视图容器，用于包裹整个音乐播放器的内容。
<image :src="currentSong.cover" class="cover-img" alt="专辑封面" />：使用动态绑定(:src)来设置专辑封面图片的地址，地址来源于当前歌曲对象(currentSong)中的cover属性。同时，class属性"cover-img"用于设置样式，并且alt属性提供了在图片无法显示时的替代文本。
<view class="song-info">：定义一个视图容器，用于显示歌曲信息。
<text class="song-title">{{ currentSong.title }}</text>：使用双花括号插值，将当前歌曲对象(currentSong)中的title属性渲染为文本。
<text class="artist">{{ currentSong.artist }}</text>：同样使用双花括号插值，将当前歌曲对象(currentSong)中的artist属性渲染为文本。
<view class="controls">：定义一个视图容器，用于包含播放控制按钮。
<button class="control-btn" @tap="prevSong">上一首</button>：定义一个按钮，当点击时触发prevSong方法，用于切换到上一首歌曲。
<button class="control-btn" @tap="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>：定义一个按钮，当点击时触发togglePlay方法，用于切换播放/暂停状态。按钮上的文本根据isPlaying变量的值来动态显示，如果isPlaying为true，则显示"暂停"，否则显示"播放"。
<button class="control-btn" @tap="nextSong">下一首</button>：定义一个按钮，当点击时触发nextSong方法，用于切换到下一首歌曲。
<uni.audio :src="currentSong.url" :id="currentSong.id" :autoplay="isPlaying"></uni.audio>：使用uni.audio组件来播放音频。通过动态绑定(:src)将当前歌曲对象(currentSong)中的url属性作为音频源地址，:id绑定当前歌曲对象的id属性，:autoplay绑定isPlaying变量的值，以实现根据播放状态自动播放或暂停。这段代码通过动态绑定实现了封面图片和歌曲信息的切换，同时通过@tap方法与按钮的点击事件相连，实现了上一首、下一首以及播放/暂停功能。最后，使用uni.audio组件来播放当前歌曲的音频。
<script>
export default {
data() {
return {
songs: [{
id: 1,
cover: '/static/home/1汪苏泷封面.jpg',
title: '圣诞星 (Live)',
artist: '汪苏泷',
url: '/static/home/KugouMusic/汪苏泷 - 圣诞星 (Live).mp3'
},
{
id: 2,
cover: '/static/home/单依纯封面.png',
title: '永不失联的爱',
artist: '单依纯',
url: '/static/home/KugouMusic/单依纯 - 永不失联的爱.mp3'
},
{
id: 3,
cover: '/static/home/邓紫棋音乐封面.png',
title: '龙卷风 (Live)',
artist: 'G.E.M. 邓紫棋',
url: '/static/home/KugouMusic/G.E.M. 邓紫棋 - 龙卷风 (Live).mp3'
},
{
id: 4,
cover: '/static/home/张碧晨.jpg',
title: '命运 (Live)',
artist: '汪苏泷、张碧晨',
url: '/static/home/KugouMusic/汪苏泷、张碧晨 - 命运 (Live).mp3'
},
{
id: 5,
cover: '/static/home/susu.jpg',
title: '如果可以',
artist: '汪苏泷、徐佳莹',
url: '/static/home/KugouMusic/汪苏泷、徐佳莹 - 如果可以 (Live).mp3'
},
{
id: 6,
cover: '/static/home/罗震环封面.jpg',
title: '靠近',
artist: '罗震环',
url: '/static/home/KugouMusic/罗震环 - 靠近.mp3'
},
{
id: 7,
cover: '/static/home/I-DLE.jpeg',
title: '나는 아픈 건 딱 질색이니까',
artist: '(G)I-DLE',
url: '/static/home/KugouMusic/(G)I-DLE - 나는 아픈 건 딱 질색이니까 (因为我讨厌疼痛)(Fate)(2024 The Seasons 4 - 李孝利的红毯现场).mp3'
},
{
id: 8,
cover: '/static/home/邓紫棋.jpg',
title: 'Where Did U Go',
artist: 'G.E.M. 邓紫棋',
url: '/static/home/KugouMusic/G.E.M. 邓紫棋 - Where Did U Go.mp3'
},
],
currentSongIndex: 0,
isPlaying: false,
audioContext: null
};
},
computed: {
currentSong() {
return this.songs[this.currentSongIndex];
}
},
methods: {
initAudioContext() {
if (!this.audioContext) {
this.audioContext = uni.createInnerAudioContext();
this.audioContext.autoplay = this.isPlaying;
}
},
prevSong() {
this.currentSongIndex = (this.currentSongIndex - 1 + this.songs.length) % this.songs.length;
this.isPlaying = true;
this.playCurrentSong();
},
nextSong() {
this.currentSongIndex = (this.currentSongIndex + 1) % this.songs.length;
this.isPlaying = true;
this.playCurrentSong();
},
togglePlay() {
this.isPlaying = !this.isPlaying;
if (this.isPlaying) {
this.playCurrentSong();
} else {
this.audioContext.pause();
}
},
playCurrentSong() {
this.initAudioContext();
this.audioContext.src = this.currentSong.url;
this.audioContext.play();
}
},
watch: {
currentSong() {
if (this.isPlaying) {
this.playCurrentSong();
}
}
},
mounted() {
this.initAudioContext();
}
};
</script>代码解释：
songs: 包含多个歌曲信息的数组，每首歌曲由id、cover（封面图像路径）、title（标题）、artist（艺术家）、url（音频文件路径）组成。currentSongIndex: 当前播放歌曲在songs数组中的索引。isPlaying: 表示当前是否正在播放。audioContext: 存放uni.createInnerAudioContext()创建的内部音频上下文对象，用于控制音频播放。currentSong: 通过currentSongIndex获取当前播放的歌曲对象。initAudioContext(): 初始化音频上下文，如果尚未创建则创建一个内部音频上下文对象，并设置autoplay属性。prevSong(),nextSong(): 切换到上一首或下一首歌曲，更新currentSongIndex，并播放当前歌曲。togglePlay(): 切换播放状态（播放/暂停），根据isPlaying属性决定调用playCurrentSong()播放当前歌曲或者暂停音频。playCurrentSong(): 播放当前歌曲，通过audioContext设置音频文件的src并调用play()方法开始播放。currentSong的变化监视器，如果isPlaying为true，则调用playCurrentSong()播放当前歌曲。- mounted() { this.initAudioContext(); }在组件挂载完成后初始化音频上下文。
- 这段代码实现了一个简单的音乐播放器，包括播放、暂停、切换歌曲等功能。它利用了 Vue.js 的数据绑定和计算属性来管理歌曲列表和当前歌曲的状态，同时使用
uni.createInnerAudioContext()来实现音频的控制和播放。- 注意：图片路径以及歌曲文件路径要换成自己的
<style scoped>
.like {
background-color: #656565;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.cover-img {
margin-top: 50px;
width: 90%;
height: 300px;
border-radius: 8px;
margin-bottom: 20px;
}
.song-info {
margin-top: 10px;
margin-left: 3px;
text-align: center;
margin-bottom: 30px;
}
.song-title {
font-size: 22px;
font-weight: bold;
color: black;
margin-bottom: 10px;
}
.artist {
margin-left: 10px;
font-size: 18px;
color: #333;
}
.controls {
display: flex;
justify-content: space-around;
width: 100%;
}
.control-btn {
/* background-color: #007aff; */
color: black;
border: none;
padding: 5px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.control-btn:hover {
color: coral;
}
</style>代码解释：
.like: 设置播放器的背景颜色、高度、居中等样式。.cover-img: 设置封面图片的样式，包括上边距、宽度、高度、边框半径和下边距。.song-info: 设置歌曲信息容器的样式，包括上边距、左边距、文本对齐方式和下边距。.song-title: 设置歌曲标题的样式，包括字体大小、加粗、颜色和下边距。.artist: 设置艺术家名称的样式，包括左边距、字体大小和颜色。.controls: 设置控制按钮容器的样式，包括水平居中和宽度为100%。.control-btn: 设置控制按钮的样式，包括背景颜色、颜色、边框、内边距、边框半径、字体大小和光标样式。.control-btn:hover: 设置控制按钮在鼠标悬停时的样式，更改颜色。
注意：class命名规则
命名约定：
- 类名应该以字母开头，可以包含字母（大小写敏感）、数字和连字符
-。- 不能以数字开头或仅包含连字符
-。命名建议：
- 使用有意义的名称，能够描述元素的用途或样式，以便于代码阅读和维护。
- 通常推荐使用小写字母来命名类，避免大小写混用，这有助于保持一致性。
多个类名：
- 可以为一个元素指定多个类名，类名之间用空格分隔。
- 例如：
class="header large-text"表示一个元素同时应用了header和large-text两个类。
效果展示：
四、HBuilder X的项目运行到手机上不显示的解决方法
1、如何运行到手机上
1、连接手机：使用 USB 数据线将手机连接到计算机上，并确保手机已开启 USB 调试模式。在手机设置中，进入开发者选项（如果没有显示，请先在关于手机的设置中找到构建号码并点击多次）
这时它会提示你已经开启开发者模式，之后你要去其他设置找到开发者选项（手机不一样，位置也不一样哦），然后启用 USB 调试选项。
2、在 HBuilder X 中打开项目：打开 HBuilder X，选择菜单栏中的 "文件" -> "打开"，然后选择你的项目文件夹。
3、配置运行环境：在 HBuilder X 的工具栏中，选择 "运行" 选项卡，在下拉菜单中选择你要运行的平台，例如 Android 或 iOS。
4、构建项目：在底部工具栏的右侧，点击 "构建" 按钮。这将生成一个可安装到手机上的应用程序文件（APK 或 IPA）。
5、安装应用程序：构建完成后，你可以将生成的应用程序文件传输到手机上。你可以将文件通过 USB 数据线直接复制到手机上，或者通过其他方式（如云存储）将文件传输到手机上。
6、安装并运行应用程序：在手机上找到应用程序文件，并点击进行安装。安装完成后，你可以在手机上找到该应用程序的图标，并点击打开运行。
2、 解决HBuilder X的项目运行到手机上不显示问题
好不容易码完代码结果在电脑上运行它可以显示
结果运行到手机上它成这样：
造成的这样的原因有两种：
1、前端框架模板问题
（1）、基于uni-app前端框架
<template>
<view>
<view>
<!-- 添加搜索框 -->
<view class="search-form">
<input type="text" class="custom-input" placeholder="歌曲/vm/歌单/歌词..." @confirm="handleSearch" />
<image class="search-icon" src="/static/home/搜索.png" alt="搜索图标" @tap="handleSearch" />
</view>
<view>
<NavBar></NavBar>
</view>
</view>
<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
:circular="true" ref="carousel">
<!-- 轮播项 -->
<swiper-item v-for="(slide, index) in slides" :key="index">
<image class="carousel-slide" :class="{ 'active': currentSlideIndex === index }" :src="slide.image"
alt="轮播图"></image>
</swiper-item>
</swiper>
<view>
<text class="recommend">{{ recommend }}</text>
<view class="re-img">
<navigator url="/pages/view/recommend/recommend">
<image class="img1" src="/static/home/每日推荐(1).jpg" alt="每日推荐"></image>
</navigator>
<navigator url="/pages/view/like/like">
<image class="img2" src="/static/home/猜你喜欢(1).jpg" alt="猜你喜欢图"></image>
</navigator>
<navigator url="/pages/found/ranking">
<image class="img3" src="/static/home/排行榜(1).jpg" alt="排行榜"></image>
</navigator>
<navigator url="/pages/view/playlist/playlist">
<image class="img4" src="/static/home/歌单(1).jpg" alt="歌单"></image>
</navigator>
<navigator url="/pages/view/classify/classify">
<image class="img5" src="/static/home/儿童专区.jpg" alt="分类"></image>
</navigator>
</view>
</view>
<view class="only">
<text class="only-recommend">{{ only }}</text>
<view class="jingxuan image-text-pair">
<image class="jingxuan1" src="/static/home/精选1(1).jpg" alt="精选"></image>
<text class="p1">单依纯 张碧晨 张靓颖 毛不易 张杰</text>
</view>
<view class="jingxuan image-text-pair">
<image class="jingxuan2" src="/static/home/精选2(1).jpg" alt="精选"></image>
<text class="p2">那些难忘的电视剧歌曲</text>
</view>
<view class="jingxuan image-text-pair">
<image class="jingxuan3" src="/static/home/精选3(1).jpg" alt="精选"></image>
<text class="p3">300首全网最火欧美英文歌曲2023</text>
</view>
<view class="jingxuan image-text-pair">
<image class="jingxuan4" src="/static/home/精选4(1).jpg" alt="精选"></image>
<text class="p4">音乐风潮--中国凤</text>
</view>
<view class="jingxuan image-text-pair">
<image class="jingxuan5" src="/static/home/精选5(1).jpg" alt="精选"></image>
<text class="p5">2024抖音热搜最火歌曲</text>
</view>
<view class="jingxuan image-text-pair">
<image class="jingxuan6" src="/static/home/精选6(1).jpg" alt="精选"></image>
<text class="p6">甜蜜100%|甜到心坎里的小情歌</text>
</view>
</view>
</view>
</template>（2）、 vue.js
<template>
<div>
<div>
<!-- 添加搜索框 -->
<form class="search-form">
<input type="text" class="custom-input" placeholder="歌曲/vm/歌单/歌词..." v-model="searchQuery"
@keyup.enter="handleSearch" />
<img class="search-icon" src="/static/home/搜索.png" alt="搜索图标" @click="handleSearch" />
</form>
<div>
<NavBar></NavBar>
</div>
</div>
<div class="carousel" ref="carousel">
<!-- 轮播项 -->
<div v-for="(slide, index) in slides" :key="index" class="carousel-slide"
:class="{ 'active': currentSlideIndex === index }">
<img class="img" :src="slide.image" alt="轮播图" />
</div>
</div>
<div>
<div class="recommend">{{ recommend }}</div>
<img class="img1" src="/static/home/每日推荐.png" alt="每日推荐图" />
<img class="img2" src="/static/home/猜你喜欢.png" alt="猜你喜欢图" />
<img class="img3" src="/static/home/排行榜.png" alt="排行榜" />
<img class="img4" src="/static/home/歌单.png" alt="歌单" />
<img class="img5" src="/static/home/分类.png" alt="分类" />
</div>
<div class="only">
<div class="only-recommend">{{ only }}</div>
<div class="jingxuan image-text-pair">
<img class="jingxuan1" src="/static/home/精选1.png" alt="精选" />
<p class="p1">单依纯 张碧晨 张靓颖 毛不易 张杰</p>
</div>
<div class="jingxuan image-text-pair">
<img class="jingxuan2" src="/static/home/精选2.png" alt="精选" />
<p class="p2">那些难忘的电视剧歌曲</p>
</div>
<div class="jingxuan image-text-pair">
<img class="jingxuan3" src="/static/home/精选3.png" alt="精选" />
<p class="p3">300首全网最火欧美英文歌曲2023</p>
</div>
<div class="jingxuan image-text-pair">
<img class="jingxuan4" src="/static/home/精选4.png" alt="精选" />
<p class="p4">音乐风潮--中国凤</p>
</div>
<div class="jingxuan image-text-pair">
<img class="jingxuan5" src="/static/home/精选5.png" alt="精选" />
<p class="p5">2024抖音热搜最火歌曲</p>
</div>
<div class="jingxuan image-text-pair">
<img class="jingxuan6" src="/static/home/精选6.png" alt="精选" />
<p class="p6">甜蜜100%|甜到心坎里的小情歌</p>
</div>
</div>
<div>
<footer></footer>
</div>
</div>
</template>这两端代码分别代表了两种不同的前端框架模板：第一个是基于uni-app（一个使用Vue.js开发所有前端应用的框架，特别适合开发微信小程序、H5、App等多端应用），而第二个是基于Vue.js的标准Web应用结构。
原因如下:
uni-app 框架：
- 基于多端统一编译：uni-app 是一个基于 Vue.js 的前端框架，通过封装和扩展，支持一套代码编译到多个平台（如微信小程序、App、H5 等），称为多端统一编译。
- 兼容性和适配性：uni-app 提供了对不同移动平台的适配和优化，使得开发者可以通过 uni-app 编写一次代码，就能在多个移动设备上运行和展示。
Vue.js 框架：
- Web 前端框架：Vue.js 本身是一个优秀的 JavaScript 框架，主要用于开发 Web 应用。
- 原生支持：Vue.js 并没有直接支持多端编译的能力，它主要用于构建 Web 页面，在移动应用中，需要借助额外的工具和平台来实现原生应用的打包和运行。
HBuilder X 平台的支持：
- 集成和优化：HBuilder X 是一个集成开发环境，专门用于支持基于 HTML5 的移动应用开发，它对 uni-app 框架有较好的集成和支持，能够直接编译和运行 uni-app 项目。
- 对 Vue.js 的支持有限：尽管 Vue.js 在 Web 开发中非常流行，但在移动应用开发中，需要额外的工具链和配置来将 Vue.js 项目编译为原生应用，而 HBuilder X 平台对 uni-app 提供了更直接和全面的支持。
综上所述，uni-app 框架能够在手机上运行，而 Vue.js 框架需要额外的工具和配置才能达到相同的效果，这是由于它们在开发模型和平台支持上的差异导致的。
2、样式问题
1、图片大小：很多小伙伴对于height喜欢用auto，但 HBuilder X项目运行到手机上是不支持的，所以会造成图片不显示。
2、display: flex样式：父容器没有明确的宽度和高度，而且子元素使用了 flex 布局，那么子元素可能会无法正常显示。在这种情况下，父容器的尺寸可能是 0 或者非常小，导致图片无法显示出来。
3、其它样式......具体要根据自己使用的样式更改
五、总结
在阿里云上创建团队项目可以方便团队成员之间的协作和项目管理。创建团队项目的步骤包括创建公司和创建项目。在项目中，遵循良好的 class 命名规则可以使代码更加清晰易懂。如果在 HBuilder X 中运行项目到手机上时出现显示问题，要注意前端框架模板和样式代码是否正确，并进行相应的调试和修复。
扫一扫
1510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
