前后端分离之前端获取数据

@张小鱼

已于 2022-08-25 17:37:57 修改

阅读量761

点赞数

分类专栏： # javaWeb 文章标签： java javascript vue.js spring

于 2022-08-25 17:35:17 首次发布

本文链接：https://blog.csdn.net/m0_57254953/article/details/126529173

版权

javaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

后端：

pom.xml：

<?xml version="1.0" encoding="UTF-8"?>
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>untitled</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <dependencies>
        <!--SpringMVC.xml-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.20</version>
        </dependency>
        <!--日志-->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.11</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.13.3</version>
        </dependency>
        <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-mapper-asl</artifactId>
        <version>1.9.12</version>
        </dependency>
    </dependencies>

</project>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--配置SpringMVC的前端控制，对浏览器发送的请求进行统一处理-->
    <servlet>
        <servlet-name>SpringMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--SpringMVC配置文件的位置和名称-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:SpringMVC.xml</param-value>
        </init-param>
        <!--6.我们都知道Servlet的初始化是在第一次访问的时候进行初始化
        ，我们的控制器当中封装了对所有的servlet的请求的处理，所以控制器
        的初始化要执行很多内容，这些初始化放在第一次访问时初始化，会导致
        第一次访问时间过长，我们可以使用一个标签load-on-startup,标签内
        为1表示将SpringMvc前端控制器DispatcherServlet的初始化提前到服务器
        启动时-->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>SpringMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

Springmvc.xml(SpringMVC配置文件)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
                        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
                         http://www.springframework.org/schema/mvc
                        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

    <!--进行注解扫描-->
    <context:component-scan base-package="org.first"></context:component-scan>
    <!-- 启动基于注解的HandlerMapping,可以将请求参数绑定到控制器参数 -->
    <mvc:annotation-driven>
    </mvc:annotation-driven>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsps/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

控制层：

Control类：

package org.first;

import org.first.bean.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping(value = "/")
public class Control {
    //CrossOrigin注解，解决跨域请求问题
    @CrossOrigin(origins = "*", maxAge = 3600)
    @RequestMapping(value = "/Hello")
    @ResponseBody
    public Student  Index() {
        return new Student("张三", 20, "男");
    }
}

逻辑业务层

Student类：

package org.first.bean;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

@JsonIgnoreProperties(value = { "hibernateLazyInitializer", "handler" })
public class Student {
    private String name;
    private int age;
    private String sex;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public Student(String name, int age, String sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    public Student() {
    }
}

前端：

main.js:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.baseURL = 'http://localhost:8081/untitled_war_exploded/';
Vue.prototype.$axios = axios;
Vue.prototype.$VueAxios = VueAxios;
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue:

<template>
  <div id="app">
    <button @click="sendinfo">获取</button>
    <p>姓名:{{student.name}}</p>
    <p>年龄:{{student.age}}</p>
    <p>性别:{{student.sex}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      student:{
      }
    }
  },
  components: {
    
  },
  methods: {
    sendinfo(){
      this.$axios({
          method: 'post',
          url: '/Hello',
}).then((res)=>{
  this.student=res.data
});
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

注意的一点是这个案例中后端返回的数据是个JSON对象类型的数据