Table of contents
1. Basic understanding of Axios
2. Refine the configuration of each interface
6. Parent selector identifier &
Preface
1. Unified naming of each page of the packaging project
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')Note: /* webpackChunkName: "about" */ is not a comment. Its function is to unify the beginning of the file naming when packaging the project.
2. The web page address sometimes disappears. #
const router = new VueRouter({
mode: "history",//控制网址是否有#，设置了就没有#
base: process.env.BASE_URL,
routes,
});1. Basic understanding of Axios
1 Introduction
Axios is a promise-based network request library that works in node.js and browsers
It is isomorphic (isomorphic), that is, the same set of code can run in the browser and node.js
On the server side it uses the native node.js http module, and on the client side (browser) it uses XMLHttpRequests
2. Related documents
(1) Axios official documentation
Getting started | Axios Chinese documentation | Axios Chinese website
https://www.axios-http.cn/docs/intro (2) Modern JavaScript Tutorial: Promise
Promisehttps://zh.javascript.info/promise-basics
3. Basic configuration
(1) Installation
npm install axios(2) Introduction: introduced in the main.js file
// 使用CommonJS规范
const axios = require('axios').default;
// 使用Es6规范
import axios from 'axios'4. Basic quick use
(1) No request parameters
/* GET请求 */
axios.get('url',{})
.then((res)=>{//成功
console.log(res)
})
.catch((err)=>{
console.log(err)
})
/* POST请求 */
axios.post("url", {
username: "xxxxxx",
password: "xxxxxx",
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});(2) With request parameters
Note: Use params for GET request parameters; use data for POST request parameters.
/* GET请求 */
axios({
method:"GET",
url:'',
params:{
key:'',
},
})
.then((res)=>{
console.log(res)
})
.catch((err) => {
console.log(err);
});
/* POST请求 */
axios({
method:"POST",
url:'',
data:{
key:'',
},
headers:{
'content-type':'application/x-www-form-urlencoded',
},
})
.then((res)=>{
console.log(res)
})
.catch((err) => {
console.log(err);
});2. Axios packaging
1. Public configuration file
Under the src folder=》Create request folder=》request.js file
/* request.js */
// 引入axios
import axios from "axios";
// 创建实例，并带上默认配置
const instance = axios.create({
baseURL: "",
// timeout 指定请求超时的毫秒数
// 如果请求时间超过 timeout 的值，则请求会被中断
timeout: 1000, // 默认值是 0 (永不超时)
headers: {'X-Custom-Header': 'f3oobar'} // 默认请求头
});
// 导出实例
export default instance;2. Refine the configuration of each interface
Under the src folder = "New api folder =" New js files, such as about.js, home.js, index.js...
/* /api/index.js */
// 引入axios实例
import instance from '@/request/request.js'
// 获取用户信息（GET请求）
export function userInfo(params){
return instace({
url:"/user",
method:"GET",
params//增强写法
})
}
// 获取用户信息（POST请求）
export function userInfo(data){
return instace({
url:"/user",
method:"POST",
data,
headers:{
'content-type':'application/x-www-form-urlencoded'
}
})
}3. Use and send requests
Go to the .vue page file and introduce the required interface functions as needed.
<template>
<div>
欢迎登录系统。
</div>
</template>
<script>
// 引入接口函数
import { userInfo } form '@/api/index.js'
export default{
created(){
this.getUserInfo()
},
method:{
getUserInfo(){
userInfo({ID:12345})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.error(err)
})
}
}
}
</script>3. SASS
1 Introduction
Sass is an auxiliary tool for enhancing CSS
It adds advanced functions such as variables, nested rules, mixins, and inline imports based on CSS syntax.
These extensions make CSS more powerful and elegant, and develop projects more efficiently
2. Related documents
3. Use the prelude
(1) Quick installation
When creating Vue scaffolding, check [CSS Pre-processors]=>[Sass/SCSS (with dart-sass)]
(2) Turn on sass
In<style> tag, add attribute configuration:lang="scss"
<style lang="scss">4. Use variables
(1) Declare variables
Use $ to declare variables and : to assign values.
$highlight-color: #F90;(2) Variable reference
Use $ to directly reference the variable, and Sass will automatically parse it.
border: 1px solod $highlight-color;(3) Code examples
<template>
<div>
<h1>主页</h1>
<p>1</p>
<p>1</p>
</div>
</template>
<style lang="scss" scoped>
$font-color: #F90;
$bg: #4662D9;
h1 {
color: $font-color;
}
p {
color: $font-color;
}
</style>5. Nested rules
In Sass, you can nest rule blocks within rule blocks like Russian dolls.The nesting relationship is the parent-child relationship
sassThese nested rules will be processed properly when outputtingcss to avoid repeated writing
Note: This nested relationship is not a strict direct parent-child relationship, but only represents an inclusion relationship.
<template>
<div>
<div class="card">
<div class="header">头部</div>
<div class="content">
内容
<div class="header">
内容的头部
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
// 变量
$font-color: #F90;
$bg: #4662D9;
// 嵌套
.card {
font-weight: bold;
width: 600px;
height: 300px;
background-color: $font-color ;
.header {
height: 40px;
background-color: $bg;
}
.content {
height: 300px;
background-color: yellow;
.header {
background-color: aqua;
}
}
}
</style>6. Parent selector identifier &
The & symbol is used in the selectors of each layer to identify the current selector itself, making it convenient to write css attributes such as pseudo-classes directly in the cascade.
<style lang="scss" scoped>
.header {
background-color: aqua;
&:hover {
background-color: red;
}
}
</style>