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

后端使用springboot 2.3.1.RELEASE版本

项目结构：

1、pom.xml文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">    
    <modelVersion>4.0.0</modelVersion>    
    <parent>    
        <groupId>org.springframework.boot</groupId>    
        <artifactId>spring-boot-starter-parent</artifactId>    
        <version>2.3.1.RELEASE</version>    
        <relativePath/> <!-- lookup parent from repository -->    
    </parent>    
    <groupId>com.example</groupId>    
    <artifactId>hello-vue-service</artifactId>    
    <version>0.0.1-SNAPSHOT</version>    
    <name>hello-vue</name>    
    <description>Spring Boot for Hello Vue.</description>         
    <properties>    
        <java.version>1.8</java.version>    
    </properties>        
    <dependencies>    
        <dependency>    
            <groupId>org.springframework.boot</groupId>    
            <artifactId>spring-boot-starter-web</artifactId>    
        </dependency>        
        <dependency>    
            <groupId>org.springframework.boot</groupId>    
            <artifactId>spring-boot-starter-test</artifactId>    
            <scope>test</scope>    
            <exclusions>    
                <exclusion>    
                    <groupId>org.junit.vintage</groupId>    
                    <artifactId>junit-vintage-engine</artifactId>    
                </exclusion>    
            </exclusions>    
        </dependency>    
    </dependencies>         
    <build>    
        <plugins>    
            <plugin>    
                <groupId>org.springframework.boot</groupId>    
                <artifactId>spring-boot-maven-plugin</artifactId>    
            </plugin>    
        </plugins>    
    </build>        
</project>

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、源代码：src\main.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、源代码src\App.vue

<template>

  <div id="app">

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="handleSelect">

      <el-menu-item index="/">Home</el-menu-item>

      <el-menu-item index="/about">About</el-menu-item>

    </el-menu>

    <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link> |

      <router-link to="/login">Login</router-link>

    </nav>

    <router-view/>

  </div>

</template>

<script>

  export default {

    data() {

      return {

        activeIndex: '/'

      };

    },

    methods: {

      handleSelect(key, keyPath) {

        console.log(key, keyPath);

      }

    }

  }

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

}

nav a {

  font-weight: bold;

  color: #2c3e50;

}

nav a.router-link-exact-active {

  color: #42b983;

}

</style>

7、源代码src\views\HomeView.vue

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

export default {

  name: 'HomeView',

  components: {

    HelloWorld

  }

}

</script>

8、源代码src\views\AboutView.vue

<template>

  <div class="about">

    <h1>This is an about page</h1>

  </div>

</template>

9、源代码src\views\login\HelloLogin.vue

<template>

  <div>

    用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>

    <br /><br />

    密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>

    <br /><br />

    <button @click="login">登录</button>

    <br /><br />错误信息：{{ errorMessage }}

  </div>

</template>

 

<script>

export default {

  name: "HelloLogin",

  data() {

    return {

      loginForm: {

        username: "",

        password: ""

      },

      responseResult: [],

      errorMessage: ""

    };

  },

  methods: {

    login() {

      this.$axios

        .post("/login", {

          username: this.loginForm.username,

          password: this.loginForm.password

        })

        .then(successResponse => {

          if (successResponse.data.code === "SUCCESS") {

            this.$router.replace({ path: "/index" });

          } else {

            this.errorMessage = successResponse.data.message;

          }

        })

        .catch(failResponse => {

          console.log("请求失败：" + failResponse.toString());

        });

    }

  }

};

</script>

 

<style></style>

10、源代码src\views\home\HelloIndex.vue

 

<template>

  <div>

    这里是：登录成功后跳转的首页。

  </div>

</template>

 

<script>

export default {

  name: "HelloIndex"

};

</script>

 

<style></style>

11、源代码src\router\index.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(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  },

  {

    path: "/login",

    name: "HelloLogin",

    component: HelloLogin

  },

  {

    path: "/index",

    name: "HelloIndex",

    component: HelloIndex

  }

];

const router = new VueRouter({

  routes

})

export default router

12、源代码src\components\HelloWorld.vue

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <p>

      For a guide and recipes on how to configure / customize this project,<br>

      check out the

      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.

    </p>

    <h3>Installed CLI Plugins</h3>

    <ul>

      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>

      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>

    </ul>

    <h3>Essential Links</h3>

    <ul>

      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>

      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>

      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>

      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>

      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>

    </ul>

    <h3>Ecosystem</h3>

    <ul>

      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>

      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>

      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>

      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>

      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>

    </ul>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h3 {

  margin: 40px 0 0;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

13、源代码public\index.html

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

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

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

在项目根目录运行：D:\01sourcecode\10Tutorial\08Vue\08-20220508-v1\vue-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