一、前言

大家对于vue项目，尤其是看到代码的时候，一会有js一会有html标签，直接蒙蔽，本up也是如此，鉴于是完全新手入门，那就从最基础的登录界面开始理解。vue3的前置工程创建，可以查看一下菜鸟教程的：vue3项目创建

二、项目结构

• main.js：整个 Vue 前端应用的启动入口文件。

• App.vue：整个Vue应用的根组件，他是所有页面和组件的最顶层组件，整个前端有也买你结构都是从App.vue开始往下渲染的。可以理解为App.vue是整个前端应用的外壳

• router：集中管理整个项目的页面路由规则（路由：根据浏览器URL的变化，决定页面显示哪个组件）。

  • index.js：告诉 Vue不同的网址应该显示哪个页面。

• views：存放页面的地方

  • xx.vue文件： 对应一个网址页面

• components：可以放通用的小模块供，views使用（也就是说是页面的一部分可以充分使用）

三、main.js

• main.js：整个 Vue 前端应用的启动入口文件。
• 运行逻辑

创建 Vue 应用
      ↓
加载根组件 App.vue
      ↓
安装路由系统
      ↓
挂载到 HTML 页面

• 代码

import { createApp } from 'vue' //从Vue框架中导入createApp，createApp是创建Vue应用的函数
import App from './App.vue' //导入根组件App.vue，App.vue是整个Vue项目的最顶层组件，所有页面都会在它里面显示
import router from './router' //导入项目的路由系统，根据浏览器URL的变化，决定页面显示哪个组件

createApp(App) //创建 Vue 应用，入口组件 = App.vue
    .use(router)//给 Vue 应用添加路由功能
    .mount('#app')//Vue 会把整个应用渲染到这个元素里面，在 index.html 中通常会有：<div id="app">...

四、App.vue

• 标签作用

标签	作用	类比
<script>	写逻辑代码	JavaScript
<template>	写页面逻辑	HTML
<style>	写样式	CSS

• 代码

<!-- setup：Vue3 组件的逻辑入口函数，用来定义数据和方法。-->
<script setup></script>

<template>
<!-- <router-view />：显示当前路由对应的页面组件，就是按照指定的路由规则显示在当前页面 -->
<router-view />
</template>

<!-- scoped：让 CSS 只在当前组件生效，不影响其他组件 -->
<style scoped></style>

五、router/index.js

• 路由规则

路由配置表

/       → LoginView
/home   → HomeView

• 代码

import { createRouter,createWebHistory } from 'vue-router' //从vue-router中导入两个函数，createRouter（创建路由系统）、createWebHisorty（设置浏览器的路由模式）
//这里导入两个页面组件
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'

//路由规则
const routes = [
    {path: '/', component: LoginView},
    {path: '/home', component: HomeView}
]

//创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes
})

//导出 router 对象，目的是让其他文件使用它。
export default router;

• tips

  • createRouter：创建路由管理器
  • createWebHistory：设置网址规则，使用的是 history模式，例如访问/home，这里只需要http://localhost:5173/home就ok，旧版的是需要这样http://localhost:5173/#/home
  • const：声明一个常量变量
  • 相对路径：./表示当前目录，../上级目录

六、views

• 依赖

  导入	作用
  ref	创建响应式变量
  axios	发送 HTTP 请求
  useRouter	获取路由对象
  onMounted	Vue生命周期钩子

## 1. LoginView

• 响应数据：数据改变时，页面会自动更新的数据

• 导出不同：axios是默认导出，所以导入的时候不需要{}，ref是命名到处，所以导入时需加{}

• 代码

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

//创建响应数据
const userName = ref('');
const password = ref('');

//获取路由实例（实例：根据模板创建出来的具体对象）
const router = useRouter();

const login = async () => {
  try {
    const res = await axios.post('http://localhost:8080/user/login', {//向后端发送post请求
      userName: userName.value,
      password: password.value
    });
    
    const token = res.data.data.token//从后端返回的数据中取 token

    localStorage.setItem('token', token);//把 token 保存到浏览器本地存储

    alert('登录成功');//提示登录成功
    
    router.push('/home')//跳转到 /home 页面

  } catch (e) {
    alert('登录失败');
  }
};
</script>

<template>
    <div>
        <h2>登录</h2>
        <!--输入框内容自动同步到userName  -->
        <input v-model="userName" placeholder="用户名">
        <br/>
        <!-- 输入框内容自动同步到password -->
        <input v-model="password" type="password" placeholder="密码">
        <br/>
        <!-- 点击执行login事件 -->
        <button @click="login">登录</button>
    </div>

</template>

• localStorage ：浏览器提供的一种 本地存储机制（Web Storage）
• await：表示异步
• v-model：实现表单输入和变量之间的双向数据绑定。

2. HomeView

• 代码

<script setup>
import axios from 'axios'
import { onMounted  } from 'vue'

onMounted(async() => {//组件加载到页面之后执行
    const token = localStorage.getItem('token')//从浏览器本地存储中读取 token

    const res = await axios.get('http://localhost:8080/user/info', {//向后端发送一个get请求
        headers:{
            Authorization: token//发送给服务器的数据会变成Authorization: token
        }
    })
    console.log(res.data)//在浏览器控制台打印数据
})
</script>

<template>
    <div>
        <h2>首页</h2>
        <p>登录后访问成功</p>
    </div>
</template>

• onMounted：

进入页面
↓
组件加载完成
↓
onMounted触发
↓
发送请求获取用户信息
↓
打印返回数据