HTML前端笔记Day8

HTML前端笔记Day8 一,在Vue项目中创建多个组件 –1,项目结构

 2,创建自定义组件Person.vue

3,创建自定义组件Student.vue

 4,修改App.vue

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

5,测试 启动服务器,打开浏览器访问 http://localhost:8080 看效果

 二,在Vue项目中创建路由 0,项目结构

 1,自定义组件t1

2,自定义组件t2

3,自定义路由router.js 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

//1.引入自定义的组件位置
import t1 from '@/components/t1'
import t2 from '@/components/t2'

Vue.use(Router)

export default new Router({
  routes: [
    
    { path: '/', component: HelloWorld },
    { path: '/t1', component: t1 },
    { path: '/t2', component: t2 }
  ]
})

4,修改App.vue使用路由

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

5,测试 启动服务器,打开浏览器测试http://localhost:8080 6,总结

三,Tomcat服务器  1,概述

服务器: 就是一台电脑
web服务器:就是一台电脑上装了一个软件,用户可以通过浏览器访问这台上的资源
Tomcat服务器:就是一个软件,是一个轻量级的web应用服务器.如果你的程序想要被用户访问,
那么,这个程序必须放入Tomcat中

2,使用步骤  1,直接解压Tomcat压缩包就可以了

但是解压位置的路径中不能包含中文等特殊符号 参考: D:Javaapache-tomcat-8.5.72 

2, 开启服务器:

去 D:Javaapache-tomcat-8.5.72bin文件夹里,找一个startup.bat双击就可以启动服务器啦,前提是:必须配置JAVA_HOME的环境变量

 3, 开启成功:

 4,关闭服务器

去 D:Javaapache-tomcat-8.5.72bin文件夹里,找一个shutdown.bat双击就可以关闭服务器

 5,访问服务器

启动服务器后,打开浏览器访问 http://localhost:8080/
其中的8080是Tomcat软件使用的默认端口号

 2,重启服务器,打开浏览器访问

访问规则: http://localhost:8080/项目名称/资源名称
例如: http://localhost:8080/shopping/student.html

 4,一个完整的目录结构

 四,IDEA整合Tomcat 1,配置

 

 2,启动 & 关闭

 

 五,Servlet 1,概述

代表了一个服务器端,主要作用是用来和浏览器动态的交换.
1,接受浏览器发来的请求
2,服务器给浏览器做出响应

2,准备动作  在IDEA里创建一个web工程

1,File- New- Project- 选择Java Enterprise并在右侧勾选Web Application(web.xml)- 输入工程名称-Finish

整理web工程目录结构  在WEB-INF里,创建两个文件夹classes 和 lib

修改资源输出位置

 修改jar包存放位置

 

 

配置Tomcat服务器 

 3,Servlet的案例 创建Servlet

package cn.tedu.servlet;

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;
//Servlet核心功能: 接受请求 + 给出响应
@WebServlet("/ServletDemo1")
public class ServletDemo1 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //打印一句话  --- 在idea里看
        System.out.println("欢迎来到Servlet的世界~");
        //给浏览器做出响应  --- 在浏览器里看
        response.getWriter().write("hello servlet!!");
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //你要写的代码和doPost()一样,直接调用上面方法就行啦
        doPost(request,response);
    }
}

访问Servlet