Software Engineering - personal summary

Software Engineering - personal summary

Link front-end code

Back-end code link

My main work, front-end design, front-end back-end interaction, most of the page is completed.

First, prototyping

1. Identify needs

Demand link

2. The use case diagram, class diagram, a timing chart of

Figure Design Links

Second, the accumulation of learning

1.vue framework

In order to achieve complete community management system front end, I went to learn how to efficiently develop the front end of the process, and the final choice of powerful vue framework to achieve the development of the front end. vue frame is used to build a user interface asymptotically frame, the code structure is as follows

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

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

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

vue vue with this point the whole object with this.data bound to complete the request data, can also perform other operations. vue v-model also provides two-way binding, v-if, v-show, v-for other characteristics, can provide more convenience for developers.

2.element-ui

Vue chosen as the carrier carrying the front end, I found a lot of online tutorials using the element-ui ui design as the front end of the frame. element-ui hungry or domestic open source companies to share it, so I was surprised, but it's very consistent with my component-style aesthetic. Elemen-ui in which I is the most common form of assembly, forms, cards, time lines, pictures, time selectors, SELECT selector, switch the switch as well as its own layout. And elemen-ui content of the document is very detailed, comprehensive description, learn more easily.

3.axios

Axios front and rear ends are in communication with each other technology, is based on the Promise Axios HTTP library, and for the browser in node.js

Request format

<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 complete interworking front and rear ends, but I appeared in the case the request is lost in the process of writing the code by the function (response) to the acquisition request time, then I (response => {}) Arrow mode replace it without way problems, but also in the project, I also met vue of this point, lOSS oF uSE this.data = response.data to bind the data, and can only use const _this = this way with _this redirected to this resolve this error.

4.websocket

websocket can create a persistent connection in the browser and the server, can long interactions. I learned the code online, use it in the chat window on the main page of the web page.

Third, the actual development (part of my responsibility)

1. The administrator interface

1) User management

In the beginning we designed the existence of a social organization linked, their individual design and a separate user data table, but found two tables in the development process is too complicated, but the last one in the user table Riga type field to determine whether the user is an administrator. The addition of this field, the user can log in after class save through long-term local session, after pages can also be relatively simple implementation of rights management by saving categories. And after our last discussion, that community administrators should not arbitrarily modify, and delete user accounts, change user permissions can only be there if there is, then the user may need to reset their password by the administrator.

Finally, I did the following effect

Change Permissions

Reset

2) community management

Finally administrator for community management through communication, I will delete and modify functions deleted, if the administrator can arbitrarily delete and modify not realistic, retaining only the communication and approval functionality. When the new community created, information about it will appear here, and only after approval of agency operations with the administrator, community members can join. On the creation time column and auditing column sorting added convenience administrator for review.

Results are as follows

3) Event Management

Event a success also requires the administrator after approval to join an active member, I will delete and modify the same reason functions deleted, leaving only under approval. To the start time, end time, and the approval status of sorts, easy management. Adds button to see the person, you can view event registration personnel (including the successful registration and enrollment in)

Results are as follows

View staff

2. The president interface

1) Management Portal

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

已经得到批准的社团

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

2)社团成员

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

管理成员

委任社长

3)社团活动

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

活动界面

创建活动

4)社团财务

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

数字验证

5)发布新闻

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

效果如下

3.用户界面

1)我的社团

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

我的社团

查看成员

2)我的活动

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

4.主界面聊天窗口

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

四、个人总结

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

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

五、课程建议

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