cgb2110-day16

Posted cgblpx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2110-day16相关的知识，希望对你有一定的参考价值。

文章目录

一,CDN方式使用element-ui

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<!-- 1.在一个简单的网页中,使用 element-ui的效果
			先导入vue.js+再导入element-ui的相关资源,下面导入的方式都是在线访问一个网址(cdn)
		-->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		  
	</head>
	<body>
		<div id="app">
			<!-- 2.使用element-ui的按钮元素 -->
			<el-button type="success" >Button</el-button>
		</div>
	</body>
		<script>
			new Vue(
			  el: '#app'
			)
		</script>
</html>

二,Servlet

–1,概述

通过java代码实现的一段服务器的功能.
1, 接受浏览器的请求
2, 给浏览器做出响应
使用步骤:
1, 导入servlet-api.jar包(被springboot工程简化了)
2, 创建Servlet程序
3, 打开浏览器,按照正确的方式来访问Servlet程序

–2,入门案例

创建SpringBoot工程

File - New - porject - Spring initializer 并修改网址 - next - 修改域名和项目名称和jdk8 - next - Finish

配置maven

创建Servlet类

必须先放在启动类同包里,选中src/main/java/启动类所在的包 – new – servlet/create new servlet - 设置Servlet的名字 -ok

package cn.tedu.cgb2110boot02;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/Servlet1")
public class Servlet1 extends HttpServlet 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doPost...");
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doGet...");

修改启动类

package cn.tedu.cgb2110boot02;

import javax.servlet.GenericServlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//2,Servlet程序想要别浏览器访问,@WebServlet规定了浏览器的访问方式(配置文件)
@WebServlet("/hello/Servlet1")
//1,Servlet程序的实现标准,就有三种方式:implements Servlet,extends GenericServlet
public class Servlet1 extends HttpServlet 
    //3,doPost()用来处理那些 post的请求(method=post)
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doPost...");
    
    //4,doGet()用来处理那些 get的请求
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doGet...");

测试

三,Servlet的练习

–1,创建HTML网页(在Hbuilder里)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 前后端的交互</title>
	</head>
	<body>
		
		<a href="http://localhost:8080/user/addServlet">点我,访问Servlet程序</a>
		
	</body>
</html>

–2,创建Servlet程序(在IDEA里)

package cn.tedu.cgb2110boot02;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/user/addServlet")
public class Servlet2 extends HttpServlet 
    //大多数的请求会以get方式来访问,Servlet会主动调用doGet()
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doGet已经被触发...");

–3,测试

http://localhost:8080/user/addServlet

–4,调用流程

四,配件文件的形式配置Servlet的程序

–1,创建Servlet的程序

package cn.tedu.cgb2110boot02;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class Servlet3 extends HttpServlet 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doPost");
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("doGet");

–2,修改web.xml配置文件

产生web.xml



修改

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 配置 Servlet3类的访问规则 -->
    <servlet>
        <!-- 给servlet类设置别名 -->
        <servlet-name>Servlet3</servlet-name>
        <!-- 指定了 类的全路径(包名.类名) -->
        <servlet-class>cn.tedu.cgb2110boot02.Servlet3</servlet-class>
    </servlet>
    <servlet-mapping>
        <!-- servlet类的别名,要和上面的servlet-name的值一样 -->
        <servlet-name>Servlet3</servlet-name>
        <!--  规定了浏览器的访问方式 -->
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

–3,测试

五,Servlet细则

–1,继承结构

–2,生命周期

http://localhost:8080/Servlet4

package cn.tedu.cgb2110boot02;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
//@WebServlet //如果不写值,访问的规则就是类名 /Servlet4
@WebServlet("/a")//修改了浏览器的访问规则  /a
public class Servlet4 extends HttpServlet 
    //Servlet的生命周期:三个阶段init()   destroy()  service()
    //会执行多次,访问几次Servlet这个service()就会执行几次.
    //用来接受请求,给浏览器做出响应
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
        //获取请求方式
        String method = req.getMethod();
        System.out.println("service()开始服务..."+method);
    
    //只执行1次,而且是在Tomcat服务器正常关闭时执行的(Tomcat现在已经被springboot整合了,啥时候真正关闭我们控制不了)
    public void destroy() 
        System.out.println("destroy()开始销毁...");
    
    //只执行1次,而且是在这个Servlet程序第一次被访问时执行的
    public void init() throws ServletException 
        System.out.println("init()开始初始化...");

–3,测试doPost/doGet

创建前端HTML网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 前后端交互</title>
	</head>
	<body>
		<!-- 测试 get/post 提交数据时, 不同的处理方式 -->
		
		<!-- 会以get方式提交这次请求 -->
		<a href="http://localhost:8080/user/userServlet">点我,访问Servlet程序</a>
		
		<!-- 会以post方式提交这次请求 -->
		<form method="post" action="http://localhost:8080/user/userServlet">
			用户名:<input type="text" placeholder="用户名.." name="user"/>
			<br />
			
			密码: <input type="password" placeholder="密码.." name="pwd"/>
			<br />
			
			<button type="submit">提交</button>
		</form>
		
	</body>
</html>

创建Servlet程序

package cn.tedu.cgb2110boot02;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/user/userServlet")
public class UserServlet extends HttpServlet 
    //必须是表单 + 必须是method=post的表单,才会触发doPost()
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("表单数据已经正确提交~~~");
    
    //除了post提交的方式,大部分情况会触发doGet()
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("超链接访问成功~~~");

六,解析请求参数

–1,模拟Servlet解析请求参数

package cn.tedu.cgb2110boot02;
//java程序里怎么解析用户提交的请求参数  jack  123 ????
public class Test1 
    public static void main(String[] args) 
        String s = "http://localhost:8080/user/userServlet?user=jack&pwd=123";
//        1,按照?切割字符串,得到两个字符串,并存入数组中
        //[http://localhost:8080/user/userServlet,user=jack&pwd=123]
        String[] strs = s.split("\\\\?");
//        2,重点解析数组中 第二部分的字符串
        String data = strs[1];//user=jack&pwd=123
//        3,按照&切割字符串,又得到数组
        String[] datas = data.split("&");//[user=jack,pwd=123]
//        4,遍历数组,获取每个数据 user=jack  pwd=123
        for (String str : datas) 
            String[] s1 = str.split("=");//[user,jack]
//        5,按照=切割,又又得到数组[user,jack],只要第二个元素jack
            String input = s1[1];
            System.out.println(input);//jack 123

–2,Request对象

以上是关于cgb2110-day16的主要内容，如果未能解决你的问题，请参考以下文章

cgb2110-day11

cgb2110-day13

cgb2110-day17

cgb2110-day02

cgb2110-day18

cgb2110-day03