CMS内容管理系统
技术选型:
- 开发工具:eclipse
- 数据库:mysql
- 后台框架:SSM框架
- 前台框架:jQuery,BootStrap,GridManager表格插件
后端框架介绍:
SSM框架由Mybatis,spring,springmvc组成:
-
Mybatis:基于ORM的数据库持久化框架
ORM:对象关系映射,为了解决面向对象和关系数据库互相不匹配的现象的一种技术
是我们在操作数据库的时候不用和复杂的sql打交道,而是像操作对象一样操作塔。
1.用于操作数据库的框架【替换咱们的jdbc】
2.代码更加简单 sql写在xml中
3.它的底层代码依然是jdbc
面试题:${}和#{}的区别?
如果要使用${}还要防止sql注入?
使用正则表达式过滤传入的参数
-
spring:一种轻量级的DI/IOC/AOP的容器
一种轻量级的DI/IOC和AOP的容器框架
(1)轻量级:使用简单,功能强大
(2)DI:依赖注入,将创建对象和关系维护(字段赋值)交给Spring容器去做
(3)IOC:控制反转,以前的某一个对象,用来控制其他对象,现在所有对象都被spring控制
(4)AOP:切面式编程,将业务逻辑从应用服务中抽离出来,以拦截的方式作用于一个方法的不同地方,比如日志和事务的处理。
-
springMVC-基于MVC模式的web表现层框架
注意:SpringMvc的功能就是之前Servlet的功能,可以理解为使用SpringMVC代替了Servlet;
面试题:1.springMVC执行流程:
2.springMVC里面用到的注解:
(1)@controller
(2)@Controller用户标记一个类,使用它标记的类就是一个Spring MVC Controller对象,即:一个控制器类。
(3)@RequestMapping是一个用来处理请求地址映射的注解(将请求映射到对应的控制器方法中),可用于类或方法上。用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径。
(4)@Responsebody表示该方法的返回结果直接写入HTTP response body中。一般在异步获取数据时使用,在使用@RequestMapping后,返回值通常解析为跳转路径,加上@Responsebody后返回结果不会被解析为跳转路径,而是直接写入HTTP response body中。比如异步获取json数据,加上@Responsebody后,会直接返回json数据。
-
配置文件:
- spring.xml:
- spring-mvc.xml:
- web.xml:
<!-- 监听器配置 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 服务器启动的时候加载spring的 配置文件 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 前端控制器 DispatcherServlet -->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!-- 加载springmvc核心配置文件 -->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext-mvc.xml</param-value>
</init-param>
<!-- 启动即加载 ,优先级 -->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<!-- 会拦截请求 ,包括html,css 除了jsp 为了放行静态资源-->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 配置filter解决字符集编码问题 -->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<!-- 拦截所有请求,都要处理字符集编码问题 -->
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>/home/index.html</welcome-file>
</welcome-file-list>
前端框架介绍
-
jQuery:是一个优秀的js库或js框架
(1)代码量减少了
(2)具有纵多的选择器供开发者使用
(3)独特的链式语法
(4)很多API都方法化了:以前原生js的API有的是属性有的是方法,jQuery中很多都是方法操作
用到了Ajax:
AJAX即Asynchronous Javascript And XML(异步JavaScript和XML),是改善用户体验的网页开发技术;
(1)写ajax代码就是写js代码;
(2)学习ajax其实是学习使用浏览器的ajax(XMLHttpRequest对象)对象发异步请求,将响应的数据局部更新到页面;
Ajax交互方式:
1.异步请求,发送请求的同时还可以继续操作页面。页面不销毁;
2.返回部分数据,减少不必要的数据传输,减少网络资源。页面不刷新,而是更新页面部分数据;
总结:Ajax出现的缘由:更好的提升用户的体验,以及提升服务器的效率,减少网络中不必要的数据的传送
//发送异步请求
$.ajax({
type:"post", //请求方式
url:"/city", //url映射路径
data:{"id":id}, //发送给后台的参数
dataType:"json", //后台返回值类型
success:function(msg){
})
})
-
Bootstrap :是快速开发 Web 应用程序的前端工具包
它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
-
GrandManager :表格插件
GridManager 可快速、灵活的对table标签进行实例化. 使用简单快捷, 功能强大
纯原生javascript实现,不依赖任何框架使用简单快捷,功能强大与用户进行沟通,采纳来自于使用的需求,并不间段的进行升级维护
后台模块
-
文章管理
- 分页功能:GridManager通过向后台传入分页信息(localPage和PageSize)
- 高级查询:登录按钮绑定事件将查询字段和分页信息一起传给后台,后台处理,写动态 sql,用到的标签:where,if
- 增删改查功能
富文本编辑器:ueditor,编写文章内容时有丰富的文本,需要引入文件,添加富文本框,再实例化富文本编辑器
页面静态化:FreeMarker页面静态化技术是通过模板生成静态页面的方法。之前是通过id去查询数据库,然后绑定到动态页面进行数据展示。现在我们在进行添加和修改时就生成静态页面,之后访问的就是静态资源,利于空间换时间。
-
轮播图管理
分页功能,高级查询功能,增删改查功能参考文章模块
文件上传功能:文件上传三要素:(1)必须是post请求;(2)enctype="multipart/form-data";(3)type="file"
还需要配置文件上传解析器
-
用户模块
- 用户的登录:
登录按钮绑定事件,将数据传给后台,后台通过username查找user对象,如果user对象存在的话再比较password是否相同,相同则登录成功,返回user对象。控制层将user对象设置到session里面。用户登录还配置了拦截器,必须登陆了才能进入后台,拦截system/下的所有url,放行system/login。拦截的实现是判断session里面是否有user对象,有的话就放行,没有的话就跳转到登录界面。
- 用户的注销:
发送请求到后台,后台销毁session。
- 记住我功能:
如果勾选了记住我,后台就创建cookie,将用户名和密码以cookie的方式设置到浏览器保存,前台接收cookie,进行截取,将用户名和密码设置到用户框和密码框,然后勾选记住我;取消记住我,后台销毁cookie,重新添加到浏览器,前台清除数据,取消勾选记住我
面试题:session和cookie的区别?
cookie:数据保存在浏览器中,不安全,大小有限制,类型有限制,有中文乱码,减轻了服务器的压力
session:数据保存在服务端,安全,大小无限制,类型无限制,但是会影响服务器的性能
前台模块
- 文章显示:
ajax发送异步请求到后台,在后台查询,后台按类型查询存入三个list集合,再将list存入map集合里,响应给前台,再分别取出来,添加到对应的标签下展示
- 轮播图显示:
ajax发送异步请求到后台,在后台查询,将数据响应给前台,添加到对应标签下进行展示。