自定义MVC

        1、定义个servlet(ActionServlet)控制所有的*.do请求

2、获得请求路径(request.getRequestURI()),截取到后面的请求名(cname)
3、在webinf下创建一个config.properties文件,保存一个键值对,根据不同的请求得到其对应的Class,同时创建好对应的处理类
4、在servlet的init方法中加载配置文件
Properties config=new Properties();
String path=this.getServletContext.getRealPath();//得到其绝对路径
path=path+"/WEB-INF/config.properties";
config.load(new FileInputStream(path));//加载到内存中来
this.getServletContext.setAttribute("config",config);//存入到application中
5、到dopost方法中取出application中的数据,结合前面取到的请求名得到其对应的类名
Properties config=(Properties)this.getServletContext.getAttribute("config");
String className=config.getProperty(cname);
6、将"/WEB-INF/config.properties"存入到web.xml文件中,并通过代码取出
String sname=this.getServletContext().getInitParameter("config");
7、根据取出来的类名(全路径名),实例化对象
Class.forName(classname).newInstance();
8、新建一个接口(Action),声明方法execute();将所有的实现类继承action接口
9、将Class.forName返回的对象统一为转换为Action,再统一的调用execute()方法(多态)
10、修改接口的方法execute(),让其带参数(request,response),其所有的继承类对应的做修改,保证 能从ActionServlet传送到对应页面

11.在根据登录界面的from表单写一个实体类,在跳转页面的时候拿到里面的值,

并给实体类的set方法设值

12,在写一个类用来判断是否登录成功并调用方法跳转路径。

1.2设置总Servlet

  

1.3写登陆界面和配置xml



1.4 配置/WEB-INF/config.properties


1.5from表单实体类


1.6判断是否登录成功跳转界面

1.7有可能会有多个页面提交信息所有写个接口实现他


1.8然后调用登录逻辑



按需引入<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ant Design Vue 纯HTML项目示例</title> <!-- 引入Ant Design Vue的CSS --> <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@3.2.21/dist/antd.css"> <!-- 引入Ant Design X Vue的CSS --> <link rel="stylesheet" href="https://unpkg.com/ant-design-x-vue@1.0.0/dist/antdx.css"> <!-- vue3引入 --> <script src="https://unpkg.com/dayjs/dayjs.min.js"></script> <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script> <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script> <!-- vue3 --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!-- antdv --> <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@4.2.6/dist/antd.min.js"></script> <!-- antdxv --> <script src="https://cdn.jsdelivr.net/npm/ant-design-x-vue@1.2.7/dist/index.umd.min.js"></script> </head> <body> <div id="app"></div> <script> const { createApp, ref, computed } = Vue; const { Button } = antd; const { Bubble, XProvider } = antdx; createApp({ template: ` <AXProvider :theme="{ algorithm: myThemeAlgorithm, }"> <div :style="{ padding: &#39;24px&#39;, backgroundColor: bgColor, }"> UMD <AXBubble content="hello bubble"></AXBubble> <AButton type="primary" @click="setLightTheme">Light</AButton> <AButton type="primary" @click="setDarkTheme">Dark</AButton> </div> </AXProvider> `, setup() { const { theme } = antd; const bgColor = ref("white"); const myThemeAlgorithm = ref(theme.defaultAlgorithm); const setLightTheme = () => { myThemeAlgorithm.value = theme.defaultAlgorithm; bgColor.value = "white"; }; const setDarkTheme = () => { myThemeAlgorithm.value = theme.darkAlgorithm; bgColor.value = "#141414"; }; return { myThemeAlgorithm, bgColor, setLightTheme, setDarkTheme }; } }) .use(XProvider) .use(Button) .use(Bubble) .mount("#app"); </script> <style> .container { max-width: 1200px; margin: 24px auto; padding: 0 16px; } .search-form { margin-bottom: 24px; padding: 16px; background-color: #f5f5f5; border-radius: 4px; } .user-table { margin-top: 16px; } .mb-6 { margin-bottom: 24px; } .mt-2 { margin-top: 8px; } </style> </body> </html>
07-17
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值