全栈基础准备
构建项目
我们创建好我们的项目，前端文件夹为client，后端文件夹为server.
来到前端项目，创建好vue.js架构，引入依赖包，使用less样式进行开发
js
npm i vue@latest
npm i
npm i less -D引入公共样式
在Web开发，特别是对于大型项目或多页面应用和单页面应用来说，我们可以引入公共样式提高开发效率和维护性。
操作：在assets文件夹中新建style.css，将公共样式放进去。
点击查看公共样式： CSS Tools: Reset CSS (meyerweb.com)
自适应字体
rem
为了确保产品页面在各种型号的手机设备上都能展现出最佳的视觉效果，采用rem单位进行开发是一个明智的选择。rem（root em）单位相对于根元素（即<html>元素）的字体大小来定义，这意味着通过调整根元素的字体大小，页面上的所有使用rem单位的尺寸都会相应地缩放，从而有效实现跨设备的适配性。
lib-flexible
lib-flexible是一个用于移动端适配的开源库，由阿里团队的amfe开发，旨在解决移动设备上的屏幕适配问题，使得设计能够完美适应不同尺寸和像素密度的设备。
打开npm | Home (npmjs.com) 搜索lib-flexible,点击你想要的包，通过 npm i lib-flexible 下载。
在main.js中引入：
js
import 'lib-flexible/flexible.js'在main.js引入后即可使用rem,1rem=37.5px
前端: 设计页面，适配路由
登入页面
页面设计稿如下：
html设计框架：
js
<div class="login">
<h1>登录</h1>
<div class="login-wrapper">
<div class="avatar">
<img src="../assets/1.gif" alt="">
</div>
</div>
</div>css设计技巧：
-
- 熟练运用BFC容器
-
- 使用box-shadow让页面变得立体
-
- 清楚对应规则：上右下左，上下左右
margin: 1rem auto 0.77rem (auto)上边距：1rem，右边距:auto，下边距:0.77rem，左边距:auto第四个值不写时自动对应第二个值margin: 1rem auto上边距（top）:1rem,下边距（bottom）:1rem（通过值复制得到）,右边距（right）:auto,左边距（left）:auto。
使用UI组件库------vant组件
Vant 4 - A lightweight, customizable Vue UI library for mobile web apps. (vant-ui.github.io)
UI组件库是一套预先设计和实现的用户界面组件集合，用于构建用户界面。这些组件包含了各种可复用的UI元素，如按钮、表单、导航栏等，开发人员包括我们都可以直接使用这些组件来快速构建用户界面，提高开发效率和一致性。每个公司或开发团队在构建Web应用或软件产品时，往往会倾向于拥有自己的UI组件库。
我们在这里使用有赞公司的UI组件库------------Vant4
- 下载依赖包：
js
npm i vant- 在main.js中引入你需要用到的组件：
js
import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
// 3. 注册你需要的组件
app.use(Button);- 查看你想用的样式和使用方法：
查看是否使用成功：
-
- 使用我们需要的样式进行开发，这里我需要使用form表单帮助我开发一个登入页面
使用后可以对样式做些优化，比如这里的用户名和输入值之间的距离相隔太宽了，我们可以拿到类名进行深度修改
深度修改：
js
:deep(.van-cell__title.van-field__label) {
width: 45px;
}- 查看事件以及使用方法：
通过测试，知道submit中value的作用是: 输出用户输入的输入，其中包括账号和密码
Axios
1. 下载axios
js
npm i axios新建文件夹api进行2次封装，在index.js中引入axios
2. 引入axios
- 设置 Axios 的全局(.defaults)默认配置
- 设置基础URL(
baseURL) - POST 请求的默认内容类型 (
Content-Type)
js
import axios from 'axios';
// 使用baseURL设置基础URL
axios.defaults.baseURL = 'http://localhost:3000';
// 设置响应头，设置后端默认返回数据
axios.defaults.headers.post['Content-Type'] = 'application/json'3 .设置请求拦截和响应拦截
将拦截封装在axios中，使得所有的响应数据都可以进行统一处理
-
请求拦截:请求发送前对请求进行预处理的过程
-
响应拦截：服务器响应后对响应进行后处理的过程
响应拦截
1. 从Vant中引入使用Toast轻提示，方便对错误类型进行判断
2. 过滤后端返回的数据，根据返回的状态码做出判断。
- 状态码检查 ：首先检查HTTP响应的状态码是否不为200。如果不是，则显示一个"服务器异常"的提示，并拒绝（reject）这个Promise，使得调用链中的
catch部分可以捕获到这个错误。 - 逻辑错误检查 ：如果状态码为200，但后端返回的数据中包含一个表示错误的
code，根据前后端约定码'8000'判断后端返回的信息错误，并同样拒绝这个Promise。
js
// 为我们的axios封装判断能力
axios.interceptors.response.use(res => {
if (res.status !== 200) { // 程序错误
showToast('服务器异常');// 轻提示
return Promise.reject(res) // 弹出
} else {
// 接口成功，并返回了数据。判断是请求数据失败还是拿到了空数组
if (res.data.code !== '8000') { // 逻辑性错误
showToast(res.data.msg); // 弹出后端返回的信息
return Promise.reject(res) // 将这个错误弹出
}
return res.data // 返回数据
}
})
// 抛出封装好的axios
export default axios;向后端输出值
- 拿到用户的输入
- 使用
axios.post向后端的 URL 发送数据，我们需要发送的后端地址为 http://localhost:5173/user/login - 使用async/await解决数据请求带来的异步问题
具体步骤如下：
js
import { ref } from 'vue'
// 引入自己封装的axios
import axios from '@/api/index'
// 创建响应式表单输入
const username = ref('')
const password = ref('')
// 使用async/await解决数据请求带来的异步问题
const onSubmit = async (values) => {
// 向后端地址发送请求，为后端接口地址传递值
const res = await axios.post('/user/login', {
//在我们封装的axios中定义baseURL为http:localhost:3000
// 所以我们发送的地址为 http://localhost:5173/user/login，
// 将值给后端，后端校验前端输入的值，根据值给出数据
username: values.username,
password: values.password
})
// 到这一步，看不到后端的数据就无法再向后进行
}小计
本篇进行了全栈项目开发的前期准备工作和前端第一个登入页面Login.vue的设计,为axios封装了对后端返回数据的判断能力，并且使用axios对后端地址发送了请求。
本期要点：less , rem/lib-flexible , UI组件库/vant ， Axios , 响应拦截 ，async/await