前端页面编写

虽然之前对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到阿里云服务器教程

【北航软件工程】Alpha阶段前端页面编写及服务器部署的更多相关文章

  1. 缓存:前端页面缓存、服务器缓存(依赖SQL)MVC3

    缓存依赖数据库 第一步 1通过vs里面带的命令提示窗口. 2或者.NET Framework 版本 4(64 位系统)条件,%windir%\Microsoft.NET\Framework64\v4. ...

  2. [Alpha阶段]第二次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第二次Scrum Meeting 基本信息 名称 时间 地点 时长 第二次Scrum Meeting 19/04/04 大运村寝室6楼 90min ...

  3. [Alpha阶段]第一次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第一次Scrum Meeting 基本信息 名称 时间 地点 时长 第一次Scrum Meeting 19/04/01 大运村寝室6楼 40min ...

  4. Alpha阶段--第七周Scrum Meeting

    任务内容 本次会议为第六周的Scrum Meeting会议 召开时间为周日下午5点,在潮音餐厅召开,召开时间约为30分钟,对已经完成项目的总结和对今后项目设计的展望 队员 任务 张孟宇 “我的”界面代 ...

  5. [BUAA软工]Alpha阶段事后分析

    设想和目标 虽然我们是从零开始的一个自定义项目,但语音Coding助手从一开始的设计与目标就很明确:加入语音接口使其能在shell端实现命令语音实现以及编辑运行脚本,设计前端编辑器并将后端shell与 ...

  6. 高级软件工程2017第6次作业——团队项目:Alpha阶段综合报告

    1.版本测试报告 1.1在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? Bug分类 Bug内容 Fixed 编辑博文时改变文字格式会刷新界面 Can't reproduced 无 N ...

  7. 软件工程网络15个人作业4(201521123010徐璐琳)——alpha阶段个人总结

    一.个人总结 1. 总结自己的alpha 过程: 经过了两周的ALPHA阶段,在这之中学习到了很多,因为最开始其实是有抱着一种应付的.将就着的心理去做这个小程序,但是在完成项目的过程中,有老师和助教一 ...

  8. [软件工程基础]Alpha 阶段事后分析

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 帮助选修物理实验的学生撰写实验报告,计算实验数据,验证计算结果,并提供一个讨论的平台. 全体成员认 ...

  9. 2016福州大学软件工程第五、六次团队作业-Alpha阶段成绩汇总

    1.本次作业成绩统计结果: 本次Alpha阶段团队作业公布如下: 表格说明: PE:贡献百分比 YS:演示评分(满分15分) BK:博客评分(满分15分) SH:事后诸葛亮环节(满分5分) P:个人分 ...

随机推荐

  1. 应用集成mycat,实现mycat的高可用与mysql的读写分离

    前言 开心一刻 一个女人自朋友圈写道:我家老公昨天和别人家的老婆出去旅游,迄今未归,我则被别人家的老公折腾了一天,好累哦! 圈子下面,评论无数,老公在下面评论到:能不能好好说话,我只不过陪女儿去毕业旅 ...

  2. #1 爬虫:豆瓣图书TOP250 「requests、BeautifulSoup」

    一.项目背景 随着时代的发展,国人对于阅读的需求也是日益增长,既然要阅读,就要读好书,什么是好书呢?本项目选择以豆瓣图书网站为对象,统计其排行榜的前250本书籍. 二.项目介绍 本项目使用Python ...

  3. 如何去掉C#字符串中的所有空格(转载)

    如何去掉C#字符串中的所有空格 来源:https://www.cnblogs.com/donchen/p/8966059.html 字符串行数Trim()可以去掉字符串前后的空格,如:  C# Cod ...

  4. 【Java】数组转List常见方式的对比

    一.最常用通过 Arrays.asList(strArray) 方式,将数组转换List后,不能对List增删,只能查改,否则抛异常. 关键代码: List list = Arrays.asList( ...

  5. Java学习笔记之——LinkedList

    LinkedList 底层结构:链表 1. API: 除了ArrayList中有的方法以外,LinkedList还有几个扩展方法 void addFirst(E e) 在该列表开头插入指定的元素. v ...

  6. 通过多线程处理提高Redis性能

    Redis通常被称为单进程单线程模型. 这不是真的! Redis还运行多个后端线程来执行后端清理工作,例如清理脏数据和关闭文件描述符.在Redis中,主线程负责主要任务,包括但不限于:接收来自客户端的 ...

  7. Redis过期策略

    一.设置过期时间 expire key time(以秒为单位) -- 这是最常用的方式 setex(String key, int seconds, String value) -- 字符串独有的方式 ...

  8. 【代码笔记】Web-CSS-CSS盒子模型

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 监控工具之zabbix server3.4 部署配置

    [root@localhost src]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) [root@localhost s ...

  10. mssql sqlserver 使用sql脚本 清空所有数据库表数据的方法分享

    摘要: 下文讲述清空数据库中所有表信息的方法分享,如下所示: 实验环境:sql server 2008 实现思路: 1.禁用所有约束,外键 2.禁用所有触发器 3.删除表数据 4.开启触发器 5.开启 ...