Installation of intellj idea
First go to the official website to download the flagship version
Official website address: https://www.jetbrains.com/idea/
For the registration code, you can go to Baidu online.
As for the installation, remember to choose the number of digits that suits you, and just follow the rest.
Create project
In idea, creating a project is somewhat different from other software. A project creates a workspace and then creates a project in the created project workspace. Here we create a vuejs workspace
and then right-click the vuejs directory and select module to create a jsonp project.
1. Select maven,
2. Click New... to select the jdk you downloaded.
3. Check Create... to automatically import these packages, so there is no need to configure the environment. (I did not import automatically here, I imported it manually later)
Import the corresponding package
Because we will use json and springBoot. Next we import the corresponding two packages.
First, enter the maven dependency query website https://mvnrepository.com/, enter fastjson, find Fastjson, click to enter and you will see the corresponding version. Here I choose the latest version, click on the corresponding version, and then the fastjson dependency will appear on the website. , copied to the xml under the project. For the introduction of springboot, we also query the springframework on the website, find the corresponding version, and copy its dependencies to the xml of the project.
Writing an asynchronous loading backend
Directly paste the code and comment because I am learning and writing at the same time, so I don’t have time to write the comments.
(The set and get methods automatically generated in the idea are 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) ;
}
} ;
}
}
Then visit localhost:8080/cors/dept_list to see the corresponding json content. Of course, you must run StartVuejsServer.java first.
Writing an asynchronous loading front-end
Paste the code directly
<!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>
The final effect of asynchronous loading and running
summary
Problems that occur during operation
Error:java: Error: Release 5 not supported
It's because when I introduced the springframe dependency, I didn't indicate the introduced version in the xml file.
Wrong code.
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
Correct code.<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.1.0.RELEASE</version> </dependency>