【springboot系列】vue工程+springboot结合

最新推荐文章于 2024-08-04 18:17:40 发布

haibo_bear

最新推荐文章于 2024-08-04 18:17:40 发布

阅读量2.6k

点赞数

分类专栏： springboot 文章标签： springboot vue 两次md5 跨域前后端分离

本文链接：https://blog.csdn.net/haibo_bear/article/details/90257122

版权

本文介绍了如何将Vue前端与SpringBoot后端结合，包括前端使用axios进行网络请求，后端处理接口，特别讨论了密码的两次MD5加密以及跨域请求的解决方案，提供了一个简单的前后端分离项目的实践示例。

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

前言：

	本文基于【springboot系列】前端工程之从零开始创建vue工程。
	基于springboot+vue项目制作。

项目地址：

springboot后端：github地址
vue前端：github地址

正文

一、前端vue

接入axios进行网络访问：

npm install --save axios vue-axios

在main.js引入import配置地址进行使用：
此处使用json做为传入传出参数，对应后台requestbody,responsebody注解。

import VueAxios from 'vue-axios'
var axiosInstance = axios.create({
   
  baseURL: location.protocol + '//127.0.0.1:8096/',
  headers: {
    'Content-Type': 'application/json' }
})
Vue.use(VueAxios, axiosInstance)

网络请求的使用代码如下：

<script>
    export default {
    
        name: "Login",
        data() {
    
            return {
    
                username: '',
                password: ''
            }
        },
        methods: {
    
            login() {
    
                if (this.username != '' && this.password != '') {
    
                    // console.log(this.username + "-------登录-------" + this.password);
                    //md5加盐
                    var salt = "1a2b3c4d";
                    var str = ""+salt.charAt(0)+salt