how wonderful the cain design
第一版模板工程
betapa indahnya-the-cain-design adalah versi templat backend yang ditingkatkan setelah versi v1, berdasarkan vue.js dan element . Saat ini, proyek templat mengintegrasikan login , verifikasi otoritas , konfigurasi perutean , permintaan ajax , tiruan , bagan , halaman 404 , halaman 401 , dan beberapa halaman templat . Selesaikan permasalahan personel sisi server yang mengembangkan halaman manajemen back-end. Selanjutnya saya akan memperkenalkan persiapan sebelum menggunakan proyek ini dan cara menggunakannya. Saya harap ini dapat membantu beberapa mitra dengan fondasi front-end yang lemah~
Proyek ini mengacu pada elemen vue-admin
Catatan : Proyek ini menggunakan versi [email protected]+ dan [email protected]+
Untuk menginstal node (8.0+) secara lokal, Anda dapat mendownload langsung versi instalasi dan ikuti langkah-langkahnya. Setelah instalasi selesai, verifikasi apakah instalasi berhasil.
node -v
npm -v
Keberhasilan terjadi ketika nomor versi muncul
Proyek ini terutama mencakup poin-poin teknis berikut:
Untuk pengembangan sisi server, Anda hanya perlu memperhatikan sintaks vue, pustaka komponen elemen-ui, metode penulisan permintaan aksio, dan spesifikasi kode eslint. Jika grafik berguna, Anda juga harus memperhatikan echarts.
**Catatan penting:** Penggunaan eslint adalah wajib dalam proyek untuk membakukan penulisan kode. Mungkin terasa menjijikkan saat pertama kali bersentuhan dengannya. Anda harus mengunjungi situs resminya untuk mengetahui masalah apa yang ada ada dalam tata bahasa dan cara memodifikasinya. Namun untuk pemeliharaan nantinya, ini merupakan investasi yang sangat berharga. Jadi jangan dianggap ribet, biasakan saja ^-^
// 结构树
|- build/ ------------------- 组件webpack区
|- config/ ------------------ 组件启动配置区，开发人员可在index.js中配置动态代理（当运行npm run dev时，该动态代理会生效，即可调用服务端接口），也可以修改端口号，防止端口号冲突
|- src/ --------------------- 组件源代码
|- api/ ----------------- 接口编码区
|- assets/ -------------- 图片区
|- components/ ---------- 组件编码区
|- icons/ --------------- 菜单icon svg图标区
|- mock/ ---------------- 模拟接口区
|- permission/ ---------- 路由权限编码区(可以不用修改)
|- router/ --------------- 配置路由区，开发完成的页面都要在这里挂路由，才能展现
|- store/ --------------- 全局缓存注入区，目前登陆的入口从这进入，会缓存用户信息，token信息以及权限信息
|- styles/ -------------- 公共样式区
|- utils/ ---------------- 工具区，开发人员开发的工具集都放在该目录中
|- views/ ---------------- 页面开发区，开发人员开发的页面放在该目录中
|- App.vue --------------- 启动的vue文件
|- index.js -------------- 启动js文件，element-ui是按需加载的，开发人员要根据引用了哪些element组件在该js文件中引入，引入格式参照模板
|- static/ ------------------ static放置一些静态文件，和assets的区别：assets会被编译替换名字，static中的不会被编译，原汁原味
|- .babelrc ----------------- babel 配置文件
|- .eslintignore ------------ eslint ignore配置文件
|- .eslintrc.js ------------- eslint配置文件
|- .gitignore --------------- git忽略提交文件配置
|- .postcssrc.js ------------ postcss配置文件
|- index.html --------------- HTML 模板
|- package-lock.json -------- npm 版本锁定文件，每添加一个依赖都会变化这个，保证对依赖版本的控制
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
Direktori yang paling perlu diperhatikan oleh pengembang saat mengembangkan halaman adalah **/src/views dan /src/router**. Yang pertama menulis halaman, dan yang terakhir menulis informasi perutean dari halaman yang sesuai perutean digunakan sebagai bidang penilaian izin dalam templat, yaitu array izin yang dikembalikan oleh server sebenarnya dibandingkan dengan namanya, dan hasil yang cocok adalah halaman izin yang dimiliki oleh pengguna, jika tidak, halaman 401 atau a Halaman 404 akan dikembalikan.
Proyek saat ini memiliki dua pengguna yang disiapkan: admin dan ChartUser. Tujuan utamanya adalah untuk menguji izin.
Anda dapat login tanpa memasukkan kata sandi, tetapi Anda harus memasukkan nomor akun Anda.
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
Mengambil komponen tombol sebagai contoh, ketika Anda perlu memperkenalkan komponen tombol, Anda perlu mengikuti langkah-langkah berikut:
Ketika komponen yang sesuai ditemukan di situs resmi, salin kode yang sesuai
<el-button>默认按钮</el-button>
Memperkenalkan komponen ke /src/index.js sesuai permintaan. Jika Anda tidak tahu cara memperkenalkannya, Anda dapat merujuk ke pengenalan semua komponen sesuai permintaan dan menemukan komponen yang sesuai untuk diimpor.
Baca baik-baik cara menggunakan komponen ini, dokumentasi website resmi akan menjelaskannya dengan sangat jelas.
Login di proyek template menggunakan mockjs untuk mensimulasikan login. Langkah-langkah implementasi spesifik login di template adalah:
Melihat:
- Akun dalam penilaian if tidak ada dan perlu diubah. Ada total tiga nama pengguna di template, yang sesuai dengan tiga izin pengguna menjadi prompt kembalinya antarmuka setelah menyesuaikan antarmuka.
- this.$store.dispatch('Login', ...) adalah sintaksis vuex. Tujuannya adalah memanggil metode Login di /src/store/modules/user.js untuk meminta antarmuka server dan mengembalikan pengguna yang sesuai. data yang disimpan dalam cache global, akan lebih mudah untuk panggilan global.
- Perhatikan format parameternya. Parameter dalam objek ditetapkan ke params, dan nilai params adalah objek. Berbagai parameter yang diizinkan oleh aksio dapat ditempatkan di objek, karena permintaan get disimulasikan di sini, jadi saja parameter params diperlukan
Ketika Anda mengklik untuk masuk, metode di atas akan dipanggil. Badan metode sebenarnya memanggil antarmuka getInfo di /scr/api/api.js untuk mendapatkan data pengguna yang sesuai personel terlepas dari otoritasnya. Rute yang dapat diakses pertama-tama dimasukkan ke dalam susunan rute, dan kemudian izin, informasi pengguna, dan informasi token di-cache.
Kemudian panggil antarmuka getInfo. Async (es6) digunakan di sini. Di sini Anda perlu memperhatikan result.code. Ini diatur sesuai dengan format pengaturan antarmuka server dari orang ke orang.
Perhatikan bahwa objek userMap adalah tiga pengguna yang saya simulasikan. Bidang peran adalah bidang izin. Dibandingkan dengan bidang nama di tabel konfigurasi perutean, menu di bidang izin adalah halaman fungsi yang izinnya dimiliki pengguna.
Dalam perkembangan sebenarnya, ketika memodifikasi antarmuka login, bidang peran harus ada, dan formatnya harus konsisten dengan array di atas, jika tidak, sistem izin tidak akan valid.
Setelah empat langkah di atas, seluruh proses login selesai.
Sebelum mengembangkan templat, kami bernegosiasi dengan personel server untuk menggunakan jwt untuk otentikasi informasi pengguna.
Alur pemrosesannya adalah informasi token akan disimpan di cache global saat login. Setiap kali data antarmuka diminta, framework akan secara otomatis menyimpan informasi token di header. Jika gagal, maka akan ditransfer langsung ke halaman login dan informasi login akan dikeluarkan.
Ini juga merupakan antarmuka login, di mana **commit('SETTOKEN', 'test')** menangani nilai token. Dalam pengembangan proyek sebenarnya, pengujian ini harus diganti dengan token asli yang diperoleh dengan login.
Jalur:/src/api/server.js
Perhatikan penilaian res.code===301 di sini. Setelah negosiasi sebelumnya dengan personel server, ketika token kedaluwarsa, kode yang dikembalikan akan disetel ke 301 untuk identifikasi. Oleh karena itu, penilaian di sini juga didasarkan pada pengaturan di proyek Anda sendiri, yang dapat berupa kode, status, status, dll ., yang dapat dimodifikasi sesuai proyek.
Jalur:/src/router/index.js
Menu dan tabel routing dalam sistem template tidak dapat dipisahkan dengan kata lain, struktur hierarki menu dan tabel routing konsisten . Oleh karena itu, tabel routing harus ditulis sesuai aturan, jika tidak maka akan mempengaruhi tampilan menu!
Anda harus terlebih dahulu memahami aturan pengaturan. Menu tidak boleh melebihi tiga level , jadi ada tiga format dalam tabel konfigurasi perutean. Mereka diperkenalkan di bawah.
Perhatikan bahwa parameter perutean 401 disembunyikan, jika disetel ke true, berarti pohon menu akan memfilter rute ini dan tidak menampilkannya.
Dashboard routing merupakan menu tingkat pertama. Format penulisan menu tingkat pertama adalah seperti di atas. Hanya ada satu rute pada anak-anak.
Parameter title dalam meta mewakili nama menu yang ditampilkan pada menu
icon adalah icon menu, dan yang terbaca adalah icon menu svg pada direktori /src/icons/, oleh karena itu ketika mengerjakan project sendiri harus meminta artist untuk membuat icon menu dalam format svg, kemudian ditempatkan. itu di direktori ikon. Nilai parameter ikon adalah nama file ikon
Izin menu tingkat pertama sesuai dengan namanya di anak-anak.
Satu-satunya perbedaan antara menu tingkat kedua dan menu tingkat pertama adalah jumlah anak lebih besar dari satu, dan yang lainnya sama.
Format menu tingkat ketiga memiliki anak di dalam anak.
Konfigurasi tabel perutean harus dikonfigurasi sesuai dengan petunjuk di atas, jika tidak, efek yang Anda inginkan tidak akan sesuai dengan yang Anda inginkan. Perhatikan juga pasangan nama dan izin menu untuk mengontrol tampilan menu.
Jalur:/src/api/api.js
Semua antarmuka yang digunakan di halaman harus ditentukan dalam file ini untuk pengelolaan terpadu dan modifikasi yang mudah.
Format penulisan adalah cara penulisan yang disediakan oleh template.
Namun, dalam pengembangan sebenarnya, Anda akan menemukan berbagai cara untuk mentransmisikan parameter, seperti get, post non-form form, post form form, dan rest form. Berikut ini adalah templat penulisan yang sesuai untuk format tersebut.
Catatan: Jika Anda perlu meneruskan parameter header application/x-www-form-urlenconded, parameternya harus ditulis sebagai
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
Pengiriman non-form pada dasarnya sama dengan pengiriman formulir, bedanya penugasan awal ke data harus diubah menjadi penugasan ke params.
Kerangka templat juga secara seragam merangkum parameter lainnya, dan metode transfer parameter adalah tangkapan layar.
Perkembangan sebenarnya adalah semua pengembangan lokal. Gunakan npm run dev untuk memulai layanan secara lokal.
Sebenarnya sangat sederhana, hanya konfigurasi saja
Jalur:/config/index.js
proxyTable: {
'/cloudfs': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/cloudfs': '/cloudfs'
}
},
'/api': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
},
'/plustek': {
target: 'http://your_ip_address/plustek',
changeOrigin: true,
onProxyReq: function (proxyReq, req, res) {
console.log('获取到', process.env.eimCookie)
proxyReq.setHeader('Cookie', process.env.eimCookie) // 配置cookie方式
},
pathRewrite: {
'^/plustek': ''
}
}
}
Pengembang dapat mengonfigurasi sendiri proxy tersebut sesuai kebutuhan
Jika sistem backend memiliki mekanisme otentikasi sendiri, seperti jwt. Maka tidak perlu mempertimbangkan otentikasi informasi cookie.
Jika ingin menggunakan cookies, langsung tambahkan konfigurasi onProxyReq pada konfigurasi proxy di atas, masukkan informasi cookie ke informasi header, simpan dan jalankan npm run dev lagi.
import chartMaker from '@/components/charts/chartMaker';
components: {
chartMaker,
},
<chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新
getChart1Option() {
const tmpOption = {};
tmpOption.title = {
text: '访问量',
left: '5',
top: '10',
};
tmpOption.tooltip = {
axisPointer: {
lineStyle: {
color: '#57617B',
},
},
position(point, params, dom, rect, size) {
if (point[0] < 30) {
return [0, '50%'];
} else if (point[0] > (size.viewSize[0] - 80)) {
return [size.viewSize[0] - 80, '50%'];
}
return [point[0] - 30, '50%'];
},
formatter: '{b}月: {c}',
};
tmpOption.grid = {
top: 55,
left: '-8%',
right: '5%',
bottom: '2%',
containLabel: true,
};
tmpOption.xAxis = [{
show: false,
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#E3E9EF'],
},
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
}];
tmpOption.yAxis = [{
show: false,
type: 'value',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
lineStyle: {
color: ['#E3E9EF'],
},
},
}];
tmpOption.series = [{
name: '日访问量',
type: 'line',
smooth: true,
// symbol: 'circle',
symbolSize: 6,
showSymbol: true,
lineStyle: {
normal: {
width: 2,
},
},
itemStyle: {
normal: {
color: '#0086E6',
borderColor: '#0086E6',
borderWidth: 2,
},
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
}];
this.chartOption = Object.assign({}, this.option, tmpOption);
},
注意：模板中使用的属性设置方法，用的是Object.assign，用方法中的tmpOption属性强制覆盖默认的option属性，传入到组件
this.getChart1Option();
// 调用这个方法后，表格就能展现了
Ketika Anda selesai menulis kode, Anda dengan senang hati mengira kodenya sudah selesai dan ingin mempublikasikannya. Ternyata konferensi persnya ditolak karena ketika ada masalah format pada kodenya, maka tidak diperbolehkan untuk dikirimkan ke server.
Lalu bagaimana cara mengatasi masalah format kode?
Pertama gunakan npm run lint. Apa pun yang terjadi, jika Anda menjalankan ini terlebih dahulu, Anda akan segera menghilangkan banyak masalah pemformatan.
Jika ternyata masih banyak masalah, Anda harus menyelesaikannya satu per satu. Solusinya adalah sebagai berikut
- Ada tautan dalam pesan kesalahan, seperti http://eslint.ort/docs/rules/no-var.Klik tautan ini untuk membuka situs resmi eslint, mencari tahu penyebab kesalahan, dan memodifikasinya menjadi format yang sesuai.
- Jika kesalahan ini memang sulit diperbaiki, Anda dapat memblokir spesifikasi ini. Buka file .eslintrc.js di direktori root dan tambahkan pelindung aturan yang sesuai ke objek aturan, seperti aturan no-var di atas. Konfigurasikan "no-var": 0 dan aturan ini akan difilter.
####melepaskan
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
Setelah tutorial di atas, saya yakin Anda tidak hanya memiliki kemampuan untuk menggunakan template ini, tetapi juga sudah memasuki dunia front-end. Jika dokumennya masih kurang jelas, atau jika Anda masih ingin mengetahui pengetahuan relevan apa yang perlu ditambah, Anda dapat menghubungi saya kapan saja~
