Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue 项目 毒鸡汤 壮士可要来一碗!

Vue 项目 毒鸡汤 壮士可要来一碗!

原创
作者头像
华健课堂
发布于 2024-08-20 02:25:05
发布于 2024-08-20 02:25:05
10000
代码可运行
举报
运行总次数:0
代码可运行

项目灵感来自“聆听远方”的毒鸡汤 非常简单 适合 Vue 新童鞋

按国际惯例 先上图

来不及解释了 快把代码复制走

poison-soup.html

代码语言:html
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>毒鸡汤 - 壮士可要来一碗!</title>
</head>
<body>
  <div id="app">
    <h1>毒鸡汤</h1>
    <p>{{sentence}}</p>
    <button v-on:click="showAnotherSentence">再来一碗</button>  
  </div>
  <script src="https://unpkg.com/vue@3.4.37/dist/vue.global.js"></script>
  <script src="/poison-soup.js"></script>
</body>
</html>

poison-soup.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let sentences = [
  "你连世界都没观过,哪来的世界观?",
  "学习使人快乐,不学习使人,更快乐。",
  "好想把房子卖了,去环游世界,可惜房东不同意!",
  "厉害的不是你有多少后台,而是你能成为多少人的后台!",
  "你怎么长得跟个二维码似的,不扫一下,都不知道你是什么东西!",
  "不笑运气差,一笑脸就大!",
  "少年加油吧!只要你努力工作,你的老板一定会成功的。",
  "要相信自己,别人能做到的,你也做不到。",
  "你从来不孤独,因为,孤独都不想跟你交朋友。",
  "不要担心,一切都是最烂的安排。"
]

function getRandomIndex() {
  return Math.floor(Math.random() * sentences.length)
}

Vue.createApp({
  data() {
    return {
      sentence: sentences[getRandomIndex()]
    }
  },
  methods: {
    showAnotherSentence() {
      this.sentence = sentences[getRandomIndex()]
    }
  }
}).mount("#app")

壮士 来完一碗“文章” 再来一碗“视频

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何完美解决 Spring Boot 出现 Whitelabel Error Page This application has no explicit mapping for /error 解决方案
Spring Boot开发过程中,你是否遇到过令人头疼的Whitelabel Error Page问题?本文将详细介绍Spring Boot中Whitelabel Error Page的出现原因,并提供多种有效的解决方案。通过这篇文章,你将学习到如何自定义错误页面,配置错误处理器,以及使用全局异常处理机制,帮助你彻底解决Spring Boot中的Whitelabel Error Page问题。无论你是新手还是老手,都能通过本文找到解决问题的方法。关键词:Spring Boot、Whitelabel Error Page、错误处理、自定义错误页面、全局异常处理。
猫头虎
2024/05/24
2.5K0
如何排查和解决 Whitelabel Error Page: There was an unexpected error (type=Internal Server Error, status=5问题
当你遇到 Whitelabel Error Page 错误时,尤其是像下面的错误信息:
猫头虎
2025/03/12
7770
如何排查和解决 Whitelabel Error Page: There was an unexpected error (type=Internal Server Error, status=5问题
重学SpringBoot3-ErrorMvcAutoConfiguration类
ErrorMvcAutoConfiguration 类是 Spring Boot 中用于自动配置错误处理机制的一个关键组件。这篇文章将详细介绍 ErrorMvcAutoConfiguration类,包括其作用、工作原理以及如何在 Spring Boot 3 应用中定制和使用它。
CoderJia
2024/10/18
3430
重学SpringBoot3-ErrorMvcAutoConfiguration类
Springboot异常处理只会@ControllerAdvice+@ExceptionHandler?还远远不够!
当系统出现异常时候,或404,或500,默认返回的错误页面通常非常简陋,用户也看不懂,这时候我们想通过一些手段,提示用户访问的资源不存在,或者请稍后再试。
java思维导图
2019/09/19
2.4K0
Springboot异常处理只会@ControllerAdvice+@ExceptionHandler?还远远不够!
【原创】008 | 搭上SpringBoot实战专车系列八:自定义错误页面
在上一篇SpringBoot集成数据持久化框架Mybatis最后提到一个问题,如何解决@Mapper注解这种开发负担。答案很简单,只需要告诉mabytis starter我们mapper接口的路径就可以了,这样就可以用更简便的方式达到同样的效果。实现代码如下:
java进阶架构师
2021/02/22
4150
This application has no explicit mapping for 解决方法
IDEA目录结构的问题,Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包 。而我的controller则放在了最外层的包里面。导致找不到页面。
Maynor
2021/12/06
29K0
This application has no explicit mapping for 解决方法
解决:Springboot启动报错 Whitelabel Error Page: This application has no explicit mappin
当我们使用Spring Boot框架开发Web应用时,有时会遇到启动报错信息为"Whitelabel Error Page: This application has no explicit mapping for"。这种报错信息意味着我们的应用缺少某个URL映射的配置,导致请求无法处理。在本篇文章中,我们将详细讨论如何解决这个问题。
大盘鸡拌面
2023/11/03
17.5K0
Spring | 如何在项目中优雅的处理异常 - 全局异常处理以及自定义异常处理
在快速迭代和持续交付的今天,软件的健壮性、可靠性和用户体验已经成为区别成功与否的关键因素。特别是在Spring框架中,由于其广泛的应用和丰富的功能,如何优雅地处理异常就显得尤为重要。本文旨在探讨在Spring中如何更加高效、准确和优雅地处理异常,帮助开发者更好地构建和维护Spring应用。
kfaino
2023/09/26
4.3K0
Spring | 如何在项目中优雅的处理异常 - 全局异常处理以及自定义异常处理
微服务架构之Spring Boot(三十四)
Spring MVC使用 WebBindingInitializer 为特定请求初始化 WebDataBinder 。如果您创建自己的 ConfigurableWebBindingInitializer
用户1289394
2022/04/07
1.1K0
Spring 全家桶之 Spring Boot 2.6.4(七)- Exception
使用IDEA创建一个工程spring-boot-exception,只需要添加基本的依赖即可
RiemannHypothesis
2022/09/26
1K0
Spring 全家桶之 Spring Boot 2.6.4(七)- Exception
Spring Boot错误处理
自定义一个类实现ErrorController,当系统发生404或者500错误的时候,就会自动进入到自定义的错误页面中,这要求在resources文件里面的templates文件内部建立一个error文件夹,里面放自定义错误页面的模板即可。当访问/error这个路径的时候,也会进入错误页面。
itlemon
2020/04/03
7780
掌握 Spring 之异常处理
这次我们学习 Spring 的异常处理,作为一个 Spring 为基础框架的 Web 程序,如果不对程序中出现的异常进行适当的处理比如异常信息友好化,记录异常日志等等,直接将异常信息返回给客户端展示给用户,对用户体验有不好的影响。所以本篇文章主要探讨通过 Spring 进行统一异常处理的几种方式实现,以更优雅的方式捕获程序发生的异常信息并进行适当的处理响应给客户端。
闻人的技术博客
2019/09/19
1.9K0
掌握 Spring 之异常处理
异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
该文讲述了在Spring Boot应用中,如果出现“This application has no explicit mapping for /error, so you are seeing this as a fallback.”异常,可以通过检查启动类、视图解析器的配置以及控制器的URL路径等方面的问题,来定位并解决该问题。
用户1134788
2018/01/05
3.3K0
你以为Spring Boot统一异常处理能拦截所有的异常?
这类图相信大家没少见,Spring Boot 只要出错,体现在页面上的就是这个。如果你用Postman之类的测试出了异常则是:
码农小胖哥
2021/05/14
2.6K0
SpringBoot 笔记(十):错误处理
SpringBoot 笔记 ( 十 ):错误处理 1)、SpringBoot默认的错误处理机制 默认效果: ​ 1)、浏览器,返回一个默认的错误页面 2)、如果是其他客户端,默认响应一个json数据 2)、自动配置原理 ​ 具体就是在 ErrorMvcAutoConfiguration,错误处理的自动配置。 给容器中添加了以下组件 1、ErrorPageCustomizer:规定错误页面 /error 12 @Value("${error.path:/error}
lwen
2018/06/19
8190
Spring 异常处理的各种姿势
统一的异常处理对于应用的重要性不言而喻。今天我们来介绍一下 Spring 如何来进行统一的 Rest 异常处理。同时我们也会简单比较一下它们之间的优劣。
码农小胖哥
2019/12/10
7050
教你理清SpringBoot与SpringMVC的关系
spring boot就是一个大框架里面包含了许许多多的东西,其中spring就是最核心的内容之一,当然就包含spring mvc。spring mvc 是只是spring 处理web层请求的一个模块。因此他们的关系大概就是这样:spring mvc  < spring <springboot。
美的让人心动
2018/12/14
1.8K0
SpringBoot中REST API的错误异常处理设计
RESTful API中的异常Exception处理有两个基本要求,需要明确业务意义的错误消息以及hhtp状态码。良好的错误消息能够让API客户端纠正问题。在本文中,我们将讨论并实现Spring的REST API异常处理。 Restful API错误/异常设计 在RESTful API中设计异常处理时,最好在响应中设置HTTP状态代码,这样可以表示客户端的请求为什么会失败的原因。当然也可以发送更多信息包括HTTP状态码,这些将帮助客户端迅速定位错误。 比如下面是Springboot表示/api/pro
lyb-geek
2018/08/16
7.6K0
深入Spring Boot (九):Web应用统一异常处理
默认情况下,Spring Boot为基于SpringMVC的Web应用提供了全局统一异常处理,本篇将深入介绍默认的统一异常处理及自定义异常处理,主要包含以下4部分内容: 默认异常处理; 覆盖默认异常处
JavaQ
2018/04/08
1.4K0
深入Spring Boot (九):Web应用统一异常处理
SpringBoot处理全局统一异常
0x01:使用@ControllerAdvice和@ExceptionHandler注解
BUG弄潮儿
2020/06/15
1.1K0
推荐阅读
相关推荐
如何完美解决 Spring Boot 出现 Whitelabel Error Page This application has no explicit mapping for /error 解决方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验