【javaweb】前端工程化（vue3）-凯发娱发com

//全局前置路由守卫
router.beforeeach( (to,from,next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path,from.path,next)
    //需要判断，注意避免无限重定向
    if(to.path == '/index'){
        next()
    }else{
        next('/index')
    }
    
} )
//全局后置路由守卫
router.aftereach((to, from) => {
    console.log(`navigate from ${from.path} to ${to.path}`);
});

npm install axios

{
  data: {}, // `data` 由服务器提供的响应
  status: 200, // `status` 来自服务器响应的 http 状态码
  statustext: 'ok', // `statustext` 来自服务器响应的 http 状态信息
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  config: {}, // `config` 是 `axios` 请求的配置信息
  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个clientrequest实例 (in redirects)，
  // 在浏览器中则是 xmlhttprequest 实例
  request: {}
}

{
  // `url` 是用于请求的服务器 url
  url: '/user',
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值
  // `baseurl` 将自动加在 `url` 前面，除非 `url` 是一个绝对 url。
  // 它可以通过设置一个 `baseurl` 便于为 axios 实例的方法传递相对 url
  baseurl: 'https://some-domain.com/api/',
  // `transformrequest` 允许在向服务器发送前，修改请求数据
  // 它只能用于 'put', 'post' 和 'patch' 这几个请求方法
  // 数组中最后一个函数必须返回一个字符串， 一个buffer实例，arraybuffer，formdata，或 stream
  // 你可以修改请求头。
  transformrequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理
    return data;
  }],
  // `transformresponse` 在传递给 then/catch 前，允许修改响应数据
  transformresponse: [function (data) {
    // 对接收的 data 进行任意转换处理
    return data;
  }],
  // 自定义请求头
  headers: {'x-requested-with': 'xmlhttprequest'},
  // `params` 是与请求一起发送的 url 参数
  // 必须是一个简单对象或 urlsearchparams 对象
  params: {
    id: 12345
  },
  // `paramsserializer`是可选方法，主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsserializer: function (params) {
    return qs.stringify(params, {arrayformat: 'brackets'})
  },
  // `data` 是作为请求体被发送的数据
  // 仅适用 'put', 'post', 'delete 和 'patch' 请求方法
  // 在没有设置 `transformrequest` 时，则必须是以下类型之一:
  // - string, plain object, arraybuffer, arraybufferview, urlsearchparams
  // - 浏览器专属: formdata, file, blob
  // - node 专属: stream, buffer
  data: {
    firstname: 'fred'
  },
  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'country=brasil&city=belo horizonte',
  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
  // `withcredentials` 表示跨域请求时是否需要使用凭证
  withcredentials: false, // default
  // `adapter` 允许自定义处理请求，这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/readme.md）。
  adapter: function (config) {
    /* ... */
  },
  // `auth` http basic auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  // `responsetype` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responsetype: 'json', // 默认值
  // `responseencoding` 表示用于解码响应的编码 (node.js 专属)
  // 注意：忽略 `responsetype` 的值为 'stream'，或者是客户端请求
  // note: ignored for `responsetype` of 'stream' or client-side requests
  responseencoding: 'utf8', // 默认值
  // `xsrfcookiename` 是 xsrf token 的值，被用作 cookie 的名称
  xsrfcookiename: 'xsrf-token', // 默认值
  // `xsrfheadername` 是带有 xsrf token 值的http 请求头名称
  xsrfheadername: 'x-xsrf-token', // 默认值
  // `onuploadprogress` 允许为上传处理进度事件
  // 浏览器专属
  onuploadprogress: function (progressevent) {
    // 处理原生进度事件
  },
  // `ondownloadprogress` 允许为下载处理进度事件
  // 浏览器专属
  ondownloadprogress: function (progressevent) {
    // 处理原生进度事件
  },
  // `maxcontentlength` 定义了node.js中允许的http响应内容的最大字节数
  maxcontentlength: 2000,
  // `maxbodylength`（仅node）定义允许的http请求内容的最大字节数
  maxbodylength: 2000,
  // `validatestatus` 定义了对于给定的 http状态码是 resolve 还是 reject promise。
  // 如果 `validatestatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
  // 则promise 将会 resolved，否则是 rejected。
  validatestatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },
  // `maxredirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0，则不会进行重定向
  maxredirects: 5, // 默认值
  // `socketpath` 定义了在node.js中使用的unix套接字。
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
  // 只能指定 `socketpath` 或 `proxy` 。
  // 若都指定，这使用 `socketpath` 。
  socketpath: null, // default
  // `httpagent` and `httpsagent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. this allows options to be added like
  // `keepalive` that are not enabled by default.
  httpagent: new http.agent({ keepalive: true }),
  httpsagent: new https.agent({ keepalive: true }),
  // `proxy` 定义了代理服务器的主机名，端口和协议。
  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
  // `auth`表示应使用http basic auth连接到代理，并且提供凭据。
  // 这将设置一个 `proxy-authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `proxy-authorization` 请求头。
  // 如果代理服务器使用 https，则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // see https://axios-http.com/zh/docs/cancellation
  canceltoken: new canceltoken(function (cancel) {
  }),
  // `decompress` indicates whether or not the response body should be decompressed 
  // automatically. if set to `true` will also remove the 'content-encoding' header 
  // from the responses objects of all decompressed responses
  // - node only (xhr cannot turn off decompression)
  decompress: true // 默认值
}

axios.get(url[, config])
axios.get(url,{
   上面指定配置key:配置值,
   上面指定配置key:配置值
})
axios.post(url[, data[, config]])
axios.post(url,{key:value},{
   上面指定配置key:配置值,
   上面指定配置key:配置值
})

//  创建instance实例
const instance = axios.create({
    baseurl:'http://localhost:8080/',
    timeout:10000
})
//  添加请求拦截
instance.interceptors.request.use(
    // 请求前处理函数
    config=>{
        //处理指定的请求头
        
        return config
    },
    // 设置请求错误处理函数
    error=>{
    
        return promise.reject(error)
    }
)
// 添加响应拦截器
instance.interceptors.response.use(
    // 设置响应正确时的处理函数，2xx 范围内的状态码都会触发该函数
    response=>{
      
        return response
    },
    // 设置响应异常时的处理函数，超出 2xx 范围的状态码都会触发该函数
    error=>{
        return promise.reject(error)
    }
)
// 默认导出
export default instance

package com.pro.filter;
import com.pro.common.result;
import com.pro.util.webutil;
import jakarta.servlet.*;
import jakarta.servlet.annotation.webfilter;
import jakarta.servlet.annotation.webservlet;
import jakarta.servlet.http.httpservletrequest;
import jakarta.servlet.http.httpservletresponse;
import java.io.ioexception;
@webfilter("/*")
public class crosfilter implements filter {
    @override
    public void dofilter(servletrequest servletrequest, 
servletresponse servletresponse, filterchain filterchain) throws ioexception, servletexception {
        httpservletrequest request = (httpservletrequest) servletrequest;
        system.out.println(request.getmethod());
        httpservletresponse response = (httpservletresponse) servletresponse;
        response.setheader("access-control-allow-origin", "*");
        response.setheader("access-control-allow-methods", "post, get, put, options, delete, head");
        response.setheader("access-control-max-age", "3600");
        response.setheader("access-control-allow-headers", 
"access-control-allow-origin, authority, content-type, version-info, x-requested-with");
        // 如果是跨域预检请求,则直接在此响应200业务码
        if(request.getmethod().equalsignorecase("options")){
            webutil.writejson(response, result.ok(null));
        }else{
            // 非预检请求,放行即可
            filterchain.dofilter(servletrequest, servletresponse);
        }
    }
}

npm install pinia

import {definestore } from 'pinia'
//定义数据并且对外暴露
// store就是定义共享状态的包装对象
// 内部包含四个属性： id 唯一标识 state 完整类型推理，
推荐使用箭头函数 存放的数据 getters 类似属性计算，存储放对数据
// 操作的方法  actions 存储数据的复杂业务逻辑方法
// 理解： store类似java中的实体类， id就是类名， state 
就是装数据值的属性  getters就是get方法，actions就是对数据操作的其他方法
export const definedperson = definestore(
    {
        id: 'personpinia', //必须唯一
        state:()=>{ // state中用于定义数据
            return {
                username:'张三',
                age:0,
                hobbies:['唱歌','跳舞']
            }
        },
        getters:{// 用于定义一些通过数据计算而得
到结果的一些方法 一般在此处不做对数据的修改操作
                 // getters中的方法可以当做属性值方式使用
            gethobbiescount(){
                return this.hobbies.length
            },
            getage(){
                return this.age
            }
        },
        actions:{ // 用于定义一些对数据修改的方法
            doubleage(){
                this.age=this.age*2
            }
        }
    }
)

let app =createapp(app)
app.use(router)
// app中使用pinia功能
app.use(pinia) 
app.mount('#app')

<script setup type="module">
    import { ref} from 'vue';
    import { definedperson} from '../store/store';
    // 读取存储的数据
    let person= definedperson()
   
script>
<template>
    <div>
        <h1>operate视图,用户操作pinia中的数据h1>
        请输入姓名:<input type="text" v-model="person.username"> <br>
        请输入年龄:<input type="text" v-model="person.age"> <br>
        请增加爱好:
        <input type="checkbox" value="吃饭"  v-model="person.hobbies"> 吃饭
        <input type="checkbox" value="睡觉"  v-model="person.hobbies"> 睡觉
        <input type="checkbox" value="打豆豆"  v-model="person.hobbies"> 打豆豆 <br>
        
        
        <button @click="person.doubleage()">年龄加倍button> <br>
        
        <button @click="person.$reset()">恢复默认值button> <br>
        
        <button @click="person.$patch({username:'奥特曼',
age:100,hobbies:['晒太阳','打怪兽']})">变身奥特曼button> <br>
		显示pinia中的person数据:{{person}}
    div>
template>
<style scoped>style>

    // 读取存储的数据
    let person= definedperson()
    // 监听状态
    person.$subscribe((mutation,state)=>{
        console.log('---subscribe---')
        /* 
        mutation.storeid
            person.$id一样
        mutation.payload
            传递给 cartstore.$patch() 的补丁对象。
        state 数据状态,其实是一个代理
        */
        console.log(mutation)
        console.log(mutation.type)
        console.log(mutation.payload)
        console.log(mutation.storeid)
        console.log(person.$id)
        // 数据 其实是一个代理对象
        console.log(state)
    })

    // 读取存储的数据
    let person= definedperson()
    // 监听状态
    person.$subscribe((mutation,state)=>{
        console.log('---subscribe---')
        /* 
        mutation.storeid
            person.$id一样
        mutation.payload
            传递给 cartstore.$patch() 的补丁对象。
        state 数据状态,其实是一个代理
        */
        console.log(mutation)
        console.log(mutation.type)
        console.log(mutation.payload)
        console.log(mutation.storeid)
        console.log(person.$id)
        // 数据 其实是一个代理对象
        console.log(state)
    })

export const usecounterstore = definestore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count
    },
    randomizecounter() {
      this.count = math.round(100 * math.random())
    },
  },
})

import { createapp } from 'vue'
//导入element-plus相关内容
import elementplus from 'element-plus'
import 'element-plus/dist/index.css'
import app from './app.vue'
const app = createapp(app)
app.use(elementplus)
app.mount('#app')