WEB
关注
分享
扫一扫
文章平均质量分 71
制作网站涉及的相关知识（html、css、js、php、ajax、vue、spring boot等）学习笔记
月亮不休我不眠
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Spring Boot||解决ajax请求跨域问题
背景最近做一个项目，需要本地上传图片到第三方API，获得其返回的图片链接，将图片链接存入数据库。理想很美好：找一个第三方图床，了解接口文档 -> Ajax异步发送请求，将图片文件传到第三方图床API -> 接收第三方API返回的数据，从中拿到图片外链 -> 将外链存入数据库现实很骨感：在我认为最简单的一步，发送Ajax请求时，由于跨域报错了…已拦截跨源请求：同源策略禁止读取位于 *** 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'原创 2021-04-26 11:53:23 · 785 阅读 · 0 评论 -
Spring Boot||解决th:text下时间没有被格式化
背景为了让时间数据可以在前端可视化显示，我在写实体类时，对date类型的数据加了“@JsonFormat”注解 @JsonFormat (timezone = "GMT+8",pattern = "yyyy-MM-dd HH:mm:ss") private Date updataTime;//更新时间 @JsonFormat (timezone = "GMT+8",pattern = "yyyy-MM-dd HH:mm:ss") private Date createTime;//创建时间并进原创 2021-04-21 09:12:30 · 556 阅读 · 0 评论 -
Spring Boot||html页面的css等资源加载失败
背景这几天在用spring boot 框架来实现一个网站，静态页面已经写好，创建完成spring项目后将html文件、css等资源文件分别扔到了/项目名称/src/main/resources/templates、/项目名称/src/main/resources/static路径下。如图问题描述我在写好相关地址映射方法后，尝试运行该项目，访问对应路径后发现，页面可以正常加载，但相关资源加载失败。截图如下问题定位1，一开始检查了application.properties文件和pom.xml文件原创 2021-04-08 12:36:34 · 1794 阅读 · 0 评论 -
Spring Boot||项目创建及报错解决
背景最近要实现一个网站，计划后端基于spring boot来实现。所以在完成前端页面和相关数据库设计和实现后，便安装了sts(spring tool suite)。由于是新手，在用sts进行spring boot项目的创建过程中，也遇到了一些问题…万幸通过各种途径已经解决~本文主要记（分）录（享）鄙人在用sts创建spring boot项目的创建步骤及过程中遇到的一些错误对应的解决办法。创建spring boot项目1，打开sts(即spring tool suite)->在空白处单击鼠标右原创 2021-03-28 15:25:50 · 2641 阅读 · 0 评论 -
vue||简易版音乐播放器
前言本次项目是对前面的vue知识的综合应用：基于vue实现一个网页版播放器。需要向网易云接口发送请求，这是相关接口使用文档：https://api.imjad.cn/cloudmusic.md页面布局1，HTML页面布局本次页面布局相对复杂，我将整个播放器页面用“div”分成上、中下三块。其中：上方放搜索框和播放器名字；中间是主要内容块，又分为左右两块，左边用来显示当前播放音乐对应的图片和名字，右边显示搜索结果（20条）；底部显示音乐播放进度条。下面的具体代码：<div id="原创 2020-05-18 00:13:11 · 2743 阅读 · 3 评论 -
Vue||获取网络数据
背景本次项目说白了就是利用vue向天行数据网异步发送请求，并获得将其返回的数据。所以，在进行项目之前，需要先去天行数据的官网注册登录并申请接口。（网址：https://www.tianapi.com/）天行数据申请接口1）登录注册2）选择接口菜单后在新页面的所有接口中选一个所需的（免费）接口，并进入，这里我选择趣味娱乐里面的神回复3）进入后点击“申请接口按钮”即可使用，该页面还友好的介绍了使用方法和在线测试功能其中，APIKEY是自己的密钥，在个人中心可以查看代码实现1）页面布局原创 2020-05-16 14:19:48 · 1849 阅读 · 0 评论 -
Vue||简易版记事本
前言基于对JavaScript插件vue的不断学习，不断熟悉，今天就基于vue做一个简易版记事本叭~功能概述实现了增删统计三大基础功能：1）文本框输入内容后按回车，动态生成新事件（li），并将文本框内容给该li2) 点击li右侧对应的“X”，将该事件（li）删除3）在记事本右下角记录当前所有事件（li)总数量4）点击记事本左下角的“CLEAR"则清空记事本初始化界面（无事件时）如下：涉及vue知识点1）v-model使用内置的 v-model 指令，实现双向数据绑定。在这次项目中原创 2020-05-15 21:40:17 · 853 阅读 · 0 评论 -
vue||图片切换效果
vue相关知识1）v-if/v-show二者都可以实现让元素隐藏和显示。但是实现原理不同：v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。2）v-bindv-bind可以对元素的属性值进行修改。基于这些背景知识，下面来实现图片切换实例。功能需求1）点击左边按钮，显示前一张图片；如果图片是第一张，则隐藏该按钮2）点击右边按钮，显示后一张图片；如果图片是最后一张，则隐藏该按钮实现代码&l原创 2020-05-14 00:09:34 · 1325 阅读 · 0 评论 -
vue||初体验&简陋版计数器
概念Vue是一套用于构建用户界面的渐进式框架。Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。开发文档链接：https://cn.vuejs.org/v2/guide/我的第一个vue程序步骤：1）导入vue插件2）页面布局（挖坑）3）建立Vue对象（填坑）<!DOCTYPE html><html> <head> <meta c原创 2020-05-13 16:48:10 · 152 阅读 · 0 评论 -
JavaScript||瀑布流实例
前言基于前面的瀑布流知识背景，今天就来用具体实例玩一下（其实也是Ajax的巩固）。最终效果浏览：看过我前面文章的朋友会发现，这里的数据和前面一篇的数据一样，但是当时为了美观，我是把图片的宽高写死的，文字数量也控制在一定范围。这导致部分图片被拉伸，而且部分文字显示不完全。学了瀑布流之后，前面的问题就可以迎刃而解了。前期准备1，GitHub下载相关文件主要是下载三个JS文件(前面的文章都分享过相关链接）：jQuery插件、模板引擎插件和瀑布流插件。2，导入Ajax接口函数前面已经对Ajax发原创 2020-05-13 00:22:52 · 302 阅读 · 0 评论 -
JavaScript||瀑布流布局初体验
瀑布流是什么瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局。瀑布流的主要特质是：定宽而不定高 ；视觉表现为参差不齐的多栏布局。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。下面放一张图说明：瀑布流效果实现1）GitHub下载瀑布流效果文件和jQuery瀑布流效果链接：https://github.com/desandro/masonryjQuery下载链接：https://jquery.com/download/2）将下载好的文件引入本次项目中3）页面布局&原创 2020-05-10 22:45:32 · 222 阅读 · 0 评论 -
JavaScript||模仿GitHub模板引擎（实现内容替换）
前言上一篇文章中模板引擎我是直接从GitHub下载的，但是根据自己的实际需求（替换指定内容），完全可以自己写一个满足需求的模板引擎。下面一起康康叭~模板引擎简易版步骤：1）创建模板2）获取模板内容3）正则表达式定义要检索的字符4）定义要替换的具体数据5）while循环检索替换<!DOCTYPE html><html> <head> <title>面向问题的模板引擎</title> <原创 2020-05-10 18:36:54 · 312 阅读 · 0 评论 -
PHP||对json数据二次处理
前言1）之前向PHP发送请求，拿到的数据都是直接返回浏览器，没有在服务器端（PHP页面）进行二次处理。本文主要就是以实例的形式，记录一下关于在PHP页面对json数据二次处理的内容。2）案例实现功能：页面初始化后有两个按钮，点击分别给添加一个item和多个item。其中每个item的框架如下：准备数据因为没有实际的数据，所以采用假数据来测试（数据来自落网）【myjson.php】[ { "path" : "imgs/432131.jpg", "name"原创 2020-05-10 12:34:00 · 733 阅读 · 0 评论 -
Ajax||异步获取json数据
最终效果 ajax异步获取json数据 实现步骤1.HTML布局为了不把页面写死，HTML页面我就放了两个盒子，具体内容根据数据的数量动态生成，下面是代码（index.html)：<!DOCTYPE html><html> <hea...原创 2020-05-02 11:43:52 · 467 阅读 · 0 评论 -
Ajax||升级版虚拟聊天室
前言昨个写的简易版虚拟聊天室的确有点low，因为伪数据库只有十句话，随机调取，完全没有逻辑。这次的升级版虚拟聊天室，在原来的基础上，完善了以下内容：1）美化界面（如下图）2）异步向图灵机器人发送请求，通过图灵机器人来完成对话浏览器端1，HTML页面布局HTML页面其实和前面的简化版差不多，只是为了方便后面的布局，我加了几个div标签作为容器。下面是代码(index.html)：&...原创 2020-04-30 09:51:53 · 418 阅读 · 0 评论 -
Ajax||初体验之虚拟聊天室
前言Ajax，直译为“异步的JavaScript与XML技术”，与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。在跟着B站的老师学了Ajax实现异步的原理后，我尝试着实现了下面的简易版虚拟聊天室。原理分析1）用户输入信息并按下发送键2）浏览器通过post/get方法向服务器发送请求（不刷新页面...原创 2020-04-29 22:56:29 · 449 阅读 · 0 评论 -
PHP||不刷新页面前提下向服务器发送请求
前言前面我们提到的form表单提交请求，其实实际上说白了就是浏览器和服务器间的请求和响应。浏览器中获取HTML页面、请求后台页面等等都会向服务器发送请求报文；而服务器返回相应的相应报文。请求报文：包括请求头、请求行、请求主体。其中请求主体内存放的就是我们要发送给服务器的数据。相应报文：包括响应行、响应头、响应主体。其中响应主体的内容就是服务器要返回浏览器的内容。HTTP协议：这种通过请求...原创 2020-04-28 12:53:15 · 530 阅读 · 0 评论 -
PHP||我的第一个动态页面（动态接收form表单提交的数据）
1，概述基于PHP语言，接受HTML页面的form表单中要提交的数据，并根据获取的数据生成页面。2，写好静态页面分析易知，此次需要的标签主要是“form”、“input”：form标签中添加了action属性，里面的值填写的是数据提交的目的地址；method属性是提交方式，默认是GET，故可以不写。input标签中，需要提交的数据用name属性标记。<!-- 表单 -->...原创 2020-04-27 18:54:42 · 1239 阅读 · 0 评论 -
PHP||第一个PHP程序
1，初识PHPPHP又叫超文本预处理器，是一种通用开源脚本语言。主要适用于Web开发领域（用来做动态网页的）。PHP是将程序嵌入到HTML文档中去执行的，可以比其他编程语言更快速地执行动态网页。下面一起来玩转一下叭~2，前期准备因为PHP是一种服务器端的脚本语言，所以我们想要运行PHP的话，首先要将我们的电脑变成服务器。那么怎么实现呢？其实安装一个web服务器软件（IIS、Oracle ...原创 2020-04-27 08:12:25 · 921 阅读 · 0 评论 -
PHP||新版phpstudy显示目录列表
最近新下载了为了学PHP语言，新下了最新版的PHP study，因为看的教程是以老版PHP study为例来讲解的，看着老师一键实现显示目录，而新版的对应功能换了位置找不到了，我陷入了沉思。。。所谓不懂就百度，终于给我找到了解决办法，下面分享给大家~遇到问题在根目录下打开一个不存在的页面时，不能显示目录列表。解决步骤1，找到设置并选中进入其中的配置文件界面2，找到vhosts.co...原创 2020-04-26 22:20:30 · 7729 阅读 · 17 评论 -
JavaScript||放大镜效果
前几天逛淘宝网页版，在详情页，鼠标经过商品图片时，会在右侧出现对应的局部放大图，感觉好好玩（主要是想试试会不会做~），就自己尝试实现了，嘿嘿，一起来康康叭！1,HTML页面布局其实这个效果，揉碎了就是一个大盒子里面放左右两个小盒子：左边小盒子里面放小图片和半透明遮挡图；右边小盒子放大图片。下面放代码和布局完毕后的图片~//注：以下内容写在body里面噢<div id="box"&g...原创 2020-04-26 10:05:50 · 522 阅读 · 0 评论 -
JavaScript||Tab栏切换
先放最终效果图，让大家生动形象体会一下： web下拉菜单 1.内容介绍研究过网页Tab栏的同仁应该都见过这种效果，鼠标经过一些Tab栏的某内容，对应会出现一个下拉菜单，如果鼠标离开这个内容，对应的下拉菜单隐藏。下面一起来看看吧~2.HTML页面布局页面布局相对简单，总的...原创 2020-04-21 12:36:10 · 363 阅读 · 0 评论 -
JavaScript||轮播图2.0（功能完整）
昨天发的轮播图功能实在太单一了，感谢互联网，今天在网上学习了如何制作一个功能全面的轮播图，咱就喊他2.0吧。相较前面的轮播图1.0，轮播图2.0版本加了左右键实现向左向右移动，实现了点击小圆点跳转致相应图片以及图片无缝连接。。。下面分享给大家HTML页面布局此次主要用了主流轮播图常用的几种标签“ul"、“ol” 、”li“ 标签：<div id="divAll"> &l...原创 2020-04-19 22:51:05 · 222 阅读 · 0 评论 -
JavaScript||最简单的轮播图实现
今天给大家分享的是一个具简单的轮播图，只实现了最基本的轮播功能，感兴趣的仁可以康康~页面布局由于当时只计划实现简单的自动轮播功能，此次的代码量巨少。页面布局我主要选择了“img”和“input”标签，它们分别存放图片和图片下的小圆点，而为了后面布局方便，我选用了两个”div"标签作为容器，下面直接放代码。<div id="divAll"> <img id="img" sr...原创 2020-04-18 17:50:02 · 1484 阅读 · 0 评论 -
JavaScript||简易版计算器实现
昨天用JavaScript写了一个网页版的简易计算器，现在将制作过程和最终的源代码分享给大家。首先：进行页面布局页面布局相对简单，主要应用了table标签、input标签和button标签，下面直接放代码和效果图//下面是相关的HTML代码<div id="divTop"> <input id="textBox" type="text" value="0" disa...原创 2020-04-17 12:34:00 · 1570 阅读 · 0 评论 -
JavaScript||JSON应用
JSON应用什么是JSON?JSON是一种轻量级的数据交换格式，用来进行数据交换。是目前流行的数据交换格式之一（其他主流数据交换格式：XML、WAML）。JSON在JavaScript中是作为无类型对象存在的，是基于JavaScript的一个子集。JSON特点？轻量级、易解析JSON作用？作为一种数据交换格式，顾名思义，JSON是用来进行跨平台/系统的数据交换的。不同系统间（例如C...原创 2020-04-16 12:17:29 · 151 阅读 · 0 评论