一個很小的點但折騰了很久，為了把后端的數(shù)據(jù)解析出來查了很多資料，原功能是想顯示登錄的用戶信息，但進行token認證和security整合過于麻煩，直接建了一個數(shù)據(jù)表來顯示至頁面。
效果是這樣:

當然，這樣是看不出來數(shù)據(jù)是從后端接收的。
上前后端的代碼:

用注解的方式進行sql查詢:

@Mapper public interface SysDao {@Select("select user_id,userName,email,phonenumber,sex,avatar,password,status,del_flag,createTime,update_time from sys_user where user_id=1")Sysuser getuser(int id);

Service接口和實現(xiàn)類：

public interface SysuserService {Sysuser finduser(Integer id);void update(Integer studentId); } @Service public class SysuserServiceImpl implements SysuserService{@AutowiredSysDao sysDao;public Sysuser finduser(Integer id){System.out.println("IIIFI");return sysDao.getuser(id);}}

update的交互還沒有寫。所以就只進行了select.
controller:

@RestController public class SysController {@Autowiredprivate SysuserServiceImpl sysuserService;@CrossOrigin@GetMapping("/user/profile")public ApiResult userinformation(Integer id) {Sysuser sysusers = sysuserService.finduser(id);HashMap<String, Object> res = new HashMap<>(); // res.put("numbers", "1"); // res.put("data", sysusers); // String users_json = JSON.toJSONString(res);return ApiResultHandler.buildApiResult(200,"根據(jù)Id查詢",sysusers);} }

前端:

methods: {getUser() {this.$axios({url: '/user/profile?id=1',method: 'get',}).then(response => {this.user = response.data.data;// console.log(this.user.createTime);// this.user = JSON.stringify(response.data); // 將返回數(shù)據(jù)賦值// this.user= JSON.parse(JSON.stringify(this.user))console.log( this.user)// this.user = eval(this.user)// var myobj=eval(this.user);// console.log(this.user);});}}

注釋的部分是自己試了行不通的語句，奇怪的是之前自己從前端獲取的數(shù)據(jù)格式都是：{xxx:“xxxx”},但今天一直是{“xxx”:“xxx”}也就是key多了個雙引號，前端用res.data一直無法取出數(shù)據(jù)。
html:

<li class="list-group-item"><div class="pull-right"> <i class="el-icon-user-solid">用戶名稱</i>{{ user.userName }}</div></li><li class="list-group-item"><div class="pull-right"> <i class="el-icon-phone">手機號碼</i>{{ user.phonenumber }}</div></li> export default {name: "Profile",components: { userAvatar, userInfo, resetPwd },data() {return {user: {},roleGroup: {},postGroup: {},activeTab: "userinfo"};},

components: { userAvatar, userInfo, resetPwd },這是幾個子組件，父組件可以對子組件傳值。
可以看到object部分:

已經(jīng)成功傳了object對象，這樣才能取出值。
可以看到后端傳送的部分：

用res.data.data才得到了值，問題應該是出現(xiàn)在這里。目前還有一個奇怪的問題是得到的id是null。
然后看到自己后端的實體類中user_id是Integer類型，改為了int類型之后從后端得到的id變成0了：

但自己數(shù)據(jù)庫的id明明是1：

原因還有待明確。

現(xiàn)在寫update部分，發(fā)現(xiàn)如果不給id賦值的話id會自己變成0，然后再次刷新頁面的時候由于id是0因而無法顯示數(shù)據(jù)了。
無奈之下只能把update語句寫成：
mapper層:

@Update("update sys_user set user_id = 1,userName = #{userName},email =#{email},phonenumber =#{phonenumber},sex =#{sex},avatar=#{avatar},password=#{password},status=#{status},createTime=#{createTime} where user_id=1")void update(Sysuser user);

service：

void update(Sysuser user); //接口public void update(Sysuser user){ sysDao.update(user);//實現(xiàn)類}

controller:

public String updateProfile(@RequestBody Sysuser user){ sysuserService.update(user); return "ok";}

總結(jié)

以上是生活随笔為你收集整理的【前后端记录】前端接收后端数据并用div元素渲染 ,mybatis修改用户数据。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。