MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)(1)

简介: MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)

前言:

刚刚学完了MVC,根据自己的感悟和理解写了一个小项目。

完全按照MVC模式,后面有一个MVC的理解示意图。

用MVC模式重新完成了联系人的管理系统:

用户需求:
多用户系统,提供用户注册、登录功能,对于没有登录的用户,不允许使用任何功能。
可以查询、增加和删除联系人信息。
详细设计:
数据结构设计。
功能模块设计。
工具类设计。
搭建初步的项目框架、其他功能:防止用户重复提交、注册和登录时使用验证码。

项目代码在后面、

演示效果:

主页:

image.png

注册页面:

image.png

MVC介绍:

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

Struts、ZF、.NET、Spring MVC、Tapestry、JSF等常用流行框架,都是MVC框架模式、

框架和设计模式的区别

有很多程序员往往把框架模式和设计模式混淆,认为MVC是一种设计模式。实际上它们完全是不同的概念。[7]  

框架、设计模式这两个概念总容易被混淆,其实它们之间还是有区别的。框架通常是代码重用,而设计模式是设计重用,架构则介于两者之间,部分代码重用,部分设计重用,有时分析也可重用。在软件生产中有三种级别的重用:内部重用,即在同一应用中能公共使用的抽象块;代码重用,即将通用模块组合成库或工具集,以便在多个应用和领域都能使用;应用框架的重用,即为专用领域提供通用的或现成的基础结构,以获得最高级别的重用性。

框架与设计模式虽然相似,但却有着根本的不同。设计模式是对在某种环境中反复出现的问题以及解决该问题的方案的描述,它比框架更抽象;框架可以用代码表示,也能直接执行或复用,而对模式而言只有实例才能用代码表示;设计模式是比框架更小的元素,一个框架中往往含有一个或多个设计模式,框架总是针对某一特定应用领域,但同一模式却可适用于各种应用。可以说,框架是软件,而设计模式是软件的知识。

框架模式有哪些?

MVC、MTV、MVP、CBD、ORM等等;

Java语言的框架有哪些?

SSH 、SSI,等等

设计模式有哪些?

工厂模式、适配器模式、策略模式等等

简而言之:框架是大智慧,用来对软件设计进行分工;设计模式是小技巧,对具体问题提出解决方案,以提高代码复用率,降低耦合度。

图示介绍一下MVC

前面的第一个部分就是MVC框架模式

image.png

实例演示:

因为代码量比较大,只写部分代码:

全部代码:

所有的代码我已push至github,链接:

https://github.com/chenhaoxiang/Web/tree/master/myMvcWeb

可以看看我的构架:

前台jsp–>servlet–>service–>dao–>数据库(这里用xml简单当做数据库)

image.png

image.png

Dom4jDocument.java:

package cn.hncu.utils;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
import cn.hncu.domain.Contact;
import cn.hncu.domain.User;
public class Dom4jDocument {
    private static Document dom=null;
    private static String path;
    //静态块!只会在类加载的时候运行一次
    static{
        try {
            SAXReader sax = new SAXReader();
            //因为我们的资源已经从myelipse中发布到tomcat服务器中了,所以跟原来的纯Java项目不一样了。
            //利用当前类找到它的类加载器,然后通过该类加载器再去获得资源路径
            path = Dom4jDocument.class.getClassLoader().getResource("users.xml").getPath();
             //getClassLoader()返回:加载此对象所表示的类或接口的类加载器
            //public URL getResource(String name)返回:读取资源的 URL 对象;如果找不到该资源,或者调用者没有足够的权限获取该资源,则返回 null。
            //此方法首先搜索资源的父类加载器;如果父类加载器为 null,则搜索的路径就是虚拟机的内置类加载器的路径。
            //public String getPath()获取此 URL 的路径部分。 
            dom = sax.read(new FileInputStream(path));
        } catch (FileNotFoundException e) {
            throw new RuntimeException(e);
        } catch (DocumentException e) {
            throw new RuntimeException(e);
        }
    }
    /**
     * 保存到服务器-本地
     * @return 布尔型
     */
    public static boolean save(){
        try {
            XMLWriter w = new XMLWriter(new FileOutputStream(path));
            w.write(dom);
            w.close();
        }catch (UnsupportedEncodingException e) {
            return false;
        } catch (FileNotFoundException e) {
            return false;
        } catch (IOException e) {
            return false;
        }
        return true;
    }
    /**
     * @param uuid - 通过联系人的uuid-删除联系人
     * @return
     */
    public static boolean del(String uuid){
        Node node = dom.selectSingleNode("//contacts[@uuid=\""+uuid+"\"]");
        if(node==null){
            return false;
        }
        node.getParent().remove(node);
        save();
        return true;
    }
    /**
     * 添加联系人
     * @param uuid--通过user的uuid
     * @return
     */
    public static boolean addContact(String userUuid,Contact contacts){
        Element userNode = (Element)dom.selectSingleNode("//user[@uuid=\""+userUuid+"\"]");
        if(userNode==null){
            return false;
        }
        Element contactE =  userNode.addElement("contacts");
        contactE.addAttribute("uuid", contacts.getUuid());
        contactE.addAttribute("name", contacts.getName());
        contactE.addAttribute("age", ""+contacts.getAge());
        contactE.addAttribute("tel", contacts.getTel());
        save();
        return true;
    }
    /**
     * 添加用户
     * @param user
     * @return
     */
    public static boolean addUser(User user){
        //先防范重复name的
        if(dom.selectSingleNode("//user[@name=\""+user.getName()+"\"]")!=null){
            return false;
        }
        try {
            Element root = dom.getRootElement();
            Element u = root.addElement("user");
            u.addAttribute("uuid", user.getUuid());
            u.addAttribute("name", user.getName());
            u.addAttribute("pwd", user.getPwd());
            save();
        } catch (Exception e) {
            return false;
        }
        return true;
    }
    /**
     * 用户登录时,返回封装的user或false
     * @param user
     * @return
     */
    public static User login(User user){
        Element userE = (Element)dom.selectSingleNode("//user[@name=\""+user.getName()+"\"]");
        if(userE==null){
            return null;
        }
        user.setUuid(userE.attributeValue("uuid"));
        return user;
    }
    public static List<Contact> getUserContacts(String userUuid){
        List<Contact> contacts = new ArrayList<Contact>();
        Element user = (Element) dom.selectSingleNode("//user[@uuid=\""+userUuid+"\"]");
        List<Element> lists =  user.elements();
        for(Element list:lists){
            Contact c = new Contact();
            c.setName(list.attributeValue("name"));
            c.setAge(Integer.parseInt(list.attributeValue("age")));
            c.setTel(list.attributeValue("tel"));
            c.setUuid(list.attributeValue("uuid"));
            contacts.add(c);
        }
        return contacts;
    }
    public static List<Contact> getQueryContacts(Contact contact,String userUuid){
        List<Contact> contacts = new ArrayList<Contact>();
        Element user = (Element) dom.selectSingleNode("//user[@uuid=\""+userUuid+"\"]");
        if(user==null){
            return null;
        }
        String name = contact.getName().trim();
        Integer age = contact.getAge();
        String tel = contact.getTel().trim();
//      System.out.println("name="+name);
//      System.out.println("age="+age);
//      System.out.println("tel="+tel);
        List<Element> lists =  user.elements();
        for(Element c : lists){
            //System.out.println("c=="+c);
            if(name.equals("")||c.attributeValue("name").indexOf(name)!=-1){
                if(age==-1||c.attributeValue("age").indexOf(age+"")!=-1){
                    if(tel.equals("")||c.attributeValue("tel").indexOf(tel)!=-1){
                        Contact cc = new Contact();
                        cc.setName(c.attributeValue("name"));
                        cc.setAge(Integer.parseInt(c.attributeValue("age")));
                        cc.setTel(c.attributeValue("tel"));
                        cc.setUuid(c.attributeValue("uuid"));
                        contacts.add(cc);
                    }
                }
            }
        }
        return contacts;
    }
}
目录
相关文章
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
271 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
185 0
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
194 0
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
140 0
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
305 3
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
247 1
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
149 0
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
178 5
|
数据采集 Web App开发 前端开发
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)