首页-流程图.png

完成1-6步骤

添加包，IndexController
image.png
与Controller注解配合，添加包扫描，由spring帮我们创建对象

  1. <!--添加包扫描-->
  2.     <context:component-scan base-package="com.bjpowernode.crm.web.controller"></context:component-scan>

添加IndexController类中的方法

  1. @Controller
  2.     public class IndexController {
  3.         //为什么用public? 因为springmvc核心控制器调用
  4.         // 他与这个类不在同一个包(也没有继承关系) 所以是public
  6.         //@RequestMapping("http://127.0.0.1:8080/crm/") 前面的这些必须省去，从项目的/开始
  8.         @RequestMapping("/")
  9.         public  String index(){
  10.             // return "/WEB-INF/pages/index.jsp";
  11.             return "index";
  12.         }
  13.     }

注意把HTML改为JSP时候，一定要设置成UTF-8的编码

  1. <%@page contentType="text/html;charset=UTF-8" %>
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>
  7.     <script type="text/javascript">
  8.         document.location.href = "settings/qx/user/login.html";
  9.     </script>
  10. </body>
  11. </html>

image.png

注意:上面的JSP是这个
image.png

完成7-12步

image.png

  1. <script type="text/javascript">
  2.         document.location.href = "settings/qx/user/toLogin.do";
  3.     </script>
  4.                                  //注意这个是不加/的
  1. @Controller
  2. public class UserController {
  3.     //url要和controller方法处理完请求之后，响应信息返回的页面的资源目录保持一致
  4.     @RequestMapping("/settings/qx/user/toLogin.do")
  5.     public String toLogin(){
  6.         //请求转发到登录页面
  7.         return "settings/qx/user/login";
  8.     }
  9. }
  1. <!--添加包扫描-->
  2. <context:component-scan base-package="com.bjpowernode.crm.settings.web.controller"></context:component-scan>

image.png

  1. <%@ page contentType="text/html;charset=UTF-8" %>
  3. <%
  4.     String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8.  // <base href="http://127.0.0.1:8080/crm/">
  9.     <base href="<%=basePath%>">
  10. <meta charset="UTF-8">
  11. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  12. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  13. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  14. </head>
  15. <body>
  16.     <div style="position: absolute; top: 0px; left: 0px; width: 60%;">
  17.         <img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
  18.     </div>
  19.     <div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
  20.         <div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2019&nbsp;动力节点</span></div>
  21.     </div>
  23.     <div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
  24.         <div style="position: absolute; top: 0px; right: 60px;">
  25.             <div class="page-header">
  26.                 <h1>登录</h1>
  27.             </div>
  28.             <form action="workbench/index.html" class="form-horizontal" role="form">
  29.                 <div class="form-group form-group-lg">
  30.                     <div style="width: 350px;">
  31.                         <input class="form-control" type="text" placeholder="用户名">
  32.                     </div>
  33.                     <div style="width: 350px; position: relative;top: 20px;">
  34.                         <input class="form-control" type="password" placeholder="密码">
  35.                     </div>
  36.                     <div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
  37.                         <label>
  38.                             <input type="checkbox"> 十天内免登录
  39.                         </label>
  40.                         &nbsp;&nbsp;
  41.                         <span id="msg"></span>
  42.                     </div>
  43.                     <button type="submit" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
  44.                 </div>
  45.             </form>
  46.         </div>
  47.     </div>
  48. </body>
  49. </html>

注意

如果图片加载不出来，在springmvc中添加这个注解

  1. <mvc:default-servlet-handler /><!--静态资源释放-->