JavaEE概述-环境配置
-
把写好的程序配属到服务器上
-
用户通过浏览器去远程访问服务器
-
Java程序去处理用户发送的请求
如何搭建后端服务器 如何开发后端服务器程序 实现前后的交互
什么是服务器
-
广义:计算机硬件＋软件 狭义:计算机软件(把文件部署到服务器上,通过地址访问,服务器就会做出响应) 中间件
-
现在需要运行Java程序 需要安装一个支持Java程序的服务器(apache的tomcat)
-
Apache软件基金会 非盈利的开源软件项目
如何安装服务器
-
tomcat是支持Java程序运行的 所以它的运行需要jdk的支持
-
JAVA_HOME(变量)配置jdk的根就行
目录介绍:
-
bin 放的是命令
-
conf 配置文件
-
lib 架包
-
webapps 程序
把项目部署到服务器
访问服务器: 输入IP＋端口号
-
创建project
-
framework
-
集成(configtion)
-
部署deploy
tips:文件路径要看好-然后就是tomcat是根目录
🎄servlet概述(Server Applet)
它运行在web服务器中
服务器分开(减小服务器压力)
所以就只放Java代码
😭Servlet是运行在服务器中的,服务器负责Servlet和客户端的通信以及调用Servlet方法
Servlet的作用
-
接受用户发送的请求数据
-
调用其他的Java程序来处理请求
-
根据处理结果,响应给客户端
继承HttpServlet
重写方法
配置servlet
xml是可扩展标记语言,主要是存储数据,用于特定的格式存储,且配置信息
项目编译问题
-
改写了源代码 但是out文件没有编译(build -> artifact -> clean)
-
端口已经占用了 改端口HTTP port
🐛HTTP协议
-
超文本传输协议
-
HyperText Transfer Protocol
-
应用层协议
-
基于TCP/IP通信协议来传输数据
HTTP请求
请求行 请求头 请求体
-
请求行:包括请求方式 请求资源名称 http版本
-
请求头:包含服务器信息,主机地址,客户端一些环境信息,以键值对的形式传递
-
请求体:存放的是post请求方式向服务器端发送数据
在HTTP请求中两种方式区别
get:没有请求体 点击超链接 表单"method = "get" 地址栏输入地址
post:表单"method = "post"
区别
get 可以发数据但不能过多 但是主要从服务器获取数据
-
为什么不能过多? 因为直接是在地址栏发送键值对信息 有限制
-
不能传递敏感信息(密码之类)
-
在地址后加?以及相应的V=K&&V2=K2
post 主要用于向后端发送请求 将发送的信息放在请求体中 不会在外显示(地址) 相对安全 传输数据量大 没有限制 所以可以提交文件
由于前端有两个方法 我们后端有相应的两个方法doGet()doPost()
为什么继承HttpServlet
由于前段有get和post请求方法
后端有doGet和doPost
为什么有service 这两个doGet和doPost就不显示呢
虽然调用的是doget和dopost
但是 构造 init destroy 和 service一样会执行
父类有这些方法
当我们没有需要初始化内容时可以不重写init但是服务器依然会调用(调父类的)
父类中重写了service() 根据请求方式 判断 调doget或者是dopost
先找service后确定是doget或者是dopost
Service和doGet和doPost方法的区别
Service方法: 不管是get方式还是post方式的请求，如果Servlet类中有service方法，则优先调用Service方法。
doGet方法: 在没有service方法的情况下如果是get方式的请求所调用的处理请求的方法
doPost方法: 在没有service方法的情况下如果是post方式的请求所调用的处理请求的方法
类加载方法实例
子类重写了doget和dopost没有重写service
父类有doget和dopost和service
那么首先根据顺序 先调service(因为子类重写 所以调的是父类的)后调(子类的doget和dopost 因为重写了)
想说的是尽管先调的是父类方法 但是如果调子类重写的方法那么还是调子类的重写方法
点击也发送了数据 请求行 请求头(没有请求自己的数据)
接受请求数据_响应
-
当一次http请求发送到服务器时,tomcat会将请求中所有的数据,都封装到一个实现HttpServletRequest类的对象中
req.getParameter()//post 都接到的是String
req.getParameterValues()
-
resp.getWriter();
🐾响应
HttpServletRequest是接口
System.out.println(req.getMethod());
System.out.println(req.getRemoteAddr());
System.out.println(req.getRequestURL());
System.out.println(req.getRemotePort());
System.out.println(req.getProtocol());
System.out.println(req.getServletPath());resp.getWriter打印 也要设置码
resp.setHeader()
"text/html;charset=utf-8"
也可以用Print(重写了write()方法)
有相应的req的文档**
中文问题?
get方式用的utf-8 不会乱码
post 在请求体里 所有会乱码
req.setCharacterEnconde
getparameter 返回的都是String
🥊多选框比较特殊
getparametervalues
编译文件把class文件部署到服务器 所以每次都要重启
为什么jar包一定放在lib文件夹下面，我换个地方就不行。这个其实如果你不是用服务器是没有任何问题的，但是当你使用了web服务器类似于tomcat这种，那么你就要小心了。jar包导入工作空间这个是由我们人为控制的，我导哪个空间就有哪个，我不导行不行，可以，编译器会自动去寻找他所需要的jar包，但是服务器就不会他只会去寻找lib文件夹下的jar包并将他们拷贝到服务器上（就是在你服务器的当前项目的lib文件夹）
过滤器
作用:对服务器web资源进行拦截(权限控制)
Java8之后接口的方法可以defalut 可以让类选择不实现
-
先在filter文件夹中创建一个filter类 实现 filter接口(可以有多个过滤器)
-
在xml配置过滤器
-
配置哪一些请求地址进入过滤器
-
filterchain.doFilter 过滤链 过滤完了继续执行
📴异步交互
同步请求:后端响应的内容,会把整个页面内容覆盖掉,打断了客户端的其他操作
➡️异步(不同步)请求:通过Js对象 发送 异步请求 后端响应的内容会被浏览器的js对象接收到 再从js对象更新到某一个标签⬅️
前端发送异步请求:js提供了一个XMLHttpRequest对象,代理网页向后端发送一个请求(异步的),最终在js中将接收到数据更新到网页的某个标签上
前后端交互时 不会影响网页其他操作
Ajax Asynchronous JavaScript and XML
以前后端给前端响应时,是将数据封装到一个XML文件中的,前端接受到后解析XML
json(利用了XMLHttpRequest)现在用的是这个 替换了xml
异步好处就是 页面无刷新,不打断用户的操作
操作:就是new 一个XMLhttpRequest对象 对象方法:open() send() setRequestHeader()
| 就绪状态码 | 说明 |
|---|---|
| 0 | XMLHttpRequest对象没有完成初始化 |
| 1 | 开始发送请求 |
| 2 | 发送完成 |
| 3 | 读取响应 还没结束 |
| 4 | 响应结束 |
根据题例得知虽然发送请求结束 但是并没有得到后端返回的数据引出后面的内容 跨域
跨域
前端问题,请求发送到了后端,是在前后端分离的架构中出现.浏览器默认不允许接受别的网页发送数据
出现的原因:前后端分离 使用ajax发送请求
是由于同源策略造成的影响,是浏览器对JavaScript施加的安全限制.
跨域严格定义:协议 域名 端口 有一个不同就是跨域
http是默认的80端口 https默认是443端口
为什么要限制跨域访问?
安全问题
那为什么又要跨?同公司子域想互相访问 就需要跨域
解决跨域问题
前端解决
后端解决在响应头里添加
?什么是跨域
?为什么要跨域
?跨域访问有什么问题
?如何解决
Axios框架
-
是一个ajax框架
Json数据格式
JavaScript Object Notation
轻量级的数据交换格式
JS -- 请求 --> Java中将数据封装在对象中
不能直接把对象打印到网页中
不同语言间数据交换 早期是使用XML文件
json是为了不同语言间传输数据方便的一种标准数据格式
{k:v,k:v}标准json字符串格式
登录前后端交互
-
安装axios组件
-
配置导入
-
发送axios的post请求
vue-cli版
-
静态界面写好
-
把axios加入进来(npm install axios) 变成异步交互
-
在main.js配置(模仿vue-cil的pdf)
后端需要的:
与数据库交互 返回一个用户对象
在servlet中判断返回出来的对象
如果不是空(在定义一个CommonResult)
返回什么
是空返回什么
还要注意前端传到后端的数据是:类型的 后端收不到 所以还要加一个js方法改成=类型的
接下来目标
-
登录成功后,在前端保存用户信息,并且在main界面中显示用户账号
-
sessionStorage浏览器提供的会话级别的存储空间,浏览器关闭立刻关闭
-
localStorage 本地存储 一直存在 需要手动清除
-
-
来到main组件时,需要判断用户是否登录
-
直接来到main界面 需要判断 如果没有登录的话 需要转到login界面(可以直接在main页面中的mounted中加一个判断 但是后面很多页面都需要判断账号是否登录 麻烦)
-
所以需要路由导航守卫(vue的pdf中) 每次发生路由时,都会触发这个方法 (在router的index.js里加)
-
-
web会话跟踪技术(session)
-
已经进入到管理界面的话 后端是怎么知道是该账号进行的操作呢? 为什么后端不知道?
-
因为http的请求是无状态的(请求-->响应模式 每次请求是独立的)
-
-
web会话跟踪技术
在交互过程中,后端如何知道是哪个用户在此进行操作?
因为http请求是无状态的(请求-->响应模式 每次请求是独立的)
解决:需要让后端知道哪个用户发送的
在登录成功后 后端生成一个token(字符串 令牌 携带了用户信息 并且加密) 将此字符串响应到前端 每一次交互时 将token都放在请求头中 后端接收到token后 进行验证是否符合规则,不符合直接响应验证失败
token三部分(头部,载荷,签证)
(基于token的会话跟踪)
JWT(Json Web Token) 不需要在服务器端存储
-
导入jwt组件的jar
-
导入jwtutil类 包含生成token 验证token 解析token
-
三部分 header payload signature(base64转码)
增删改查
1.点击学生管理 让学生管理显示在Main中
-
点击学生管理
-
src新建目录:views/student/List.vue(跟标签)
-
每建一个vue都要配路由(index.js)
-
把vue放在 学生管理的 index中 (/地址)
-
没反应? 给el-menu 加 router
-
应该在main中打开 不是创建一个新的页面
-
路由嵌套::vue应该是main的子集路由 children:
-
在Main中显示 <router-view></router-view> 让子集显示
2.功能分析
-
学生管理 (对学生信息进行增删改查) 学生表(id学号姓名性别专业手机地址) ---> 专业表
-
数据库设计 两张表
-
给表加测试数据--
3.编码
-
查询学生信息 展示所有学生信息 在main中
-
在list中发一个请求 查询学生列表
-
后端接受到 与数据库连接
-
响应一个list的学生列表
-
前端页面动态的显示出(JsonFormat 后端解决时间转换问题)
学习api
4.新增
-
点击新增按钮 弹出一个学生信息表格 输入内容 点击保存 和 后端交互 存入数据库 前端页面刷新
-
弹出的表格学生信息 浮在 list上 分开写 vue 💛在一个组件中 导入另一个组件三部曲::1在script中 import 2components 注册组件 3 在template中放置组件(ref引用 名字) this.$ref.add.
-
补充组件信息(专业要mounted....)
专业表:名字 操作人 操作时间
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
