vue_05axios - 技术栈

介绍

Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中，用于发送 HTTP 请求。它提供了简洁的 API，支持拦截请求和响应、取消请求、自动转换 JSON 数据等功能。

安装

复制代码

yarn add axios

基本用法

get请求

js 复制代码

import axios from 'axios';

// 发送 GET 请求
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

post请求

js 复制代码

import axios from 'axios';

// 发送 POST 请求
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1,
  })
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

登录示例

数据库操作

创建数据库

创建表

sql 复制代码

create table tb_stu_info 
(
	stuId int primary key auto_increment,
	stuNo varchar(10),
	stuName varchar(50),
	stuPwd varchar(50),
	stuSex int ,
	stuEmail varchar(100),
	headImg varchar(100)
);

插入一条数据

sql 复制代码

insert into tb_stu_info(stuNo,stuName,stuPwd,stuSex,headImg) values('1001','张三',md5('123456'),1,'images/1.jpg');
insert into tb_stu_info(stuNo,stuName,stuPwd,stuSex,headImg) values('1002','小红',md5('123456'),2,'images/2.jpg');

后端

创建springboot项目

修改pom.xml中的mysql驱动

把以下内容

properties 复制代码

<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>

替换为：

properties 复制代码

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.49</version>
</dependency>

点击右上角的

（加载图标），自动加载引入的依赖

设置目录结构

把图片复制到resources目录下的static目录中

在application.properties文件中进行配置

properties 复制代码

spring.application.name=school
#配置数据源
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/school?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=

#配置服务器
server.port=8088
server.servlet.context-path=/school

#配置mybatis映射文件的位置
mybatis.mapper-locations=classpath:mappers/*.xml

创建返回数据的类

在utils目录下创建ResultBean类，用于封装向客户端返回的数据

java 复制代码

package com.qz.school.utils;

public class ResultBean {

    private int code;
    private String msg;
    private Object data;

    public int getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }

    public Object getData() {
        return data;
    }

    public static ResultBean getInstance(){
        return new ResultBean();
    }
    public ResultBean success(){
        this.code=200;
        this.msg="success";
        return this;
    }
    public ResultBean success(String msg){
        this.code=200;
        this.msg=msg;
        return this;
    }
    public ResultBean fail(){
        this.code=500;
        this.msg="fail";
        return this;
    }
    public  ResultBean fail(int code,String msg){
        this.code=code;
        this.msg=msg;
        return this;
    }
    public  ResultBean fail(String msg){
        this.code=500;
        this.msg=msg;
        return this;
    }
    public ResultBean setData(Object data){
        this.data=data;
        return this;
    }
}

创建操作数据库的类

在mapper目录下创建StuInfoMapper接口，编写按照用户名和密码查询的方法，返回Map集合

java 复制代码

package com.qz.school.mapper;

import org.apache.ibatis.annotations.Mapper;

import java.util.Map;

@Mapper
public interface StuInfoMapper {
    
    Map<String,String> login(Map<String,String> map);
}

生成该接口对应的映射文件

生成的文件存放在sources目录下的mappers文件夹中，使用mybatisx插件自动生成

点击install后，自动安装插件，需要重新启动工具

选择接口名称，在弹出的提示框中点击moreactions

出现如下窗口

选择生成映射文件，需要指定映射文件存放的位置

点击ok后自动生成xml文件，然后回到StuInfoMapper接口，选择方法名

在映射文件中自动添加以下内容

编写sql语句，完成用户登录查询

xml 复制代码

    <select id="login" resultType="java.util.Map" parameterType="map">
        select * from tb_stu_info 
        where stuNo=#{stuNo} and stuPwd=md5(#{stuPwd})
    </select>

编写业务逻辑

在service目录下创建StuInfoService类

java 复制代码

package com.qz.school.service;

import com.qz.school.mapper.StuInfoMapper;
import com.qz.school.utils.ResultBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Map;

@Service
public class StuInfoService {
    @Autowired
    private StuInfoMapper stuInfoMapper;

    public ResultBean doLogin(Map<String,String> param){
        Map<String,String> rst=stuInfoMapper.login(param);
        if(rst!=null){
            return ResultBean.getInstance().success().setData(rst);
        }else{
            return ResultBean.getInstance().fail("账号或密码有误！");
        }
    }
}

编写控制器类

在controller目录中创建StuInfoController

java 复制代码

package com.qz.school.controller;

import com.qz.school.service.StuInfoService;
import com.qz.school.utils.ResultBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@CrossOrigin//允许跨域访问
@RestController
@RequestMapping("/stu")
public class StuInfoContrller {
    @Autowired
    private StuInfoService stuInfoService;
    @RequestMapping("/login")
    public ResultBean login(@RequestBody Map<String, String> map) {
        return stuInfoService.doLogin(map);
    }
}

前端

创建前端项目schoolhtml

使用cd shcoolhtml命令进入项目目录

添加需要的第三方资源

添加路由

执行命命令

yarn add vue-router

在src目录中创建router目录，在其中创建index.ts文件

添加路由配置的内容

js 复制代码

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes:RouteRecordRaw[]=[];
const router=createRouter({
    history:createWebHistory(),
    routes
})

export default router;

在main.ts文件配置路由

js 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

添加element-plus

执行命令

yarn add element-plus

在main.ts文件中配置使用element-plus

js 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

import Elementplus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
    .use(router)
    .use(Elementplus)
    .mount('#app')

添加axios

执行命令

yarn add axios

编译项目

复制代码

yarn

修改项目内容

修改App.vue页面

vue 复制代码

<<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped>

</style>

修改style.css文件

css 复制代码

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body,#app{
  width: 100%;
  height: 100%;
}

编写登录页面

在components目录中创建LoginVue.vue文件

vue 复制代码

<template>
  <div>
        <el-form label-width="80px">
            <el-form-item label="账号:">
                <el-input v-model="stu.stuNo"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
                <el-input type="password" v-model="stu.stuPwd"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="doLogin">登录</el-button>
            </el-form-item>
        </el-form>
  </div>
</template>
<script setup lang="ts">
import {reactive} from 'vue';
import axios from 'axios';
let stu=reactive({
    stuNo:'',
    stuPwd:''
})
function doLogin()
{
    axios.post("http://localhost:8088/school/stu/login",stu)
    .then(rst=>{
        console.log(rst.data);     
    }).catch(err=>{
        console.log(err);
        
    });
}
</script>
<style scoped>

</style>

配置路由

js 复制代码

import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
import LoginVue from "../components/LoginVue.vue";

const routes:RouteRecordRaw[]=[
    {
        path:'/',
        redirect:'/login'
    },
    {
        path:'/login',
        component:LoginVue
    }
];
const router=createRouter({
    history:createWebHistory(),
    routes
})

export default router;

创建MainVue页面

在components目录中创建MainVue.vue文件

用户登录成功后进入到MainVue.vue页面

vue 复制代码

<template>
  <div>
    欢迎访问
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped>

</style>

配置路由

js 复制代码

,
    {
        path:'/main',
        component:MainVue
    }

修改LoginVue页面，实现登录验证

vue 复制代码

<script setup lang="ts">
import {reactive} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const router =useRouter();
let stu=reactive({
    stuNo:'',
    stuPwd:''
})
function doLogin()
{
    axios.post("http://localhost:8088/school/stu/login",stu)
    .then(rst=>{
        console.log(rst.data);     
        if(rst.data.code==200){
            router.push("/main");
        }else{
            ElMessage('账号和密码输入有误！')
        }
    }).catch(err=>{
        console.log(err);
        
    });
}
</script>

测试

启动springboot项目

启动vue项目

在浏览器中访问

输入学号和密码点击登录

增加main页面的功能

vue 复制代码

<template>
  <div>
    欢迎访问
    <el-image :src="image"></el-image>
    <el-dropdown>
    <span class="el-dropdown-link">
      {{ stu.stuName }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </div>
</template>
<script setup lang="ts">
let str=sessionStorage.getItem("stu");
let stu=JSON.parse(str);
let image="http://localhost:8088/school/"+stu.headImg;
</script>
<style scoped>
    .el-image{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>

添加element-plus的icon图标库

安装图标库

复制代码

yarn add @element-plus/icons-vue

在main.ts文件中配置

js 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

import Elementplus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app .use(router)
    .use(Elementplus)
    .mount('#app')