2022-08-29 第二小组张明旭 Vue的事件修饰符及JavaWEB

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .main {
            width: 600px;
            height: 600px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div id="app" class="main">
        <div class="aa" @click="divclick">
            <button @click.stop="btnclick">按钮</button>
        </div>
    </div>
//导入Vue.js
    <script src="../js/vue.js"></script>
    <script>
//实例对象
        const all = new Vue({
//定义作用域
            el: "#app",
//声明变量
            data: {},
//方法
            methods: {
                btnclick() {
                    alert("div里的按钮被点击了！！！");
                },
                divclick() {
                    alert("div被点击了！！！");
                }
            },
        })
    </script>
</body>

</html>

.prevent:

阻止标签的默认行为（例：跳转到连接地址）

javascript.void(0)也是不跳转地址

javascript.void(0)，放在链接地址位置，作用为跳转到一个空页面

<a href="javascript.void(0)" @click="aclick">百度一下</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click="aclick">百度一下</a>
        <form action="aaa">
            <input type="text" required>
            <input type="submit" @click="submitclick">
        </form>
    </div>
    <script src="../js/vue.js"></script>
    <script>

        const all = new Vue({
            el:"#app",
            data:{

            },
            methods: {
                aclick(){
                    location.href("http://www.douyu.com");
                },
                submitclick(){
                    alert("submit被点击了！！");
                },
            },
        })
    </script>
</body>
</html>

事件的修饰符 .once

连接只跳转一次,跳转一次之后执行标签的默认行为

 <div id="app">
        <!-- javascript.void(0)不跳转地址 -->
        <!-- <a href="javascript.void(0)" @click.prevent="aclick">百度一下</a> -->
        <a href="http://www.baidu.com" @click.prevent.once="aClick">百度一下</a>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const all = new Vue({
            el:"#app",
            data:{

            },
            methods: {
                aClick(){
                    alert("123");
                }
            },
        })
    </script>

对键盘案件进行修饰（添加事件）

.enter(回车最常用)
,tab
.delete(删除和退格)
.up
.down
.left
.right

 <div id="app">
        <input type="text" v-model="input" @keyup.enter="valid">
        <input type="button" value="提交" @click="valid">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const all = new Vue({
            el: "#app",
            data: {
                input: "",
            },
            methods: {
                valid() {
                    if (this.input == "") {
                        alert("不能为空！！！");
                    }else{
                        alert("键盘enter被按下");
                    }
                }
            },
        })
    </script>

全局组件注册

在script中写，但不在Vue对象里

参数一:组件名称，名称随便

参数二:组件配置对象

template:用来书写组件的html代码

template中必须有且只能有一个容器的内容

 <div id="app">
        <login></login>
    </div>
    <div id="container">
        <login></login>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    Vue.component('login',{
        template:"<div><h1>用户登录</h1></div>",
    });
        const all = new Vue({
            el: "#app",
            data: {},
            methods: {},
        })
        const container = new Vue({
            el: "#container",
            data: {},
            methods: {},
        })
    </script>

局部组件注册

1.定义一个组件

2.在局部挂载组件

     <div id="app">
        <login :username="username" @aaa="findAll"></login>
    </div>
        <!-- 在html中定义组件 -->
        <template id="loginTemplate">
            <div>
                <h1>用户登录：{{username}}</h1>
                <ul>
                    <li v-for="(item,index) in lists">
                        {{index}} --- {{item}}
                    </li>
                </ul>
                <button @click="change">触发组件中的事件</button>
            </div>

    <script src="../js/vue.js"></script>
    <script>
        // 定义一个局部组件

        // 法一
        // let login = {
        //     template: "<div><h1>用户登录</h1></div>",
        // };

        // 法二；在html中定义局部组件，引用一下
        let login = {
            template: "#loginTemplate",

            // 可以定义参数
            props:["username","age"],

            // 组件的单向数据流传递
        };
        const all = new Vue({
            el: "#app",
            data: {
                username:"zhangsan",
                age:23
            },
            methods: {},
            components: {
                // 挂载组件

                // 第一个是组件在局部的名字，第二个是要引用哪个组件的名字
                // login: login
                
                // 如果两个名字相同，可以简写成一个名字即可
                login
            }
        })

    </script>

路由

1.点击不同的连接的时候展示不同的页面，不同的页面可以有组件实现用

<router-link></router-link>

标签代替a标签

<router-link></router-link>

可以用tag属性变成按钮：

<router-link tag="button"></router-link>

3.引入一个ls库

依赖于Vue，在Vue库的下面引入

 <div id="app">


        <!-- <a href="login">点我登录</a>
        <a href="register">点我注册</a> -->
        <router-link tag="button" to="/login?id=21">登录</router-link>
        <router-link tag="button" to="/register/21/zhangsan">注册</router-link>
        <!-- 需要在页面上展示视图 -->
        <router-view></router-view>

    </div>

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        /*
            1、router.js放在vue.js下面
            2、创建路由对象写在创建组件模板下面
        */
        let login = {
            template: '<h1>登录{{this.$route.query.id}}</h1>'
        }

        let register = {
            template: '<h1>注册</h1>',
            created() {
                console.log(this.$route.params.id + "===>" + this.$route.params.name);
            }
        }

        // 创建路由对象
        const router = new VueRouter({
            // 定义路由规则
            routes: [
                {path:'/',component:register},
                {path:'/login',component:login},
                // path：路由的路径
                // component：路径对应的组件
                {path:'/register/:id/:name',component:register},
            ],
        });

        const app = new Vue({
            
            el: "#app",
            data: {},
            // 在当前vue实例中挂载路由
            methods: {
                
            },
            router:router,
        });

    </script>

JavaWEB部分

软件架构

1、C/S架构：客户端 / 服务器--------QQ，Typora，腾讯会议。

2、B/S架构：浏览器 / 服务器--------京东，爱奇艺，B站。

资源分类

静态资源：所有用户访问后，得到的结果都是一样的。（HTML，CSS，JS，图片，音频，视频...）

动态资源：每个用户访问相同的资源，得到的结果可能不一样。动态资源被访问后，需要先转换为静态资源，再返回给浏览器，通过浏览器来进行解析。

常见的web服务器

概念

服务器：安装了服务器软件的计算机。

服务器软件：接收用户的请求，处理请求，给出响应。（接请求，给响应）

web服务器软件：接收用户的请求，处理请求，给出响应。

在web服务器软件中，可以部署web项目，让用户通过浏览器访问这些项目。

常见的服务器软件

动态服务器：

webLogic：oracle公司出品，大型的web服务器，几乎支持了所有的JavaEE规范，收费的。

webSphere：IBM公司，大型的web服务器，几乎支持了所有的JavaEE规范，收费的。

JBOSS：JBOSS公司，中型的JavaEE服务器，几乎支持了所有的JavaEE规范，收费的。

Tomcat：Apache基金会，中小型的web服务器，支持了少量的JavaEE规范，开源免费。

静态服务器

Nginx（代理，反向代理，动静分离...）极高的并发

Apache

Tomcat

bin：存放一些批处理脚本文件，可执行文件。

conf：用来存放tomcat的相关配置文件。

lib：Tomcat依赖的jar包。

logs：存放日志。

temp：临时文件目录。

webapps：Tomcat默认的Web应用部署目录。

work：Web应用JSP代码生成和遍历的临时目录。

Tomcat的启动

双击 bin/startup.bat文件

Tomcat的停止

双击 bin/shutdown.bat文件

访问

http://127.0.0.1:8080

IDEA整合tomcat

创建一个普通的Java工程

点击settings--->project structure

点击Moduls，点击+号，选择web，点击OK

点击idea运行处的Edit Configurations

点击左上角的+号，在列表中选择tomcat server，注意，不要选择TomEE Server。

点击右侧的Configure，配置Tomcat的本地路径。路径到Tomcat根目录就可以。

点击settings--->project structure

点击Artifacts，点击+号，选择web Application Exploded：From

修改output directory为tomcat下的webapps，点击OK

点击idea运行处的Edit Configurations，点击Deployment选项卡，点击+号，选择Artifact，自动添加了。

回到Server选项卡，可以修改端口号以及服务器的两个配置改为update classes and resources。

在web目录下新建HTML文件，点击启动服务器，通过http://localhost:8888/JavaWEB20220829/index.html地址来访问自己的项目。

Servlet

概念

Servlet就是一个普通的Java类而已。

处理请求，给出响应的类。

创建Sevlet

实现javax.servlet.Servlet接口

继承javax.servlet.GenericServlet类

继承javax.servlet.http.HttpServlet类

我们在开发中一般会使用第三种方法来创建Servlet。

Servlet生命周期

初始化---init方法。

实例化---构造器。

调用service方法，处理请求。

销毁---destory方法。

Servlet的配置

第一种方法：web.xml：WEB自带，可在里面设置servlet

第二种方法：直接在servlet的类前加注释
@WebServlet("/hello.do")

<?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">

    <!-- 注册servlet   -->
    <servlet>
        <servlet-name>hello</servlet-name>
        <servlet-class>com.jsoft.afternoon.HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>hello</servlet-name>
        <url-pattern>/hello.do</url-pattern>
    </servlet-mapping>


</web-app>