关键词：
vueAdmin前端学习笔记
1.安装VUE项目
第一步：vue-ui
# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install --g vue-cli
# 打开vue的可视化管理工具界面
vue ui
第二步：创建
第三步：详情
第四步：选择手动
第五步：配置
第六步：点击创建项目
第七步：启动项目
第八步：vsCode启动项目
npm run serve
2.安装element-ui
npm install element-ui --save
然后我们打开项目src目录下的main.js，引入element-ui依赖。
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)
这样我们就可以愉快得在官网上选择组件复制代码到我们项目中直接使用啦。
3.删除不必要的页面
3.1删除/viwes/Home.vue
3.2删除App.vue
4.安装axios、qs、mockjs
-
axios：一个基于 promise 的 HTTP 库，类ajax
-
qs：查询参数序列化和解析库
-
mockjs：为我们生成随机数据的工具库
4.1安装axios
npm install axios --save
# 然后同样我们在main.js中全局引入axios
import axios from 'axios'
Vue.prototype.$axios = axios //全局使用
4.2安装qs
npm install qs --save
4.3安装mockjs
npm install mockjs --save-dev
5.页面路由
5.1删除页面
5.2创建页面
1.创建Login.vue
<template>
<div>登录页面</div>
</template>
<script>
export default
name: "Login"
</script>
<style scoped>
</style>
1.创建Home.vue
<template>
<div>测试主页 </div>
</template>
<script>
export default
name: 'Home',
</script>
<style>
</style>
5.3页面router/index.js
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
path: '/',
name: 'Home',
component: Home
,
path: '/login',
name: 'Login',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') 方式一
component: Login //方式二
]
6.登录页面
6.1页面展示
6.2在src/App.vue调整全局样式
我们先调整一下全局的样式
将原页面的style便签删除，更换为一下的style便签内容，下面是调整后的整个页面
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
html, body, #app
font-family: 'Helvetica Neue', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;
height: 100%;
padding: 0;
margin: 0;
font-size: 15px;
</style>
6.3src/views/Login.vue
一下页面是写好后的页面，还未发请求前
<template>
<el-row style="height: 100%">
<el-col :xl="6" :lg="7">
<!-- 标题 -->
<h2>欢迎来到VueAdmin管理界面</h2>
<!-- 使用 el-image引入图片 -->
<el-image
:src="require('@/assets/微信图片_20210919105336.jpg')"
style="height: 180px; width: 180px"
></el-image>
<p>公众号：MarkerHup</p>
<p>扫描二维码，回复</p>
</el-col>
<el-col :span="1">
<!-- 分割线 -->
<el-divider direction="vertical"></el-divider>
</el-col>
<el-col :xl="6" :lg="7">
<!--
:model="loginForm" 绑定的表单
:rules="rules" 校验规则
ref="loginForm" 注册实例，可以通过 this.$refs[loginForm]获取
-->
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm"
label-width="80px"
class="demo-loginForm"
>
<el-form-item label="用户名" prop="userName" style="width: 380px">
<el-input v-model="loginForm.userName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="passWord" style="width: 380px">
<el-input v-model="loginForm.passWord"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code" style="width: 380px">
<el-input
v-model="loginForm.code"
style="width: 170px; float: left"
></el-input>
<el-image src="" class="captchaImg"></el-image>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')"
>登录
</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template>
<script>
export default
name: "Login",
data()
return
// 表单
loginForm:
userName: "",
passWord: "",
code: "",
,
// 校验
rules:
userName: [
required: true, message: "请输入用户名", trigger: "blur",
min: 3,
max: 50,
message: "长度在 3 到 50 个字符",
trigger: "blur",
,
],
passWord: [
required: true, message: "请输入密码", trigger: "change",
],
code: [required: true, message: "请输入验证码", trigger: "change"],
,
;
,
methods:
submitForm(formName)
this.$refs[formName].validate((valid) =>
if (valid)
alert("submit!");
else
console.log("error submit!!");
return false;
);
,
resetForm(formName)
this.$refs[formName].resetFields();
,
,
;
</script>
<style scoped>
/**
* el-row 的设置
* background-color: #fafafa; 设置背景颜色
* height: 100%; 设置高度，覆盖所有的高度
* display: flex; 横向居中
* align-items: center; 上下居中
* text-align: center; 文字居中
*/
.el-row
background-color: #fafafa;
height: 100%;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
/*.el-row */
/* height: 100%;*/
/* background-color: #fafafa; !*设置背景颜色*!*/
/* display: flex;*/
/* justify-content: center;*/
/* align-items: center;*/
/* text-align: center;*/
/**/
/* 分割线的高度 */
.el-divider
height: 200px;
.captchaImg
/*靠左边*/
float: left;
/*验证码偏移8px*/
margin-left: 8px;
/*圆角*/
border-radius: 4px;
</style>
6.4获取验证码
现在没有后端，用mockjs模拟生成验证码
6.4.1安装mockjs
npm install mockjs --save-dev
6.4.2创建mock.js
// 引入mockjsconst
const Mock = require('mockjs')
// 获取 mock.Random 对象
// 参考：https://github.com/nuysoft/Mock/wiki/Mock.Random
const Random = Mock.Random
let Result =
code: 200,
msg: '操作成功',
data: null
Mock.mock('/captcha','get',()=>
Result.data =
UUID: Random.string(32), // 获取一个32位的随机字符串,
captchaImg: Random.dataImage('120x40','p7n5w') //生成验证码为11111的base64图片编码
return Result
)
6.4.3注册
// 在src/main,js
require("./mock.js")
6.4.4login页面(重要)
- 在methods添加请求验证码的方法
// 获取验证码
getCaptCha()
this.$axios.get('/captcha').then(res =>
debugger;
this.loginForm.UUID = res.data.data.token;
this.captchaImg = res.data.data.captchaImg;
)
- 新增created在进入页面时加载
created()
this.getCaptCha();
,
- 新增参数
1.在loginForm里添加UUID，
2.在data里面添加captchaImg，
3.验证码展示
<el-image :src="captchaImg" class="captchaImg"></el-image>
6.4.5页面展示
6.5登录
6.5.1使用mockjs模拟登录
在mock.js添加
Mock.mock('/login','post',()=> return Result)
6.5.2将token存到localStorage
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store(
state:
token: ''
,
mutations:
SET_TOKEN: (state, token) =>
state.token = token;
localStorage.setItem("token", token)
,
actions: ,
modules:
)
6.5.3发送login请求
this.$axios.post('/login', this.loginForm).then(res =>
const jwt = res.headers['authorization'];
this.$store.commit("SET_TOKEN", jwt);
this.$router.push("/index");
)
6.5.4测试
7.定义全局axios拦截器
7.1在src/axios.js
import axios from "axios";import router from "@/router";import Element from "element-ui"axios.defaults.daseURL = "http://localhost:8081"const request = axios.create( timeout: 5000, //超时时间 headers: 'Content-Type': 'application/json; charset=utf-8' // 返回的JSON类型数据 )// 请求的拦截，查看是否有tokenrequest.interceptors.request.use(config => config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token return config)// 返回的结果request.interceptors.response.use(response => let res = response.data; console.log("response") console.log(res) if (res.code === 200) return response else Element.Message.error(res.msg ? res.msg : '系统异常！', duration: 3 * 1000) return Promise.reject(response.data.msg) , error => // 异常的情况 console.log(error) if (error.response.data) error.message = error.response.data.msg // 401没有权限 if (error.response.status === 401) router.push("/login") Element.Message.error(error.message, duration: 3 * 1000) return Promise.reject(error))export default request
7.2在main.js全局引入
7.3测试
1.在mock.js中的login方法添加错误信息
2.页面测试
8.index页面编写
8.1页面
在src/views/创建index.vue
<template>
<el-container>
<!-- 侧边栏-->
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<router-link to="/index">
<el-menu-item index="Index">
<template slot="title"><i class="el-icon-s-home"></i> <span slot="title">首页</span></template>
</el-menu-item>
</router-link>
<el-submenu index="1">
<template slot="title"><i class="el-icon-s-operation"></i> <span>系统管理</span></template>
<el-menu-item index="1-1">
<template slot="title"><i class="el-icon-s-custom"></i> <span slot="title">用户管理</span></template>
</el-menu-item>
<el-menu-item index="1-2">
<template slot="title"><i class="el-icon-rank"></i> <span slot="title">角色管理</span></template>
</el-menu-item>
<el-menu-item index="1-3">
<template slot="title"><i class="el-icon-menu"></i> <span slot="title">菜单管理</span></template>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-s-tools"></i> <span>系统工具</span></template>
<el-menu-item index="2-2">
<template slot="title"><i class="el-icon-s-order"></i> <span slot="title">数字字典</span></template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<!-- 头部信息-->
<el-header>
<strong>VueAdmin后台管理系统学习</strong>
<div class="header-avatar">
<!-- 头像-->
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
<!-- 下拉框-->
<el-dropdown>
<span class="el-dropdown-link">
Admin<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 最后面的文字跳转-->
<el-link href="https://shimowendang.com/docs/pxwyJHgqcWjWkTKX/read" target="_blank">网站</el-link>
<el-link href="https://shimowendang.com/docs/pxwyJHgqcWjWkTKX/read" target="_blank">学习</el-link>
</div>
</el-header>
<!-- 主体信息-->
<el-main>主体信息</el-main>
</el-container>
</el-container>
</template>
<script>
export default
name: 'Index',
</script>
<style>
.el-container
padding: 0;
margin: 0;
height: 100%;
.el-header
background-color: cadetblue;
color: #333;
text-align: center;
line-height: 60px;
.el-aside
background-color: #D3DCE6;
color: #333;
line-height: 200px;
.el-main
color: #333;
text-align: center;
line-height: 160px;
.header-avatar
float: right;
width: 210px;
display: flex;
justify-content: space-around;
align-items: center;
.el-dropdown-link
cursor: pointer;
color: #409EFF;
.el-menu-vertical-demo
height: 100%;
</style>
8.2效果图
9.抽取代码
将index中的左侧导航栏代码和头部代码抽取为公共的
9.1抽取后的导航栏
在views新建inc/SideMenu
<template>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<router-link to="/index">
<el-menu-item index="Index">
<template slot="title"><i class="el-icon-s-home"></i> <span slot="title">首页</span></template>
</el-menu-item>
</router-link>
<el-submenu index="1">
<template slot="title"><i class="el-icon-s-operation"></i> <span>系统管理</span></template>
<el-menu-item index="1-1">
<template slot="title"><i class="el-icon-s-custom"></i> <span slot="title">用户管理</span></template>
</el-menu-item>
<el-menu-item index="1-2">
<template slot="title"><i class="el-icon-rank"></i> <span slot="title">角色管理</span></template>
</el-menu-item>
<el-menu-item index="1-3">
<template slot="title"><i class="el-icon-menu"></i> <span slot="title">菜单管理</span></template>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-s-tools"></i> <span>系统工具</span></template>
<el-menu-item index="2-2">
<template slot="title"><i class="el-icon-s-order"></i> <span slot="title">数字字典</span></template>
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default
name: 'SideMenu',
</script>
<style>
.el-menu-vertical-demo
height: 100%;
</style>
9.2抽取后的头部
<template>
<el-header>
<strong>VueAdmin后台管理系统学习</strong>
<div class="header-avatar">
<!-- 头像-->
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
<!-- 下拉框-->
<el-dropdown>
<span class="el-dropdown-link">
Admin<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 最后面的文字跳转-->
<el-link href="https://shimowendang.com/docs/pxwyJHgqcWjWkTKX/read" target="_blank">网站</el-link>
<el-link href="https://shimowendang.com/docs/pxwyJHgqcWjWkTKX/read" target="_blank">学习</el-link>
</div>
</el-header>
</template>
<script>
export default
name: 'SideHeader',
</script>
<style>
.header-avatar
float: right;
width: 210px;
display: flex;
justify-content: space-around;
align-items: center;
.el-dropdown-link
cursor: pointer;
color: #409EFF;
.el-container
padding: 0;
margin: 0;
height: 100%;
.el-header
background-color: cadetblue;
color: #333;
text-align: center;
line-height: 60px;
.el-aside
background-color: #D3DCE6;
color: #333;
line-height: 200px;
</style>
9.3抽取后的Home
<!--<template>-->
<!-- <div>测试主页 </div>-->
<!--</template>-->
<!--<script> -->
<!--export default -->
<!-- name: 'Home',-->
<!-- -->
<!---->
<!--</script>-->
<!--<style>-->
<!--</style>-->
<template>
<el-container>
<!-- 侧边栏-->
<el-aside width="200px">
<SideMenu></SideMenu>
</el-aside>
<el-container>
<!-- 头部信息-->
<el-header>
<SideHeader></SideHeader>
</el-header>
<!-- 主体信息-->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import SideMenu from "@/views/inc/SideMenu";
import SideHeader from "@/views/inc/SideHeader";
export default
name: 'Home',
components: SideMenu, SideHeader,
</script>
<style>
.el-container
padding: 0;
margin: 0;
height: 100%;
.el-header
background-color: cadetblue;
color: #333;
text-align: center;
line-height: 60px;
.el-aside
background-color: #D3DCE6;
color: #333;
line-height: 200px;
.el-main
color: #333;
text-align: center;
line-height: 160px;
.header-avatar
float: right;
width: 210px;
display: flex;
justify-content: space-around;
align-items: center;
.el-dropdown-link
cursor: pointer;
color: #409EFF;
</style>
9.4抽取后的index
<template>
<div>测试主页 </div>
</template>
<script>
export default
name: 'Index',
</script>
<style>
</style>
9.5抽取的router.js
将index路由放到children中
9.5抽取后的页面
10.创建页面
10.1在views新建system/User.vue
<template>
<div>用户测试</div>
</template>
<script>
export default
name: 'User',
</script>
<style>
</style>
10.2在views新建system/Role.vue
<template>
<div>角色测试</div>
</template>
<script>
export default
name: 'Role',
</script>
<style>
</style>
10.3在views新建system/Menuvue
<template>
<div>菜单测试</div>
</template>
<script>
export default
name: 'Menu',
</script>
<style>
</style>
10.4在router.js添加
以下是代码router.js代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Index from '@/views/index'
import User from "@/views/system/User";
import Role from "@/views/system/Role";
import Menu from "@/views/system/Menu";
Vue.use(VueRouter)
const routes = [
path: '/',
name: 'Home',
component: Home,
children: [
path: '/index',
name: 'Index',
component: Index
,
path: '/users',
name: 'SysUser',
component: User
,
path: '/roles',
name: 'SysRole',
component: Role
,
path: '/menus',
name: 'SysMenu',
component: Menu
,
]
,
path: '/login',
name: 'Login',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') 方式一
component: Login //方式二
,
]
const router = new VueRouter(
mode: 'history',
base: process.env.BASE_URL,
routes
)
export default router
10.4测试
分别访问：看页面的变化
http://localhost:8080/menus
http://localhost:8080/roles
http://localhost:8080/users
11.导航栏绑定页面
完成后点击页面测试看是否发生变化
<router-link to="/users">
</router-link>
12修改头像和用户名
在inc/SideHeader中修改头像和用户名从后端获取
13.个人中心
13.1在views/system/新建UserCenter.vue
<template>
<div style="text-align: center;"><h2>你好！ userInfo.username 同学</h2>
<el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px">
<el-form-item label="旧密码" prop="currentPass">
<el-input type="password" v-model="passForm.currentPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="password">
<el-input type="password" v-model="passForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('passForm')">提交</el-button>
<el-button @click="resetForm('passForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default
name: "Login", data()
var validatePass = (rule, value, callback) =>
if (value === '')
callback(new Error('请再次输入密码'));
else if (value !== this.passForm.password)
callback(new Error('两次输入密码不一致!'));
else
callback();
;
return
userInfo: ,
passForm: password: '111111', checkPass: '111111', currentPass: '111111',
rules:
password: [required: true, message: '请输入新密码', trigger: 'blur',
min: 6,
max: 12,
message: '长度在 6 到 12 个字符',
trigger: 'blur'
],
checkPass: [required: true, validator: validatePass, trigger: 'blur'],
currentPass: [required: true, message: '请输入当前密码', trigger: 'blur',]
, created()
this.getUserInfo()
, methods:
getUserInfo()
this.$axios.get("/sys/userInfo").then(res =>
this.userInfo = res.data.data;
)
, submitForm(formName)
this.$refs[formName].validate((valid) =>
if (valid)
const _this = this
this.$axios.post('/sys/user/updataPass', this.passForm).then(res =>
_this.$alert(res.data.msg, '提示',
confirmButtonText: '确定', callback: action =>
this.$refs[formName].resetFields();
);
)
else
console.log('error submit!!');
return false;
);
, resetForm(formName)
this.$refs[formName].resetFields();
</script>
<style scoped>
.el-form
width: 420px;
margin: 50px auto;
</style>
13.2在router.js添加
path: '/userCenter',
name: 'UserCenter',
component: ()=>import("@/views/system/UserCenter")
,
13.3修改SideHeader.vue
删除所有页面的 line-height: 160px;
13.4测试页面
14退出
- 在SideHeader.vue给退出添加点击按钮
<!-- 在el-dropdown-item标签里， @click不可以用，要使用@click.native-->
<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
- 在SideHeader.vue的methods编写点击退出方法
logout()
this.$axios.post("/logout").then(res =>
localStorage.clear();
sessionStorage.clear();
this.$store.commit("resetState");
this.$router.push("/login")
)
,
- 在store/index.js添加删除的方法
- 在mock.js模拟退出请求
Mock.mock('/logout','post',()=> return Result)
- 测试
点击页面退出看效果
15将导航改为动态获取(可忽略)
可以忽略，直接过16
先用mock.js模拟从服务器返回数据
15.1主要修改
15.2修改后SideMenu.vue的页面
<template>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<router-link to="/index">
<el-menu-item index="Index">
<template slot="title"><i :class="el-icon-s-home"></i> <span slot="title">首页</span></template>
</el-menu-item>
</router-link>
<el-submenu :index=menu.name
v-for="menu in menuList">
<template slot="title">
<i :class="menu.icon"></i>
<span> menu.title </span>
</template>
<router-link :to="item.path" v-for="item in menu.children">
<el-menu-item :index="item.name">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title"> item.title </span>
</template>
</el-menu-item>
</router-link>
</el-submenu>
</el-menu>
</template>
<script>
export default
name: 'SideMenu',
data()
return
menuList: [],
,
created()
this.getMenuList();
,
methods:
getMenuList()
this.$axios.get("/sys/menuList").then(res =>
this.menuList = res.data.data;
)
</script>
<style>
.el-menu-vertical-demo
height: 100%;
.a
text-decoration: none;
</style>
15.3mock.js
Mock.mock('/sys/menuList', 'get', () =>
Result.data = [
查看详情
前端学习笔记-07一些总结(代码片段)
本文目录前端的概念前端的学习思路软件开发架构浏览器访问网址的流程HTTP协议四大特性请求数据格式响应数据格式响应状态码请求方式url:统一资源定位符(即网址)标签的分类1head内常用标签body内常用标签基本标签标签的分类2... 查看详情
学习笔记—前端基础之构造函数与类(代码片段)
日常的学习笔记，包括ES6、Promise、Node.js、Webpack、http原理、Vue全家桶，后续可能还会继续更新Typescript、Vue3和常见的面试题等等。构造函数用new关键字来调用的函数，称为构造函数。构造函数中一般有两个属性，一个是原型上的... 查看详情
学习笔记—前端基础之es6的数组(代码片段)
日常的学习笔记，包括ES6、Promise、Node.js、Webpack、http原理、Vue全家桶，后续可能还会继续更新Typescript、Vue3和常见的面试题等等。reduceletr=[1,2,3,4,5].reduce((total,num)=>returntotal+num)console.log(r);reduce()方法接收一个函数作为累加器，... 查看详情
前端学习笔记typescript快速上手(代码片段)
视频：https://www.bilibili.com/video/BV1784y1c7V9内容概要强类型与弱类型静态类型与动态类型JavaScript自有类型系统的问题Flow静态类型检查方案TypeScript语言规范与基本应用1、强类型与弱类型（类型安全）强类型语言中不允许... 查看详情
前端学习笔记typescript快速上手(代码片段)
视频：https://www.bilibili.com/video/BV1784y1c7V9内容概要强类型与弱类型静态类型与动态类型JavaScript自有类型系统的问题Flow静态类型检查方案TypeScript语言规范与基本应用1、强类型与弱类型（类型安全）强类型语言中不允许... 查看详情
springboot学习笔记——thymeleaf(代码片段)
...置原理SpringBoot学习笔记——Web开发探究Thymeleaf模板引擎前端交给我们的页面，是html页面。如 查看详情
详细解读css渐变用法——web前端系列学习笔记(代码片段)
文章目录线性渐变属性解析实例代码效果图径向渐变属性解析示例代码效果图多学一招：重复渐变线性渐变属性解析通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是[left,right,top,bottom,center,topr... 查看详情
学习笔记|html基本结构和基本标签——前端学习第一步！(代码片段)
HTMLHTML全称“HyperTextMarkupLanguage（超文本标记语言）”，是网页的标准语言。但是它并不是一门编程语言，而是一门描述性的标记语言。基本语法<标签符号>内容</标签符号>HTML语言中，标签符一般是成... 查看详情
前端综合学习笔记---变量类型原型链作用域和闭包(代码片段)
变量类型 JavaScript是一种弱类型脚本语言，所谓弱类型指的是定义变量时，不需要什么类型，在程序运行过程中会自动判断类型。ECMAScript中定义了6种原始类型：BooleanStringNumberNullUndefinedSymbol（ES6新定义）注意：原始类型不包... 查看详情
css过渡属性transitions详细解读——web前端系列学习笔记(代码片段)
文章目录transitionteansition-property属性名称transtion-duration花费时间transition–timing-function时间曲线transition-delay等待时间样例代码效果图transitiontransition是一个复合属性，由4个属性构成，如下表所示。teansition-property属性名称tra... 查看详情
vite学习笔记(代码片段)
一、认识ViteWebpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具：比如rollup、parcel、gulp、vite等等什么是vite呢？官方的定位：下一代前端开发与构建工具；如何定义下一代... 查看详情
入门javascript？看懂这篇文章就够了！——web前端系列学习笔记(代码片段)
文章目录JavaScript简介什么是JavaScript？JavaScript的构成JavaScript特点JavaScript基础知识JavaScript的引入方式1.将JS代码嵌入在元素"事件"中2.内嵌式3.外链式JavaScript数据类型JavaScript变量JavaScript函数JavaScript对象JavaScript事件处理Ja... 查看详情
前端综合学习笔记---异步es6/7modulepromise同步vs异步(代码片段)
同步vs异步先看下面的demo，根据程序阅读起来表达的意思，应该是先打印100，1秒钟之后打印200，最后打印300。但是实际运行根本不是那么回事console.log(100)setTimeout(function()console.log(200),1000)console.log(300)再对比以下程序。先打印100... 查看详情
详解css阴影用法——web前端系列学习笔记(代码片段)
3.CSS阴影和渐变盒阴影对象选择器box-shadow:投影方式||X轴偏移量||Y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色投影方式：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“ins... 查看详情
3.1前端学习笔记之xml与htmljavascriptjqueryajaxjson的区别(代码片段)
文章目录一、XML与HTML前言简介XML与HTML的区别最重要的区别（自我认为）二、官网的英文解释：三、JavaScript四、jQuery五、Ajax六、JSON七、总结一、XML与HTML前言为什么我会突然学XML呢？我在学习用JSP写Web后台的时候&... 查看详情
react-router学习笔记(代码片段)
前端路由路由这个概念最早出现在后端，通过⽤户请求的url导航到具体的html⻚⾯。现在的前端路由不同于传统路由，它不需要服务器解析，⽽是可以通过hash函数或者historyAPI来实现。在前端开发中，可以使⽤路由... 查看详情
详细解读css链接属性——web前端系列学习笔记(代码片段)
在实际开发中，网页中的链接有四种状态，具体如下所示：a:link：超级链接的初始状态。a:hover：把鼠标放上去时悬停的状态。a:active：是鼠标点击时。a:visited：是访问过后的状态。这四种状态的排序有... 查看详情