目录
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
- 实现javax.servlet.Servlet接口
- 继承javax.servlet.GenericServlet类
- 继承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
- 创建一个普通的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地址来访问自己的项目。