Vue에서 Element-UI 빌드 관리 백엔드 코드 공유

이 글은 주로 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를 사용합니다. 특정 사용법은 공식 문서를 참조하세요
여기에는 두 가지 경로가 필요합니다. ㅋㅋㅋ API

src/api/index.js

   import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
Vue.use(Router)
const routers =  new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})
routers.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !localStorage.getItem('token')) {
    next({path: 'login'})
  } else {
    next()
  }
})
export default routers

config

src/config.js 여기에서 oauth

   <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>

main.js

src/main.js

   <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>

api에 로그인하는 데 필요한 client_id와 secret을 구성하세요. 인터페이스

주로 사용되는 인터페이스는 두 가지인데, 하나는 로그인하여 토큰 인터페이스를 얻기 위한 api/oauth/token이고, 다른 하나는 api/user/list 목록을 얻기 위한 것입니다.

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

관련 권장 사항:

WeChat 공개 플랫폼 개발 관리 백엔드 개발

thinkphp5를 기반으로 개발된 관리 백엔드

Vue의 elementUI는 사용자 정의 테마를 구현합니다

위 내용은 Vue에서 Element-UI 빌드 관리 백엔드 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!