前端开发相关小知识点、Vue、小结

返回导航页

返回导航页

项目中要使用外部接口，如百度接口

一个前端项目，需要从两个后端（两台服务器上）获取数据
方案1：

安装及配置
　　　　npm install vue-resource --save
　　　　
然后在入口文件 main.js中引入
　　　   import VueResource from 'vue-resource'
　　　   Vue.use(VueResource)
　　　   

POST请求:

前端代码和截图是等价的

// 前端代码
this.$http.post('127.0.0.1:80/add/school', {
     schoolName: 'A学校',manager: '王校长'})
       .then(response => {
     

       }, response => {
      // 失败
       })

// 后端代码 直接用@RequestBoty接收JSON对象
@PostMapping("/add/school")
   public GlobalResponse addSchool(@RequestBody School school){
     
   String name=school.getSchoolName();
   String manage=school.getManager();
   }

GET请求:

// 前端代码
 getSchoolList () {
     
      this.$http.get('127.0.0.1/get/allschool').then((res) => {
     
        this.schoolList = res.data.data // 注意这里有两个data
        this.schoolTotal = this.schoolList.length
        console.log('访问成功')
      }).catch(() =>{
     
        console.log('访问失败')
      })


// 后端就是一个School的List ，接口返回是这样的！
{
     
    "success": 200, 
    "data": [
        {
     
            "id": "1407542648300711937", 
            "name": "C学校"
        }, 
        {
     
            "id": "1407542653103190018", 
            "name": "A学校"
        }
    ], 
    "code": 200 }      

JSONP：

网上查了主要解决跨域问题。
但是跨域的话后端处理吧。一个注解就搞定了！

@CrossOrigin
@RestController
public class schoolController {
     
}

this.$http.jsonp(url,{
     params:{
     a:1,b:2}}).then((result) => {
     
                console.log("访问成功")
            }).catch((result) =>{
     
                console.log("访问失败")
            })

a标签跳转携带参数

a标签跳转 拼接参数小技巧

 <a class="el-icon-document" :href="myurl(par)"></a>
// 定义方法来拼接地址
 myurl(user) {
     
    this.isLoading = false
    return '127.0.0.1/word/schooldetail/' + user.id
   }