vue+axios 分類添加功能 element+導航欄

vue+element

 

 

這裏我引入了自己寫的頭部模板

目錄結構 我的vue版本是2.9

 

路由是在src/router

先要引入模板

import Login from '@/views/Login/Login'
import Category from '@/views/Category/Category'

 

在寫路徑

這裏的name可以放在:to這些中{Login} 進行跳轉

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login/Login'
import Category from '@/views/Category/Category'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path:'/index',
      name:'index',
      component:Category
    }
    // {
    //   path:'/login/:id',
    //   name:"login",
    //   props:true,
    //   /**
    //    * props:(route)=>({id:route.query.b}),
    //    * 另一個固定傳值：
    //    * props:{
    //    *  id:"111"
    //    * }
    //    */
    //   component:Login
    // }
  ]
})

Vue代碼

這裏菜單欄 Header 是引入 然後用components激活 在使用

<template>
    <div>
        
        
        <el-row>
            
            <el-col :span="4"><Header></Header></el-col>
            <h1>添加分類</h1>
            <el-col :span="8"><el-input v-model="category" placeholder="請輸入內容"></el-input></el-col>
            <el-button type="primary" round @click="addCategory">添加分類</el-button>
        </el-row>
    </div>
</template>

<script>
import Header from "../public/Header"
export default {
    components:{
        Header
    },
    data(){
        return{
            category:""
        }
    },
    methods:{
        addCategory(){
            console.log(1);

            this.$ajax.get("/admin/addCategory?categoey=11").then(function(res){
                //成功之後處理邏輯
                var result=res;
                console.log(res);
            },function(res){
                var result=res;
                console.log(res);
            })
        }
    }
}
</script>

 

頭部模板

<template> 
   <div> 
    <el-container class="main"> 
     <el-aside :width="tabWidth+'px'"> 
      <div> 
       <div class="isClossTab" @click="isClossTabFun"> 
       </div> 
       <el-menu :class="'menu'" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> 
        <el-submenu index="1"> 
         <template slot="title"> 
          <i class="el-icon-location"></i> 
          <span slot="title">分類管理</span> 
         </template> 
         <el-menu-item-group> 
          <el-menu-item index="1-1" >添加分類</el-menu-item>
         </el-menu-item-group>
        </el-submenu> 
        <el-menu-item index="2"> 
         <i class="el-icon-menu"></i> 
         <span slot="title">導航二</span> 
        </el-menu-item> 
        <el-menu-item index="3"> 
         <i class="el-icon-setting"></i> 
         <span slot="title">導航三</span> 
        </el-menu-item> 
       </el-menu> 
      </div> 
     </el-aside> 
     
    </el-container> 
   </div> 
  </template> 

<script> 
import { setTimeout } from 'timers';
export default {
     data() {
        return {
            isCollapse: false, 
            tabWidth: 200, 
            test1: 1, 
            intelval: null, 
        }; 
    }, 
    methods: {
        
        handleOpen(key, keyPath) { 
            console.log(key, keyPath); 
        }, 
        handleClose(key, keyPath) { 
            console.log(key, keyPath); 
        }, 
        
    } 
} 
</script>

  <style scoped lang="scss"> 
  $header-height:60px; 
  $background-color: #545c64;
   $color: #FFF; 
  .main {
	height: 100vh;
	min-width: 800px;
	min-height: 600px;
	overflow: hidden;
	aside{ overflow: visible;
	height: 100%;
	background-color: $background-color;
	color: $color;
	.isClossTab{ width: 100%;
	height: $header-height;
	cursor: pointer;
	font-size: 25px;
	text-align: center;
	line-height: $header-height;
	font-weight: bold;
	border-right: 1px solid #807c7c;
	box-sizing: border-box;
}

    .menu {
        width: 100%;
        border-right: 0;
    } 
}

.main-header {
	background-color: $background-color;
	color: $color;
	.el-dropdown{ cursor: pointer;
	float: right;
}

.el-dropdown-link {
	img{ $imgMargin: (($header-height - 50)/2);
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: #FFF;
	margin-top: $imgMargin;
} } }

.crumbs {
	margin-bottom: 20px;
}

.main-footer {
	text-align: center;
	background-color: $background-color;
	color: $color;
	line-height: 50px;
} } </style>

 

然後是axios

axios跨域的設置 和引入

在main.js下進行設置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'


Vue.prototype.$ajax = axios

// Vue.prototype.$ajax = axios
Vue.config.productionTip = false
// axios 配置

axios.defaults.timeout = 5000;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

// axios.defaults.headers.post['Content-Type'] = 'json';

// axios.defaults.baseURL = 'http://localhost:8080/項目名/';

axios.defaults.baseURL = 'http://localhost:8080/';


Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

然後直接點擊進行傳值

methods:{
        addCategory(){
            console.log(1);

            this.$ajax.get("/admin/addCategory?categoey=11").then(function(res){
                //成功之後處理邏輯
                var result=res;
                console.log(res);
            },function(res){
                var result=res;
                console.log(res);
            })
        }
    }