分类前端技术下的文章

2024-08-08

解释：

HTTP状态码401表示未授权，即当前请求需要用户验证。在Vue前后端分离的环境中，这通常意味着后端接口要求客户端提供有效的认证信息，但是在请求中没有提供或者提供的认证信息不正确。

解决方法：

检查请求头是否包含正确的认证信息，如Authorization头部是否设置了正确的Bearer Token或其他认证方式所需的credentials。
确认后端服务是否配置了正确的认证机制，比如基于Token的认证，确保Token没有过期，且在每次请求时都被正确传递。
如果使用了状态管理库（如Vuex），检查是否在请求发送前正确地设置了认证状态。
查看后端服务的日志，了解为什么返回401错误，可能是因为Token无效、过期，或者是其他认证问题。
如果是前端处理的逻辑有问题，检查前端是否在适当的时机刷新或获取新的Token。
确保前端和后端的会话机制（如Cookie、LocalStorage等）工作正常。

如果以上步骤无法解决问题，可能需要进一步调试前端和后端的交互细节，查看请求和响应的具体内容以确定问题所在。

FastAPI 教程、结合vue实现前后端分离

2024-08-08

以下是一个简化的例子，展示如何使用FastAPI创建一个后端API，并使用Vue.js创建一个前端应用来与后端通信。

FastAPI后端 (main.py):




from fastapi import FastAPI
from pydantic import BaseModel
 
app = FastAPI()
 
class Item(BaseModel):
    name: str
    description: str = None
    price: float
    tax: float = None
 
@app.post("/items/")
async def create_item(item: Item):
    return item

Vue.js前端 (ItemForm.vue):




<template>
  <div>
    <input v-model="item.name" placeholder="Name">
    <input v-model="item.description" placeholder="Description">
    <input v-model="item.price" type="number" placeholder="Price">
    <button @click="addItem">Add Item</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      item: {
        name: '',
        description: '',
        price: 0,
      },
    };
  },
  methods: {
    async addItem() {
      try {
        const response = await axios.post('http://localhost:8000/items/', this.item);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

在实际部署中，你需要确保FastAPI服务器正在运行，并且Vue.js应用程序正确配置以向正确的URL发送请求。这个例子展示了如何创建一个简单的项目，并在前端提交数据到后端API。

2024-08-08




@Component
public class WebSocketServer {
 
    private static final Logger log = LoggerFactory.Logger(WebSocketServer.class);
 
    private final SimpMessagingTemplate template;
 
    @Autowired
    public WebSocketServer(SimpMessagingTemplate template) {
        this.template = template;
    }
 
    // 发送消息到前端
    public void sendMessageToClient(String destination, Object payload) {
        log.info("Send message to client: " + payload);
        template.convertAndSend(destination, payload);
    }
 
    // 心跳检测逻辑
    @Scheduled(fixedRate = 30000)
    public void checkAlive() {
        log.info("Check WebSocket sessions alive...");
        // 这里添加具体的检测逻辑
    }
}

这个简化版的代码示例展示了如何在Spring Boot应用中使用SimpMessagingTemplate发送WebSocket消息，并且使用@Scheduled注解实现心跳机制。在实际应用中，你需要根据具体的WebSocket实现和业务需求来完善checkAlive方法的内部逻辑。

使用Vue3展示在Vue Router中实现嵌套路由

2024-08-08




<template>
  <router-link to="/parent/child1">Child 1</router-link>
  <router-link to="/parent/child2">Child 2</router-link>
  <router-view></router-view>
</template>
 
<script setup>
import { useRouter } from 'vue-router';
 
const router = useRouter();
 
// 导航守卫示例：在进入路由前验证权限
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    // 假设有一个isAuthenticated函数用来检查用户是否已经登录
    next('/login'); // 如果用户未登录，重定向到登录页面
  } else {
    next(); // 如果用户已登录或不需要登录，正常进入目标路由
  }
});
</script>
 
<style scoped>
/* 这里可以添加一些样式 */
</style>

这个代码实例展示了如何在Vue 3中使用Vue Router实现嵌套路由，并使用<router-link>来导航到不同的子路由。同时，它演示了如何使用router.beforeEach添加导航守卫来实现路由访问前的权限验证。这是一个典型的Vue应用程序中的安全实践，有助于增强用户体验和应用程序的安全性。

【Vue管理后台】用户登录强制修改密码

2024-08-08

在Vue管理后台中，如果用户登录后强制修改密码，可以通过在用户登录时设置一个标志，并在需要强制修改密码的路由守卫中进行检查。以下是一个简单的示例：




// 在 Vue 实例化之前设置路由守卫
router.beforeEach((to, from, next) => {
  const forcePasswordChange = localStorage.getItem('forcePasswordChange');
  if (forcePasswordChange && to.path !== '/change-password') {
    next('/change-password'); // 强制用户访问修改密码页面
  } else {
    next(); // 正常访问其他页面
  }
});
 
// 登录成功后的处理逻辑
loginSuccessful() {
  // 假设后端返回的数据中包含是否需要强制修改密码的标志
  const responseData = { forcePasswordChange: true }; 
  if (responseData.forcePasswordChange) {
    localStorage.setItem('forcePasswordChange', 'true');
  } else {
    localStorage.removeItem('forcePasswordChange');
  }
  
  // 登录成功后的其他处理逻辑...
}

在这个例子中，我们使用了localStorage来存储用户是否需要强制修改密码的状态。当用户登录时，如果后端通知需要修改密码，我们将forcePasswordChange设置为true。在每次路由跳转前，我们检查这个标志，如果标志为true且目标路由不是修改密码页面，则强制跳转到修改密码页面。这样，用户在访问任何页面之前都会被迫先访问修改密码页面。

2024-08-08

在uniapp开发小程序时，使用v-html解析富文本内容时，图片可能会因为尺寸过大或过宽导致超出屏幕显示范围。为了解决这个问题，可以在数据绑定中对图片的宽度进行控制。

以下是一个简单的例子，展示如何在uniapp中使用v-html并控制图片的大小：




<template>
  <view>
    <rich-text :nodes="articleContent"></rich-text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtmlContent: '<div>这里是富文本内容，其中包含过大的图片...</div>'
    };
  },
  computed: {
    articleContent() {
      // 使用正则表达式匹配所有的img标签，并添加样式控制图片大小
      return this.rawHtmlContent.replace(/<img[^>]*>/gi, (match) => {
        return match.replace(/style="[^"]*"/gi, '').replace(/width="[^"]*"/gi, '').replace(/height="[^"]*"/gi, '') + ' style="max-width:100%;height:auto;"';
      });
    }
  }
};
</script>

在这个例子中，我们使用了一个计算属性articleContent来处理原始的HTML内容。通过正则表达式找到所有的<img>标签，并且替换掉原有的width、height和style属性，然后添加了一个新的样式style="max-width:100%;height:auto;"，这样图片就会自适应宽度，并且高度会自动调整保持图片比例。

请注意，这个例子只是一个简单的说明，实际使用时可能需要根据具体的富文本内容进行适当的调整。

Vue调用后台接口方式

2024-08-08

在Vue中调用后端接口通常使用axios库，以下是一个简单的例子：

首先，安装axios：




npm install axios

然后，在Vue组件中使用axios：




<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      {{ data }}
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      axios.get('https://your-api-endpoint.com/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
  },
};
</script>

在这个例子中，当按钮被点击时，fetchData方法会被触发，它使用axios.get调用后端API接口，并在成功获取数据时更新组件的本地状态。如果调用失败，它会在控制台输出错误信息。

Vue常用方法汇总

2024-08-08

Vue常用的方法有：

vm.$mount(el?: string | Element, hydrating?: boolean): Component)
挂载一个实例到一个 DOM 元素上。
vm.$destroy(): void
完全销毁一个实例。清理它与其它实例的连接，解绑其所有的事件监听器。
vm.$forceUpdate(): void
强制触发当前组件重新渲染。
vm.$nextTick(callback?: () => void): Promise<void>
在下次 DOM 更新循环结束之后执行异步的更新函数。在修改数据之后立即使用这个方法，获取更新后的 DOM。
vm.$set(target: object, propertyName: string | number, value: any): void
向响应式对象中添加一个属性，并确保这个属性是可响应的，能触发视图更新。
vm.$delete(target: object, propertyName: string | number): void
删除响应式对象中的一个属性。如果对象是响应式的，确保删除能触发视图更新。
vm.$watch(expOrFn: string | Function, callback: Function, options?: Object): Function
观察者方法，观察数据变化。
vm.$watchAsState(key: string, options?: Object): Observable
将组件的局部状态转换为响应式状态。
vm.$on(event: string | Symbol, callback: Function): Component
监听当前实例上自定义事件。
vm.$once(event: string | Symbol, callback: Function): Component
监听一个自定义事件，这个事件只触发一次。
vm.$off(event?: string | Symbol, callback?: Function): Component
移除自定义事件监听器。
vm.$emit(event: string, ...args: any[]): Component
触发当前实例上的事件。
vm.$nextTick(callback: Function): void
在下次 DOM 更新循环结束之后执行异步的回调。
vm.$refs: Object
一个对象，持有注册过 ref 属性的所有 DOM 元素和组件实例。
vm.$isServer: boolean
判断当前 Vue 实例是否运行在服务器。
vm.$isClient: boolean
判断当前 Vue 实例是否运行在客户端。
vm.$isMounted(): boolean
判断当前实例是否已挂载，挂载之后为 true。
vm.$isDestroyed(): boolean
判断当前实例是否已被销毁，销毁之后为 true。
vm.$forceUpdate(): void
强制触发当前组件重新渲染。
vm.$nextTick(callback: Function): Promise<void>
在下次 DOM 更新循环结束之后执行异步的回调。
vm.$watch(expOrFn: string | Function, callback: Function, options?: Object): Function
观察者方法，观察数据变化。
vm.$watchAsState(key: string, options?: Object): Observable
将组件的局部状态转换为响应式状态。
vm.$on(event: string | Symbol, callback: Function): Component
监听当前实例上自定义事件。
vm.$once(event: string | Symbol, callback: Function): Component
监听一个自定义事件，这个事件只触发一次。
vm.$off(event?: string | Symbol, callback?: Function): Component

vue3 + ts element Plus table组件二次封装

2024-08-08

在Vue 3和TypeScript中对Element Plus的Table组件进行二次封装，可以通过创建一个自定义组件来实现。以下是一个简单的示例：

创建一个新的组件文件 MyTable.vue:




<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableColumn } from 'element-plus';
 
export default defineComponent({
  name: 'MyTable',
  props: {
    columns: {
      type: Array as () => TableColumn[],
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  }
});
</script>

使用 MyTable 组件时，需要传递 columns 和 tableData 属性：




<template>
  <MyTable :columns="tableColumns" :tableData="tableData" />
</template>
 
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import MyTable from './MyTable.vue';
 
export default defineComponent({
  components: {
    MyTable
  },
  setup() {
    const tableData = reactive([
      { date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
      // ...更多数据
    ]);
 
    const tableColumns = reactive([
      { label: '日期', prop: 'date' },
      { label: '姓名', prop: 'name' },
      { label: '地址', prop: 'address' }
    ]);
 
    return {
      tableData,
      tableColumns
    };
  }
});
</script>

在这个例子中，MyTable 组件接受两个props：columns 和 tableData。columns 是一个由 TableColumn 对象组成的数组，用于定义表格的列；tableData 是表格要展示的数据数组。在父组件中，你可以通过传递这些props来配置表格的列和数据。

vue深拷贝的几种实现方式

2024-08-08

在Vue中实现深拷贝有多种方式，以下是几种常见的实现方法：

使用JSON.parse(JSON.stringify())：




let obj = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(obj));

使用lodash的cloneDeep方法：




npm install lodash




import cloneDeep from 'lodash/cloneDeep';
 
let obj = { a: 1, b: { c: 2 } };
let deepCopy = cloneDeep(obj);

使用jQuery的extend方法：




npm install jquery




import $ from 'jquery';
 
let obj = { a: 1, b: { c: 2 } };
let deepCopy = $.extend(true, {}, obj);

使用Vue自身的mergeDataOrFn助手函数（Vue 3）：




import { mergeDataOrFn } from 'vue';
 
let obj = { a: 1, b: { c: 2 } };
let deepCopy = mergeDataOrFn(obj);

注意：JSON.parse(JSON.stringify())方法有局限性，它不能处理包含循环引用的对象或不是可序列化的对象（例如，函数、undefined、Symbol值等）。因此，对于复杂或特殊的对象，可能需要结合使用其他深拷贝方法或自定义函数来处理。