vue-element-admin
 

部署

环境

https://panjiachen.github.io/vue-element-admin-site/zh/guide

api 接口deme

http://81.69.24.232:8001/swagger-ui.html

视频

https://www.bilibili.com/video/BV1vi4y1A7pi

package

// 生成依赖
  "dependencies": 
//   开发依赖
  "devDependencies":

安装

node --version
nvm install v14
nvm use v14
npm install --registry=https://registry.npm.taobao

npm fund 
# ls 只列出包名,而 fund 还列出了捐赠平台及其 url


### 本地开发启动项目 ###
npm run dev

login

http://81.69.24.232:8001/user/login

post

{
"password" :"123321",
"type":"manager",
"username":"admin"
}

Response Body

{
  "status": 200,
  "message": "success",
  "data": {
    "token": "0b3955fd5aef402e8184277e50a150ba"
  },
  "timestamp": 1623171496972
}

vue-element-admin/src/views/login/index

 <!-- 用户名控件 -->
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="Username"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>


<!-- 密码控件 -->
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="Password"
            name="password"
            tabindex="2"
            autocomplete="on"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleLogin"
          />


     <!-- 登录按钮 -->
      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
 1.当用户点击登录触发 -->   handleLogin()方法 
 2.  handleLogin()  -->  this.$store.dispatch('user/login', this.loginForm)
 3. store  modules  > users.js
vue-element-admin/src/store/user.js

 # 添加一个发送类型 ;可通过表单里添加
 login({ username: username.trim(), password: password,type:"manager" }).then(response =>

api/user.js # 接口路径

return request({
    url: '/user/login',
    method: 'post',
    data
  })

import request from '@/utils/request'

baseURL :http://81.69.24.232:8001/

路由

router/index.js

 // constantRoutes

 {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: '瞎几把乱写', icon: 'dashboard', affix: true }
      }
    ]
  },
// asyncRoutes 动态
    {
    path: '/test',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/test/index'),
        name: 'Icons',
        meta: { title: '员工管理', icon: 'icon', noCache: true }
      }
    ]
  },

veiws/test/index.vue (table/complex-table.vue)# 表格

axios

http://www.axios-js.com/zh-cn/docs/

get


文章作者: 以谁为师
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源!
              
  目录