前端开发相关小知识点、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
}
vue按钮点击跳转网页
1、跳转外部链接并覆盖当前页
<el-button type="primary" @click="cimsInputClick">应用入口</el-button>
cimsInputClick () {
window.location.href = 'https:\\www.mscims.com'
}
2、跳转不覆盖当前页面,在新窗口打开
<el-button type="primary" @click="cimsInputClick">应用入口</el-button>
cimsInputClick () {
window.open('https:\\www.mscims.com', '_blank')
}
3、页面中内部跳转
用this.$router.push()实现。