spring boot环境下实现restful+前后端分离的网页开发

1.简介:环境spring boot+restful的API+html等网页(前提已经具有rest风格的接口,并且引擎模板(themleaf之类的已近搭建好))

  1. 在resources下建立static目录,templates目录中的网页无法直接访问,也就是得从controller中的方法才能访问到templates中的网页,但是前后端分离仅仅用json数据进行交互,所以再次要可以直接访问网页(如果是独立部署的前端可以跳过此步)
    在这里插入图片描述
    2.网页支持异步提交数据
<script type="application/javascript">
    //发送表单ajax请求
   function login(){
       var formObject = {};
       var formArray =$("#registerForm").serializeArray();
       $.each(formArray,function(i,item){
           formObject[item.name] = item.value;
       });

        $.ajax({
            url:"/user",
            type:"POST",
            data:JSON.stringify(formObject),
            contentType:"application/json; charset=utf-8",  //缺失会出现URL编码,无法转成json对象
            success:function(data){
                alert(data.message);
            },
        });
    }
script>

=======================================================
 <form id="registerForm" class="p-4 bg-dark-opaque" method="post" action="localhost:9001/user">
    <h4 class="mb-4 text-center">Sign Uph4>
    <div class="form-group">
        <label>Namelabel>
        <input class="form-control" required="required" name="name">div>
    <div class="form-group">
        <label>Student IDlabel>
        <input class="form-control" type="text" required="required" name="userId">div>
    <div class="form-group">
        <label>Passswordlabel>
        <input class="form-control" required="required" type="password" name="pwdHash">div>
    <div class="form-group">
        <label>Phone Numberlabel>
        <input class="form-control" required="required" type="text" name="email">div>
    <button  onclick="login()" class="btn mt-4 btn-block p-2 btn-outline-primary">
        <b>Submit
            <br>
        b>
    button>
    <button class="btn mt-4 btn-block btn-outline-primary p-2">
        <b><a href="">Go Backa>b>
    button>
form>

3.具备@RequestBody注解的controller方法(@RequestBody作用其实是将json格式的数据转为java对象),之所以使用是因为restful要求用json数据进行交互spring boot环境下实现restful+前后端分离的网页开发_第1张图片

你可能感兴趣的:(功能模块)