【北航软件工程】Alpha阶段前端页面编写及服务器部署

前端页面编写

虽然之前对html语法有过一些了解，但是完全没有编写前端页面的经验，和我合作的czy大概也是这么个情况。在Alpha阶段的前端页面编写过程中，我们是摸着石头过河，html是个入门很快专精却很花时间的语言，我们从最基本的布局入手来编写页面。除了业务不熟练之外，困扰我们的还有页面设计组给我们的样板页面，在我们的前端页面编写中需要尽量按照设计同学的设计图来编写html代码，这往往需要丰富的经验，例如下面这张设计图：

图中以“星星”的方式来展示老师和课程的评分，这个星星的组件是不包含在bootstrap里面的，需要第三方插件来实现，而第三方插件又不利于我们与后端的对接，这也就给我们html编写带来了挑战，最后我们还是用bootstrap进度条组件来替代星星，下面是我们的代码：

<div class="col-md-10 column">
	<p><strong>评分详情：</strong></p>
	<ul></ul>
	<ul>
		作业量合理
		<div class="progress">
			<div class="progress-bar progress-bar-success"
				 role="progressbar" style="width:{{percent1}}"
				 aria-valuenow="{{detail1}}" aria-valuemin="0"
				 aria-valuemax="5">{{detail1}}</div>
		</div>
	</ul>
	<ul>
		难易度合理
		<div class="progress">
			<div class="progress-bar progress-bar-success"
				 role="progressbar" style="width:{{percent2}}"
				 aria-valuenow={{detail2}}" aria-valuemin="0"
				 aria-valuemax="5">{{detail2}}</div>
		</div>
	</ul>
	<ul>
		收获量
		<div class="progress">
			<div class="progress-bar progress-bar-warning"
				role="progressbar" style="width:{{percent3}}"
				aria-valuenow="{{detail3}}" aria-valuemin="0"
				aria-valuemax="5">{{detail3}}</div>
		</div>
	</ul>
	<ul>
		满意度
		<div class="progress">
			<div class="progress-bar progress-bar-warning"
				role="progressbar" style="width:{{percent4}}"
				aria-valuenow="{{detail4}}" aria-valuemin="0"
				aria-valuemax="5">{{detail4}}</div>
		</div>
	</ul>
	<ul></ul>
</div>

Alpha阶段的诸如此类的前端挑战也让我体会到了团队编程和个人编程不一样的地方，团队成员之间的交流合作至关重要。如果我们前端代码编写组能和前端设计组紧密交流，了解双方难题和需求，这对我们的团队进度将颇有好处。

服务器部署

如果说前端代码编写大家还算有点了解的话，服务器部署方面的知识完全是一张白纸。由于华为云服务器的自动部署没有适合django的方案，因此我很感谢cnblog和csdn里面的程序猿们分享了django+nginx+uwsgi服务器手动部署的方法。由于自己长期接触linux环境，除了一次误删mysql文件麻烦助教重置服务器外，整个配置进程还是很顺利的。



转载一波配置方法：部署Django到阿里云服务器教程