1+ <style >
2+ /* Credit to bootsnipp.com for the css for the color graph */
3+ .colorgraph {
4+ height 5px ;
5+ border-top 0 ;
6+ background #c4e17f ;
7+ border-radius 5px ;
8+ background-image -webkit-linear-gradient (left , #c4e17f , #c4e17f 12.5% , #f7fdca 12.5% , #f7fdca 25% , #fecf71 25% , #fecf71 37.5% , #f0776c 37.5% , #f0776c 50% , #db9dbe 50% , #db9dbe 62.5% , #c49cde 62.5% , #c49cde 75% , #669ae1 75% , #669ae1 87.5% , #62c2e4 87.5% , #62c2e4 );
9+ background-image -moz-linear-gradient (left , #c4e17f , #c4e17f 12.5% , #f7fdca 12.5% , #f7fdca 25% , #fecf71 25% , #fecf71 37.5% , #f0776c 37.5% , #f0776c 50% , #db9dbe 50% , #db9dbe 62.5% , #c49cde 62.5% , #c49cde 75% , #669ae1 75% , #669ae1 87.5% , #62c2e4 87.5% , #62c2e4 );
10+ background-image -o-linear-gradient (left , #c4e17f , #c4e17f 12.5% , #f7fdca 12.5% , #f7fdca 25% , #fecf71 25% , #fecf71 37.5% , #f0776c 37.5% , #f0776c 50% , #db9dbe 50% , #db9dbe 62.5% , #c49cde 62.5% , #c49cde 75% , #669ae1 75% , #669ae1 87.5% , #62c2e4 87.5% , #62c2e4 );
11+ background-image linear-gradient (to right , #c4e17f , #c4e17f 12.5% , #f7fdca 12.5% , #f7fdca 25% , #fecf71 25% , #fecf71 37.5% , #f0776c 37.5% , #f0776c 50% , #db9dbe 50% , #db9dbe 62.5% , #c49cde 62.5% , #c49cde 75% , #669ae1 75% , #669ae1 87.5% , #62c2e4 87.5% , #62c2e4 );
12+ }
13+ style >
14+
15+ <template >
16+ <div class =" container"
17+
18+ <div class =" row" style =" margin-top 20px "
19+ <div class =" col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"
20+ <!-- <form role="form" method="post" action="/" >-->
21+ <fieldset >
22+ <h2 >Please Sign In</h2 >
23+ <hr class =" colorgraph"
24+ <!-- <div class="form-group">-->
25+ <!-- <input type="username" name="username" id="username" class="form-control input-lg"-->
26+ <!-- placeholder="Email Address">-->
27+ <!-- </div>-->
28+ <div class =" form-group"
29+ <input type =" username" name =" username" id =" username" class =" form-control input-lg"
30+ value =" qxl1231"
31+ placeholder =" username "
32+ </div >
33+ <div class =" form-group"
34+ <input type =" password" name =" password" id =" password" class =" form-control input-lg"
35+ placeholder =" Password" value =" 1231"
36+ </div >
37+ <!-- <span class="button-checkbox">-->
38+ <!-- <button type="button" class="btn" data-color="info">Remember Me</button>-->
39+ <!-- <input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">-->
40+ <!-- <a href="" class="btn btn-link pull-right">Forgot Password?</a>-->
41+ <!-- </span>-->
42+ <hr class =" colorgraph"
43+ <div class =" row"
44+ <div class =" col-xs-6 col-sm-6 col-md-12"
45+ <input type =" button" class =" btn btn-lg btn-success btn-block" value =" 登录" @click =" login"
46+ id =" hide"
47+ </div >
48+
49+ <!-- <div class="col-xs-6 col-sm-6 col-md-6">-->
50+ <!-- <a href="" class="btn btn-lg btn-primary btn-block">Register</a>-->
51+ <!-- </div>-->
52+ </div >
53+
54+ <div class =" alert alert-warning" style =" display none "
55+ <strong >Warning!</strong > 您的用户名或密码不正确!请重新输入.
56+ </div >
57+
58+ </fieldset >
59+ <!-- </form>-->
60+ </div >
61+ </div >
62+
63+ </div >
64+ </template >
65+
66+ <script >
67+ $ (function () {
68+ $ (' .button-checkbox' each (function () {
69+ var $widget = $ (this ),
70+ $button = $widget .find (' button'
71+ $checkbox = $widget .find (' input:checkbox'
72+ color = $button .data (' color'
73+ settings = {
74+ on: {
75+ icon: ' glyphicon glyphicon-check'
76+ },
77+ off: {
78+ icon: ' glyphicon glyphicon-unchecked'
79+ }
80+ };
81+
82+ $button .on (' click' function () {
83+ $checkbox .prop (' checked' ! $checkbox .is (' :checked'
84+ $checkbox .triggerHandler (' change'
85+ updateDisplay ();
86+ });
87+
88+ $checkbox .on (' change' function () {
89+ updateDisplay ();
90+ });
91+
92+ function updateDisplay () {
93+ var isChecked = $checkbox .is (' :checked'
94+ // Set the button's state
95+ $button .data (' state' ? " on" : " off"
96+
97+ // Set the button's icon
98+ $button .find (' .state-icon'
99+ .removeClass ()
100+ .addClass (' state-icon ' + settings[$button .data (' state' icon );
101+
102+ // Update the button's color
103+ if (isChecked) {
104+ $button
105+ .removeClass (' btn-default'
106+ .addClass (' btn-' + color + ' active'
107+ }
108+ else {
109+ $button
110+ .removeClass (' btn-' + color + ' active'
111+ .addClass (' btn-default'
112+ }
113+ }
114+
115+ function init () {
116+ updateDisplay ();
117+ // Inject the icon if applicable
118+ if ($button .find (' .state-icon' length == 0 ) {
119+ $button .prepend (' <i class="state-icon ' + settings[$button .data (' state' icon + ' "></i> '
120+ }
121+ }
122+
123+ init ();
124+ });
125+ });
126+
127+
128+ module .exports = {
129+
130+ http: {
131+ root: ' /api'
132+ },
133+ data : function () {
134+ return {
135+ user: {
136+ usename: " "
137+ email: " "
138+ pwd: " "
139+ }
140+ }
141+ },
142+ methods: {
143+ login : function () {
144+ var username = $ (' #username' val ();
145+ var password = $ (' #password' val ();
146+ // console.log(username + password)
147+
148+ var settings = {
149+ " async" : true ,
150+ " crossDomain" : true ,
151+ " url" : " /api/Users/login"
152+ " method" : " POST"
153+ " headers" : {
154+ " content-type" : " application/json"
155+ " accept" : " application/json"
156+ " cache-control" : " no-cache"
157+ " postman-token" : " e5edd675-b902-7711-eba4-2cbab9bc227f"
158+ },
159+ " processData" : false ,
160+ " data" : " {\" username\" :\" " + username + " \" , \" password\" :\" " + password + " \" }"
161+ }
162+
163+ $ .ajax (settings).done (function (response ) {
164+ self .user = response;
165+ if (response && response .userId ) {
166+ $ (" fieldset" hide ();
167+ $ (" .table" show ();
168+ $ (" #selectid" show ();
169+
170+ $ (" button" show ();
171+
172+ }
173+
174+ }).error (function (err ) {
175+ $ (" fieldset" show ();
176+ $ (" .alert" show ();
177+ });
178+ }
179+ }
180+ }
181+
182+ script >
0 commit comments