软件工程实践总结&个人技术博客
技术概述
随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。
Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。
和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。
技术详述，描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。可以再细分多个点，分开描述各个部分。
1.这个是外层的结构
<div>
<div id="head">
<p class="title">签到</p>
<p class="english">Signin</p>
</div>
<div class="part">
<router-view></router-view>
</div>
</div>
2.签到栏
<div id="div3" style="display: flex;align-items: center;">
<el-select v-model="clazzvalue" placeholder="请选择" class="kuang" @change="changeClazz"
<el-option
v-for="item in options"
:key="item.id"
:label="item.clazzName"
:value="item.id+''">
</el-option>
</el-select>
<span class="text">{{qiandaochar+":"}}</span>
<el-input placeholder="请输入签到名称" class="kuang" size="medium" v-model="input" clearable style="width:14% ">
</el-input>
<span class="text" id='jshutime'>{{qiandaochar2+":"}}</span>
<div class="block">
<span class="demonstration"></span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="发布签到结束时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
<el-button @click="publishClick" id="publishbutton" >发布签到</el-button>
</div>
3.按钮的实现
<el-table-column label="签到结果" v-if="showOper" align="center" width="180">
<template slot-scope="scope">
<!-- <router-link to="/teacher/signin/signinlist" tag="button" >签到结果</router-link>-->
<el-button type='text' @click="lookClick(scope.row)" id="lookbutton">查看</el-button>
</template>
</el-table-column>
<el-table-column label="修改结束时间" v-if="showOper" align="center" width="170">
<template slot-scope="scope">
<!-- <router-link to="/teacher/signin/signinchange" tag="button" >修改结束时间</router-link>-->
<el-button @click="editClick(scope.$index,scope.row)" type="text" id="lookbutton">编辑</el-button>
</template>
</el-table-column>
4.接收数据
queryList(){
let info = {
clazzId:this.clazzvalue
}
this.$axios({
method: 'get',
headers: {
'Content-type': 'application/json;charset=UTF-8'
},
// data:JSON.stringify(info),
url: 'http://1.15.149.222:8080/coursewebsite/attendance/teacherAll?clazzId='+this.clazzvalue
}).then((response) => { //这里使用了ES6的语法
//console.log(JSON.stringify(response)) //请求成功返回的数据
//console.log(response.data.data)
//this.tableData = response.data.data
let that = this
response.data.data.forEach(function(item,index){
that.tableData.push(item)
that.tableData[index].state = that.tableData[index].state==true?"进行中":"已结束"
})
}).catch((error) => {
console.log(error) //请求失败返回的数据
})
},
技术使用中遇到的问题和解决过程
问题1.IDEA没有vue插件
解决方案：当时试了许多方法都不行。最后我使用了vue官方推荐的HbuilderX来写代码
问题2.时间格式（签到部分要求获取当时时间的时间格式）
解决方案：开始是在网上找到获取时间的函数，但是对于时间格式无法纠正
<div class="block">
<span class="demonstration"></span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="发布签到结束时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
使用element ui中的时间选择器，value-format属性可以设置时间格式。
问题3：后端返回布尔值，根据布尔值显示不同的内容
解决方案：
queryList(){
let info = {
clazzId:this.clazzvalue
}
this.$axios({
method: 'get',
headers: {
'Content-type': 'application/json;charset=UTF-8'
},
// data:JSON.stringify(info),
url: 'http://1.15.149.222:8080/coursewebsite/attendance/teacherAll?clazzId='+this.clazzvalue
}).then((response) => { //这里使用了ES6的语法
//console.log(JSON.stringify(response)) //请求成功返回的数据
//console.log(response.data.data)
//this.tableData = response.data.data
let that = this
response.data.data.forEach(function(item,index){
that.tableData.push(item)
that.tableData[index].state = that.tableData[index].state==true?"进行中":"已结束"
})
}).catch((error) => {
console.log(error) //请求失败返回的数据
})
},
直接添加索引，将返回的数据进行一个判断，然后装进数组中
进行总结
1.更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
2.双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
3.生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；
列出参考文献、参考博客
标题：快乐长大
作者：挽你手
链接：https://www.cnblogs.com/yjd-05/p/13397707.html
