前端与后端 bug
前端 vue
语法问题
- 在所有HTML中几乎都可以使用th: text属性，将接受的数据显示在标签内容中
<span th:text="${name}"></span>
<span th:text="${session.name}"></span>
<span th:text="${user.name}"></span>
|
- th: each用来遍历对象来展示; th:if 做判断
- th: unless 相当于else
- th: switch 条件判断
- th: case=”1”
<tr th:each="b:${list}">
<td th:text="${b.userId}"></td>
<td th:text="${b.userName}"></td>
<td th:text="${b.userPasswd}"></td>
</tr>
|
- html表单属性名与对象类名不一致时，要是在参数前加上@RequestParam(“”)绑定
axios:
get方法:
axios.get(url,{
params:{
username:this.form.name,
password:this.form.pwd
}
}).then(res =>{
if(res.data.code == 100){
this.$messsage({
showClose: true,
message: result.data.msg,
type: "success"
});
this.$router.push("/home");
}
else{
this.$messsage({
showClose: true,
message: result.data.msg,
type: "error"
});
}
});
|
- 方式二
this.$http.get(url/login?name=" +
this.form.name +
"&pwd=" +
this.form.pwd
).then(res =>{
//结果
console.log(result);
})
|
post
# axios的post请求
## 1.使用 qs.stringify()
### qs.stringify() 作用:
**将对象序列化成URL的形式**
默认表单数据（json格式）：
使用qs.stringify()之后的数据形式：
### axios.post 代码
```js
this.$axios.post('http://localhost:8090/register1',
// this.data=JSON.stringify(this.user),
this.data=this.$qs.stringify(this.user),
// this.data=(this.user)
)
.then(res=>{
if(res.data.code==100){
this.$message({
showClose: true,
message: res.data.msg,
type: "success"
});
// this.$router.push("/");
alert("注册成功！")
}
else{
console.log(res+"error-----------------------------");
this.$message({
showClose: true,
message: res.data.msg,
type: "error"
});
}
});
```
### UserController 代码
```java
// "/register1" 是传递 String username, String password
@PostMapping("/register1")
public ResultVO signUp(String username, String password){
System.out.println("register__1 :"+username+password);
ResultVO insert = UserServiceImpl.Insert(username, password);
System.out.println(insert);
return insert;
}
```
## 2. 使用 Map来接收前端表单传来json数据
### 原理解释：
* json格式为 {username : "aaaa", password : "1111"}，与Map格式一致，故可用Map对象接收
### axios.post 代码
```js
this.$axios.post('http://localhost:8090/register2',
// this.data=JSON.stringify(this.user),
// this.data=this.$qs.stringify(this.user),
this.data=(this.user)
)
.then(res=>{
if(res.data.code==100){
this.$message({
showClose: true,
message: res.data.msg,
type: "success"
});
// this.$router.push("/");
alert("注册成功！")
}
else{
console.log(res+"error-----------------------------");
this.$message({
showClose: true,
message: res.data.msg,
type: "error"
});
}
});
```
### UserController代码
```java
// "register2" 用Map对象接收json形式数据
@PostMapping("/register2")
public ResultVO signUp(@RequestBody Map<String,String> user){
System.out.println("register__2 :"+user);
ResultVO insert = UserServiceImpl.Insert(user.get("username"), user.get("password"));
System.out.println(insert);
return insert;
}
```
## 3.使用实体类对象接收json格式数据 (老师上课演示)
### **特别注意**:
> 前端传递过来的数据必须和我们的bean实体对象属性一致，若不一样，我们可以在前端再定义一个和实体类属性相同的json格式对象！！！
### axios.post代码
```js
// 定义一个和自己实体类属性名一样的包含帐号密码的对象
//根据自己的实体类来，我的实体类属性帐号密码为， userName, userPasswd. 在你的环境要根据你的来！！！！！
let nameAndPwd = {
userName : this.user.username,
userPasswd: this.user.password
};
// post请求
this.$axios.post('http://localhost:8090/register3',this.data=nameAndPwd)
.then(res=>{
if(res.data.code==100){
this.$message({
showClose: true,
message: res.data.msg,
type: "success"
});
// this.$router.push("/");
alert("注册成功！")
}
else{
console.log(res+"error-----------------------------");
this.$message({
showClose: true,
message: res.data.msg,
type: "error"
});
// alert('131 row error');
}
});
```
```java
// 使用对象接收必须保证表单属性 和 实体类的属性相同
@PostMapping("/register3")
public ResultVO signUp(@RequestBody User user){
System.out.println("register__3 :"+user);
ResultVO insert = UserServiceImpl.Insert(user.getUserName(), user.getUserPasswd());
System.out.println(insert);
return insert;
}
```
## 4.使用JSON.stringify()
### JSON.stringify()作用:
将json格式字符串化: {username : "aaaa", password : "1111"} ===> {"username" : "aaaa", "password" : "1111"}
默认表单数据（json格式）：
JSON.stringify() 格式化后：
### 原理：
> 将数据转化为字符串传到后端， 利用相关函数分割字符串并提取出来所需要的数据。
**这种方法过于繁琐，且容易出错，这里不再进行演示.**
## PS: 前三种方法我已经测试，均可正确运行，如果有哪里说的不对的地方，欢迎大家一起讨论，一起进步！
|
在浏览器控制台查看 vue对象
- 使用 JSON.stringify(obj), 将json格式转化为字符串格式
后端 springboot
数据格式问题
MAVEN依赖问题
关于tk.mybatis找不到实体类的问题
Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: tk.mybatis.mapper.MapperException: 无法获取实体类com.example.demo.entity.User对应的表名!]
- 还是依赖问题，要使用springboot starter 合适版本的mybatis，并要解决依赖冲突问题，将集成的依赖注释掉。(鼠标右键转到定义)
