SpringBoot +Vue CLI案例之编写前端项目

最新推荐文章于 2022-12-23 11:28:29 发布

HF_WD

最新推荐文章于 2022-12-23 11:28:29 发布

阅读量2.4k

点赞数

分类专栏： Java Web 前端文章标签： spring boot vue vue-cli3

本文链接：https://blog.csdn.net/weixin_42275702/article/details/118576924

版权

Java Web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用VueUI创建项目，包括选择插件、设置路由、保存预设、安装依赖、配置启动方式和跨域代理。详细讲解了axios的配置，如全局使用、设置baseURL和处理数据格式。同时展示了 vant UI 框架的安装和使用，以及登录页面的实现。最后，提供了登录接口的前端代码，但后端部分未展示，需要后端完成后才能测试完整效果。

摘要由CSDN通过智能技术生成

使用Vue UI创建项目

1.选择插件
在这里插入图片描述
2.设置路由方式

3.保存刚刚设置的预设，方便以后创建项目

4.等待项目建立完成

使用WebStorm打开项目

打开项目

在这里插入图片描述

安装依赖

在这里插入图片描述

配置启动方式

在这里插入图片描述

整理项目，清除多余的文件

在这里插入图片描述

启动项目后的页面

在这里插入图片描述

设置跨域代理

建立配置文件

在这里插入图片描述

配置代理

在这里插入图片描述

代码

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8180',// 要跨域的域名
                changeOrigin: true, // 是否开启跨域
                pathRewrite: {
                    '^/api': '' // 在请求的时候 凡是/api开头的地址都可以跨域
                }
            },
        }
    }
};

配置axios

安装axios

cnpm install axios -S

在这里插入图片描述

配置axios全局使用

import axios from 'axios'

axios.defaults.withCredentials = true; //配置为true
axios.defaults.baseURL = '/api'  //关键代码
Vue.prototype.$axios = axios

在这里插入图片描述

qs

安装qs

cnpm install qs -S

在这里插入图片描述

配置qs

import Qs from 'qs'

Vue.prototype.$qs =Qs

在这里插入图片描述

vant

安装

cnpm i vant -S

在这里插入图片描述

配置vant

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant)

在这里插入图片描述

登录页

<template>
  <div class="home">
    <van-form @submit="onSubmit">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },
};
</script>

在这里插入图片描述

页面效果

在这里插入图片描述

增加后端登录的代码

<template>
  <div class="home">
    <van-form @submit="login">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      const _this = this;
      this.$axios
          .post('/login', {
            username: this.username,
            password: this.password
          }, {
            withCredentials: true,
            transformRequest: [function (data) {
              data = _this.$qs.stringify(data);
              return data;
            }],
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).then(response => {
        console.log(response)
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
  },
};
</script>