idea web项目之vue的异步加载

intellj idea的安装

首先到官网下载旗舰版

官网网址：https://www.jetbrains.com/idea/
对于注册码自己可以到网上百度，
至于安装记得选择适合自己位数，剩下一路next即可。

创建项目

在idea中，创建project和其他软件有些区别，project是创建一个工作区间，然后在创建的project工作区间下去创建项目。在这里我们创建一个vuejs工作区间
然后在右键vuejs目录选择modul，创建jsonp项目 。
1.选择maven，
2.点击New…选择你下载的jdk。
3.勾选Create…自动导入这些包，就不用配置环境了。（我这边没有自动导入，后面手动导入的）

导入相应的包

由于我们会用到json以及springBoot。接下来我们把相应的两个包导入进来。
首先进入maven依赖查询网站https://mvnrepository.com/,输入fastjson，找到Fastjson，点击进入会看到相应的版本，这里我是选择最新版的，点击相应的版本，之后网站会出现fastjson的依赖，复制到项目下的xml中。对于springboot的引入也是在该网站上查询springframework，找到相应的版本呢复制其依赖到项目的xml下。

编写异步加载后端

直接贴代码,注释因为自己也是边学边写，注释没来得及写，
（idea里自动生成set和get方法是Alt+Insert）
Dept.java

package com.yootk.vuejs.vo;
import java.io.Serializable;
public class Dept implements Serializable {
    private Long deptno ;
    private String dname ;
    private String loc ;
    public Long getDeptno() {
        return deptno;
    }
    public void setDeptno(Long deptno) {
        this.deptno = deptno;
    }
    public String getDname() {
        return dname;
    }
    public void setDname(String dname) {
        this.dname = dname;
    }
    public String getLoc() {
        return loc;
    }
    public void setLoc(String loc) {
        this.loc = loc;
    }
}

DeptAction.java

package com.yootk.vuejs.action;
import com.alibaba.fastjson.JSONObject;
import com.yootk.vuejs.vo.Dept;
import org.apache.tomcat.util.digester.ArrayStack;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class DeptAction {
    @ResponseBody
    @RequestMapping("/cors/dept_list")
    public Object list(String dname,String loc,String callback ){
        List<Dept> allDepts=new ArrayStack<Dept>();
        for(int x=0;x<10;x++)
        {   Dept dept=new Dept();
            dept.setDeptno(x+100L);
            System.out.println(dname);
            dept.setDname(dname+"-"+x);
            dept.setLoc(loc + " - " + x);
            allDepts.add(dept);
        }
        String returnData=callback+"("+ JSONObject.toJSONString(allDepts) +")";
        return  returnData;
            }
}

StartVuejsServer .java

package com.yootk.vuejs;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StartVuejsServer {
    public static void main(String[] args) {
        SpringApplication.run(StartVuejsServer.class,args);
    }
}

JSONPConfig .java

package com.yootk.vuejs.config
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.StringHttpMessageConverter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import java.nio.charset.Charset;
import java.util.List;
@Configuration
@EnableWebMvc       // 启用MVC的环境配置
public class JSONPConfig {
    @Bean
    public WebMvcConfigurer getCorsConfig() {   //
        return new WebMvcConfigurer() {
            @Override
            public void configureMessageConverters(List<HttpMessageConverter<?>> list) {
                StringHttpMessageConverter converter = new StringHttpMessageConverter(
                        Charset.forName("UTF-8")) ; // 所有的请求都以UTF-8编码为主
                list.add(converter); // 追加一个转换器
            } // 进行WEB的配置
            @Override
            public void addCorsMappings(CorsRegistry corsRegistry) {
                corsRegistry.addMapping("/cors/**")         // 配置指定匹配路径
                        .allowedHeaders("*")  // 可以进行头部信息发送
                        .allowedOrigins("*")  // 接收任意的域名请求
                        .allowedMethods("*")  // 接收所有的请求模式
                        .allowCredentials(true)// 允许进行Cookie的发送
                        .maxAge(3600) ;
            }
        } ;
    }
}

之后访问localhost:8080/cors/dept_list就可以看到相应的json内容了，当然要先运行StartVuejsServer.java.

编写异步加载前端

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jQurey/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>

    <script type="text/javascript" >
        window.onload=function () {
         var  app=new Vue({
                el: '#att',
                data: {
                    message: '跟老王学习vue',
                    id: 'HELLO WORLD',
                    inputAge: 0,
                    inputName: ' ',
                    inputSex: ' ',
                    dept: [],
                },
                methods: { //定义所有的操作函数
                    loadDeptData:function(){
                        $.ajax({
                            url:"http://jsonp.server.com:8080/cors/dept_list",
                            data:{
                                dname:'部门名称',
                                loc:'部门位置',
                            },
                            methods: 'post',
                            contentType:"application/json; charset=utf-8" ,
                            dataType:"jsonp",
                            success:function (data) {
                                app.$data.dept=data  ;
                            },
                            error:function (httpRequest,status,errMsg) {
                                console.log("错误状态"+status)
                                console.log("错误信息"+errMsg)

                            }

                        })

                    }}

            })}
    </script>


</head>
<body>
<div id="att">
    <button @click="loadDeptData">数据加载</button>
    <table>
        <thead><tr>
            <th>age</th>
            <th>name</th>
            <th>sex</th>

        </tr>
        </thead>
        <tbody>
        <tr v-for="(dep, index) in dept"><!--v-for是对数据进行循环遍历 dep 对 table 中的元素进行循环遍历，-->
            <!--index是对table进行序号显示 table中并没有index属性-->
            <td>{{index}}  </td><td>{{dep.deptno}}  </td><td>{{dep.name}}  </td><td>{{dep.loc }}  </td>

        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

异步加载运行最后效果

小结

运行过程中出现的问题

Error:java: 错误: 不支持发行版本 5

是由于我在引入springframe依赖时在xml文件中并没有标明引入的版本
错误的代码
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
正确的代码<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.1.0.RELEASE</version> </dependency>