ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2022-8-29 第一组 (≥▽≤) 学习笔记

2022-08-29 19:32:42  阅读:208  来源: 互联网

标签:web Tomcat 第一组 29 点击 2022 组件 服务器 Servlet


目录

1.Vue

事件修饰符

  • 事件的修饰符
    • 用来和事件连用的,用来绝对事件的触发条件或者是阻止事件的触发机制
  • 事件的冒泡:
    • 点击div里的按钮,div被点击的事件也会被触发

阻止事件的冒泡

  • 【@click.stop="函数"】

  •             <button @click.stop="btnClick">按钮</button>
    

屏蔽标签默认行为

  • 屏蔽a标签的默认行为

    • 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标签的提交

    • form标签的默认行为:验证表单和提交

    • 【@click.prevent】

    •         <form action="../exam/text04.html">
                  <input type="submit" @click.prevent="submitClick">
              </form>
      

触发一次

  • 【@click.once】
  • 只触发一次,之后执行标签的默认行为

对键盘按键进行修饰

  • 回车【.enter】
  • Tab键【.tab】
  • delete【.delete】——对删除和退格都起作用的

全局组件的注册

  • 参数1:组件的名称

  • 参数2:组件配置对象

  • template:用来书写组件的HTML代码

    • 注意:template中必须要有一个容器
  •         Vue.component('login',{
                template:"<h1>用户登录</h1>"
            })
    

局部组件的注册

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

2.Web

  • C/S架构:客户端/服务器——QQ,Typora,腾讯会员。
  • B/S架构:浏览器/服务器——B站,爱奇艺

资源分类

  • 静态资源:所有用户访问后,得到的结果都是一样的。(HTML,CSS,JS,图片,视频,音频...)
  • 动态资源:每个用户访问相同的资源,得到的结果可能不一样。动态资源被访问后,需要先转换为静态资源,再返回给浏览器,提供浏览器来进行解析。

常见的web服务器

概念:

  • 服务器:安装了服务器软件的计算机
  • 服务器软件:接受用户的请求,处理请求之后给出响应。【接请求,给响应】
  • web服务器软件:接受用户的请求,处理请求之后给出响应。
  • 在web服务器软件中,可以部署web项目,让用户通过浏览器访问这些项目。

常见的服务器软件

动态服务器

动态部署web工程

  • webLogic:Oracle公司出品,大型的web服务器,几乎支持了所有的JavaEE规范,【收费,非常的贵】
  • webSphere:IBM公司出品,大型的web服务器,几乎支持了所有的JavaEE规范,【收费】
  • JBOSS:JBOSS公司,中型的web服务器,几乎支持了所有的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

3.Servlet

任务

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

创建Servlet

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

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

Servlet生命周期

  • 初始化——init方法
  • 实例化——构造器
  • 调用Service方法,处理请求
  • 销毁——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")

4.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地址来访问自己的项目。

标签:web,Tomcat,第一组,29,点击,2022,组件,服务器,Servlet
来源: https://www.cnblogs.com/gycddd/p/16637062.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有