前后端分离实现|使用vue springboot实现前后端分离

后端使用springboot 2.3.1.RELEASE版本

项目结构：

1、pom.xml文件

    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">    
    4.0.0    
        
        org.springframework.boot    
        spring-boot-starter-parent    
        2.3.1.RELEASE    
             
        
    com.example    
    hello-vue-service    
    0.0.1-SNAPSHOT    
    hello-vue    
    Spring Boot for Hello Vue.         
        
        1.8    
            
        
            
            org.springframework.boot    
            spring-boot-starter-web    
                
            
            org.springframework.boot    
            spring-boot-starter-test    
            test    
                
                    
                    org.junit.vintage    
                    junit-vintage-engine    
                    
                
            
             
        
            
                
                org.springframework.boot    
                spring-boot-maven-plugin    
                
            
            

2、配置文件：application.properties

server.port=8088

3、启动类VueAPP.java

package com.xdy.vue;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class VueAPP {

    public static void main(String[] args) {
        SpringApplication.run(VueAPP.class, args);

    }

}

4、控制器LoginController.java

package com.xdy.vue;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

@RestController

@RequestMapping("/api/")   

public class LoginController {

       

    @CrossOrigin//跨域 

    @PostMapping(value = "/login") 

    public Result login(@RequestBody User user) {      

        Result result = new Result();  

        if ("admin".equals(user.getUsername()) && "123456".equals(user.getPassword())) {   

            result.setCode("SUCCESS"); 

            result.setMessage("登录成功。");

        } else {   

            result.setCode("FAILURE"); 

            result.setMessage("用户名或密码错误。");

        }  

        return result; 

    }  

}

5、业务对象Result.java

package com.xdy.vue;

public class Result {  

    private String code;//响应码

    private String message;//响应消息

    public String getCode() {

        return code;

    }

    public void setCode(String code) {

        this.code = code;

    }

    public String getMessage() {

        return message;

    }

    public void setMessage(String message) {

        this.message = message;

    }

}

6、业务对象User.java

package com.xdy.vue;

public class User {

    private String username;//用户名

   

    public String getUsername() {

        return username;

    }

    public void setUsername(String username) {

        this.username = username;

    }

    private String password;//用户密码

    public String getPassword() {

        return password;

    }

    public void setPassword(String password) {

        this.password = password;

    }

}

 7、服务端测试一下：

localhost:8088/api/login

{"username":"admin","password":"123456"}

前端：

1、环境

Vue版本：

node,npm版本

使用vue2.0创建项目

2、项目结构：

 3、配置文件：vue.config.js

module.exports = {

  devServer: {

    proxy: {  

      '/api': {

        target: 'http://localhost:8088',  

        changeOrigin: true,

        pathRewrite: {  

          '^/api': ''

        }

      }

    }

  }

}

4、配置文件package.json

{

  "name": "vue-web",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build"

  },

  "dependencies": {

    "axios": "^0.27.2",

    "core-js": "^3.8.3",

    "element-ui": "^2.15.8",

    "vue": "^2.6.14",

    "vue-router": "^3.5.1"

  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~5.0.0",

    "@vue/cli-plugin-router": "~5.0.0",

    "@vue/cli-service": "~5.0.0",

    "vue-template-compiler": "^2.6.14"

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ]

}

5、源代码：srcmain.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

var axios = require('axios')

axios.defaults.baseURL = 'http://localhost:8088/api'

Vue.prototype.$axios = axios

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

6、源代码srcApp.vue

7、源代码srcviewsHomeView.vue

8、源代码srcviewsAboutView.vue

9、源代码srcviewsloginHelloLogin.vue

 

 

10、源代码srcviewshomeHelloIndex.vue

 

 

 

11、源代码srcrouterindex.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

import HelloIndex from '../views/home/HelloIndex.vue'

import HelloLogin from '../views/login/HelloLogin.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import( '../views/AboutView.vue')

  },

  {

    path: "/login",

    name: "HelloLogin",

    component: HelloLogin

  },

  {

    path: "/index",

    name: "HelloIndex",

    component: HelloIndex

  }

];

const router = new VueRouter({

  routes

})

export default router

12、源代码srccomponentsHelloWorld.vue

13、源代码publicindex.html

 

   

   

   

   

   

 

 

   

      We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.

   

   

   

 

在项目根目录运行：D:1sourcecode10Tutorial8Vue8-20220508-v1vue-web

npm i -S axios

npm i element-ui -S

安装依赖

npm run serve

访问网址：localhost:8080

后台很简单就不给出下载地址，这里只给出

前端代码下载地址：

download.csdn.net/download/cyberzhaohy/85323866

参考网址：

https://xprogrammer.net/article/1355071495340896