login.ftl 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta charset="utf-8">
  7. <!--浏览器小图标-->
  8. <link rel="icon" href="http://cdn.mingsoft.net/global/images/ms.ico" type="x-icon">
  9. <script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
  10. <!--小图标-->
  11. <link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
  12. <!-- 引入样式 -->
  13. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  14. <!-- 引入组件库 -->
  15. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  16. <!--网络请求框架-->
  17. <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  18. <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  19. <!--铭飞-->
  20. <script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
  21. <script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
  22. <script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
  23. <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/less/ms.less">
  24. <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css">
  25. <script>
  26. ms.base = "${base}";
  27. ms.manager = "${managerPath}";
  28. </script>
  29. </head>
  30. <body>
  31. <div id="login" class="login">
  32. <el-container class="ms-admin-login-container">
  33. <el-main class="ms-admin-login-main">
  34. <div class="ms-admin-login-warp">
  35. <img :src="ms.base+'/static/ms-admin/4.7.0/images/login-slogn.png'">
  36. <el-form :model="loginForm" status-icon :rules="loginFormRule" ref="loginForm" label-width="100px" class="ms-admin-login-form">
  37. <h1><span>账户登录 / </span>User login</h1>
  38. <el-form-item prop="name" class="ms-admin-form-item">
  39. <el-input type="text" placeholder='用户名' v-model="loginForm.managerName" autocomplete="off"></el-input>
  40. </el-form-item>
  41. <el-form-item prop="pass" class="ms-admin-form-item">
  42. <el-input type="password" placeholder='密码' v-model="loginForm.managerPassword" autocomplete="off"></el-input>
  43. </el-form-item>
  44. <el-form-item prop="code" class="ms-admin-form-item ms-admin-form-item-code">
  45. <el-input type="text" placeholder='验证码' v-model="loginForm.rand_code" autocomplete="off"></el-input>
  46. <img :src="code" class="code-img" @click="code" />
  47. <p><span>看不清?</span><span>换一张</span></p>
  48. </el-form-item>
  49. <el-form-item class="ms-admin-form-item ms-admin-form-item-checkout">
  50. <el-checkbox v-model="rememberPass">记住密码</el-checkbox>
  51. </el-form-item>
  52. <el-form-item class="ms-admin-form-item">
  53. <el-button type="primary" @click="checkLogin" class="ms-admin-login-btn">登录</el-button>
  54. </el-form-item>
  55. </el-form>
  56. </div>
  57. </el-main>
  58. </el-container>
  59. </div>
  60. </body>
  61. </html>
  62. <script>
  63. var loginVue = new Vue({
  64. el: '#login',
  65. data: {
  66. loginForm: {
  67. managerName: '',
  68. managerPassword: "",
  69. rand_code: '',
  70. },
  71. code: ms.base + "/code?t=" + new Date().getTime(),
  72. rememberPass: '',
  73. loginFormRule: {
  74. managerName: [{
  75. required: true,
  76. message: '请输入用户名',
  77. trigger: 'blur'
  78. },
  79. {
  80. min: 3,
  81. max: 6,
  82. message: '长度在 3 到 5 个字符',
  83. trigger: 'blur'
  84. }
  85. ],
  86. managerPassword: [{
  87. required: true,
  88. message: '请输入密码',
  89. trigger: 'blur'
  90. },
  91. {
  92. min: 6,
  93. max: 20,
  94. message: '长度在 6 到 20 个字符',
  95. trigger: 'blur'
  96. }
  97. ],
  98. rand_code: [{
  99. required: true,
  100. message: '请填写验证码',
  101. trigger: 'blur'
  102. },
  103. {
  104. min: 1,
  105. max: 4,
  106. message: '长度在1 到 4 个字符',
  107. trigger: 'blur'
  108. }
  109. ],
  110. }
  111. },
  112. methods: {
  113. // 登录
  114. checkLogin: function(form) {
  115. var that = this;
  116. ms.http.post(ms.base + "/ms/checkLogin.do", form).then(function(data) {
  117. if (data.result) {
  118. that.$notify({
  119. title: '成功',
  120. message: '登录成功',
  121. type: 'success'
  122. });
  123. location.href = ms.manager+"/index.do";
  124. } else {
  125. that.$notify({
  126. title: '失败',
  127. message: data.resultMsg,
  128. type: 'warning'
  129. });
  130. }
  131. }, (err) => {
  132. that.$message.error(data.resultMsg);
  133. })
  134. },
  135. code: function() {
  136. code: ms.base + "/code?t=" + new Date().getTime();
  137. },
  138. },
  139. mounted: {
  140. }
  141. })
  142. </script>