pc常见问题

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import axios from "axios";
axios.defaults.baseURL="http://www.liulongbin.top:3007"

import qs from "qs";
//请求拦截
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  console.log(config.url)
  if( config.url.startsWith("/my") ){
    config.headers.Authorization=localStorage.getItem("gao01token")
  }

  config.data=qs.stringify(config.data);
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

Vue.prototype.$http=axios;
import  * as echarts from 'echarts'

Vue.prototype.$echarts = echarts
// element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.js

<template>
  <div id="app">
    <!-- <el-button @click="btn">222</el-button> -->
    <router-view/>

  </div>
</template>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>

<script>
export default {
  created() {
      // this.$http.get("https://api.it120.cc/noodles/config/values?keys=mallName").then(res=>console.log(res))
  },
  methods: {
    // btn(){
    //   this.$message.error("aaaa")
    // }
  },
}
</script>

views/Login.vue

<template>
  <div>
    <el-dialog title="登陆" :visible.sync="loginFormVisible">
      <el-form  :model="loginForm">
        <el-form-item label="账号名称" >
          <el-input  autocomplete="off" v-model="loginForm.username"></el-input>
        </el-form-item>

          <el-form-item label="账号名称" >
          <el-input  autocomplete="off"  v-model="loginForm.password"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="loginFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="loginFn">确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import qs from "qs";
export default {
    data() {
        return {
            loginFormVisible: true,
            loginForm:{
              username:"qq123456789",
              password:"qq123456789"
            }
        };
    },
    methods: {
      async loginFn(){
        // let {data} = await this.$http.post("/api/login",`username=${this.loginForm.username}&password=${this.loginForm.password}`)
       
        // let {data} = await this.$http.post("/api/login",qs.stringify( this.loginForm ))

        let {data} = await this.$http.post("/api/login", this.loginForm )

        localStorage.setItem("gao01token",data.token)
      
        this.$router.push("/home")
      }
    },
}
</script>

views/Home.vue

<template>
  <div>
    <!-- 主页 -->
    <el-container class="home">
      <el-header>
          <h1>xxxx管理系统</h1>
          <el-button @click="outFn">退出按钮</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
            <ul>
                <router-link to="/home/cate" tag="li">分类管理</router-link>
                <router-link to="/home/article" tag="li">运营工具</router-link>
                <router-link to="/home/address" tag="li">运营分析</router-link>
            </ul>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    outFn(){
      localStorage.removeItem("gao01token");
      this.$router.push("/login")
    }
  },
}
</script>

<style lang="less" scoped>

        .home{
            min-height:100vh ;
        }
        .el-header{
            display: flex;
            justify-content: space-between;
            background: gray;
        }
        .el-aside{
            background: gray;
        }
</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home.vue'),
    children:[
      {
        path: 'cate',
        name: 'cate',
        component: () => import('../components/cate.vue')
      },
      {
        path: 'article',
        name: 'article',
        component: () => import('../components/article.vue')
      },
      {
        path: 'address',
        name: 'address',
        component: () => import('../components/address.vue')
      },
    ]
  },

  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  },
  {
    path:"/",
    redirect:"/login"
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


router.beforeEach((to,from,next)=>{
  if(to.path == "/login"){
    next();
  }else{
    if( localStorage.getItem("gao01token") ){
      next();
    }else{
      next("/login")
    }
  }
})

export default router

components/address.vue

<template>
    <div>
        
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>
   
  </div>
</template>
        
    

<script>
export default {
  data() {
    return {
      
          }
        },
        
  created() {},
  // 此时，页面上的元素，已经被渲染完毕了！
   mounted() {
    var myChart = this.$echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['旅游类', '美食类', '教育类', '科技类', '军事类']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10,10]
    }
  ]
})
}
}
</script>

<style lang="less" scoped>
</style>

components/article.vue

<template>
  <div>
    简易在线辅助工具
    数据1: <input type="text" v-model="num1">
     <el-select v-model="value" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
    数据2: <input type="text" v-model="num2">
    运算结果<input type="text" v-model="num3">
    <button type="button" @click="fn">计算</button>
  </div>
</template>




<script>
export default {
   data() {
      return {
        num1:"0",
        num2:"0",
        num3:"0",
        options: [{
          value: '1',
          label: '加'
        }, {
          value: '2',
          label: '减'
        }, {
          value: '3',
          label: '乘'
        }, {
          value: '4',
          label: '除'
        }],
        value: ''
      }
    },
    mounted(){},
    methods:{
      fn(){
        if(this.value == 1){
          this.num3 = parseInt(this.num1) + parseInt(this.num2);
        }else if(this.value == 2){
           this.num3 = this.num1 - this.num2
        }else if(this.value == 3){
           this.num3 = this.num1 * this.num2
        }else if(this.value == 4){
           this.num3 = this.num1 / this.num2
        }
          
      }
    }
}
</script>

components/cate.vue

<template>
  <div>
    <el-button @click="addFormVisible = true">添加分类</el-button>

    <el-table :data="catesList">
      <el-table-column label="分类名称" prop="name"></el-table-column>
      <el-table-column label="分类别名" prop="alias"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click=" delFn(scope.row.Id)">删除</el-button>
          <el-button @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog title="添加分类" :visible.sync="addFormVisible">
      <el-form :model="addCates">
        <el-form-item label="分类名称">
          <el-input autocomplete="off" v-model="addCates.name"></el-input>
        </el-form-item>

        <el-form-item label="分类别名">
          <el-input autocomplete="off" v-model="addCates.alias"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑分类" :visible.sync="editFormVisible">
      <el-form :model="editCates">
        <el-form-item label="分类名称">
          <el-input autocomplete="off" v-model="editCates.name"></el-input>
        </el-form-item>

        <el-form-item label="分类别名">
          <el-input autocomplete="off" v-model="editCates.alias"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  inject: ["reload"],
  data() {
    return {
      catesList: [],
      addFormVisible: false,
      editFormVisible: false,
      addCates: {
        name: "",
        alias: "",
      },
      editCates: {
        Id: "",
        name: "",
        alias: "",
      },
    };
  },
  created() {
    this.getCatesList();
  },

  methods: {
    async getCatesList() {
      let { data } = await this.$http.get("/my/article/cates");
      console.log(data);
      this.catesList = data.data;
    },

    async addFn() {
      let { data } = await this.$http.post(
        "/my/article/addcates",
        this.addCates
      );
      window.history.go(0);
      console.log(data);
    },
     // 删除用户
    async delFn(id) {
      console.log(this);
      console.log("id",id);
      let { data } = await this.$http.get(`/my/article/deletecate/${id}`);
      console.log("data",data)
      if (data.status == 0) {
        this.reload();
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    async edit(obj) {
      console.log(obj);
      this.editFormVisible = true;
      this.editCates.Id = obj.Id;
      this.editCates.name = obj.name;
      this.editCates.alias = obj.alias;
    },
    async editFn() {
      let { data } = await this.$http.post(
        "/my/article/updatecate",
        this.editCates
      );
      window.history.go(0);

      console.log(data);
      // this.$router.go(0)
    },
  },
};
</script>