前端开发
axios1、封装与拦截import axios from "axios";
import { Message } from "element-ui";
import router from "@/router";
export const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
});
console.log(process.env["VUE_APP_BASE_API"]);
1.1请求拦截// 请求拦截
service.interceptors.request.use((config) => {
console.log(JSON.parse(localStorage.getItem("userInfo")["sessionId"]);
if (config.method === "get") {
config.params = {
sessionId: JSON.parse(localS ...
前端开发
CSS布局完全指南CSS布局是前端开发的核心技能之一。本文将系统性地介绍CSS布局的各个方面，从基础的盒模型到现代的Flexbox和Grid布局，帮助读者全面掌握CSS布局技术。
1. CSS盒模型详解1.1 盒模型概念盒模型（Box Model）是CSS的基础概念，每个HTML元素都可以看作是一个矩形的盒子，由以下四个部分组成：
┌─────────────────────────────────────┐
│ Margin (外边距) │
├─────────────────────────────────────┤
│ Border (边框) │
├─────────────────────────────────────┤
│ Padding (内边距) │
├─────────────────────────────────────┤
│ Content (内容) │
└─────────────────── ...
前端开发
Flex布局完全指南Flexbox（弹性盒子布局）是CSS中一种强大的布局方式，能够轻松实现响应式和自适应布局。本文将系统性地介绍Flex布局的核心概念和实战应用。
1. 核心概念对比1.1 align-items vs align-contentalign-items和align-content都是用于控制flex容器内部项目对齐的属性，但它们有明显的区别。
align-items（单行对齐）
作用：控制flex容器内所有项目在交叉轴上的对齐方式
适用：单行项目
可选值：
flex-start：对齐到交叉轴的起始位置
flex-end：对齐到交叉轴的结束位置
center：在交叉轴上居中对齐
baseline：项目的基线对齐
stretch：拉伸以填充整个交叉轴空间（未设置固定尺寸时）
.container {
display: flex;
align-items: center; /* 单行项目垂直居中 */
}
align-content（多行对齐）
作用：控制flex容器内多行项目在交叉轴上的对齐方式
适用：多行项目（flex-wrap: w ...
工具与效率
首先由于需要配置多个git账户，可能是github、gitlab、gitee等等，所以不需要global email和username直接使用随便一个值覆盖即可。
覆盖global email和userName后，需要3步
1、 生成不同的github密匙生成的时候一定要注意密匙名称，因为同名会被覆盖另外，名称最好见名知意，不一定要id_rsa开头
ssh-keygen -t rsa -f ~/.ssh/XXX //使用-f 来命名生成的文件名
2、 将对应的公匙放入对应的平台github、gitlab、gitee操作都是大同小异的，将本地的公匙复制好放进去即可。
假如本地有个github密匙名称是github_one，(公匙与私匙的区别就是公匙后面带.pub)，所以我们将github_one.pub里面的内容复制好放入网络平台即可。
3、配置本地密匙这里有两种方法：
3.1比较麻烦的方法将生成的密匙以ssh-add的方法添加入本地
还是以github_one为例，所以我们需要在密匙所在目录下运行命令行ssh-add github_one
一般会提示Identity adde ...
前端开发
1、语音转文字2、在页面上找到对应文字，模拟点击
export function VisibleCanBeSaid() {
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
let recognition;
let resultDisplay;
let clearResultTimer;
if (SpeechRecognition) {
// 创建语音识别实例
recognition = new SpeechRecognition();
recognition.lang = 'zh-CN'; // 设置识别语言为简体中文
recognition.continuous = false; // 设置为非持续监听
recognition.interimResults = false; // 不返回临时结果
// 创建一个div元素用于显示语音 ...
前端开发
本项目采用microApp进行前端微服务的搭建，父应用采用的是vue3，子应用有2个，分别为vue2和vue3
项目代码地址：https://github.com/hanshuang-ai/testMicroApp
1、创建父应用2、创建子应用3、创建子应用
1、父应用1.1 创建父应用vue create micro //选择vue3
1.2 在父应用app.vue内添加router-view<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
1.3 在父应用内添加载体我自己起的名，因为需要有一个页面去承载子应用
<template>
我的页面
<micro-app name='app1' url='http://localhost:8030/' baseroute='/my-page'></micro-app> //子应用的地 ...
前端开发
1. 根据浏览器的userAgent进行判断let isMobil, mobilInfo, isWx;
// 判断是在手机还是电脑
function isMobile_pc() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
if (flag) isMobil = true;
return isMobil;
}
// 判断是在安卓还是ios打开
function is_android_ios() {
let u = navigator.userAgent;
mobilInfo = {
//移动终端浏览器版本信息
trident: u.indexOf("Trident") ...
前端开发
默认情况下，css color是不继承的但是在项目中，尤其是 v-html 加载的富文本项目内，当我们需要将返回的富文本设置成我们给父元素设置的字体颜色时，由于富文本是行内样式，如<span style="color: #000000;">展销区讲解员和购物需另外付费。</span>，优先级高，会覆盖掉我们在 css 文件内设置的样式，此时我们无需对接口返回的富文本元素数据进行处理，只需要在 css 文件内找到富文本元素的父元素，设置
//父元素
.tcbuyNotice {
//富文本中带行内样式的元素
span {
color: inherit !important;
}
}
这样就可以保持富文本元素内 span 的 color 与父元素一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<title>合同详情</title>
<script src="./js/size.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="loadingPngContainer">
<img src="./loading.png" alt="" class="loadingPng">
<div class="jiazaizhong">加载中，请稍后...</div>
</div>
...
移动端开发
微信小程序组件间通信可分为 3 种，本文值介绍第 2 种---“事件”
具体可参考官方文档
// 子组件
this.triggerEvent("showCode", { isShowCode: false });
// 父组件
// 父组件内bind 子组件注册的字符串（showCode），并自定义一个方法，来处理相应逻辑
// 此处是onGetValue
<vehicle-speed isWhole="{{true}}" isLockText="{{false}}" showTextLock="{{false}}" bind:showCode="onGetValue"></vehicle-speed>
// 父组件js
// 通过触发父组件自定义的方法，进行逻辑处理
onGetValue(e) {
console.log(e.detail.isShowCode, '监听走行限制弹窗关闭');
...
前端开发
参考链接参考链接
记录一次因为图片参数导致的图片不显示的问题
事情是这样的，由于之前接触的都是oss，知道在图片后面拼接参数可以利用oss服务对图片进行处理（不拼接参数也可以访问），但是https://p0.pipi.cn/mmdb/fb73867151b5bfddd28ea3678d576e7d7b5da.jpg?imageMogr2/thumbnail/1246x1246%3E这个链接去掉?后面的参数，页面显示报错400
经过搜索后发现imagemogr2是一个图片处理程序，url中imageMogr2/后面的参数可以去掉（理解为不对图片做任何处理），但是imageMogr2/不能去掉，如果去掉就会导致400报错。
需要注意的是：如果原本的图片链接中没有imageMogr2/，那么这张图片就没有使用imageMogr2服务，手动拼接参数虽然不会报错，但是也不会进行图片处理，比如：http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg和http://e.hiph ...
前端开发
Vite构建工具完全指南Vite是下一代前端构建工具，提供了极快的开发服务器启动速度和热更新。本文将系统性地介绍Vite的配置、打包优化和自动化流程。
1. 基础配置1.1 环境变量配置首先创建环境变量文件：
项目根目录/
├── .env # 所有环境共享
├── .env.development # 开发环境
├── .env.production # 生产环境
└── vite.config.js
.env.development
# 开发环境配置
VITE_ENV=development
VITE_BASE_URL=http://localhost:3000
VITE_API_URL=http://dev-api.example.com
.env.production
# 生产环境配置
VITE_ENV=production
VITE_BASE_URL=https://example.com
VITE_API_URL=https://api.example.com
1.2 基础vite.config.js配置im ...
