JavaEE和前端交互(细节)

javaEE部分

1.JavaEE需配置服务器tomcat

2.做好包管理和包命名 便于迅速找到和分辨出相应的类,一般包会用到

web(与前端交互的包)

一般其中的类都继承HttpServlet 其中有:1 构造方法(自动加载) 2 init()->初始化方法 3 service()->接收前端数据 数据处理 做出响应 4 destroy() ->当服务器停止服务时 会自动执行其中的方法

一般会重写doGET 和doPOST 方法,处理相应的前端发送的请求.

还需要在web.xml文件中配置相应的信息<servelet>用于注册servelet,<servelet-mapping>用于设置外部访问此servlet的一个地址,还可以简写在类的上方,例如@WebServlet(urlPatterns = "/login" ,name="login") 配置了一个名为login的servlet 访问地址为:http://127.0.0.1/项目名/login

响应给前端需要用到new ObjectMapper().writeValueAsString()方法 此前还需配置json 用于将后端的数据响应给前端时,转化成前端可以识别的格式.

dao(与数据库交互的包)

一般其中存在一些与数据库交互的包 用于web层中的数据处理 返回结果或者对象

filter(过滤器)

一般会存储一些过滤功能 需要实现filter接口 ,Servlet API中提供了一个Filter接口，开发web应用时，如果编写的Java类实 现了这个接口，则把这个java类称之为过滤器Filter。通过Filter技术，开发人 员可以实现用户在访问某个目标资源之前，对访问的请求和响应进行拦截.例如 编码过滤器,用于前端发送的数据与后端识别的数据格式不对应,设置为统一的格式,便于后端和前端的数据交互时,不会因为格式问题导致报错.

需要再web.xml文件中配置过滤器信息,也可以简写@WebFilter(urlPatterns = "/*") /* 意思为此过滤器会给所有servlet每次请求都执行过滤

若有特殊的servlet不需要通过此过滤器 则可以设置url为 /api/AAA 即可避免过滤器

过滤器实现接口后 需要重写doFilter(ServletRequest request, ServletResponse response, FilterChain chain),FilterChain接 口中有一个方法 doFilter(ServletRequest request,ServletResponse response)， 该方法可以将当前的请求和响应传递到过滤链上的下一个资源，可能 是下一个过滤器，也可能是目标资源

model(模型包)

一般存放一些需要响应的数据 ,将其封装成一个对象,便于数据的传送和响应.

若返回的是Date类型还可以定义返回格式 在定义的类型上方加入 @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")

后端把对象转化为json时指定的格式响应给前端.

util(工具包)

一般存放一些需要用到的自定义的工具 ,将其封装后,避免会产生代码的冗余,利于书写和维护.例如jdbc的连接方式 可以将重复的代码封装在一个类中,需要用到的时候就将直接调用.

3.若有多个GET 和POST请求,后端相应的方法中 应该有多个方法与之对应,在每个请求后都有相应的方法处理,即避免了代码的冗余,增加了代码的维护性. 可以在前端提交请求时 在请求头中携带一个标识信息,例如/api/地址?mark=AAA 将mark传递到后端 就可以用rep.req.getParameter("mark") 获取到mark的信息 再引用equals方法加以判断 作出相应的方法.

web前端部分

1.需要先搭建vue-cli项目

2.创建组件路由 需要先新建一个router目录 在router目录下创建index.js文件 在其中1配置路由2导入组件3定义组件路由(包括组件的访问地址,组件名,添加的组件)4导出路由对象

3.使用路由 <router-link to=""></router-link> 将地址配置给to

4.在main.js中配置路由 所有外部组件都需要在main.js中配置完毕后方可使用 例如ElementUI 和异步请求axios

使用ElementUI

npm i element-ui -S

在 main.js 中写入以下内容：

import ElementUI from 'element-ui'; 

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({ render: h => h(App), }).$mount('#app');

使用axios

安装 npm install axios

在 main.js 中配置 axios

导入 axios import axios from 'axios';

设置访问后台服务器地址 axios.defaults.baseURL="http://127.0.0.1:9999/api/";

将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问 Vue.prototype.$http=axios;

使用 get 或 post 方法即可发送对应的请求 then 方法中的回调函数会在请求成功或失败时触发 通过回调函数的形参可以获取响应内容，或错误信息

//axios 请求拦截

axios.interceptors.request.use(config =>{

//为请求头对象，添加 Token 验证的 token 字段

config.headers.token = window.sessionStorage.getItem('token'); return config; })

// 添加响应拦截器

axios.interceptors.response.use((resp) =>{

//正常响应拦截

if(resp.data.code==500){ ElementUI.Message({message:resp.data.message,type:"error"}) }

if(resp.data==401){ router.replace("/login"); }

return resp; });

5.在前端向后端发送请求时,可以用this.$http 发送get或者post请求 例如:this.$http.get("后端地址").then((resp) => {} 在then回调函数中完成后端响应的数据接收,最后在前端页面上加以显示.

6.若需要打开页面就显示数据 即可在mounted中写入查询请求 并把结果返回给前端

7.scope.row 获取到你点击的哪行数据== 后端返回的对象数据 可设置value-format="yyyy-MM-dd" 设置向后端提交的数据格式