java web续css

教务管理系统

1.计算机软件的开发流程

可行性分析;需求分析;设计(概要、详细);开发阶段;测试阶段;运行维护。

可行性分析

  • 公司要对项目确定项目经理,由公司和项目经理确定项目的主要组成人员,包括:产品经理、架构工程师、UI工程师、开发工程师、测试工程师等。
  • 项目经理组织业务人员、产品经理等对项目的场景、效益、技术、管理等各方面进行调研和可行性分析,并把存在的问题及时与客户进行交流,输出项目的调研报告可行性分析报告等。
  • 若经过可行性分析,项目组能在规定的时间和资源范围内完成该项目,则出成本和资源使用计划书,并把相关资料提交给公司和客户,可以着手准备下一步的工作;若经过调研和分析,项目组无法在规定的时间和资源范围内完成该项目,则把相关依据提交给公司和客户,协调对资源进行调整,调整完成后进入下一步的工作。

需求分析

  • 产品经理要进行需求采集、需求分析和需求确认这几方面的工作,然后输出需求分析文档产品原型图,文档和产品原型图要及时与客户进行沟通,不符合客户要求的要及时修改,并做好修改记录。
  • 确定原型图后,产品经理可输出业务流程图页面跳转流程图,并与客户做开发前的需求确认工作。
  • 产品经理输出培训文档,对项目组的人员进行需求讲解
  • 架构工程师根据需求对整个软件的体系架构关键模块进行分析设计。
  • 架构工程师和开发工程师根据需求和架构设计,制定项目开发计划模块分解表
  • UI工程师根据需求、原型图和开发计划,制定UI设计计划,以保证及时完成各页面UI设计工作。
用例图
  1. 用例图的作用 :用来描述用户,需求,系统功能单元之间的关系,展示了一个外部用户能够观察到的系统功能模型图,帮助一个团队以一种可视化的方式理解系统的功能需求。

  2. 用例图包含的元素:

    2.1 参与者, 表示与您的应用程序或系统进行交互的用户、组织或外部系统。用一个小人表示。

    2.2 用例(Use Case),用例就是外部可见的系统功能,对系统提供的服务进行描述。用椭圆表示。

    2.3容器代表着一个系统

    2.4 关系 ,用例图涉及的关系有,关联,泛化,包含,扩展

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFF16BEL-1618759568399)(D:\文档\MakeDown\Image\用例图关系.png)]

    关联[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMGw0voH-1618759568401)(D:\文档\MakeDown\Image\关联.png)]

    泛化[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Zjo0frJ-1618759568403)(D:\文档\MakeDown\Image\泛化.png)]

    包含[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qkNu8uOf-1618759568406)(D:\文档\MakeDown\Image\包含.png)]

    扩展[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pftKR8qN-1618759568408)(D:\文档\MakeDown\Image\扩展.png)]

    依赖[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7X2XLtDh-1618759568410)(D:\文档\MakeDown\Image\依赖.png)]

概要设计

  • 架构工程师根据需求和体系架构对软件运行环境、模块编码、流程控制、接口、运行控制和数据结构进行设计,并输出概要设计文档。
  • 开发工程师根据概要设计文档设计数据库结构,并输出数据库设计说明书。
  • UI工程师根据需求分析、原型图和UI设计计划,制定UI设计规范,并输出文档。

详细设计

  • UI工程师根据产品原型图、UI设计规范,设计软件界面效果图。
  • 开发工程师确定每个模块的算法,写出每个模块详细的过程描述。
  • 开发工程师确定模块接口的细节,包括对系统外部的接口和用户界面,对系统内部其它模块的接口,以及模块输入数据、输出数据及局部数据的全部细节,并形成详细设计文档。
  • 为每一个模块设计出一组测试用例,以便在开发阶段对模块代码进行预定的测试。
  • 开发工程师根据数据库设计说明书进行数据库物理设计,设计数据库表、字段、描述等,统一命名规则。

开发阶段

  • 开发工程师根据产品原型图、UI效果图、详细设计文档,选择合适的开发环境、开发工具、开发语言等,统一每个模块、页面的命名规范。
  • 开发工程师搭建软件框架,进行模块编码。
  • 开发工程师对自己开发出来的模块要进行测试用例自测或是开发人员之间互相测试,排除出现的问题。
  • 开发工程师要养成良好的开发习惯,编写好开发说明文档,做好代码功能注释、使代码的可读性更强。

测试阶段

  • 测试工程师根据开发阶段形成的说明文档和程序架构,设计测试用例,测试用例不仅要考虑合理的输入数据,也要考虑不合理的输入数据。
  • 测试工程师对程序进行单元测试、集成测试、系统测试,检查是否正确完成规定的功能,把出现的编码错误、算法错误整理成文档,并提交给开发工程师。
  • 开发工程师根据测试工程师提交的测试文档,对出现的错误进行修改,再交由测试工程师测试,通过后完成。
  • 产品经理、测试工程师安排软件测试版给普通用户试用,并收集用户使用意见和问题,把软件出现的错误交由开发工程师进行修改,这时候软件的错误数量已经很少,对软件的改动不大。
  • 产品经理、测试工程师完成软件各端口的操作手册、软件使用手册等。

运行维护

  • 项目经理组织客户、业务人员、产品经理、开发工程师进行软件验收、上线运行工作。
  • 产品经理对软件使用人员进行培训。
  • 开发工程师定时对软件进行各项维护,对使用过程中出现的问题要及时进行修改。

做一个b/s结构的大学教务管理系统

  • 先学习了mybaits的后台数据库,了通过后台的xml文件配置了数据库。提高了JDBC代码的重用,避免了大量代码的修改。体会到了约定大于配置的思想。

  • 学到这,觉得暂时没必要继续学习spring+springmvc。开始着手做一个项目。

  • 卡在了前端,之前只是学过html标签,style样式表,js简单语法以及快要忘记的jquery库。只是学习了知识,但是想要实现具体功能,需要对知识运用的足够熟练和项目开发经验。

  • html每个标签什么时候用,每个标签的属性的含义,都有哪些值。这些都没有熟练到能完整开发一个网页的程度,何况是开发一个现在十分美观的,交互性很强的网页呢???

  • css的选择器,常用样式,盒子模型如何居中,位置???

  • js基本不会用

  • 几乎不可能开发出一个美观的前端

  • 使用了前端的轻量级框架,解决了css不会写的问题

  • 在了解了html标签的所有功能之后,学会按照功能去找代码。按照菜鸟教程上的代码示例删改。

  • 基本了解了bootstrap上每一个css类标签的效果,按照功能查bootstrap表,找到想要使用的css类。

2.学习css

  • css做什么用

  • css怎么使用

  • 如何选中一个标签

    • 标签选择器,类选择器,id选择器 p{} .class{} #id{}
    • 层次(空格,>,+,~)选择器 A B{} A+B{} A>B{} A-B{}
    • 伪类选择器与层次选择器的组合 :nth-child() {} nth-of-type(){}
    • 属性选择器 []
  • 什么是标准文档流,块元素和行内元素从上到下,从左到右的自然排列,行内元素不能包含块元素

  • 什么是盒子模型

    • 盒子模型总尺寸=border+ padding+margin+内容宽度

style的键值对

1.通用标签键值对
  • 内容宽度 高度width height: 计算实际宽度 定义宽度 基于父元素的百分比宽度 继承父元素宽度 auto length % inherit

  • 字体 字号 风格 粗细 全部属性font-family 、font-size、 font-weight、 font

  • **文本样式 颜色 首行缩进 行高 ** font-style、 color 、 text-indent、 line-height

  • 文本阴影 text-shadow: color x-offset y-offset blur-radius

  • 水平对齐方式 text-align : 左对齐 右对齐 居中 两端对齐 left right center justify

  • 垂直对齐方式 vertical-align: middle、top、bottom

  • 文本装饰 text-decoration:下划线 上划线 删除线 underline overline line-through

  • 背景样式

    • 背景图像
      • background-image: url()
      • background-repeat: repeat no-repeat repeat-x repeat-y
      • background-position : xpx ypx; x% y%; left center right left center right ;
      • background-size:计算图片大小 图片百分比大小 放大平铺至整个容器 保持纵横比缩放 auto percentage cover contain
      • background:背景颜色 背景图片 图片位置 平铺方式
  • 背景颜色 background-color:

  • border边框:

    • border-color:
    • border-width: thin medium thick 像素值
    • border-style:none hidden dotted dashed solid double
    • border:粗细 样式 颜色
    • border-radius:左上角 右上角 左下角 右下角| ?%
  • 外边距 margin:

    • margin-top -right -bottom -left : ?px
  • margin: 上下外边距为0 左右外边距根据实际长度计算

  • 内边距 padding:

    • pading -left -right -top -bottom :?px
  • padding:

  • **box-sizing:**盒子总大小 计算内容大小(内外边距为0) 继承父元素的盒子模型 context-box border-box inherit

  • box-shadow:阴影类型 水平便宜量 竖直偏移量 模糊半径 阴影颜色

  • display: 块级 行内 行内块元素 隐藏 block inline inline-block

  • **float:**不换行向左飘 不换行向右飘 不飘 left right none

  • clear:左侧不允许浮动 右侧不允许浮动 左右两侧都不允许浮动

  • overflow溢出处理: 不裁剪内容 裁剪内容 滚动显示裁剪内容 如果内容被裁剪则用滚动条 visible、hidden、scroll、auto

  • position

    • 相对于原来位置position:relaive top:?px left:?px
    • 以其他元素或者浏览器窗口为基准偏移 position:absolute right=?px
      • z-index:int 大的在上,小的在下 ** 绝对定位脱离文档流**
  • 以浏览器为基准定位 position:fixed

  • 透明度

  • opacity: 0-1 值越小透明度越高

    • filter:alpha(opacity=x) x为0-100 值越小越透明
    2.其他标签键值对
  • 超链接伪类 a:hover {color:#ff7300}

  • li标签

    • list-style-type :无标记,圆,实心圆,实心正方形,数字none disc circle square decimal
    • list-style-image
    • list-style-position
    • list-style

最后,附上超好用的css手册

3.Java web

3.1 Http

  • http请求 (请求行 消息头)

    <!--请求头-->
    Request URL :请求地址
    Request Method:GET
    Status Code :状态码
    Remote Address: IP地址
    <!--消息头-->
    Accept:告诉浏览器支持的数据类型
    Accept-Encoding 支持的编码格式
    Accept-Language 语言环境
    Cache-Control 缓存控制
    Connection: 请求缓存后是否断开与服务连接
    HOST: 主机
    
  • http响应

    <!--响应体-->
    <!--同请求消息头-->
    Refresh:客户端多久刷新一次
    Location:网页重定位
    
    

3.2 Servlet动态web技术

  • 普通类继承HttpServlet,在方法中可以拿到req,resp对象

  • this.getServletContext(),在java中拿到ServletContext的全局servlet对象

    • setAttribuate 实现servlet之间共享数据
    • getRequestDispatcher 实现请求转发
    • getInitParameter(“name”) 获取web.xml中的初始化数据
    • getResourceAsStream(打包路径) 读取配置文件
  • HttpServletRequest resp

    • resp.setCharacterEncoding(String var1)
    • resp.setContentLength(int var1)
    • 用resp实现下载文件,验证码功能,重定向功能
    • ……具体参阅手册和idea
  • HttpServletResponse req

    • 获取请求的所有信息
    • 请求转发
    • ……具体参阅手册和idea

3.3 cookie 服务器创建,用户保存

Coookie[] cookies=req.getCookies()//从浏览器手中拿到cookies
cookie.getName();//拿到cookie的key
cookie.getValue();//拿到cookie的value
new Cookie("key",value);
cookie.setMaxAge(24*60*60);//设置有效期
resp.addCookie(cookile);//为浏览器设置一个cookie,保存在用户目录的appdata下
//编码解码
URLEncoder.encode("需要编码的文本","UTF-8");
URLDecoder.decode(cookie.getValue,"UTF-8");

3.4 HttpSession 服务器创建,服务器保存

req.getSession();
session.setAttributte(String key,Object value)
session.removeAttribute(String key)
session.invalidate()//注销session
session.isNew() 
<session-config>
    <session-timeout>15分钟</session-timeout>
</session-config>

3.5 jsp 标签----用jsp标签来在前端写Servlet代码

  • <%= %> 输出变量或者表达式的值

  • <% %> jsp脚本片段

  • <%! %>Jsp声明 编译到Java类中,具有类作用域,其他变量方法只是方法作用域

  • <%-- 注释 --%>

  • <%@ include file="" %>页面拼接

  • <jsp:include page=""> 运行时连接 本质上不是一个页面

  • <jsp:forward page=""/>

  • 九大内置对象 四大作用域pageContext<request<session<application
    1. pageContext.setAttribute("name","value");页面生命周期//PageContext pageContext
    2. request.setAttribuate("name","value")一次请求生命周期,请求转发会携带//HttpRequest request
    3.session.setAttribuaye("name","value")会话生命周期//HtttpSession session
    4.application.setAttribuate("name","value") 服务器生命周期 //ServletContext application
    5.out输出 //JspWriter out
    6.page  //jsp被编译成Servlet类后中this对象,
    7.response //HttpResponse response
    8.config//ServletConfig config 
    9.exception
    

3.6 JSTL标签–用JSTL标签在前端写简单的java代码

  • 依赖

    javax.servlet.jsp.jstl/jstl-api         <!--JSTL表达式依赖-->
    taglibs/standard                        standard标签库
    
  • 核心标签

    <c:out value="欢迎您"/> 
    <c:set>  保存数据</c:set>
    <c:remove>删除数据</c:remove>
    <c:if test="${}"> 条件成立时执行</c:if>
    <c:choose>
    	<c:when test="${}">条件成立时执行</c:when>
        <c:otherwise test="${}">条件不成立时执行</c:otherwise>
    </c:choose>
    <c:foreach var="item" items="${}" begin="" end="" step="">循环体</c:foreach>
    <c:url>使用可选的查询参数来创造一个URL</c:url>
    

3.7 EL表达式–在jsp静态页面中取四大作用域的变量值

这篇文章写的详细

3.8 其他:

  • filter过滤器
  • HttpSessionListener监听器
  • jdbc
  • 根目录的不同含义
    • localhost:8080/ 写超链接,表单,请求重定向的时候
    • localhost:8080/context/ 写请求转发,web.xml的时候默认都是在服务器内操作的,路径默认会加上context
    • 所有配置到服务器的资源,路径都会被加上context,URL访问时需要加上context
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值