vue admin webapp

vue-admin-webapp

Setelah membaca artikel Nuggets, saya membuat sistem manajemen backend Vue berdasarkan demo orang lain.

Alamat artikel asli Nuggets

Tumpukan teknologi yang terlibat dalam proyek ini termasuk vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

Proyek ini alamat github vue-admin-webapp

Alamat proyek berjalan

Pengenalan proyek

vue-admin-webapp adalah sistem manajemen backend berdasarkan vuecli dan element-ui , menggunakan fastmock untuk mensimulasikan data, termasuk bagan, tabel, izin, excel, dll. Anda dapat menambahkan rute sesuai kebutuhan Anda.

Memasang

 # 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

Setelah startup, browser http://localhost:8080 akan terbuka secara otomatis, dan Anda dapat melihat efek proyek.

Struktur halaman proyek

Buka halaman login. Halaman ini terutama terdiri dari tiga bagian: halaman tampilan sidebar header . Anda dapat mengklik sidebar untuk melompat ke rute.

Verifikasi izin masuk

Terima token dari fastmock, simpan di localStorage saat login, atur front guard global, saat masuk ke halaman lain, Anda hanya bisa masuk jika ada token, jika tidak maka akan melompat ke halaman login

Garda terdepan global

 router . beforeEach ( ( to , from , next ) => {
  const isLogin = localStorage . loginToken ? true : false ;
  if ( to . path == "/login" ) {
    next ( ) ;
  } else {
    isLogin ? next ( ) : next ( '/login' )
  }
} ) 

meminta intersepsi

 axios . interceptors . request . use ( config => {
  // 判断是否有token
  if ( localStorage . loginToken ) {
    config . headers . Authorization = localStorage . loginToken ;
  }
  return config ;
} , err => {
  // 请求错误
  return Promise . reject ( err ) ;
} ) 

intersepsi respons

 axios . interceptors . response . use ( res => {
  return res ;
} ,
  err => {
    const { status } = err . response ;
    if ( status == 401 ) {
      // 后台定义401为过期
      alert ( "token过期,请重新登录!" )
      // 清楚token
      localStorage . removeItem ( "loginToken" ) ;
      router . push ( "/login" ) ;
    } else {
      alert ( err . response . data )
    }
    return Promise . reject ( err ) ;
  } ) ;

Bagan multi bagan

Mahir menggunakan Echart, diagram garis, diagram lingkaran, diagram batang, diagram data dinamis, dll, seperti gambar di bawah ini

Unggul

Dalam proyek sebenarnya, excel terutama dikerjakan di bagian belakang. Tentu saja, bagian depan juga bisa dikerjakan, tapi menurut saya itu tidak perlu sekarang, jadi saya tidak melakukannya. Jika Anda ingin tahu lebih banyak, Anda bisa mencarinya.

data fastmock

Berikut kutipan dari pengantar resmi

Fastmock memungkinkan Anda untuk benar-benar mensimulasikan permintaan ajax secara online tanpa program back-end. Anda dapat menggunakan fatmock untuk mencapai demonstrasi efek front-end murni pada tahap awal proyek, atau Anda dapat menggunakan fastmock untuk mengimplementasikan simulasi data selama pengembangan untuk mencapai front-end. pemisahan -end dan back-end. Sebelum menggunakan fastmock, tim Anda mungkin menggunakan satu atau beberapa solusi berikut untuk menerapkan simulasi data:

• Simulasi data tulisan tangan lokal menghasilkan banyak kode tiruan di kode front-end.
• Gunakan can-fixture mockjs atau canjs untuk mengimplementasikan intersepsi ajax dan mengonfigurasi aturan json yang diperlukan secara lokal.
• Backend membuat data pada lapisan Controller dan mengembalikannya ke frontend.

---

Port proyek fastmock saya