


Cara menggunakan AngularJs untuk membina sistem pengurusan kebenaran [Simple]_AngularJS
May 16, 2016 am 09:00 AM1. Pengenalan
Artikel ini akan memperkenalkan cara menggunakan AngularJs pada projek sebenar. Artikel ini akan menggunakan AngularJS untuk membina sistem pengurusan kebenaran yang mudah. Tidak banyak yang ingin diperkatakan di bawah, mari terus ke topik.
2. Pengenalan kepada reka bentuk seni bina keseluruhan
Mula-mula, lihat lukisan reka bentuk seni bina keseluruhan projek:
Daripada gambar di atas anda boleh melihat struktur keseluruhan keseluruhan projek Seterusnya, saya akan memperkenalkan struktur keseluruhan projek secara terperinci:
Gunakan API Web Asp.net untuk melaksanakan perkhidmatan REST. Kaedah pelaksanaan ini telah mencapai penggunaan biasa, berasingan dan pengembangan perkhidmatan back-end yang lebih baik. Lapisan web bergantung pada antara muka perkhidmatan aplikasi dan menggunakan Castle Windsor untuk melaksanakan suntikan pergantungan.
Lapisan paparan (UI pengguna)
Lapisan paparan menggunakan halaman SPA yang dilaksanakan oleh AngularJS. Semua data halaman dimuatkan secara tidak segerak dan sebahagiannya dimuat semula Pelaksanaan ini akan mempunyai pengalaman pengguna yang lebih baik.
Perkhidmatan Permohonan
AngularJS meminta API Web melalui perkhidmatan Http untuk mendapatkan data, dan pelaksanaan API Web memanggil lapisan aplikasi untuk meminta data.
Lapisan infrastruktur
Lapisan infrastruktur termasuk pelaksanaan pergudangan dan pelaksanaan beberapa kaedah awam.
Lapisan gudang dilaksanakan menggunakan EF Code First, dan kaedah EF Migration digunakan untuk mencipta dan mengemas kini pangkalan data.
Lapisan LH.Common melaksanakan beberapa kaedah biasa, seperti pelaksanaan kelas bantuan log, sambungan pepohon ekspresi dan kelas lain.
Lapisan Domain
Lapisan domain terutamanya melaksanakan semua model domain projek, termasuk pelaksanaan model domain dan definisi antara muka pergudangan.
Selain memperkenalkan struktur lengkap, pelaksanaan perkhidmatan bahagian belakang dan pelaksanaan bahagian hadapan Web projek akan diperkenalkan secara berasingan.
3. Pelaksanaan perkhidmatan bahagian belakang
Perkhidmatan back-end terutamanya menggunakan Asp.net Web API untuk melaksanakan perkhidmatan back-end, dan Castle Windsor digunakan untuk melengkapkan suntikan pergantungan.
Di sini kami mengambil pengurusan pengguna dalam pengurusan kebenaran untuk memperkenalkan pelaksanaan perkhidmatan Rest Web API.
Pelaksanaan perkhidmatan REST yang menyediakan data pengguna:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
|
Seperti yang dapat dilihat daripada pelaksanaan kod di atas, perkhidmatan REST Pengguna bergantung pada antara muka IUserService dan tidak meletakkan semua logik perniagaan dalam pelaksanaan API Web dengan cara tradisional, tetapi merangkum beberapa pelaksanaan perniagaan khusus ke dalam In yang sepadan. lapisan aplikasi, Rest API hanya bertanggungjawab untuk memanggil perkhidmatan dalam lapisan aplikasi yang sepadan. Kelebihan reka bentuk ini ialah:
Jabatan perkhidmatan REST bergantung pada antara muka lapisan aplikasi, yang memisahkan tanggungjawab dan meninggalkan instantiasi perkhidmatan lapisan aplikasi kepada bekas suntikan kebergantungan yang berasingan untuk diselesaikan, manakala perkhidmatan REST hanya bertanggungjawab untuk memanggil kaedah perkhidmatan aplikasi yang sepadan kepada mendapatkan data. Penggunaan antara muka bergantung dan bukannya pelaksanaan kelas tertentu menghasilkan gandingan yang rendah antara kelas. Perkhidmatan REST tidak termasuk pelaksanaan logik perniagaan khusus. Reka bentuk jenis ini boleh membuat perkhidmatan dipisahkan dengan lebih baik Jika anda kemudiannya ingin menggunakan WCF untuk melaksanakan perkhidmatan REST, anda tidak perlu menulis logik berulang kali dalam kelas perkhidmatan REST WCF Ini betul-betul baik perkhidmatan aplikasi untuk melaksanakan perkhidmatan WCF REST. Oleh itu, pelaksanaan logik perniagaan diekstrak ke lapisan perkhidmatan aplikasi Reka bentuk ini akan menjadikan tanggungjawab perkhidmatan REST lebih tunggal dan pelaksanaan perkhidmatan REST lebih mudah dikembangkan.
Pelaksanaan perkhidmatan aplikasi pengguna:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
|
Lapisan perkhidmatan aplikasi di sini sebenarnya boleh dioptimumkan lagi untuk merealisasikan pemisahan membaca dan menulis pada tahap kod, mentakrifkan antara muka IReadOnlyService dan antara muka IWriteServie, dan mengabstrakkan operasi tulis ke dalam BaseService menggunakan kaedah generik. Operasi menambah, memadam dan mengubah suai dikongsi Sebab operasi ini boleh dikongsi adalah kerana operasi ini sangat serupa, tetapi entiti operasi adalah berbeza. Malah, pelaksanaan seperti ini telah digunakan dalam projek sumber terbuka saya yang lain: OnlineStore Anda boleh merujuk kepada ini untuk melaksanakannya sendiri.
Pelaksanaan lapisan pergudangan:
Perkhidmatan aplikasi pengguna tidak bergantung secara langsung pada kelas storan tertentu, tetapi juga bergantung pada antara muka mereka. Pelaksanaan kelas storan pengguna yang sepadan adalah seperti berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
|
4. Pelaksanaan bahagian hadapan AngularJS
Bahagian hadapan Web dilaksanakan menggunakan AngularJS dan menggunakan model pembangunan modular. Struktur kod khusus bahagian hadapan Web ditunjukkan dalam rajah di bawah:
1 2 3 4 5 6 7 8 9 10 |
|
使用AngularJS开发的Web应用程序的代码之间的调用层次和后端基本一致,也是视图页面——》控制器模块——》服务模块——》Web API服务。
并且Web前端CSS和JS资源的加载采用了Bundle的方式来减少请求资源的次数,从而加快页面加载时间。具体Bundle类的配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
首页 Index.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
五、运行效果
介绍完前后端的实现之后,接下来让我们看下整个项目的运行效果:
六、总结
到此,本文的所有内容都介绍完了,尽管本文的AngularJS的应用项目还有很多完善的地方,例如没有缓冲的支持、没有实现读写分离,没有对一些API进行压力测试等。但AngularJS在实际项目中的应用基本是这样的,大家如果在项目中有需要用到AngularJS,正好你们公司的后台又是.NET的话,相信本文的分享可以是一个很好的参考。另外,关于架构的设计也可以参考我的另一个开源项目:OnlineStore和FastWorks。
以上所述是小编给大家介绍的使用AngularJs打造权限管理系统的方法,希望对大家有所帮助!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

Tutorial Persediaan API Carian Google Custom

8 plugin susun atur halaman jquery yang menakjubkan

Tingkatkan pengetahuan jQuery anda dengan penonton sumber

10 helaian cheat mudah alih untuk pembangunan mudah alih
