寻道大千，合成龙珠模拟器，可以试着尝试合成一下,小程序如果有问题，或是有什么建议修改的，可以跟贴。 如果有需要关闭广告的，可以留言微信名称。

HTTP 调用需要通过 http 包里的 Client 结构体里的 Do 方法去实现，因此需要先声明一个 Client 结构体变量，该结构体可以设置超时时间等配置。 对于一个请求里的 URL，查询参数，请求 method 等参数，需要 http 包里的 Request 结构体去封装。我们可以通过 NewRequestWithContext 或 NewRequest 函数获取一个基础的 Request 结构体指针变量。 NewRequestWithContext(ctx context.Context, method, url string, body io.Reader) (*Request, error) 参数 ctx 为 Context 的接口类型，任意实现 Context 接口的自定义类型都可以作为此参数传递。 参数 method 为 HTTP 方法参数，可选值有 GET、POST、DELETE、PUT等。 参数 url 为接口的请求路径。 参数 body，为请求体参数。 通过 client.Do(req) 方法调用之后，返回值有 (*Response, error)，第一个是响应结构体参数，第二个是错误参数。通过读取 Response 的 body 的值，可以获取接口的响应体。 一、GET import ( "context" "fmt" "io" "net/http" ) func main() { client := http.Client{} request, err := http.NewRequestWithContext(context.Background(), http.MethodGet, "http://localhost:8080/user?name=tom", nil) if err != nil { return } request.Header.Set("headerParam", "header") resp, err := client.Do(request) if err != nil { fmt.Println(err) return } bytes, err := io.ReadAll(resp.Body) if err != nil { return } defer resp.Body.Close() fmt.Println(string(bytes)) // {"code":0,"data":{"list":},"message":"success"} } 需要携带查询参数时，可以直接拼接在 url 字符串上面。 header 参数可以通过 request 结构体的 Header 字段的 set 方法或 add 方法进行设置。 HTTP 请求响应码可以通过 Response 的 StatusCode 字段进行查看。 接口请求成功之后，通过 io.ReadAll 方法，读取 resp.Body 响应体信息。 除了直接在 url 上拼接 query 参数的方式，我们还可以通过以下方式进行添加 query 参数： params := url.Values{} rawUrl, err := url.Parse("http://localhost:8080/user") if err != nil { return } params.Set("name", "tom") rawUrl.RawQuery = params.Encode() u := rawUrl.String() 通过 url.Values 结构体的 set 方法设置 query参数，url 通过 url.Parse 函数生成一个 URL 结构体指针变量，rawUrl.RawQuery = params.Encode() 通过这行代码将 query 参数和 url 进行绑定，最后通过 String() 方法将 url 转换成 string 类型。 二、POST 发起 HTTP POST

go语言中有个很特别的时间格式format，在我们使用 Format格式化时间的时候， format的参数格式字符串必须是 2006-01-02 15:04:05 才能格式出正确的时间来， 这是个很特别的字符串， 通过分析拆分后可以得出的每个代表时间和日期的数字都不重复。 这里的 2006-01-02 15:04:05 这里的数字可以对年月日时分秒分别拆分为一个独立的数字格式， 可以看出拆分后的数字都是独立的 都分别代表对应位置的日期，如 2006表示4位年份， 06表示2位年份， 01表示2位月份，1表示不带0的月份， 02表示2位日期，2表示不带0的日期， 15表示小时， 04表示分钟，4表示不带0的分钟， 05表示秒， 5表示不带0的秒等 go time日期时间格式实例： package main import ( "fmt" "time" ) func main() { // 获取当前时间 now := time.Now() // time.Now()返回的类型是 time.Time 详情参考 ~/.gvm/go/src/time/time.go fmt.Printf("%d-%d-%d %d:%d:%d\n", now.Year(), now.Month(), now.Day(), now.Hour(), now.Minute(), now.Second()) // 2024-5-5 10:41:37 // 注意这里的Format() // func (t time.Time) Format(layout string) string // 这里的layout必须是这个时间 2006-01-02 15:04:05 其组合格式可以修改,但是数字不可修改 fmt.Printf("%v\n", now.Format("2006-01-02 15:04:05")) // 为什么是这个时间(2006-01-02 15:04:05),据说这个时间是go语言想法诞生的时间 // 2024-05-05 10:45:39 fmt.Printf("%v\n", now.Format("06")) // 年份: 06表示2位年份 如:24, 2006表示4位年份,如 2024 fmt.Printf("%v\n", now.Format("1")) // 当前月份: 1表示 1-12, 如果是01表示 01-12 fmt.Printf("%v\n", now.Format("05")) // 当前秒: 05表示 01-59 , 如果是5则表示秒 1-59 } 为什么这样设计？ 实际上 2006-01-02 15:04:05 是一个参考时间的格式，也就是其它语言中 Y-m-d H:i:s 格式，在功能上用于时间的格式化处理和规范。 那为什么是 2006-01-02 15:04:05 呢？其实这些 ”数字“ 是有意义的，每个布局字符串都是一个时间戳的表示，并非随便写的时间点。 Jan 2 15:04:05 2006 MST 1 2 3 4 5 6 -7 我们也可以将其记忆为 2006 年 1 月 2 日 3 点 4 分 5 秒。 不方便记，go将会在 Go1.20 增加如下三个常量： DateTime = "2006-01-02 15:04:05" DateOnly = "2006-01-02" TimeOnly = "15:04:05"

这段代码演示了如何获取并应用引擎内置的2d-gray-sprite材质到cc.Sprite组件上，通过cc.Material.getBuiltinMaterial方法得到材质，并用setMaterial函数设置到节点的精灵组件中。 //-- 使用引擎自带材质 let mm = cc.Material.getBuiltinMaterial("2d-gray-sprite") node.getComponent(cc.Sprite).setMaterial(0, mm) //1.将图片置灰： sprite_icon.setMaterial(0, cc.Material.createWithBuiltin(cc.Material.BUILTIN_NAME.GRAY_SPRITE, 0)); //2.将置灰图片还原： sprite_icon.setMaterial(0, cc.Material.createWithBuiltin(cc.Material.BUILTIN_NAME.SPRITE, 0));

问题 要在Beego中开启CORS，需要使用插件cors，并针对不同的路由类型进行设置。 示例 普通路由 beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{ AllowOrigins: string{"*"}, //AllowMethods: string{"POST", "GET", "OPTIONS"}, //AllowHeaders: string{"Origin"}, //ExposeHeaders: string{"Content-Length"}, //AllowCredentials: true, })) 静态文件路由 beego.InsertFilter("*", beego.BeforeStatic, cors.Allow(&cors.Options{ AllowOrigins: string{"*"}, //AllowMethods: string{"POST", "GET", "OPTIONS"}, //AllowHeaders: string{"Origin"}, //ExposeHeaders: string{"Content-Length"}, //AllowCredentials: true, }))

在HTML和CSS中，将div元素内容居中可以通过多种方式实现，具体方法取决于你想如何居中：居中其内部的文本、图片、或其他子元素，还是整个div元素在页面上居中。以下是一些常见的方法： 文本居中 如果你想要让div内的文本居中，可以使用text-align属性： <div style="text-align: center;"> 这是一段居中的文本。 </div> 子元素（如图片或内联元素）居中 对于子元素（如图片或内联元素），可以使用text-align: center;在div上实现居中，或者在父div中使用display: flex; justify-content: center; align-items: center;： <!-- 使用 text-align --> <div style="text-align: center;"> <img src="image.jpg" alt="示例图片"> </div> <!-- 使用 Flexbox --> <div style="display: flex; justify-content: center; align-items: center;"> <img src="image.jpg" alt="示例图片"> </div> 整个div元素在页面上居中 方法一：使用Flexbox ‌确定元素的布局方式‌：使用 Flexbox 布局。 ‌为 div 设置适当的 CSS 属性‌：使用 justify-content 和 align-items 属性来实现居中。 <div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <!-- 内容 --> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Centering</title> <style> .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 使容器高度为视口高度，以便观察居中效果 */ border: 1px solid #000; /* 边框用于可视化容器 */ } .content { /* 子元素的样式，可根据需要调整 */ padding: 20px; background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="content">我是居中的元素</div> </div> </body> </html> 方法二：使用Grid ‌确定元素的布局方式‌：使用 Grid 布局。 ‌为 div 设置适当的 CSS 属性‌：使用 place-items 属性（它是 justify-items 和 align-items 的简写）来实现居中。 ```html <div style="display: grid; place-items: center; height: 100vh;"> <!-- 内容 --> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Centering</title> <style> .container { display: grid; place-items: center; /* 同时实现水平和垂直居中 */ height: 100vh; /* 使容器高度为视口高度，以便观察居中效果 */ border: 1px solid #000; /* 边框用于可视化容器 */ } .content { /* 子元素的样式，可根据需要调整 */ padding: 20px;

创建全局配置文件public/static/config.js window.config = { androidUrl:"https://Android-arm64.apk", googleplayUrl:"#", appsoreUrl:"#", windowsUrl:"#", macUrl:"#", } 在index.html中引入js <head> <script type="module" src="/static/config.js"></script> </head> 在需要的vue中可以直接使用 <script setup> import { ref } from 'vue'; let downUrls = ref(window.config) console.log(downUrls.androidUrl); </script> <div class="download-icon"> <a :href="`${downUrls.appsoreUrl}`" > <img src="../../assets/images/down_appstore.svg" alt=""> </a> <a :href="`${downUrls.googleplayUrl}`" > <img src="../../assets/images/down_googleplay.svg" alt=""> </a> <a :href="`${downUrls.androidUrl}`" > <img src="../../assets/images/down_android.svg" alt=""> </a> <a :href="`${downUrls.windowsUrl}`" > <img src="../../assets/images/down_windows.svg" alt=""> </a> <a :href="`${downUrls.macUrl}`" > <img src="../../assets/images/down_mac.svg" alt=""> </a> </div> 或 <div class="footer-right"> <ul> <li v-for="(v, i) in footerlist" :key="i"> <p>{{ v.title }}</p> <div v-for="(item, j) in v.list" :key="j" @click="clickFoot(i,j)">{{ item.label }}</div> </li> </ul> </div> export default { setup() { const footerlist = ref( }, }, methods: { scrollToElement(refID) { // this.$nextTick(() => { // const element = document.getElementById("service"); // console.log(element); // this.$refs.service.$el.scrollIntoView({ behavior: 'smooth' }); // }); let time=setTimeout(()=>{ this.$nextTick(()=>{ let top=0; let targetElement=document.getElementById(refID); if(targetElement){ // 获取元素距离顶部的距离 top=targetElement.offsetTop; } if(top>0){ // 滚动到指定位置 window.scrollTo({ top: top, behavior: 'smooth' }); } clearTimeout(time); time=null; }) },300); }, clickFoot(i,j) { let clickData = this.footerlist.list; //type,1:打开新的连接，2:跳转到页内指定位置，3:跳转网站内路由页面 switch(clickData.type){ case 1: if( clickData.data && clickData.data != "" ){ window.open(clickData.data, '_blank'); } break; case 2: this.scrollToElement(clickData.data); break; case 3: this.$router.push(clickData.data); window.scrollTo(0, 0);

在main.js中可以判断后加引入相应的css // 判断设备是移动端还是pc端 const deviceType = () => { return 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 (deviceType()) { import("@/assets/css/mobile.css"); // 移动端样式文件 }else{ import("@/assets/css/index.css"); // pc端样式文件 } 在Vue中，你可以使用客户端检测来决定加载哪个CSS文件。这里有一个简单的方法来根据设备类型加载不同的CSS文件： 使用v-bind来根据条件切换标签的href属性。 使用window.matchMedia来检测设备类型。 <template> <div> <!-- 移动端样式 --> <link v-if="isMobile" rel="stylesheet" href="mobile.css"> <!-- PC端样式 --> <link v-else rel="stylesheet" href="pc.css"> </div> </template> <script> export default { data() { return { isMobile: this.checkIsMobile() }; }, methods: { checkIsMobile() { const mediaQuery = window.matchMedia("(max-width: 768px)"); if (mediaQuery.matches) { return true; } else { return false; } } } }; </script> 在Vue项目中判断移动端和PC端，可以通过多种方法实现。以下是几种常见的方法，以及如何使用这些方法来判断设备类型： 1. 使用navigator.userAgent字符串检测 这是最简单且常用的方法，通过检查浏览器的navigator.userAgent字符串来判断设备类型。 methods: { isMobile() { 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); return flag; } } 在组件的mounted钩子或任何需要判断设备类型的地方调用这个方法： mounted() { if (this.isMobile()) { console.log("移动端设备"); // 移动端逻辑 } else { console.log("PC端设备"); // PC端逻辑 } } 使用第三方库（如vue-device-detector） 为了更方便和准确地检测设备类型，可以使用第三方库，如vue-device-detector。 首先，安装vue-device-detector库： npm install vue-device-detector --save 然后，在Vue项目中引入并使用它： import Vue from 'vue'; import VueDeviceDetector from 'vue-device-detector'; Vue.use(VueDeviceDetector); 在组件中使用VueDeviceDetector提供的属性和方法来检测设备类型： export default { data() { return { device: this.$device, }; }, mounted() { if (this.device.isMobile()) { console.log("移动端设备"); // 移动端逻辑 } else { console.log("PC端设备"); // PC端逻辑 } }, }; 3. 使用媒体查询（window.matchMedia） 虽然这种方法不是直接检测设备类型，但它可以根据设备的视口宽度来判断是否是移动设备。这种方法更适用于响应式设计，而不是设备类型的判断。 mounted() { const isMobile = window.matchMedia("(max-width: 768px)").matches; if (isMobile) { console.log("可能是移动端设备"); // 移动端逻辑 } else { console.log("可能是PC端设备"); // PC端逻辑 } } 4. 在路由守卫中判断设备类型 如果需要根据设备类型重定向到不同的页面，可以在Vue Router的路由守卫中进行判断： router.beforeEach((to, from, next) => { if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {

要在div中设置鼠标滑过时变成超链接，可以通过 CSS为div添加:hover伪类选择器，并使用cursor: pointer; 使得鼠标指针在滑过时变成手指形状。然后，可以使用text-decoration: underline;为文本添加下划线，表示它是可点击的。当然，实际上这只是一个div，要变成真正的超链接，你需要添加点击事件处理器，使用JavaScript来处理点击后的行为（通常是导航到另一个页面）。 以下是实现这一功能的示例代码： HTML: <div class="link" id="myLink">这是一个可点击的div</div> .link { cursor: pointer; text-decoration: underline; color: blue; } .link:hover { color: red; } document.getElementById('myLink').onclick = function() { window.location.href = 'https://www.example.com'; }; 当用户将鼠标悬停在div上时，文本颜色会变成红色，并且在点击时会导航到'https://www.example.com'。

在HTML中，自定义标签的值通常存储在标签的属性中。如果你想动态地修改这些自定义属性的值，你可以使用JavaScript来实现。 以下是一个简单的例子，展示了如何使用JavaScript动态修改div元素的自定义属性值： HTML: <div id="myDiv" data-custom="initialValue">这是一个div</div> <button onclick="changeCustomValue()">修改自定义标签值</button> function changeCustomValue() { var div = document.getElementById('myDiv'); div.dataset.custom = 'newValue'; // 修改自定义属性值 } 在这个例子中，我们有一个带有自定义data-custom属性的div元素。当用户点击按钮时，changeCustomValue函数会被调用，这个函数会获取div元素，并将其data-custom属性的值修改为newValue。 注意，dataset属性允许你以属性访问形式操作自定义数据属性。例如，div.dataset.custom访问data-custom属性的值，而div.dataset.custom = 'newValue'则设置新的值。