Elememt-UI를 사용하여 Vue에서 관리 백엔드 구축(자세한 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Elememt-UI를 사용하여 Vue에서 관리 백엔드 구축(자세한 튜토리얼)

亚连

Jun 04, 2018 am 11:33 AM

무대 뒤에서 관리하다

이 글은 Vue Elememt-UI를 활용한 관리 백엔드 구축 과정과 관련 코드 예시를 자세히 공유하고 있으니 참고하시고 함께 배워보세요.

Installation

vue-cli를 사용하여 프로젝트를 초기화하고 있습니다. 명령은 다음과 같습니다.

npm i -g vue-cli
mkdir my-project && cd my-project
vue init webpack

로그인 후 복사

package.json 파일을 수정합니다.

...
"dependencies": {
 "vue": "^2.5.2",
 "vue-router": "^3.0.1",
 "element-ui": "^2.0.7", // element-ui
 "axios": "^0.17.1" // http 请求库
}
...

로그인 후 복사

그런 다음 설치가 완료되면 npm install을 실행합니다. 속도가 약간 느리므로 cnpm을 확인하여 구체적인 설치 및 사용법을 직접 알아보세요.

프로젝트의 디렉터리 구조를 간략하게 소개합니다:

├─build // 构建配置
├─config // 配置文件
├─src // vue 开发源文件目录
├────assets // css/js 文件
├────components // vue 组件
├────router  // 路由
├────App.vue  // 启动组件
├────main.js // 入口文件
├─static // 静态文件目录
├─test // 测试目录

로그인 후 복사

그런 다음 프로젝트 루트 디렉터리에서 npm run dev를 실행하고 브라우저를 열고 http://localhost:8080을 입력하여 확인합니다.

Target

로그인 페이지, 로그인, 로그아웃 기능
홈페이지, 통화 인터페이스 렌더링 목록

Routing

라우팅은 vue-router를 사용하며, 구체적인 사용법은 공식을 참조하세요. 문서

여기에는 두 개의 경로가 필요합니다:

src/router/index.js

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Index from &#39;@/components/Index&#39;
import Login from &#39;@/components/Login&#39;

Vue.use(Router)

const routers = new Router({
 routes: [
  {
   path: &#39;/index&#39;,
   name: &#39;index&#39;,
   component: Index
  },
  {
   path: &#39;/login&#39;,
   name: &#39;login&#39;,
   component: Login
  }
 ]
})

routers.beforeEach((to, from, next) => {
 if (to.name !== &#39;login&#39; && !localStorage.getItem(&#39;token&#39;)) {
  next({path: &#39;login&#39;})
 } else {
  next()
 }
})

export default routers

로그인 후 복사

로그인 페이지

src/comComponents/Login.vue

<template>
 <p class="login">
  <el-form name="aa" :inline="true" label-position="right" label-width="80px">
    <el-form-item label="用户名">
     <el-input v-model="user.name"></el-input>
    </el-form-item>
    <el-form-item label="密码">
     <el-input type="password" v-model="user.password"></el-input>
    </el-form-item>
    <el-form-item label=" ">
     <el-button type="primary" @click="login()">登录</el-button>
    </el-form-item>
  </el-form>
 </p>
</template>

<script>
import $http from &#39;@/api/&#39;
import config from &#39;@/config&#39;

export default {
 data () {
  return {
   user: {
    name: &#39;&#39;,
    password: &#39;&#39;
   }
  }
 },
 mounted: function () {
  var token = localStorage.getItem(&#39;token&#39;)
  if (token) {
   this.$router.push(&#39;/index&#39;)
  }
 },
 methods: {
  login: function () {
   var data = {
    grant_type: &#39;password&#39;,
    client_id: config.oauth_client_id,
    client_secret: config.oauth_secret,
    username: this.user.name,
    password: this.user.password
   }
   var _this = this
   $http.login(data).then(function (res) {
    if (res.status === 200) {
     $http.setToken(res.data.access_token)
     _this.$message({
      showClose: false,
      message: &#39;登录成功&#39;,
      type: &#39;success&#39;
     })
     _this.$router.push(&#39;/index&#39;)
    } else {
     _this.$message({
      showClose: false,
      message: &#39;登录失败&#39;,
      type: &#39;error&#39;
     })
    }
   })
  }
 }
}
</script>

<style>
.login{
  width: 300px;
  margin: 100px auto;
  background-color: #ffffff;
  padding: 30px 30px 5px;
  border-radius: 5px;
}
</style>

로그인 후 복사

Homepage

src /구성요소/ 색인 .vue

<template>
 <p class="main">
  <el-table
   stripe
   v-loading="loading"
   element-loading-background="#dddddd"
   :data="tableData"
   style="width: 100%">
   <el-table-column
    prop="id"
    label="ID">
   </el-table-column>
   <el-table-column
    prop="name"
    label="名称">
   </el-table-column>
  </el-table>
  <el-pagination
   background
   layout="prev, pager, next"
   :total="total"
   class="page"
   @current-change="pageList">
  </el-pagination>
 </p>
</template>

<script>
import $http from &#39;@/api/&#39;

export default {
 data () {
  return {
   tableData: [],
   total: 0,
   loading: false
  }
 },
 mounted: function () {
  this.getList()
 },
 methods: {
  pageList: function (page) {
   this.search.page = page
   this.getList()
  },
  getList: function () {
   var _this = this
   _this.loading = true
   $http.index().then(function (res) {
    if (res.status === 200) {
     _this.tableData = res.data.data.lists
     _this.total = res.data.data.total
    }
    _this.loading = false
   })
  }
 }
}
</script>

로그인 후 복사

App

src/App.vue

<template>
 <p id="app">
  <el-row v-if="token">
   <menus class="left-menu">
    <h3 class="logo"><a href="/" rel="external nofollow" >Admin</a></h3>
   </menus>
   <el-col :span="21" :gutter="0" :offset="3">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
     <el-breadcrumb-item :to="{ path: &#39;/&#39; }">首页</el-breadcrumb-item>
     <el-breadcrumb-item class="active">列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown @command="operate" class="header">
     <img src="/static/image/head.jpg" />
     <el-dropdown-menu slot="dropdown" :click="true">
      <el-dropdown-item command="/user/profile">基本资料</el-dropdown-item>
      <el-dropdown-item command="/logout">安全退出</el-dropdown-item>
     </el-dropdown-menu>
    </el-dropdown>
    <router-view/>
   </el-col>
   <el-col :span="21" :gutter="0" :offset="3" class="footer">Copyright © 2017 Flyerboy All Rights Reserved</el-col> 
  </el-row>

  <router-view v-if="!token" />
 </p>
</template>

<script>
import Menus from &#39;@/components/Menu&#39;
export default {
 name: &#39;App&#39;,
 data () {
  return {
   token: false
  }
 },
 mounted: function () {
  this.token = localStorage.getItem(&#39;token&#39;) ? true : false
 },
 watch: {
  &#39;$route.path&#39;: function ($newVal, $oldVal) {
   this.token = localStorage.getItem(&#39;token&#39;) ? true : false
  }
 },
 methods: {
   operate: function (command) {
   if (command === &#39;/logout&#39;) {
    localStorage.removeItem(&#39;token&#39;)
    this.$router.push(&#39;login&#39;)
   } else {
    this.$router.push(command)
   }
  }
 },
 components: {
  Menus
 }
}
</script>

<style>
body{
 margin: 0;
 padding: 0;
 background-color: #eeeeee;
}
.header{
 position: absolute;
 top: 5px;
 right: 20px;
}
.header img{
 width: 38px;
 height: 38px;
 border-radius: 20px;
 border: 1px solid #aaaaaa;
}
#app {
 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.main{
 padding: 20px;
 min-height: 600px;
 margin-bottom: 20px;
}
.main table{
 background: #ffffff;
}
.left-menu{
 background-color: #33374B;
}
.logo{
 padding: 20px 0 15px 20px;
 font-size: 24px;
 border-bottom: 2px solid #3a8ee6;
}
.logo a{
 color: #ffffff;
 text-decoration: none;
}

.left-menu .el-menu{
 border-right: 0;
}
.breadcrumb{
 line-height: 40px;
 padding: 5px 20px;
 background: #ffffff;
}
.breadcrumb span{
 color: #069;
 font-weight: normal;
}
.breadcrumb .active{
 color: #aaaaaa;
}
.page{
 margin: 20px 0 0;
 margin-left: -10px;
}
.page .el-pager li.number{
 background-color: #ffffff;
}
.el-submenu .el-menu-item{
 padding-left: 60px !important;
}
.footer{
 position: fixed;
 bottom: 0;
 right: 0;
 font-size: 12px;
 color: #888888;
 padding: 15px 20px;
 text-align: center;
 background-color: #ffffff;
 margin-top: 40px;
}
</style>

로그인 후 복사

Call API

src/api/index.js

import axios from &#39;axios&#39;
axios.defaults.baseURL = &#39;http://localhost:8000/&#39;
axios.defaults.headers.post[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;
axios.defaults.headers.common[&#39;Authorization&#39;] = &#39;Bearer &#39; + localStorage.getItem(&#39;token&#39;)


export default {
 setToken: function (token) {
  localStorage.setItem(&#39;token&#39;, token)
  axios.defaults.headers.common[&#39;Authorization&#39;] = &#39;Bearer &#39; + token
 },
 login: function (param) {
  return axios.post(&#39;oauth/token&#39;, param)
 },
 index: function (params) {
  return axios.get(&#39;api/user/list&#39;, {
   params: params
  })
 }
}

로그인 후 복사

config

src/config .js 로그인 구성 여기 oauth

export default {
 oauth_client_id: 2,
 oauth_secret: &#39;&#39;
}

로그인 후 복사

main.js

src/main.js

import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
 el: &#39;#app&#39;,
 router,
 components: { App },
 template: &#39;<App/>&#39;
})

로그인 후 복사

api 인터페이스

에 필요한 client_id와 secret은 주로 두 가지 인터페이스를 사용합니다. 하나는 토큰 인터페이스를 얻기 위한 api/oauth/token 로그인입니다. 다른 하나는 Get list api/user/list입니다.

첫 번째 인터페이스는 laravel oauth를 사용하고, 두 번째 인터페이스는 바로 간단한 쿼리 사용자 목록 인터페이스입니다. 자세한 내용은 다음 글에서 설명하겠습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7415

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

Discuz 백그라운드 로그인 문제 해결 방법 공개 Mar 03, 2024 am 08:57 AM

Discuz 백그라운드 로그인 문제에 대한 해결책이 공개되었습니다. 인터넷의 급속한 발전으로 인해 웹 사이트 구축이 점점 보편화되고 있으며 일반적으로 사용되는 포럼 웹 사이트 구축 시스템으로 Discuz가 선호되고 있습니다. 많은 웹마스터. 그러나 강력한 기능으로 인해 Discuz를 사용할 때 백그라운드 로그인 문제와 같은 몇 가지 문제가 발생할 수 있습니다. 오늘은 Discuz 백그라운드 로그인 문제에 대한 해결책을 공개하고 구체적인 코드 예시를 제공하여 도움이 필요한 분들에게 도움이 되기를 바라겠습니다.

Redis를 사용하여 분산 트랜잭션 관리를 구현하는 방법 Nov 07, 2023 pm 12:07 PM

Redis를 사용하여 분산 트랜잭션 관리를 구현하는 방법 소개: 인터넷의 급속한 발전으로 인해 분산 시스템의 사용이 점점 더 널리 보급되고 있습니다. 분산 시스템에서 트랜잭션 관리는 중요한 과제입니다. 기존의 트랜잭션 관리 방법은 분산 시스템에서 구현하기 어렵고 비효율적입니다. Redis의 특성을 활용하여 분산 트랜잭션 관리를 쉽게 구현하고 시스템의 성능과 안정성을 향상시킬 수 있습니다. 1. Redis 소개 Redis는 효율적인 읽기 및 쓰기 성능과 풍부한 데이터를 갖춘 메모리 기반 데이터 저장 시스템입니다.

Java로 학생 성과 관리 기능을 구현하는 방법은 무엇입니까? Nov 04, 2023 pm 12:00 PM

Java로 학생 성과 관리 기능을 구현하는 방법은 무엇입니까? 현대 교육 시스템에서 학생의 성과 관리는 매우 중요한 업무입니다. 학생 성과를 관리함으로써 학교는 학생의 학습 진행 상황을 더 잘 모니터링하고, 학생의 약점과 장점을 이해하며, 이 정보를 기반으로 보다 구체적인 교육 계획을 세울 수 있습니다. 이 기사에서는 Java 프로그래밍 언어를 사용하여 학생 성과 관리 기능을 구현하는 방법에 대해 설명합니다. 먼저, 학생 성적의 데이터 구조를 결정해야 합니다. 일반적으로 학생의 성적은 다음과 같이 나타낼 수 있습니다.

WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 Mar 05, 2024 pm 09:27 PM

WordPress 백엔드 잘못된 코드가 걱정되나요? 이러한 솔루션을 사용해 보십시오. 웹 사이트 구축에 WordPress가 널리 적용되면서 많은 사용자가 WordPress 백엔드에서 잘못된 코드 문제에 직면할 수 있습니다. 이러한 종류의 문제로 인해 배경 관리 인터페이스에 잘못된 문자가 표시되어 사용자에게 큰 문제를 야기합니다. 이 문서에서는 사용자가 WordPress 백엔드에서 잘못된 문자 문제를 해결하는 데 도움이 되는 몇 가지 일반적인 솔루션을 소개합니다. wp-config.php 파일을 수정하고 wp-config를 엽니다.

Laravel 확장 패키지 관리: 타사 코드 및 기능을 쉽게 통합 Aug 25, 2023 pm 04:07 PM

Laravel 확장 패키지 관리: 타사 코드와 기능을 쉽게 통합합니다. 소개: Laravel 개발에서는 프로젝트의 효율성과 안정성을 향상시키기 위해 타사 코드와 기능을 사용하는 경우가 많습니다. Laravel 확장 패키지 관리 시스템을 사용하면 이러한 타사 코드와 기능을 쉽게 통합할 수 있어 개발 작업이 더욱 편리하고 효율적으로 이루어집니다. 이 글에서는 Laravel 확장 패키지 관리의 기본 개념과 사용법을 소개하고, 몇 가지 실용적인 코드 예제를 사용하여 독자들이 이를 더 잘 이해하고 적용할 수 있도록 돕습니다. 라라란 무엇인가

Kirin 운영 체제에서 네트워크 서버를 설정하고 관리하는 방법은 무엇입니까? Aug 04, 2023 pm 09:25 PM

Kirin 운영 체제에서 네트워크 서버를 설정하고 관리하는 방법은 무엇입니까? Kirin 운영 체제는 중국에서 독자적으로 개발된 Linux 기반 운영 체제입니다. 이는 오픈 소스, 보안 및 안정성의 특성을 가지며 중국에서 널리 사용되었습니다. 이 기사에서는 Kirin 운영 체제에서 네트워크 서버를 설정하고 관리하는 방법을 소개하여 독자가 자신의 네트워크 서버를 더 잘 구축하고 관리할 수 있도록 돕습니다. 1. 관련 소프트웨어 설치 네트워크 서버 설정 및 관리를 시작하기 전에 몇 가지 필요한 소프트웨어를 설치해야 합니다. Kirin OS에서는 다음을 수행할 수 있습니다.

Windows 10에서 마우스 오른쪽 버튼 클릭 메뉴 관리를 열 수 없는 경우 해결 방법 Jan 04, 2024 pm 07:07 PM

win10 시스템을 사용할 때 마우스를 사용하여 바탕화면을 마우스 오른쪽 버튼으로 클릭하거나 메뉴를 마우스 오른쪽 버튼으로 클릭하면 메뉴가 열리지 않고 컴퓨터를 정상적으로 사용할 수 없는 것을 발견했습니다. 이때 복원이 필요합니다. 문제를 해결하기 위한 시스템. Win10 마우스 오른쪽 버튼 클릭 메뉴 관리를 열 수 없습니다. 1. 먼저 제어판을 열고 클릭합니다. 2. 그런 다음 보안 및 유지 관리 아래를 클릭합니다. 3. 시스템을 복원하려면 오른쪽의 를 클릭하세요. 4. 그래도 사용할 수 없다면 마우스 자체에 문제가 있는지 확인해 보세요. 5. 마우스에 문제가 없다고 확신하면 +를 누르고 Enter를 누르세요. 6. 실행이 완료되면 컴퓨터를 다시 시작합니다.

Discuz 백그라운드 로그인에 실패했나요? 쉽게 해결하는 방법을 가르쳐주세요! Mar 02, 2024 pm 06:03 PM

Discuz 백그라운드 로그인에 실패했나요? 쉽게 해결하는 방법을 가르쳐주세요! 인기 포럼 플랫폼인 Discuz는 웹 사이트 구축 및 관리에 널리 사용되기 때문에 때때로 백엔드 로그인 실패가 발생하여 사람들이 고민하는 경우가 있습니다. 오늘은 Discuz 백엔드 로그인 실패를 일으킬 수 있는 문제에 대해 논의하고 몇 가지 솔루션과 구체적인 코드 예제를 제공하겠습니다. 이 기사가 비슷한 문제를 겪고 있는 웹마스터와 개발자에게 도움이 되기를 바랍니다. 1. 문제 해결은 Discuz 백그라운드 로그인 실패 문제를 해결하는 것입니다.

See all articles

Elememt-UI를 사용하여 Vue에서 관리 백엔드 구축(자세한 튜토리얼)

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제