事件修饰符

用来和事件连用，决定事件出发的条件，或者阻止事件的触发机制

事件的冒泡

  • 点击div里的按钮，div被点击的事件也被触发
<div id="app" @click="divClick()">
    <div class="aa">
        <button @click="btnClick()">按钮</button>
</div>

用来阻止事件冒泡

  • .stop修饰符
<div id="app" @click="divClick()">
    <div class="aa">
        <button @click.stop="btnClick()">按钮</button>
    </div>

阻止标签的默认行为

  • 屏蔽a标签的默认行为：跳转
    • 【JavaScript:void(0)或者@click.prevent】
<a href="JavaScript:void(0)" @click="aClick">百度一下</a>
<a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>
  • form标签的默认行为：验证表单和提交
    • 【@click.prevent】
<form action="aaa">
	<input type="submit" @click.prevent="submitClick">
</form>
  • .once：只触发一次，之后执行标签的默认行为
 <a href="http://www.hao123.com" @click.once="aClick()">百度一下</a>

对键盘按键进行修饰

  • .enter(回车)
  • .tab(Tab键)
  • .delete(删除和退格)

全局组件注册

  • 参数1：组件名称
  • 参数2：组件配置对象
  • template：用来书写组件的html代码-----(注意：template中必须有且只有一个容器)
<body>
    <div id="app">
        <login></login>
    </div>
    <div id="container">
        <login></login>
    </div>
    <script src="./Vue2.js"></script>
    <script>
        Vue.component('login', {
            template: "<div><h1>用户登录</h1></div>"
        });
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {},
        });
        const container = new Vue({
            el: "#container",
            data: {},
            methods: {},
        });
    </script>
</body>

局部组件的注册

    <div id="app" class="main"  @keypress.enter="ad">
        <log1 :name="username" :age="age"></log1>        
    </div>
    <!--  定义局部组件 -->
    <template id="loginTem">
        <div>
            <h1>用户登录:{{name}}-----age:{{age}}</h1>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        // 定义一个局部组件
        let log={
            // 找id
            template:"#loginTem",
            // 定义数据
            props:["name","age"],
            // 数据流
            data(){
                return{
                    username:"小强",
                    age:13,
                }
            },
        }
        const app=new Vue({
            el:"#app",
            data:{
                username:"张三",
                age:24,
            },
            components:{
                //挂载组件
                log1:log
                // 第一个log1是我的组件名,第二个log是要挂载的组件名
            },
        })
    </script>

路由

  • router.js放在vue.js的下面
    • 创建路由对象写在创建组件模板下面
  <div id="app">

        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <!-- 需要在页面上显示图层 -->
        <router-view></router-view>
    </div>
    <script src="../js/vue.js"></script>
    <!-- 路由包 -->
    <script src="../js/vue-router.js"></script>
    <script>
        let login={template:'<h1>登录</h1>'}
        let register={template:'<h1>注册</h1>'}
        // 创建路由对象
        const router= new VueRouter({
            // 定义路由规则
            routes:[
                // path路由的路径
                // component:路由应对的组件
                {path:'/login',component:login},
                {path:'/register',component:register},
            ]

        })
        const app=new Vue({
            el:"#app",
            data:{
            },
            methods:{},
            router:router,
        })
    </script>

软件架构

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

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

资源分类

  1. 静态资源：所有用户访问后，得到的结果都是一样的。（HTML，CSS，JS，图片，音频，视频...）
  2. 动态资源：每个用户访问相同的资源，得到的结果可能不一样。动态资源被访问后，需要先转换为静态资源，再返回给浏览器，通过浏览器来进行解析。

常见的web服务器

概念

  1. 服务器：安装了服务器软件的计算机。
  2. 服务器软件：接收用户的请求，处理请求，给出响应。（接请求，给响应）
  3. 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

  1. 创建一个普通的Java工程
  2. 点击settings--->project structure
  3. 点击Moduls，点击+号，选择web，点击OK
  4. 点击idea运行处的Edit Configurations
  5. 点击左上角的+号，在列表中选择tomcat server，注意，不要选择TomEE Server。
  6. 点击右侧的Configure，配置Tomcat的本地路径。路径到Tomcat根目录就可以。
  7. 点击settings--->project structure
  8. 点击Artifacts，点击+号，选择web Application Exploded：From
  9. 修改output directory为tomcat下的webapps，点击OK
  10. 点击idea运行处的Edit Configurations，点击Deployment选项卡，点击+号，选择Artifact，自动添加了。
  11. 回到Server选项卡，可以修改端口号以及服务器的两个配置改为update classes and resources。
  12. 在web目录下新建HTML文件，点击启动服务器，通过http://localhost:8888/JavaWEB20220829/index.html地址来访问自己的项目。

Servlet

任务

  1. Servlet就是一个普通的Java类而已。
  2. 处理请求，给出响应的类。

创建Sevlet

  1. 实现javax.servlet.Servlet接口
  2. 继承javax.servlet.GenericServlet类
  3. 继承javax.servlet.http.HttpServlet类

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

Servlet生命周期

  1. 初始化---init方法。
  2. 实例化---构造器。
  3. 调用service方法，处理请求。
  4. 销毁---destory方法。

Servlet的配置

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

    <!-- 注册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>
注解
@WebServlet("/hello.do")