目錄
線上效果
來個vue 表單：
擷取 el-input内容
效果展示：
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
net::ERR_CONNECTION_REFUSED解決辦法
HTML 建立按鈕實作跳轉連結
前端：https://gitee.com/zhangjiqun/vue-annuoyun/tree/master
背景：https://gitee.com/zhangjiqun/background-development-demo/tree/master
資料庫：
線上效果
http://192.144.212.56/
http://192.144.212.56/index2.html
來個vue 表單：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="姓名：" prop="name">
<el-input v-model="ruleForm.name" ></el-input>
</el-form-item>
<el-form-item label="等級：" prop="id">
<el-input v-model="ruleForm.id" ></el-input>
</el-form-item>
<el-form-item label="年齡：" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getInfo('ruleForm')">送出</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
var Main = {
data() {
return {
ruleForm: {
name: '',
id: '',
age: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
getInfo();
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
getInfo(){
this.$http.get('http://localhost:10000/userInfo/insertUser',{params:{id:this.ruleForm.id,name:this.ruleForm.name,age:this.ruleForm.age}},{
emulateJSON:true
}).then(result =>{
console.log(result.body.rows)
this.list=result.body.rows
});
alert('submit!');
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script> 重要劃線：
背景代碼：
package com.example.demo.easy.controller;
import com.alibaba.fastjson.JSON;
import com.example.demo.easy.entity.UserInfo;
import com.example.demo.easy.service.UserInfoService;
import org.json.JSONException;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
* (UserInfo)表控制層
*
* @author makejava
* @since 2021-07-19 17:41:13
*/
@RestController
@RequestMapping(value = "userInfo")
public class UserInfoController {
/**
* 服務對象
*/
@Resource
private UserInfoService userInfoService;
/**
* 通過主鍵查詢單條資料
*
* @param id 主鍵
* @return 單條資料
*/
@PostMapping("selectOne")
public UserInfo selectOne(@RequestParam (name = "id")Integer id) {
UserInfo userInfo=this.userInfoService.queryById(id);
return userInfo;
}
@GetMapping("selectTne")
public UserInfo selectTne(@RequestParam (name = "id")Integer id) {
UserInfo userInfo=this.userInfoService.queryById(id);
return userInfo;
}
@GetMapping("selectAll")
@CrossOrigin
public List<UserInfo> selectAll() {
StringBuilder stringBuilder=new StringBuilder();
List<UserInfo> list=this.userInfoService.queryAllByLimit(1,100);
// for (UserInfo userInfo :list) {
// stringBuilder.append(userInfo.toString());
//
// }
return list;
}
@GetMapping("selectAllJson")
@CrossOrigin
public String selectAllJson() throws JSONException {
List<UserInfo> list=this.userInfoService.queryAllByLimit(1,100);
String str = JSON.toJSONString(list); // List轉json
return str;
}
@GetMapping("insertUser")
public UserInfo insertUser(@RequestParam (name = "id")Integer id,
@RequestParam (name = "name")String name,
@RequestParam (name = "age")String age) {
UserInfo userInfo=new UserInfo();
userInfo.setId(id);
userInfo.setName(name);
userInfo.setAge(age);
this.userInfoService.insert(userInfo);
return userInfo;
}
} 擷取 el-input内容
<script>
var Main = {
data() {
return {
ruleForm: {
name: '',
id: '',
age: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
getInfo();
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
getInfo(){
this.$http.get('http://localhost:10000/userInfo/insertUser',{params:{id:this.ruleForm.id,name:this.ruleForm.name,age:this.ruleForm.age}},{
emulateJSON:true
}).then(result =>{
console.log(result.body.rows)
this.list=result.body.rows
});
alert('submit!');
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script> 效果展示：
插入數值
通路資料顯示：
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
Nginx添加請求頭
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials: true;
net::ERR_CONNECTION_REFUSED解決辦法
網絡請求拒絕：直接通過浏覽器檢視ip是否正确；
當上傳自己的html最好重新開機一下tomcat。
HTML 建立按鈕實作跳轉連結
<button onclick="window.location.href='/page2'">Continue</button>
<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button> <a href="http://google.com" class="button">Continue</a>