angularjs +boostrap后台模板实现原理
ng+bootstrap可以做出很漂亮的管理系统出来,https://wrapbootstrap.com/可以付费购买,下文会提供一个免费的,要讲解如何从0到1把ng前端结构搭出来是很漫长的教程,本文仅仅介绍一下这个免费后台模版的结构,然后重点讲解如何改写这个结构。
开始阅读之前,假设读者已经ng入门并且对于ui.router,bootstrap有一定了解。
下载链接http://pan.baidu.com/s/1o73ewfK
下载下来以后我们可以挂载到IIS里面看看这个模版的运行效果
1) 后台结构
其中我们需要关注的如下:
index.html: 入口
js: 存放所有业务逻辑代码
js/app.js:定义ng需要加载的模块
js/main.js:定义ng的全局配置信息
js/config.router.js:ng的路由器
tpl:存放所有页面模版
tpl/blocks:页面框架(头、尾、侧边栏…)
vendor:存放所有第三方模块
2) 改写结构,接管路由
结构简图如下
这里接管的原则是尽量不改动原始结构,首先在根目录创建我们自己的目录结构.
<code class="hljs markdown has-numbering"><span class="hljs-blockquote">> mkdir admin</span> <span class="hljs-blockquote">> mkdir admin\blocks</span> <span class="hljs-blockquote">> copy js\main.js admin\</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>
编写页面框架模版,我们也可以直接从tpl目录复制过来再做修改。简单起见,我们在模版里面直接使用了中文,这样会导致页面乱码,解决方法:html文件用utf-8编码格式存储。
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/blocks/aside.html--></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"aside-wrap"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navi-wrap"</span>></span><span class="hljs-comment"><!-- nav --></span><span class="hljs-tag"><<span class="hljs-title">nav</span> <span class="hljs-attribute">ui-nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navi"</span> <span class="hljs-attribute">ng-include</span>=<span class="hljs-value">"'admin/blocks/nav.html'"</span>></span><span class="hljs-tag"></<span class="hljs-title">nav</span>></span><span class="hljs-comment"><!-- nav --></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!--admin/blocks/header.html--></span><span class="hljs-comment"><!-- navbar header --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.navbarHeaderColor</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pull-right visible-xs dk"</span> <span class="hljs-attribute">ui-toggle-class</span>=<span class="hljs-value">"show"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".navbar-collapse"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-cog"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pull-right visible-xs"</span> <span class="hljs-attribute">ui-toggle-class</span>=<span class="hljs-value">"off-screen"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".app-aside"</span> <span class="hljs-attribute">ui-scroll</span>=<span class="hljs-value">"app"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-align-justify"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-comment"><!-- brand --></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#/"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand text-lt"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-btc"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/logo.png"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"."</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hide"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-folded m-l-xs"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.name</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-comment"><!-- / brand --></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- / navbar header --></span><span class="hljs-comment"><!-- navbar collapse --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"collapse pos-rlt navbar-collapse box-shadow </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.navbarCollapseColor</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span><span class="hljs-comment"><!-- buttons --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav hidden-xs"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn no-shadow navbar-btn"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"app.settings.asideFolded = !app.settings.asideFolded"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.asideFolded</span> ? '<span class="hljs-variable">fa-indent</span>' : '<span class="hljs-variable">fa-dedent</span>'}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value"> fa-fw"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- / buttons --></span><span class="hljs-comment"><!-- nabar right --></span><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav navbar-right"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-xs"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-fullscreen</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown"</span> <span class="hljs-attribute">dropdown</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-toggle clear"</span> <span class="hljs-attribute">dropdown-toggle</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/a0.jpg"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"..."</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"on md b-white bottom"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-sm hidden-md"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"><<span class="hljs-title">b</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">b</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-comment"><!-- dropdown --></span><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu animated fadeInRight w"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>Logout<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ul</span>></span><span class="hljs-comment"><!-- / dropdown --></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ul</span>></span><span class="hljs-comment"><!-- / navbar right --></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- / navbar collapse --></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li></ul>
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/blocks/nav.html--></span> <span class="hljs-comment"><!-- list --></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-folded padder m-t m-b-sm text-muted text-xs"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">translate</span>=<span class="hljs-value">"导航"</span>></span>导航<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-comment"><!-- / list --></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!--admin/app.html--></span><span class="hljs-comment"><!-- navbar --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-include</span>=<span class="hljs-value">" 'admin/blocks/header.html' "</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-header navbar"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- / navbar --></span><span class="hljs-comment"><!-- menu --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-include</span>=<span class="hljs-value">" 'admin/blocks/aside.html' "</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-aside hidden-xs </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.asideColor</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- / menu --></span><span class="hljs-comment"><!-- content --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-content"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-butterbar</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"off-screen-toggle hide"</span> <span class="hljs-attribute">ui-toggle-class</span>=<span class="hljs-value">"off-screen"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".app-aside"</span> ></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ncy-breadcrumb</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-content-body fade-in-up"</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- /content --></span><span class="hljs-comment"><!-- footer --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-footer wrapper b-t bg-light"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pull-right"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.version</span>}}</span><span class="xml"> <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">ui-scroll</span>=<span class="hljs-value">"app"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m-l-sm text-muted"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-long-arrow-up"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>© 2016 Copyright.<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- / footer --></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-include</span>=<span class="hljs-value">" 'tpl/blocks/settings.html' "</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"settings panel panel-default"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul>
给我们的首页创建一个空白模版admin/dashboard.html
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/dashboard.html--></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>
写我们新的路由
<code class="hljs php has-numbering"><span class="hljs-comment">// admin/router.js</span> <span class="hljs-string">'use strict'</span>;app.run(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$rootScope</span>, <span class="hljs-variable">$state</span>, <span class="hljs-variable">$stateParams</span>)</span> {</span><span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$state</span> = <span class="hljs-variable">$state</span>;<span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$stateParams</span> = <span class="hljs-variable">$stateParams</span>; }) .config(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$stateProvider</span>, <span class="hljs-variable">$urlRouterProvider</span>)</span> {</span><span class="hljs-variable">$urlRouterProvider</span>.otherwise(<span class="hljs-string">'/app/dashboard'</span>);<span class="hljs-variable">$stateProvider</span>.state(<span class="hljs-string">'app'</span>, {<span class="hljs-keyword">abstract</span>: <span class="hljs-keyword">true</span>,url: <span class="hljs-string">'/app'</span>,templateUrl: <span class="hljs-string">'admin/app.html'</span>,}).state(<span class="hljs-string">'app.dashboard'</span>, {url: <span class="hljs-string">'/dashboard'</span>,templateUrl: <span class="hljs-string">'admin/dashboard.html'</span>,})});</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>
修改入口,注释或删除掉对原config.router.js、main.js的引用,换成我们的控制接管
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--index.html--></span> ...<span class="hljs-comment"><!--<script src="js/config.router.js"></script>--></span><span class="hljs-comment"><!--<script src="js/main.js"></script>--></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"admin/router.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"admin/main.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> ...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
到此我们就得到了一套可自由扩展的前端框架
3) 接下来我们基于BasicAuth加入系统的用户验证功能。
这里我们采用按功能模块来建立子目录,区别于原模版框架(原框架是按文件类型区分子目录,例如脚本放在js/里面,模版放在tpl里面)。
首先启动Restful服务器,然后我们为服务器配置一个全局变量,代码里面的host需要修改成服务器真实地址
<code class="hljs r has-numbering">// admin/main.js <span class="hljs-keyword">...</span>$scope.app = {host: <span class="hljs-string">"http://172.17.9.92:8000"</span>,name: <span class="hljs-string">'Angulr'</span>, <span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
创建认证功能模块目录auth
<code class="hljs markdown has-numbering"><span class="hljs-blockquote">> mkdir admin\auth\</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>
编写controller(控制器)
<code class="hljs php has-numbering"><span class="hljs-comment">// admin/auth/ctrl.js</span> app.controller(<span class="hljs-string">'LoadingController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$resource</span>,<span class="hljs-variable">$state</span>)</span>{</span><span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);<span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'auth.login'</span>);}) }); app.controller(<span class="hljs-string">'LoginController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$state</span>,<span class="hljs-variable">$http</span>,<span class="hljs-variable">$resource</span>,Base64)</span>{</span><span class="hljs-variable">$scope</span>.login = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">""</span><span class="hljs-keyword">var</span> authdata = Base64.encode(<span class="hljs-variable">$scope</span>.user.username + <span class="hljs-string">':'</span> + <span class="hljs-variable">$scope</span>.user.password);<span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + authdata;<span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);<span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">"服务器登录错误"</span>})} }); app.factory(<span class="hljs-string">'Base64'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-keyword">var</span> keyStr = <span class="hljs-string">'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='</span>;<span class="hljs-keyword">return</span> {encode: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(input)</span> {</span><span class="hljs-keyword">var</span> output = <span class="hljs-string">""</span>;<span class="hljs-keyword">var</span> chr1, chr2, chr3 = <span class="hljs-string">""</span>;<span class="hljs-keyword">var</span> enc1, enc2, enc3, enc4 = <span class="hljs-string">""</span>;<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;<span class="hljs-keyword">do</span> {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> <span class="hljs-number">2</span>;enc2 = ((chr1 & <span class="hljs-number">3</span>) << <span class="hljs-number">4</span>) | (chr2 >> <span class="hljs-number">4</span>);enc3 = ((chr2 & <span class="hljs-number">15</span>) << <span class="hljs-number">2</span>) | (chr3 >> <span class="hljs-number">6</span>);enc4 = chr3 & <span class="hljs-number">63</span>;<span class="hljs-keyword">if</span> (isNaN(chr2)) {enc3 = enc4 = <span class="hljs-number">64</span>;} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (isNaN(chr3)) {enc4 = <span class="hljs-number">64</span>;}output = output +keyStr.charAt(enc1) +keyStr.charAt(enc2) +keyStr.charAt(enc3) +keyStr.charAt(enc4);chr1 = chr2 = chr3 = <span class="hljs-string">""</span>;enc1 = enc2 = enc3 = enc4 = <span class="hljs-string">""</span>;} <span class="hljs-keyword">while</span> (i < input.length);<span class="hljs-keyword">return</span> output;},decode: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(input)</span> {</span><span class="hljs-keyword">var</span> output = <span class="hljs-string">""</span>;<span class="hljs-keyword">var</span> chr1, chr2, chr3 = <span class="hljs-string">""</span>;<span class="hljs-keyword">var</span> enc1, enc2, enc3, enc4 = <span class="hljs-string">""</span>;<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;<span class="hljs-comment">// remove all characters that are not A-Z, a-z, 0-9, +, /, or =</span><span class="hljs-keyword">var</span> base64test = /[^A-Za-z0-<span class="hljs-number">9</span>\+\/\=]/g;<span class="hljs-keyword">if</span> (base64test.exec(input)) {window.alert(<span class="hljs-string">"There were invalid base64 characters in the input text.\n"</span> +<span class="hljs-string">"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n"</span> +<span class="hljs-string">"Expect errors in decoding."</span>);}input = input.replace(/[^A-Za-z0-<span class="hljs-number">9</span>\+\/\=]/g, <span class="hljs-string">""</span>);<span class="hljs-keyword">do</span> {enc1 = keyStr.indexOf(input.charAt(i++));enc2 = keyStr.indexOf(input.charAt(i++));enc3 = keyStr.indexOf(input.charAt(i++));enc4 = keyStr.indexOf(input.charAt(i++));chr1 = (enc1 << <span class="hljs-number">2</span>) | (enc2 >> <span class="hljs-number">4</span>);chr2 = ((enc2 & <span class="hljs-number">15</span>) << <span class="hljs-number">4</span>) | (enc3 >> <span class="hljs-number">2</span>);chr3 = ((enc3 & <span class="hljs-number">3</span>) << <span class="hljs-number">6</span>) | enc4;output = output + String.fromCharCode(chr1);<span class="hljs-keyword">if</span> (enc3 != <span class="hljs-number">64</span>) {output = output + String.fromCharCode(chr2);}<span class="hljs-keyword">if</span> (enc4 != <span class="hljs-number">64</span>) {output = output + String.fromCharCode(chr3);}chr1 = chr2 = chr3 = <span class="hljs-string">""</span>;enc1 = enc2 = enc3 = enc4 = <span class="hljs-string">""</span>;} <span class="hljs-keyword">while</span> (i < input.length);<span class="hljs-keyword">return</span> output;}}; }) </code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li></ul>
编写template(模版)
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/auth/loading.html--></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"LoadingController"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-md-12 text-center"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-refresh glyphicon-refresh-animate"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span> loading...<span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/auth/login.html--></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container w-xxl w-auto-xs"</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"LoginController"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand block m-t"</span>></span>{{app.name}}<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m-b-lg"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wrapper text-center"</span>></span><span class="hljs-tag"><<span class="hljs-title">strong</span>></span>Sign in to get in touch<span class="hljs-tag"></<span class="hljs-title">strong</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"form"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-validation"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-group list-group-sm"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-group-item"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"username"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control no-border"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"user.username"</span> <span class="hljs-attribute">required</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-group-item"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control no-border"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"user.password"</span> <span class="hljs-attribute">required</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-lg btn-primary btn-block"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"login()"</span> <span class="hljs-attribute">ng-disabled</span>=<span class="hljs-value">'form.$invalid'</span>></span>Log in<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"line line-dashed"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-danger wrapper text-center"</span> <span class="hljs-attribute">ng-show</span>=<span class="hljs-value">"authError"</span>></span>{{authError}}<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">form</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>
改写路由
<code class="hljs r has-numbering">// admin/router.js <span class="hljs-keyword">...</span>$urlRouterProvider.otherwise(<span class="hljs-string">'/auth/loading'</span>);$stateProvider.state(<span class="hljs-string">'auth'</span>,{abstract: true,url:<span class="hljs-string">'/auth'</span>,template: <span class="hljs-string">'<div ui-view class="fade-in"></div>'</span>,resolve: {deps: [<span class="hljs-string">'$ocLazyLoad'</span>,<span class="hljs-keyword">function</span>( $ocLazyLoad ){<span class="hljs-keyword">return</span> $ocLazyLoad.load(<span class="hljs-string">'admin/auth/ctrl.js'</span>);}]}}).state(<span class="hljs-string">'auth.loading'</span>,{url:<span class="hljs-string">'/loading'</span>,templateUrl:<span class="hljs-string">'admin/auth/loading.html'</span>,}).state(<span class="hljs-string">'auth.login'</span>,{url:<span class="hljs-string">'/login'</span>,templateUrl:<span class="hljs-string">'admin/auth/login.html'</span>,})<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>
代码挺多,就不逐行解释了,最核心的就是:
用Base64加密[用户名:密码],在请求头加入 Authorization: Basic [加密串]
<code class="hljs php has-numbering"><span class="hljs-keyword">var</span> authdata = Base64.encode(username + <span class="hljs-string">":"</span> + password); <span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + authdata;</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>
改完以后重新访问,将实现流程图中的home->loading->login->dashboard。
事情还没完,我们再重新访问,又会重复这个流程,并不会自动登录,这是因为BasicAuth的特性是在每一次web请求的时候都需要加入Authorization请求头才行。所以我们还要做点工作:1.登录成功以后将authdata存在本地,2.给全局http请求统一加入这个请求头
<code class="hljs r has-numbering">// admin/auth/ctrl.js <span class="hljs-keyword">...</span> app.controller(<span class="hljs-string">'LoginController'</span>,<span class="hljs-keyword">function</span>($scope,$state,$http,$resource,Base64,$localStorage) <span class="hljs-keyword">...</span>$com.get(<span class="hljs-keyword">function</span>(){$localStorage.auth = authdata;$state.go(<span class="hljs-string">'app.dashboard'</span>);},<span class="hljs-keyword">function</span>(){$scope.authError = <span class="hljs-string">"服务器登录错误"</span>}) <span class="hljs-keyword">...</span> </code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>
<code class="hljs php has-numbering"><span class="hljs-comment">// admin/router.js</span> app .run(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$rootScope</span>, <span class="hljs-variable">$state</span>, <span class="hljs-variable">$stateParams</span>,<span class="hljs-variable">$localStorage</span>,<span class="hljs-variable">$http</span>)</span> {</span><span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + <span class="hljs-variable">$localStorage</span>.auth;<span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$state</span> = <span class="hljs-variable">$state</span>;<span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$stateParams</span> = <span class="hljs-variable">$stateParams</span>;}) ...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>
重新刷新首页,页面将实现自动登录了,但是事情还没完,进入系统以后,虽然每次Web请求我们都加入了BasicAuth的请求头,但是如果服务器端做了帐号修改,一样会产生401的错误,产生的结果就是客户端点什么操作都不会有反应,我们应该在全局来拦截401,引导客户端跳转到重新登录的界面:
<code class="hljs php has-numbering"><span class="hljs-comment">// admin/router.js</span> ... app.config(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$httpProvider</span>)</span> {</span><span class="hljs-variable">$httpProvider</span>.interceptors.push(<span class="hljs-string">'AuthInterceptor'</span>); }) app.factory(<span class="hljs-string">'AuthInterceptor'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$rootScope</span>, <span class="hljs-variable">$q</span>,<span class="hljs-variable">$location</span>)</span> {</span><span class="hljs-keyword">return</span> {responseError: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(response)</span> {</span><span class="hljs-keyword">if</span>(response.status==<span class="hljs-number">401</span>){<span class="hljs-variable">$location</span>.url(<span class="hljs-string">'/auth/login'</span>);}<span class="hljs-keyword">return</span> <span class="hljs-variable">$q</span>.reject(response);}}; })</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>
大功即将告成,还有最后一步,有了登录必然有登出,BasicAuth协议本身是没有登出概念的,我们这里做的登出,就是删除本地那个保存的authdata。
<code class="hljs r has-numbering">// admin/main.js angular.module(<span class="hljs-string">'app'</span>).controller(<span class="hljs-string">'AppCtrl'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-string">'$translate'</span>, <span class="hljs-string">'$localStorage'</span>, <span class="hljs-string">'$window'</span>, <span class="hljs-string">'$state'</span>,<span class="hljs-string">'$http'</span>,<span class="hljs-keyword">function</span>( $scope, $translate, $localStorage, $window ,$state,$http) { <span class="hljs-keyword">...</span>$scope.logout = <span class="hljs-keyword">function</span>(){$localStorage.auth = null;$http.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">"Basic"</span>;$state.go(<span class="hljs-string">"auth.login"</span>);}<span class="hljs-keyword">function</span> isSmartDevice( $window ){<span class="hljs-keyword">...</span>}</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>
<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/blocks/header.html--></span> ...<span class="hljs-comment"><!-- dropdown --></span><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu animated fadeInRight w"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"logout()"</span>></span>Logout<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ul</span>></span><span class="hljs-comment"><!-- / dropdown --></span>...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>
锦上添花,标准的后台系统一般会在页面右上角显示登录用户的帐号信息,我们定义的协议/auth/info/是会把这些信息带下来的,我们来补全一下这个功能:
<code class="hljs php has-numbering"><span class="hljs-comment">// admin/auth/ctrl.js</span> app.controller(<span class="hljs-string">'LoadingController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$resource</span>,<span class="hljs-variable">$state</span>,<span class="hljs-variable">$localStorage</span>)</span>{</span><span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);<span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-comment">//引入data</span><span class="hljs-variable">$scope</span>.session_user = <span class="hljs-variable">$localStorage</span>.user = data; <span class="hljs-comment">//保存用户信息</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);}) }); app.controller(<span class="hljs-string">'LoginController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$state</span>,<span class="hljs-variable">$http</span>,<span class="hljs-variable">$resource</span>,Base64,<span class="hljs-variable">$localStorage</span>)</span>{</span><span class="hljs-variable">$scope</span>.login = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">""</span><span class="hljs-keyword">var</span> authdata = Base64.encode(<span class="hljs-variable">$scope</span>.user.username + <span class="hljs-string">':'</span> + <span class="hljs-variable">$scope</span>.user.password);<span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + authdata;<span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);<span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-comment">//引入data</span><span class="hljs-variable">$scope</span>.session_user = <span class="hljs-variable">$localStorage</span>.user = data; <span class="hljs-comment">//保存用户信息</span><span class="hljs-variable">$localStorage</span>.auth = authdata;<span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">"服务器登录错误"</span>})} }); ...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>
<code class="hljs r has-numbering">// admin/main.js <span class="hljs-keyword">...</span> $scope.session_user = $localStorage.user; $scope.logout = <span class="hljs-keyword">function</span>(){<span class="hljs-keyword">...</span>}</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<code class="hljs r has-numbering"><!--admin/blocks/header.html--> <span class="hljs-keyword">...</span> <span class=<span class="hljs-string">"hidden-sm hidden-md"</span>>{{session_user.username}}</span> <b class=<span class="hljs-string">"caret"</span>></b> <span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
4) CRUD
创建news目录
<code class="hljs markdown has-numbering"><span class="hljs-blockquote">> mkdir admin\news\</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>
增加news导航
<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- admin/blocks/nav.html --></span> <span class="hljs-comment"><!-- list --></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-folded padder m-t m-b-sm text-muted text-xs"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">translate</span>=<span class="hljs-value">"导航"</span>></span>导航<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ui-sref-active</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-book icon text-info-dker"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"font-bold"</span>></span>新闻管理<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-comment"><!-- / list --></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul>
书写控制器
<code class="hljs php has-numbering"><span class="hljs-comment">// admin/news/ctrl.js</span> <span class="hljs-string">'use strict'</span>;app.controller(<span class="hljs-string">'ListController'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>, <span class="hljs-variable">$resource</span>,<span class="hljs-variable">$stateParams</span>,<span class="hljs-variable">$modal</span>,<span class="hljs-variable">$state</span>)</span> {</span><span class="hljs-comment">//查询</span><span class="hljs-variable">$scope</span>.query = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(page,filter)</span>{</span><span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/?page=:page&search=:filter"</span>,{page:<span class="hljs-string">'@page'</span>,filter:<span class="hljs-string">'@filter'</span>});<span class="hljs-keyword">if</span>(!page){page=<span class="hljs-number">1</span>;}<span class="hljs-keyword">else</span>{page=parseInt(page);}<span class="hljs-variable">$com</span>.get({page:page,filter:filter},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-comment">//扩展分页数据,显示页签,最终效果为 < 1 2 3 4 5 ></span>data.page_index = page;data.pages = []; <span class="hljs-comment">//页签表</span><span class="hljs-keyword">var</span> N = <span class="hljs-number">5</span>; <span class="hljs-comment">//每次显示5个页签</span><span class="hljs-keyword">var</span> s = Math.floor(page/N)*N;<span class="hljs-keyword">if</span>(s==page)s-=N;s += <span class="hljs-number">1</span>;<span class="hljs-keyword">var</span> e = Math.min(data.page_count,s+N-<span class="hljs-number">1</span>)<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=s;i<=e;i++)data.pages.push(i)<span class="hljs-variable">$scope</span>.data = data;<span class="hljs-variable">$scope</span>.search_context = filter;});}<span class="hljs-comment">//搜索跳转</span><span class="hljs-variable">$scope</span>.search = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>,{search:<span class="hljs-variable">$scope</span>.search_context});}<span class="hljs-comment">//全选</span><span class="hljs-keyword">var</span> selected = <span class="hljs-keyword">false</span>;<span class="hljs-variable">$scope</span>.selectAll = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>selected = !selected;angular.<span class="hljs-keyword">forEach</span>(<span class="hljs-variable">$scope</span>.data.results,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span>{</span>item.selected = selected;});}<span class="hljs-comment">//自定义操作处理,其中1为删除所选记录</span><span class="hljs-variable">$scope</span>.exec = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-keyword">if</span>(<span class="hljs-variable">$scope</span>.operate==<span class="hljs-string">"1"</span>){<span class="hljs-keyword">var</span> ids = [];angular.<span class="hljs-keyword">forEach</span>(<span class="hljs-variable">$scope</span>.data.results,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span>{</span><span class="hljs-keyword">if</span>(item.selected){ids.push(item.id);}});<span class="hljs-keyword">if</span>(ids.length><span class="hljs-number">0</span>){<span class="hljs-comment">//弹出删除确认</span><span class="hljs-keyword">var</span> modalInstance = <span class="hljs-variable">$modal</span>.open({templateUrl: <span class="hljs-string">'admin/confirm.html'</span>,controller: <span class="hljs-string">'ConfirmController'</span>,size:<span class="hljs-string">'sm'</span>,});modalInstance.result.then(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span><span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/deletes/?"</span>);<span class="hljs-variable">$com</span>.delete({<span class="hljs-string">'ids'</span>:ids.join(<span class="hljs-string">','</span>)},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>);});});}}}<span class="hljs-comment">//根据url参数(分页、搜索关键字)查询数据</span><span class="hljs-variable">$scope</span>.query(<span class="hljs-variable">$stateParams</span>.page,<span class="hljs-variable">$stateParams</span>.search); });app.controller(<span class="hljs-string">'ConfirmController'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-string">'$modalInstance'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>, <span class="hljs-variable">$modalInstance</span>)</span>{</span><span class="hljs-variable">$scope</span>.ok = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span><span class="hljs-variable">$modalInstance</span>.close();};<span class="hljs-variable">$scope</span>.cancel = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span><span class="hljs-variable">$modalInstance</span>.dismiss(<span class="hljs-string">'cancel'</span>);}; }]);app.controller(<span class="hljs-string">'DetailController'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$rootScope</span>,<span class="hljs-variable">$scope</span>, <span class="hljs-variable">$resource</span>, <span class="hljs-variable">$stateParams</span>,<span class="hljs-variable">$state</span>)</span> {</span><span class="hljs-variable">$scope</span>.edit_mode = !!<span class="hljs-variable">$stateParams</span>.id;<span class="hljs-keyword">if</span>(<span class="hljs-variable">$scope</span>.edit_mode){<span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/:id/?"</span>,{id:<span class="hljs-string">'@id'</span>});<span class="hljs-keyword">var</span> resp = <span class="hljs-variable">$com</span>.get({id:<span class="hljs-variable">$stateParams</span>.id},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-variable">$scope</span>.data = resp;});}<span class="hljs-keyword">else</span>{<span class="hljs-variable">$scope</span>.data = {};}<span class="hljs-variable">$scope</span>.submit = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-keyword">if</span>(<span class="hljs-variable">$scope</span>.edit_mode){<span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/:id/?"</span>,{id:<span class="hljs-string">'@id'</span>},{<span class="hljs-string">'update'</span>: { method:<span class="hljs-string">'PUT'</span> },});<span class="hljs-variable">$com</span>.update({id:<span class="hljs-variable">$stateParams</span>.id},<span class="hljs-variable">$scope</span>.data,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-variable">$rootScope</span>.previousState,<span class="hljs-variable">$rootScope</span>.previousStateParams);});}<span class="hljs-keyword">else</span>{<span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/?"</span>);<span class="hljs-variable">$com</span>.save(<span class="hljs-variable">$scope</span>.data,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>);});}};<span class="hljs-variable">$scope</span>.delete = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/:id/?"</span>,{id:<span class="hljs-string">'@id'</span>});<span class="hljs-variable">$com</span>.delete({id:<span class="hljs-variable">$stateParams</span>.id},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>);})} });</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li>107</li><li>108</li><li>109</li><li>110</li><li>111</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li>107</li><li>108</li><li>109</li><li>110</li><li>111</li></ul>
书写列表模版
<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!-- admin/news/list.html --></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wrapper-md"</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"ListController"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel panel-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-heading"</span>></span><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav nav-pills pull-right"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">" padding-top:4px; padding-right:4px"</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn m-b-xs btn-sm btn-primary btn-addon"</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.create()"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-plus"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>新增<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ul</span>></span>新闻列表<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row wrapper"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-5 m-b-xs"</span>></span><span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-sm form-control w-sm inline v-middle"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"operate"</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"operate=0"</span>></span><span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"0"</span>></span>---<span class="hljs-tag"></<span class="hljs-title">option</span>></span><span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"1"</span>></span>删除所选记录<span class="hljs-tag"></<span class="hljs-title">option</span>></span><span class="hljs-tag"></<span class="hljs-title">select</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-sm btn-default"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"exec()"</span>></span>执行<span class="hljs-tag"></<span class="hljs-title">button</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-4"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-3"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-sm form-control"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"Search"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"search_context"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group-btn"</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-sm btn-default"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"search()"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>Go!<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-responsive"</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"data.total_count>0"</span>></span><span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table table-striped b-t b-light"</span>></span><span class="hljs-tag"><<span class="hljs-title">thead</span>></span><span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:20px;"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"i-checks m-b-none"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"selectAll()"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"></<span class="hljs-title">th</span>></span><span class="hljs-tag"><<span class="hljs-title">th</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">th</span>></span><span class="hljs-tag"><<span class="hljs-title">th</span>></span>创建时间<span class="hljs-tag"></<span class="hljs-title">th</span>></span><span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:30px;"</span>></span><span class="hljs-tag"></<span class="hljs-title">th</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span><span class="hljs-tag"></<span class="hljs-title">thead</span>></span><span class="hljs-tag"><<span class="hljs-title">tbody</span>></span><span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"data in data.results"</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"i-checks m-b-none"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"data.selected"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">data.title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">data.create</span>_<span class="hljs-variable">time</span>|<span class="hljs-variable">date</span>:'<span class="hljs-variable">yyyy-MM-dd</span> <span class="hljs-variable">HH</span>:<span class="hljs-variable">mm</span>:<span class="hljs-variable">ss</span> <span class="hljs-variable">Z</span>'}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.detail({id:data.id})"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-edit"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span><span class="hljs-tag"></<span class="hljs-title">tbody</span>></span><span class="hljs-tag"></<span class="hljs-title">table</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">footer</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-footer"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-8 text-left"</span>></span><span class="hljs-tag"><<span class="hljs-title">small</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-muted inline m-t-sm m-b-sm"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">data.total</span>_<span class="hljs-variable">count</span>}}</span><span class="xml">条记录<span class="hljs-tag"></<span class="hljs-title">small</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"data.page_count>1"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-4 text-right text-center-xs"</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pagination pagination-sm m-t-none m-b-none"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{disabled:!data.previous}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list({page:data.page_index-1,search:search_context})"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-chevron-left"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"page in data.pages"</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{active:page==data.page_index}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list({page:page,search:search_context})"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">page</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{disabled:!data.next}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list({page:data.page_index+1,search:search_context})"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-chevron-right"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ul</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">footer</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li></ul>
书写详情、新增的模版,两者是可以复用一个模版的
<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- admin/news/detail.html --></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"DetailController"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wrapper-md"</span> ></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel panel-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-horizontal ng-pristine ng-valid ng-valid-date ng-valid-required ng-valid-parse ng-valid-date-disabled"</span> <span class="hljs-attribute">ng-submit</span>=<span class="hljs-value">"submit()"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-body"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-2 control-label"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-10"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"data.title"</span> <span class="hljs-attribute">required</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"line line-dashed b-b line-lg pull-in"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-2 control-label"</span>></span>内容<span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-10"</span>></span><span class="hljs-tag"><<span class="hljs-title">textarea</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">rows</span>=<span class="hljs-value">"6"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"data.content"</span>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">footer</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-footer text-right bg-light lter"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"delete()"</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"edit_mode"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-danger pull-left"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"删除"</span>/></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-success"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"提交"</span>/></span><span class="hljs-tag"></<span class="hljs-title">footer</span>></span><span class="hljs-tag"></<span class="hljs-title">form</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul>
书写删除确认框模版
<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- admin/confirm.html --></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-header"</span>></span><span class="hljs-tag"><<span class="hljs-title">h3</span>></span>确认删除?<span class="hljs-tag"></<span class="hljs-title">h3</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-footer"</span>></span> <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"cancel()"</span>></span>Cancel<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"ok()"</span>></span>OK<span class="hljs-tag"></<span class="hljs-title">button</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
添加路由,注意run里面增加了事件监听,后文详细说
<code class="hljs r has-numbering">// admin/router.js app.run(<span class="hljs-keyword">function</span> (<span class="hljs-keyword">...</span>) {<span class="hljs-keyword">...</span> $rootScope.$on(<span class="hljs-string">'$stateChangeSuccess'</span>, <span class="hljs-keyword">function</span>(event, to, toParams, from, fromParams) {$rootScope.previousState = from;$rootScope.previousStateParams = fromParams;});}) <span class="hljs-keyword">...</span>.state(<span class="hljs-string">'app.news'</span>, {abstract: true,url: <span class="hljs-string">'/news'</span>,template: <span class="hljs-string">'<div ui-view class="fade-in"></div>'</span>,resolve: {deps: [<span class="hljs-string">'$ocLazyLoad'</span>,<span class="hljs-keyword">function</span>( $ocLazyLoad ){<span class="hljs-keyword">return</span> $ocLazyLoad.load(<span class="hljs-string">'admin/news/ctrl.js'</span>);}]}}).state(<span class="hljs-string">'app.news.list'</span>, {url: <span class="hljs-string">'/list?page&search'</span>,templateUrl: <span class="hljs-string">'admin/news/list.html'</span>,}).state(<span class="hljs-string">'app.news.detail'</span>, {url: <span class="hljs-string">'/detail/{id}'</span>,templateUrl: <span class="hljs-string">'admin/news/detail.html'</span>,}).state(<span class="hljs-string">'app.news.create'</span>, {url: <span class="hljs-string">'/create'</span>,templateUrl: <span class="hljs-string">'admin/news/detail.html'</span>,}) <span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul>
成果如下
我们这里搜索和分页都是采用URL跳转的方式(#/news/list/?search=str&page=int),这样能保证刷新页面的时候能停留在之前的页面结果上,ng默认的页面跳转是不保留前一个页面状态的(链接和参数),如果我们跳转到第2页,编辑,再返回,是会回到第1页去,为了比较好的用户体验所以我们有了如下代码
监听全局页面跳转信号($statChangeSuccess),将参数保存下来
<code class="hljs r has-numbering">// admin/router.js app.run(<span class="hljs-keyword">...</span>$rootScope.$on(<span class="hljs-string">'$stateChangeSuccess'</span>, <span class="hljs-keyword">function</span>(event, to, toParams, from, fromParams) {$rootScope.previousState = from;$rootScope.previousStateParams = fromParams;});<span class="hljs-keyword">...</span> )</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
详情页编辑完成返回时读取参数跳转
<code class="hljs r has-numbering">// admin/news/ctrls.js app.controller(<span class="hljs-string">'DetailController'</span>,<span class="hljs-keyword">...</span>){<span class="hljs-keyword">...</span>$com.update({id:$stateParams.id},$scope.data,<span class="hljs-keyword">function</span>(data){$state.go($rootScope.previousState,$rootScope.previousStateParams);});<span class="hljs-keyword">...</span> });</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
完整的后台少不了导航
我们这里选用github上面一个写得挺棒的ng导航插件angular-breadcrumb,求简,我们直接下载https://raw.github.com/ncuillery/angular-breadcrumb/master/dist/angular-breadcrumb.min.js,由于我们是给ng装插件,所以建议放到vendor/里面去,接下来的改动也是针对原模版框架。
注入JS
<code class="hljs r has-numbering"><!-- index.html --> <span class="hljs-keyword">...</span> <script src=<span class="hljs-string">"vendor/angular/angular-breadcrumb/angular-breadcrumb.min.js"</span>></script> <span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
引入模块
<code class="hljs r has-numbering">// js/app.js angular.module(<span class="hljs-string">'app'</span>, [<span class="hljs-keyword">...</span><span class="hljs-string">'ncy-angular-breadcrumb'</span>, ]);</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
配置扩展,让导航能支持HTML(具体就是能显示回首页的图标)
<code class="hljs r has-numbering">// js/config.js <span class="hljs-keyword">...</span> app.config(<span class="hljs-keyword">function</span>($breadcrumbProvider) {$breadcrumbProvider.setOptions({templateUrl: <span class="hljs-string">'tpl/blocks/breadcrumb.html'</span>});});</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
扩展的导航模版,写法参考插件官方文档
<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!-- tpl/blocks/breadcrumb.html --></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"breadcrumb bg-white b-a"</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"step in steps | limitTo:(steps.length-1)"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"</span></span></span><span class="hljs-expression">{{<span class="hljs-variable">step.ncyBreadcrumbLink</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span> <span class="hljs-attribute">ng-bind-html</span>=<span class="hljs-value">"step.ncyBreadcrumbLabel"</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"step in steps | limitTo:-1"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">ng-bind-html</span>=<span class="hljs-value">"step.ncyBreadcrumbLabel"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
配置路由,加入导航
<code class="hljs r has-numbering">// admin/router.js <span class="hljs-keyword">...</span>.state(<span class="hljs-string">'app.dashboard'</span>, {<span class="hljs-keyword">...</span>ncyBreadcrumb: {label: <span class="hljs-string">'<i class="fa fa-home"></i> 首页'</span>}})<span class="hljs-keyword">...</span>.state(<span class="hljs-string">'app.news.list'</span>, {<span class="hljs-keyword">...</span>ncyBreadcrumb: {parent:<span class="hljs-string">'app.dashboard'</span>,label: <span class="hljs-string">'新闻列表'</span>,}}).state(<span class="hljs-string">'app.news.detail'</span>, {<span class="hljs-keyword">...</span>ncyBreadcrumb: {parent:<span class="hljs-string">'app.news.list'</span>,label: <span class="hljs-string">'编辑'</span>,}}).state(<span class="hljs-string">'app.news.create'</span>, {<span class="hljs-keyword">...</span>ncyBreadcrumb: {parent:<span class="hljs-string">'app.news.list'</span>,label: <span class="hljs-string">'新增'</span>,}}) <span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 把http修改成https
随着国内搜索引擎巨头百度启用全站https加密服务,国内进入https加密时代。越来越多的站点希望通过部署https证书来解决“第三方”对用户隐私的嗅探和劫持。谷歌方面作为推动网站https加密先驱,早在2010年5月便开始提供https加密搜索服务。谷歌在算法更新…...
2024/3/15 21:11:05 - 快递鸟电子面单打印接口demo-可返回电子面单模板
接口支持的消息接收方式:HTTPPOST请求方法的编码格式(utf-8):"application/x-www-form-urlencoded;charsetutf-8"请求、返回数据类型:只支持JSON格式接口提供:快递鸟电子面单可直接返回模板(JAVA对接源码&am…...
2024/3/22 8:04:49 - 双眼皮术后三月
...
2024/3/15 21:11:01 - 双眼皮术后可以开车么
...
2024/3/15 21:10:59 - 双眼皮术后不照镜子
...
2024/3/15 21:10:58 - 华为OD软件工程师面试总结
一、自身基本情况二战考研狗,且没有工作经历,只能走社招;然后我在boss直聘上面挂着我的简历,然后幸运的遇到一个校友HR,最后面试了西安研究所云核心网产品线软件工程师。二、面试1.机试题题目分值:每套题目2道中级题,每题200分,总分400分,120分合格考试时长:90分钟可…...
2024/3/25 3:18:02 - 双眼皮术后冰敷用什么意思
...
2024/3/15 21:10:58 - ng bootstrap css,Angular2中Bootstrap界面库ng-bootstrap详解
准备 Angular 2 环境ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境。使用 ng-bootstrap下载 ng-bootstrapng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式:np…...
2024/3/15 21:10:55 - ng-dropdown-multiselect使用
下拉多选框 1.ng-dropdown-multiselect使用 下载并引用ng-dropdown-multiselect.js文件, Html文件: 《div> ng-dropdown-multiselect"" style“margin-top:6px” options“modalityTypes” selected-model“modalityTypesModel” extra-set…...
2024/3/15 21:10:54 - 双眼皮术后 防止过敏
...
2024/3/15 21:10:53 - 双眼皮手术做一只眼吗
...
2024/3/15 21:10:52 - 像踢球一样玩转Redux和React
引言 React的核心是使用组件定义界面的表现,是一个View层的前端库,简单来说它就是一堆前端组件,view,view,view,重要的事情说三遍。 可是有了组件以后,要怎么组织前端界面的表现呢?怎…...
2024/3/15 21:10:54 - Redux 进阶
系列文章: Redux 入门Redux 进阶(本文)番外篇: Vuex — The core of Vue application在之前的文章中,我们已经了解了 Redux 到底是什么,用来处理什么样的问题,并创建了一个简单的 TodoMVC Demo。但是,我们同样遗留了一些问题没有处…...
2024/3/13 16:32:38 - [译] 2019 React Redux 完全指南
原文地址:A Complete React Redux Tutorial for 2019原文作者:Dave Ceddia译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m…译者:xilihuasi校对者:xionglong58、Fengziyin12342019 React Redux…...
2024/3/13 16:32:35 - Redux学习 React+Redux实战(connect方法各个参数解读)
本文复制了官网许多概念,稍加整合知识点使之变得更合理完整,以个人的认为比较好的学习路线循序渐进各个知识点,额外也会补充些许知识点。大家若有不解,还请多参阅官网。 本文示例背景(最常见的 Web 类示例): TodoList…...
2024/3/13 16:32:34 - 双眼皮手术左右不对称怎么修复
...
2024/3/13 16:32:33 - React Redux 介绍
Redux 介绍 文章目录Redux 介绍一.简介二.Redux 三大原则1.单一数据源2.state是只读的3.使用纯函数来执行修改3.1 纯函数三.Redux的组成1.Action1.1 actionType1.2 action Create2.Reducer2.1 combineReducers()3.Store3.1 createStore()四.React中Redux的使用1.react-redux2.P…...
2024/3/15 21:10:51 - 前端技术 | 从Flux到Redux
上一篇分析了Flux出现的背景和原理,最核心的思想就是“组件化单向数据流”。 但是,Flux在设计上并非完美,具体来说主要存在以下2个不足: 1. 多Store数据依赖 由于Flux采用多Store设计,各个Store之间可能存在数据依赖。…...
2024/3/28 22:04:37 - Redux各知识点介绍
继 Facebook 提出 Flux 架构来管理 React 数据流后,相关架构开始百花齐放,本文简单分析 React 中管理数据流的方式,以及对 Redux 进行较为仔细的介绍。 React " A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES " 在 React 中…...
2024/3/15 21:10:52 - React:React-redux使用
一. Redux简介 1. 什么是Redux Redux是一个用于JavaScript状态容器,提供可与预测化的状态管理。 Redux可以让你构建一致化的应用,运用于不同的环境(客户端,服务器,原生应用),并且易于测试。 …...
2024/3/15 21:10:48
最新文章
- RabbitMQ 实验消费原始队列消息, 拒绝(reject)投递死信交换机过程
如果你想通过 RabbitMQ 的死信队列功能实现消费者拒绝消息投递到死信交换机的行为,你可以按照以下步骤操作: 创建原始队列,并将其绑定到一个交换机上: export RABBITMQ_SERVER127.0.0.1 export RABBITMQ_PORT5672 export RAB…...
2024/3/29 6:19:56 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 使用 Kotlin 和 Groovy 构建配置的一些细微差别
title: Android 开发学习第二天 search: 2024-03-10 tags: “#Android开发” 使用 Kotlin 和 Groovy 构建配置的一些细微差别 Kotlin引入依赖格式 文章目录 使用 Kotlin 和 Groovy 构建配置的一些细微差别Kotlin引入依赖格式Kotlin 的引入格式Android批量导入JarAndroid图片加…...
2024/3/29 5:21:21 - 阿里云2核4G服务器优惠价格30元、165元和199元1年,轻量和ECS
阿里云2核4G服务器租用优惠价格,轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月,活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图: 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…...
2024/3/28 21:07:40 - STM32--RC522学习记录
一,datasheet阅读记录 1.关于通信格式 2.读寄存器 u8 RC522_ReadReg(u8 address) {u8 addr address;u8 data0x00;addr((addr<<1)&0x7e)|0x80;//将最高位置一表示read,最后一位按照手册建议变为0Spi_Start();//选中从机SPI2_ReadWriteByte(ad…...
2024/3/28 21:03:51 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/3/27 10:21:24 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/3/24 20:11:25 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/3/29 2:45:46 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/3/24 20:11:23 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/3/29 5:19:52 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/3/28 17:01:12 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/3/24 5:55:47 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/3/29 1:13:26 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/3/26 23:04:51 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/3/26 11:20:25 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/3/24 20:11:18 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/3/28 9:10:53 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/3/29 0:49:46 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/3/24 20:11:15 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/3/27 7:12:50 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/3/24 20:11:13 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/3/26 11:21:23 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/3/28 18:26:34 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/3/28 12:42:28 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/3/28 20:09:10 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57