综合系统开发---代码开发、测试及发布

这个作业属于哪个课程	https://edu.cnblogs.com/campus/gdgy/2021Softwarecodedevelopmenttechnology
这个作业要求在哪里	https://edu.cnblogs.com/campus/gdgy/2021Softwarecodedevelopmenttechnology/homework/12043
这个作业的目标	1.对需求的实现由所了解
	2.实践开发系统的流程
	3.养成一个良好的开发习惯
	4.养成一个良好的代码编写习惯

一、开发日记

5.21

项目正式启动，最后一次确定需求，开始设计页面

5.22

设计UI中。。。

5.24

基本设计结束

目前问题：如何用代码将其实现

5.25

构思UI实现优先级，用什么实现
结果：先用HTML和css实现组件可视化

5.27

将页面划分为头部，导航栏，内容区依次进行实现
头部已实现：

        <div class="head">
            <div class="logo">
                <h1>
                    大R服务出租系统
                </h1>
            </div>
        </div>
    <!-- 顶部导航栏 -->
        <div class="top_nav">
			<ul class="top_left">
                
				<li><a class="active">概况</a></li>
				<li><a href="#customer-table">案例</a></li>
			
			<div class="top_right">
				
				<li><a >退出</a></li>
                <li><a>用户</a></li>
            </div>
			</ul>
        </div>
    </div>

5.29

导航栏和内容区的实现：

    <!-- 侧边导航栏 -->
    <div class="content">
        <div class="taps">
            <ul >
                <li v-for="(tap,index) in tapsData"
               
                    ><a    href="#">{{ tap.name }}</a></li>
               
              </ul> 
        </div>
    <!-- 标签页面内容 -->
        <div id=news>
            news
        </div>
        <div class="message"  id="customer">
           <br>
           <!-- 搜索面板 -->
           <div class="serach">
           <form action="s">
                <select name="cars">
                    <option value="全部">全部</option>
                    <option value="编号">ID</option>
                    <option value="姓名">姓名</option>
                   
                </select>
                <input type="text" placeholder="搜索.." v-model="serachString" v-on:click="seraching" >
                
                <el-button id="searching" type="primary" icon="el-icon-search" v-on:click="seraching">
                    搜索
                </el-button>
             </form>
            </div>
           <!-- 用v-bind绑定数据库数据输入 -->
           <div class="sql-message"   >
          
           <table id="customer-table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>联系方式</th>
                    <th>微信号</th>
                    <th>是否为自由职业者</th>
                    
                    <th></th>
                </tr>
             </thead>
             <tbody>
               
                <tr  v-for="(customer, index) in searchData">
                    <td>{{ index+1 }}</td>
                    
                    <td>{{ customer.name }}</td>
                    <td>{{ customer.age }}</td>
                    <td>{{ customer.phone }}</td>
                    <td>{{ customer.wxid }}</td>
                    <td>{{ customer.state }}</td>
                    <td><a href="" @click="sbu">编辑</a></td>
                   
              </tr>
            </tbody>
           </table>
          </div>
        </div>
    </div>

多天的学习和测试实现页面基本样式，现在难点是：如何实现功能逻辑？

5.30

对功能逻辑模块进行分析后预采用vue.js实现功能逻辑
实现优先级：整体逻辑>数据库数据导入>request>搜索反馈

5.31

数据库建表成功！数据导入成功！


遇到的困难：搜索怎么实现？？

6.1

上网百度了很多发现对于用vue写搜索有一些逻辑上的问题：如何获取键值并依靠这个键值实现对数组的搜索并显示？
今日采用单空字符串获取信息流实现。-----结果：失败

6.2

昨日采用单通道未实现，今日采用双通道---一个字符流获取搜索内容，一个获取依据字符流过滤掉的数据内容
成果：搜索实现

6.3

突然意识到时间可能不够完成开发，决定加快进程，重构代码，加快开发效率。
从element官网获取模块依次重构代码，减少对样式设计的时间损耗。
要求是:保持大体不变的情况下，美化页面。

6.4

代码重构完成，数据重载完成，表单提交上传未完成。

6.5

开始测试

6.6

验收，编写博客

二、测试

1.测试内容

（1）登录页面

成功执行，符合逻辑

（2）普通员工和管理员的权限测试
ps：已知admin账号是管理员，其他是员工

成功执行，符合测试预期

（3）信息管理模块---表格加载测试

成功加载

（4）信息管理模块---数据修改测试

问题：未直接修改到数据库，修改有效期持续到页面刷新

（5）信息管理模块---数据删除测试

成功执行，符合预期

（6）信息管理模块---数据条件搜索

问题：搜索有时会卡数据，导致数据存在并不能加载，可能是搜索后修改原数据组的原因

2.场景测试

（1）员工：将记录信息化，方便操作，增加工作效率。
（2）管理层：减少沟通，方便管理，能够看到数据的全部信息和员工的操作日志。

3.测试结果：

本次测试共发现3个bug
（1）在切换页面的时候会导致页面内容丢失或不全，原因可能是路由的代码指向出现偏差，属于可修改bug。
（2）在进行信息管理时，对数据的操作不回反映到数据库，作用域变小，可能原因是数据库连接接口未实现，属于可修改bug。
（3）tap页面切换时，表格数据有时会重叠，但是代码没有问题，原因可能是数据指向型问题，超出能力范围，未来可修复。

三、Alpha版本发布说明

1.功能说明

（1）登录功能
（2）信息管理
（3）权限测试
（4）日志导出（未实现）
功能在测试中已提供截图

2.使用说明

（1）使用环境：所有市面上的游览器
（2）安装说明：npm install——>npm run build——>npm run serve
打开http://localhost:8080
（3）可下载地址：git（github崩溃暂不上传）
百度网盘：链接：https://pan.baidu.com/s/18uQoyl2nBTyhmegNAbRb-g 提取码：xxxz

后台截图