Cachito98-优快云博客

原创后台数据展示到页面上的过程(vue)

后台将数据接口上传至服务器前端的vuex提交mutation访问数据接口的地址,返回的数据存放到state中在组件中，通过mapAction,mapState等方法将vuex中的数据映射到组件内在组件的模板中即可使用后台数据，并显示出来 ...

2020-10-18 10:19:22 4245 1

前后端交互的数据格式有两种 form格式（表单格式） form格式是一种“键值对”的数据格式，比如：a=1&b=2&c=3 json格式 json格式为一个对象：{“a”:1,“b”:2,“c”:3} 两种数据之间的转换 json转form需要用到qs转换，例如： let a={“a”=1,“b”=2} let b= qs.stringfy(a)对象转换为字符串，属性间使用&连接 qs需要引用 form转json用json方法转换即可，例如 let b = JSON.strin

2020-10-17 16:54:05 934

原创快速理解MVVM模式

MVVM M—>Model V—>View VM—>ViewModel model是数据模型，管理数据和处理业务逻辑在动态页面中，我们所使用的到的数据（变量）应在集中管理，提高可读性和易读性 view是视图，负责显示数据 view就将model中的数据显示出来 viewmodel 回顾一下原生JS或者jQuery，获取数据并渲染到页面上他们需要触发事件对dom进行操作，是面向事件编程 viewmodel负责监听view和model，让他们之间有双向数据绑定的联系，model中

2020-10-17 16:38:18 472 2

原创快速了解VUEX。为什么要用vuex

VUEX是什么？ vuex是vue框架中的状态机，通俗一点vuex是个专门管理数据的仓库。 VUEX主要有哪些属性？ vuex主要有5个属性,state、getter、action、mutation、module state是什么？ vuex中的state里面存放数据源，state里面存放的数据是响应式的，如果仓库里的数据发生变化，那依赖这个数据的组件也会发生更新。怎么做到的？？？？？？？？？？通过mapState把state映射到组件中的计算属性（computed）中，仓库的数据一变，组件映射的数

2020-10-17 16:00:23 709

原创部署(前后端分离)前端项目

jar包数据库 swagger-ui

2020-10-05 11:19:15 1557

原创 vue项目神器，vue-cli和ElementUI

vue-cli vue-cli是开发vue项目的一个脚手架工具，在模块化开发中，我们可以使用vue-cli快速搭建一个项目，在创建项目过程中还可以集成第三方插件，快速的把项目搭建起来，我们可以针对对应的模块进行开发。全局安装 npm install -g @vue/cli 查看是否安装成功 vue --version 创建项目 vue create my-project 启动项目 npm run serve 在这里我们创建的项目集成了babel,v

2020-09-29 20:18:09 1432

原创 webpack的作用以及配置webpack

webpack是做什么的 webpack是前端静态资源构建工具，用于现在javascript应用程序的静态模块打包工具。在项目中我们可能会用到.less文件和es6文件，我们需要将这些文件转换成html能直接使用的文件，比如less转css , es6转es5 。我们可以先转换文件，再引用到html中，但这样做非常的繁琐，类似的文件数量一多，将会变成非常麻烦的事情。这时，我们可以使用webpack打包工具，将这些文件一次性打包并使用，简化打包的过程。要想使用webpack，我们首先要安装webp

2020-09-28 11:29:32 552

原创 Vue插槽是什么？

插槽在使用组件时，如果我们想在自定义标签中添加内容，我们需要用插槽将内容放到组件的模板中 <my-com>Hello</my-com> <my-com>World</my-com> 普通插槽（默认插槽）没有名字的插槽就是默认插槽 <slot>123</slot> <slot name="default">123</slot> 具名插槽具有名字插槽 <slot

2020-09-25 10:25:36 1627

原创简单了解Vue组件以及组件通信

组件组件实际上就是自定义元素，是高级自定义的html代码元素，是可复用的Vue实例创建组件 let myCom = { data() { return { comMsg: "组件数据" } }, // 模板 template: ` <div> <span>{{comMsg}}</span> <span

2020-09-24 20:05:36 229

原创对比axios，原生ajax，和jquery的ajax

原生ajax <script> let xhr = new XMLHttpRequest(); xhr.open('post', '\http://47.106.244.1:8099/manager/category/findAllCategory') // xhr.setRequestHeader('Content-Type', 'application/json') xhr.setRequestHeader('Content-T

2020-09-24 19:26:25 647

原创用jQuery写后台项目思路

项目介绍该项目是校园资讯管理系统，前后端分离，本文只针对前端进行阐述，前端使用swagger接口与后端交互数据即可，主要实现的功能无非是对数据的增删改查。配置环境部署数据库连接服务器上传jar包到服务器上查看swagger接口文档搭建项目框架项目框架比较繁琐，尚不说明，重点讨论子页面怎么写封装js文件本项目中我们自己写了两个js文件 http.js 这一文件主要是对ajax进行了封装，封装成get方法，postForm还有postJSON方法，在我们需要与后台交互数据时，调用对应的

2020-09-15 20:29:02 818

原创 CSS复习汇总

css css是什么 css的注释是什么怎么引用css（3）什么是css级联，由什么决定有哪些选择器哪些属性可继承，哪些不可以设置表格之间的空间属性是什么设置表格与内容间距的属性是什么表格合并列表格合并行字体有哪些属性（9）列表有哪些属性（4）光标有哪些属性如何设置文本的行高 outline是什么 display分别有什么属性值（4） visibility是什么，opacity是什么写出隐藏css属性，并说明区别 overflow有什么作用盒子模型有哪些，有什么区别背景有哪些

2020-08-22 13:09:47 293

原创 HTML复习汇总

HTML html是什么 html文档怎么写，有哪些部分块级元素有哪些，行内元素有哪些块级元素和行内元素有什么区别空元素和替代元素有哪些标签有哪些核心属性（4）空格的实体是什么大于号的实体是什么小于号的实体是什么对文字加粗的两种方式使文字斜体的两种方式下划线，上标，下标有序列表和无序列表分别是什么锚点怎么使用超链接有哪些属性，有什么作用图片有哪些属性，有什么作用表格中有哪些标签对td设置什么属性可以跨行，跨列 H5新特性 h5有哪些新特性表单 form标签有哪些属

2020-08-22 11:30:30 333

原创 JavaScript复习汇总（上）

JS js是什么 js出现的原因 js三大组成是什么 js有哪些特点（4）如何引用js（2） js如何注释（2） js中有哪些关键字和保留字如何声明和初始化一个对象变量名的命名应有哪些规则（4）有哪几种基本数据类型引用数据类型有哪些堆区和栈区分别存放什么数据 typeOf是什么，有什么用 var 和 let 有什么区别一元运算符和三目运算符怎么使用怎么将其他类型转换为boolean类型怎么将其他类型转换为string类型怎么将其他类型转换为number类型分支语句和循环语句有哪些，怎

2020-08-22 11:05:43 255

原创 html+css复刻NIKE官网静态页面（一）

nike的官网比较简洁，是我喜欢的风格，那么，复刻nike官网要怎么入手呢？ html部分对一个网页进行复刻，我们应该先从结构下手。这是初步的结构的分析，在html中我们可以用div或者section定义这些模块。然后我们在对每一个模块再进行细分。比如最顶上的模块：这一个模块又由这些小模块嵌套构成。对每个模块做好分析规划，给每一个模块取好类名。这样就形成了我们的html结构，css可以用选择器对html的模块进行样式的调整。 css部分把页面的结构分析好以后就可以给每个模块定义布局和样式啦

2020-08-15 17:20:09 4026 7

原创用css制作西游记师徒四人小动画

师徒四人小动画看看效果我们的目标是让师徒四人做出走路的动作，并让背景从左往右移动。让画面看起来是师徒四人向前走的效果。前期准备我们先把背景，还有师徒四人走路的每一帧图片添加到工作区中并给背景和师徒四人对应设置div。 bg-背景 one-唐僧 two-悟空 three-八戒 four-沙僧 <div class="bg"> <div class=" one"></div> <div class=" two">&

2020-08-09 14:56:53 2206 1

原创用css完成语音助手小动画

震惊！用css完成语音助手小动画不要太简单！语音助手动画定位布局添加动画语音助手动画 hello大家好，我是Aaron。想必大家都见过这个页面，在各个平台的语音助手都可以看到类似的动画。那么这个小动画用css怎么实现呢，其实我们只需要考虑最重要的两点，一是用定位布局把我们所看到的页面做出来，第二是利用animation动画来实现。定位布局从图片中我们可以看，动画主要由一个黑色背景还有两个带有边框的圆组成。我们可以利用定位布局实现两个圆在背景框下的水平居中。相对定位：以原先位置进行定位（0px

2020-08-09 11:22:14 1780

weixin_41597939的博客