소프트웨어 공학 - 개인 요약

소프트웨어 공학 - 개인 요약

링크 프런트 엔드 코드

백엔드 코드 링크

내 주요 작업, 프론트 엔드 디자인, 프런트 엔드 백 엔드 상호 작용이 페이지의 대부분이 완료됩니다.

첫째, 프로토 타입

요구 사항을 확인하십시오

수요 링크

2. 사용하는 경우도, 클래스 다이어그램의 타이밍 차트

그림 디자인 링크

둘째, 학습의 축적

1.vue 프레임 워크

전체 커뮤니티 관리 시스템 프론트 엔드를 달성하기 위해, 나는 효율적으로 프로세스의 프론트 엔드를 개발하고, 강력한 VUE 프레임 워크의 최종 선택은 프론트 엔드의 개발을 달성하는 방법을 알아 갔다. VUE 프레임 점근 프레임 사용자 인터페이스를 구축하기 위해 사용되는 코드 구조는 이하이고

<template>
    <!-- 存放html代码 -->
</template>

<script>
    //javascript代码部分
export default {
      data():{
          //定义数据，在页面调用时返回渲染的数据
      },
      created(){
          //html调用页面前渲染数据
      },
      mounted(){
          //html调用页面后渲染数据
      },
      watched(){
          //可以监听变化
      }
    //操作函数
    methods:{
        getData(){
            //获取数据函数
        }
    }
}
</script>

<style>
    //css样式
</style>

이 점에 VUE VUE는 요청 데이터를 완료 할 의무 this.data와 전체 객체는 다른 작업을 수행 할 수 있습니다. VUE V-모델은 V는-에 대한 다른 특성, 개발자를위한 편의를 제공 할 수 있습니다, V-경우 V 쇼, 바인딩 두 방법을 제공합니다.

2.element-UI

프런트 엔드를 운반하는 캐리어로 선정 뷰, 나는 프레임의 프론트 엔드로 요소 - UI UI 디자인을 사용하여 온라인 자습서를 많이 발견했다. 나는 놀랐다 있도록 요소 - UI 배고픈 또는 국내 오픈 소스 회사, 공유,하지만 내 구성 요소 스타일의 미적 매우 일치합니다. Elemen-UI는 내가 조립, 형태, 카드, 타임 라인, 사진, 시간 선택기, SELECT 셀렉터 스위치뿐만 아니라 자신의 레이아웃을 전환의 가장 일반적인 형태입니다. 그리고 문서의 elemen-UI의 콘텐츠는 매우 포괄적 인 설명을보다 쉽게 ​​배우고, 자세히 설명되어 있습니다.

3.axios

Axios의 전후 단부가 서로 통신 기술에 약속 Axios의 HTTP 라이브러리에 기반하며, Node.js를 브라우저에서

요구 포맷

<template>
</template>

<script>
export default {
    methods:{
        getData(){
            //get请求
            this.$axios.get(url)
            .then(function(response)){
                 console.log(response); 
            }.catch(function(error){
                console.log(error);
            })
            //箭头格式
            this.$axios.get(url)
            .then(response=>{
                 console.log(response); 
            }).catch(function(error){
                console.log(error);
            })
            //post请求
            this.$axios.post(url)
            .then(response=>{
                 console.log(response); 
            }).catch(function(error){
                console.log(error);
            })
            //post请求带参数
            this.$axios.post(url,{
                parms:{
                    ID:123
                }
            })
            .then(response=>{
                 console.log(response); 
            }).catch(function(error){
                console.log(error);
            })
            
        }
    }
}
</script>

<style>

</style>

Axios의 완전한 연동 전후 단부는하지만 요청 그때 (대응 => {}) 화살표 모드없이 대체, 획득 요구 시간 함수 (대응)에 의해 코드를 작성하는 과정에서 손실되는 경우에 등장 방법의 문제뿐만 아니라, 프로젝트에, 나 또한이 점 VUE를 만났다 사용 this.data = response.data의 손실은 _this이로 리디렉션으로 = 이런 식으로 데이터를 결합하고, 단지 const를 _this 사용할 수 있습니다 이 오류를 해결.

4.websocket

웹 소켓 수, 긴 상호 작용을 브라우저와 서버에 영구 연결을 만들 수 있습니다. 나는 온라인으로 코드를 배운 웹 페이지의 메인 페이지에 채팅 창에 그것을 사용할 수 있습니다.

셋째, 실제 개발 (내 책임의 일부)

1. 관리자 인터페이스

1) 사용자 관리

처음에 우리는 링크 된 사회 조직, 개별 디자인과 별도의 사용자 데이터 테이블의 존재를 설계하지만, 개발 과정에서 두 개의 테이블이 너무 복잡 찾았지만 사용자 테이블 리가의 마지막 사용자가 관리자인지 여부를 결정하기 위해 필드를 입력합니다. 페이지는 범주를 저장하여 권한 관리의 비교적 간단한 구현을 할 수 있습니다 후이 필드의 추가, 사용자는, 클래스가 장기를 로컬 세션을 통해 저장 한 후 로그인 할 수 있습니다. 그리고 우리의 마지막 토론 후, 그 커뮤니티 관리자 임의로 변경해서는 안되며, 다음, 사용자가 관리자 암호를 재설정해야 할 수도있는 경우 삭제 사용자 계정 변경 사용자 권한 만있을 수 있습니다.

마지막으로, 나는 다음과 같은 효과를했다

권한 변경

리셋

2) 커뮤니티 관리

관리자가 임의로 전용 통신 및 승인 기능을 유지, 현실을 삭제하고 수정할 수 있습니다 경우 통신을 통해 커뮤니티 관리에 대한 마지막으로 관리자, I 삭제 및 수정합니다 기능은 삭제. 새로운 커뮤니티가 생성되면, 그것은에 대한 정보가 여기에 표시됩니다, 관리자 만과 기관 운영의 승인 후, 커뮤니티 회원에 가입하실 수 있습니다. 작성 시간 열 및 감사 열을 검토 편의 관리자를 정렬.

결과는 다음입니다

3) 이벤트 관리

이벤트 성공도 정회원 가입 승인 후 관리자가 필요, 난 단지 승인하에 남겨 두는 기능이 삭제 같은 이유로 삭제 및 수정합니다. 시작 시간, 종료 시간 및 종류, 쉬운 관리의 승인 상태. 버튼은 사람을보고 추가합니다, 당신은 (에 성공적으로 등록 및 등록 포함) 이벤트 등록 담당자를 볼 수 있습니다

결과는 다음입니다

보기 직원

2. 대통령 인터페이스

1) 관리 포털

​ 主界面有管理成员，管理活动，管理财务，解散社团，修改内容，发布新闻入口。并且还会显示申请创建的社团是否通过。并且通过的社团只能更改自己的简介，没有通过的社团能够更改自己的logo和简介。没有通过社联管理员审批的社团同样也不能进行任何操作。

已经得到批准的社团

没有得到批准的社团 除了修改内容的按钮其他都不可按

2)社团成员

​ 社团成员页面可以通过主管理界面进行跳转，在社团管理界面。社长能够对自己的成员进行管理，对于申请加入的用户进行审批，如果不同意用户加入，可以将用户的申请删除。同时在此界面社长能够进行委任下一任社长的操作，但是如果进行此操作，系统将会要求用户重新登录。

管理成员

委任社长

3)社团活动

​ 社长能够此页面对自己的社团进行管理，左上角为自己社团的相关信息，右侧为主操作块完成社团活动的创建，搜索，删除，左下角的操作块能够通过点击相关活动显示所报名的人员，来完成对他们的管理操作，如果想要他们参加这个活动那么就可以让他通过，对于不许可的参加申请社长可以删除他们的申请。

活动界面

创建活动

4)社团财务

​ 社长能够管理社团财务，在社团财务中，社长能够创建活动，模糊搜索，并且能够批量删除，并且我在修改和添加财务的表单中加入了对数字的验证，能够防止误操作。

数字验证

5)发布新闻

​ 我在制作发布新闻的页面的时候，我使用了element-ui的Timeline时间线组件，这样社长发布新闻的时候，每次都能看到新闻的时间线，对新闻的新旧更加直观，同时加上了排序的功能能够方便使用者进行管理。

效果如下

3.用户界面

1)我的社团

​ 我的社团的界面能够通过社团审批状态显示，申请加入社团的相关状态，在此页面能通过查看成员按钮看到正式加入社团的成员，并且如果是社长的话，在其所属社团，社长无法退出，只能委任社长之后才能够退出社团。

我的社团

查看成员

2)我的活动

​ 我的活动和我的社团的逻辑差距不大，都是可以根据活动申请状态对下面的提示发生变化，可以查看已报名的人员。

4.主界面聊天窗口

​ 主界面聊天窗口是我和杜峥嵘合作完成，我们通过websocket+node在我们买的服务器上运行一个比较简单的服务器。能够完成基本的聊天功能。

四、个人总结

​ 大学学习生活中第一次接触正式的软件开发流程，让我一开始感到茫然所措。在一开始分析需求，设计原型阶段，我还能够找到目标能够顺利摸清软件开发的前期准备工作。但是在中后期阶段，我却因为相关知识技术的缺失，没有相关的概念，也没有正确的方向，像一个无头苍蝇一样乱撞，那边查点资料，这边查点资料，这边做一点，那边做一点，导致我的进度一直停滞不前。在最后真的找准方向以后，反而时间不够了。所以对于我自己来说，一定要多去看相关的计算机新闻、博客、公众号，了解相关方向所用到的技术，开发web，开发后端，搭建服务器的技术一定要有个大概的了解，有相关的概念。这样努力的方向才不不容易出错。

​ 而且在此次学习的过程中，我也深刻的意识到软件开发前期的准备工作是多么重要，因为我们前期需求设计的不全面，导致后面开发的过程中，经常出现需求不合理的情况，需要更改数据库，一更改，有些返回的数据可能就会发生变化，就会导致功能出错。相当一部分工作报废，成员之间隔一段时间得开会一定是必须的。而且分工一定要明确，成员一定要努力发表自己的看法，一定要主动讨论，而不是被动的等着别人来催促，这样不仅成员的工作进度会落后，包括整个小组的进度也会落后。

五、课程建议

​ 朱老师是一个领路人，带我们走进了软件开发的世界。软件开发的世界有其自己的规则，而我们这些开发者就需要遵守这些规则，来保证我们交互给用户的软件是符合用户实际需求。但是对于我们这些第一次接触这个世界的初入者来说，我们没有相关的实际开发的经验，我们对于这些规则的应用和理解也只是非常粗浅的。所以我希望老师能够加大力度支持同学们在课堂上的技术交流。再者我觉得，老师可以隔一段时间，让进度领先，做的比较好的小组在课上分享一下开发的经验。还有一点，在我们大二短学期开发数据库系统的时候，老师隔一段时间抽查一次同学们工作进度的方式我觉得就很不错。人是有惰性的，如果不逼一逼是没发激发人的斗志的，这样会给同学们紧迫感，也会减少有些小组进度偏慢的情况。