vue+spring boot（一）单个数据【json格式】

电玩女神 2022-06-07 00:28 169阅读 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>com.adtec.vuespringboot</groupId>
        <artifactId>demo</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <packaging>jar</packaging>
    
        <name>demo</name>
        <description>Demo project for Spring Boot</description>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>1.5.7.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-redis</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>1.3.1</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>
    
    
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.35</version>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                        
                        <configuration>
                        <fork>true</fork>
                        </configuration>
                </plugin>
            </plugins>
        </build>
    
    
    </project>

UserController

@RequestMapping("/getUser")
            public String getUser(Integer userID){
             userID = 97613;
             String jso = JSON.toJSONString(userService.getUserByUserID(userID));
                return jso;
            }

模拟数据

public User getUserByUserID(Integer userID) {
            User user = new User();
            user.setAge(18);
            user.setUserName("李涵");
            user.setBirthday(new Date());
            user.setGender('0');
            user.setTel("15179218035");
            user.setUserID(97613);
            return user;
        }

前端

<div class="main" id="user"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>生日</th> <th>电话</th> <th>编号</th> </tr> </thead> <tbody> <tr v-model="user"> <td>{ { user.userName}}</td> <td>{ { user.age}}</td> <td>{ { user.birthday}}</td> <td>{ { user.tel}}</td> <td>{ { user.userID}}</td> </tr> </tbody> </table> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#user', data: { user: {} }, created: function() { var url="http://localhost:8080/getUser"; //ajax获取数据 this.$http.get(url).then(function(result){ var json = result.bodyText; //需要json2.js this.user = JSON.parse(json); //也可以，有些浏览器不支持 //this.user = eval("("+json +")"); console.log(this.user); },function(response){ console.log(response) }) } }); </script>