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

来源：互联网发布：股票乖离率软件编辑：程序博客网时间：2024/06/08 02:55

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/> <!-- lookup parent from repository -->    </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>

阅读全文

0 0