login.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
  6. <link rel="stylesheet" type="text/css" href="/static/css/login.css">
  7. <script src="/static/js/jquery.min.js"></script>
  8. <script src="/static/js/bootstrap.min.js"></script>
  9. <script src="/static/js/vue-2.4.0.js"></script>
  10. <script src="/static/js/axios.min.js"></script>
  11. <script type="text/javascript" src="/static/js/jquery.select.js"></script>
  12. <title>Document</title>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <div class="container container-small">
  17. <h1>登录
  18. <small>忘记密码?<a href="" onclick="return false;" data-toggle="modal"
  19. data-target="#myModal">修改密码</a></small>
  20. </h1>
  21. <form method="post" action="/login/">
  22. <div class="form-group">
  23. <label for="user1">用户名</label>
  24. <input type="text" class="form-control" id="user1" name="user_name" autocomplete="off">
  25. </div>
  26. <div class="form-group">
  27. <label>密码</label>
  28. <input type="password" class="form-control" v-model="pswd" name="pwd">
  29. </div>
  30. <div class="form-group">
  31. <!-- <button type="submit" class="btn btn-primary submit" @click="login">登录</button> -->
  32. <button type="submit" class="btn btn-primary submit">登录</button>
  33. </div>
  34. </form>
  35. </div>
  36. <div class="modal fade" id="myModal">
  37. <div class="modal-dialog">
  38. <div class="modal-content" style="width: 65%;">
  39. <div class="modal-header">
  40. <div class="modal-title" id="uppswd">修改密码</div>
  41. </div>
  42. <div class="modal-body">
  43. <div class="form-group">
  44. <label for="user2">用户名</label>
  45. <input type="text" class="form-control upinput" id="user2" autocomplete="off">
  46. </div>
  47. <div class="form-group">
  48. <label for="pswd">旧密码</label>
  49. <input type="password" class="form-control upinput" id="pswdold" v-model="pswd_old">
  50. </div>
  51. <div class="form-group">
  52. <label for="pswd">新密码</label>
  53. <input type="password" class="form-control upinput" v-model="pswd_new">
  54. </div>
  55. </div>
  56. <div class="modal-footer">
  57. <button class="btn btn-primary" data-dismiss="modal" @click="changepswd()">确定</button>
  58. <button class="btn btn-primary" data-dismiss="modal">取消</button>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <script>
  65. var vm = new Vue({
  66. el: '#app',
  67. data: {
  68. up_time: '',
  69. user_1: '',
  70. user_2: '',
  71. pswd: '',
  72. pswd_old: '',
  73. pswd_new: '',
  74. },
  75. methods: {
  76. login() {
  77. console.log($("#user1").val())
  78. this.user_1 = $("#user1").val()
  79. axios.post('/login/', {
  80. params: {
  81. user_1: this.user_1,
  82. pswd: this.pswd,
  83. }
  84. })
  85. .then(res => {
  86. // alert(res.data)
  87. var data1 = res.data
  88. console.log(res.request)
  89. // if (data1["code"] == 200) {
  90. // alert("登录成功")
  91. // self.location = '/index/';
  92. // }
  93. })
  94. .catch(err => {
  95. alert(err.response["data"] + err.response["status"])
  96. })
  97. },
  98. changepswd() {
  99. // console.log($("#user2").val())
  100. this.user_2 = $("#user2").val()
  101. axios.put('/login/', {
  102. params: {
  103. user_2: this.user_2,
  104. pswd_old: this.pswd_old,
  105. pswd_new: this.pswd_new,
  106. }
  107. })
  108. .then(res => {
  109. // alert(res.data)
  110. var data1 = res.data
  111. console.log(data1)
  112. })
  113. .catch(err => {
  114. alert(err.response["data"] + err.response["status"])
  115. // console.log(err.response["data"] + err.response["status"])
  116. // console.log(err.response["data"] + err.response["status"])
  117. })
  118. },
  119. },
  120. created() {
  121. }
  122. });
  123. $(function () {
  124. // 开始写 jQuery 代码...
  125. var timer = null;
  126. // 定义一个公用的搜索接口
  127. function getStr(n, url, field, clickif) {
  128. //n为搜索的参数 url为请求的路由,filed是定位表单的id,
  129. //clickif用于判断是否是第一次加载,如果不是第一次加载则需要模拟点击
  130. var search = n
  131. // 配置路由
  132. if (typeof search === 'undefined') {
  133. search = ''
  134. };
  135. // console.log(search)
  136. axios.get(url, {
  137. params: {
  138. search_no: search
  139. }
  140. })
  141. .then(res => {
  142. // alert(res.data)
  143. var data1 = res.data.data
  144. datas = data1
  145. // console.log(datas)
  146. if (datas.length == 0) {
  147. alert("没有搜索到数据")
  148. return
  149. }
  150. $.selectSuggest(field, datas);
  151. // 是否第一次进入
  152. if (clickif !== 1) {
  153. // 触发点击
  154. $("#" + field).trigger("click");
  155. }
  156. })
  157. .catch(err => {
  158. console.log('error:' + err)
  159. })
  160. };
  161. //登录时获取用户信息
  162. $("#user1").bind("input propertychange", function (event) {
  163. var search = $("#user1").val()
  164. // console.log($("#user1").val())
  165. timer && clearTimeout(timer);
  166. timer = setTimeout(function () {
  167. getStr(search, '/logininformation/', 'user1');
  168. }, 2000);
  169. });
  170. getStr('', '/logininformation/', 'user1', 1);
  171. //修改密码时获取用户信息
  172. $("#user2").bind("input propertychange", function (event) {
  173. var search = $("#user2").val()
  174. // console.log($("#user2").val())
  175. timer && clearTimeout(timer);
  176. timer = setTimeout(function () {
  177. getStr(search, '/logininformation/', 'user2');
  178. }, 1000);
  179. });
  180. });
  181. </script>
  182. </body>
  183. </html>