axios

package.json

@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.1",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1"
   },

src/main.js

@@ -1,7 +1,15 @@
 import Vue from 'vue' // 引入 vue  nodem_moudules 不需要写路径
 import App from './App.vue' // 自己的文件需要写路径
 import router from "./router/index.js"
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import axios from "axios"
 Vue.config.productionTip = false  // 阻止生产提示
+Vue.use(ElementUI);
+// Vue.use(axios) axios 不支持use引入
+Vue.prototype.axios = axios // 基于原型链安装 为Vue添加方法
+Vue.prototype.globaldata = {}
+// vuex
 new Vue({
   render: h => h(App), // 渲染 传入的组件 根组件
   router: router //挂载router
@@ -17,3 +25,8 @@ new Vue({
 // 4. 创建和挂载根实例。 // 在new vue里面写 router: router
 
 // url带/#/ hash 导航
+
+
+// axios
+// import
+// 原型链挂载

src/router/index.js

@@ -3,10 +3,12 @@ import VueRouter from 'vue-router' // 引入vuroute
 import index from "../views/index.vue"
 import user from "../views/user.vue"
 import admin from "../pages/admin.vue"
+import axios from "../views/axios.vue"
 Vue.use(VueRouter)
 const routes = [
     { path: '/', component: index,meta:[{a:1},2,3] },
     { path: '/a/b/c/d', name: "user", component: user,meta:"user" },
+	{ path: '/axios', name: "user", component: axios,meta:"user" },
     {
         path: "/admin",meta:"admin", beforeEnter: (to, from, next) => {
             // ...

src/views/axios.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <router-link to="/">去首页</router-link>
+    <el-form
+      :model="form"
+      :rules="rules"
+      class="demo-form-inline"
+      ref="biaodan"
+    >
+      <el-form-item label="商品名称" prop="mingcheng">
+        <el-input v-model="form.mingcheng" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="分类" prop="fenlei">
+        <el-select v-model="form.fenlei" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="卖点">
+        <el-input v-model="form.maidian" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="价格">
+        <el-input v-model="form.jiage" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="活动价格">
+        <el-input v-model="form.huodongjia" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="库存">
+        <el-input v-model="form.kucun" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="销量">
+        <el-input v-model="form.xiaoliang" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item label="上架">
+        <el-radio v-model="form.shangjia" label="1">上架</el-radio>
+        <el-radio v-model="form.shangjia" label="0">下架</el-radio>
+      </el-form-item>
+      <el-form-item label="详情">
+        <el-input v-model="form.xiangqing" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      rules: {
+        mingcheng: [
+          { required: true, message: "请输入名称", trigger: "blur" },
+          { min: 10, max: 20, message: "10-20", trigger: "blur" },
+        ],
+        fenlei: [{ required: true, message: "请选择", trigger: "change" }],
+      },
+      options: [
+        {
+          value: "1",
+          label: "手机数码",
+        },
+        {
+          value: "2",
+          label: "家用电器",
+        },
+        {
+          value: "3",
+          label: "男装",
+        },
+        {
+          value: "4",
+          label: "女装",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.axios({
+      url: "https://kaoshi-shangpin.theluyuan.com/findshop",
+      method: "GET",
+    }).then((res) => {
+      console.log(res.data);
+      // this.globaldata.list = res.data
+    });
+  },
+  methods: {
+    onSubmit() {
+      console.log(this.$refs.biaodan);
+      this.$refs.biaodan.validate((a, b) => {
+        if (!a) {
+          return;
+        } else {
+          //提交表单
+          this.axios({
+            url: "https://kaoshi-shangpin.theluyuan.com/addshop",
+            data: this.form,
+            method: "POST",
+          }).then((res) => {
+            console.log(res.data);
+          });
+        }
+        console.log(a, b);
+      });
+      console.log(this.form);
+    },
+  },
+};
+</script>
+<!-- 一定加 scoped -->
+<style scoped>
+/* 防止css全局污染 */
+.title {
+  background-color: #333333;
+}
+</style>

src/views/index.vue

@@ -1,10 +1,29 @@
 <template>
     <div>
-        这是首页的组件
+        <el-menu @select="bbb" background-color="#f00" text-color="#0f0" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+  <el-menu-item index="/">处理中心</el-menu-item>
+  <el-submenu index="2" :show-timeout="0">
+    <template slot="title">我的工作台</template>
+    <el-menu-item index="/admin">选项1</el-menu-item>
+    <el-menu-item index="2-2">选项2</el-menu-item>
+    <el-menu-item index="2-3">选项3</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">选项4</template>
+      <el-menu-item index="2-4-1">选项1</el-menu-item>
+      <el-menu-item index="2-4-2">选项2</el-menu-item>
+      <el-menu-item index="2-4-3">选项3</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="3" disabled>消息中心</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+</el-menu>
+        <span class="title">这是首页的组件</span>
         <div>
             <router-link :to='{name:"user"}'>点我跳转user</router-link>
         </div>
         <admin></admin>
+ <el-button>默认按钮</el-button>
+ <el-button type="primary" :plain="true" :circle="true" @click="aaa">信息按钮</el-button>
     </div>    
 </template>
 
@@ -19,7 +38,26 @@ export default {
         admin
     },
     mounted(){
-        console.log(this.$route.query.id)
+        // console.log(this.$route.query.id)
+        // console.log(this.globaldata)
+    },
+    methods:{
+        aaa(){
+            alert("点击按钮")
+        },
+          handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      bbb(a,b){
+          console.log(a,b)
+          this.$router.push(a)
+      }
+    },
+    data(){
+        return {
+            activeIndex: '1',
+        activeIndex2: '1'
+        }
     }
 }
 </script>

yarn.lock

@@ -1808,6 +1808,13 @@ async-limiter@~1.0.0:
   resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
 
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.nlark.com/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1619755921381&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=
+  dependencies:
+    babel-runtime "6.x"
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.nlark.com/async/download/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -1848,6 +1855,13 @@ aws4@^1.8.0:
   resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -1860,6 +1874,11 @@ babel-eslint@^10.1.0:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=
+
 babel-loader@^8.1.0:
   version "8.2.2"
   resolved "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424647115&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -1901,6 +1920,14 @@ babel-plugin-polyfill-regenerator@^0.2.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.0"
 
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.nlark.com/babel-runtime/download/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714298273&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2731,6 +2758,11 @@ core-js-compat@^3.6.5, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
     browserslist "^4.16.6"
     semver "7.0.0"
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=
+
 core-js@^3.6.5:
   version "3.11.3"
   resolved "https://registry.nlark.com/core-js/download/core-js-3.11.3.tgz#2835b1f4d10f6d0400bf820cfe6fe64ad067dd3f"
@@ -3041,7 +3073,7 @@ deep-is@~0.1.3:
   resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
@@ -3286,6 +3318,18 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.727.tgz#857e310ca00f0b75da4e1db6ff0e073cc4a91ddf"
   integrity sha1-hX4xDKAPC3XaTh22/w4HPMSpHd8=
 
+element-ui@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.15.1.tgz#ada00aa6e32c02774a2e77563dd84668f813cdff"
+  integrity sha1-raAKpuMsAndKLndWPdhGaPgTzf8=
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -3908,6 +3952,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.0.tgz?cache=0&sync_timestamp=1619369154979&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.0.tgz#f5d260f95c5f8c105894491feee5dc8993b402fe"
   integrity sha1-9dJg+VxfjBBYlEkf7uXciZO0Av4=
 
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/for-in/download/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -5710,6 +5759,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.npm.taobao.org/normalize-url/download/normalize-url-3.3.0.tgz?cache=0&sync_timestamp=1617786343734&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnormalize-url%2Fdownload%2Fnormalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha1-suHE3E98bVd0PfczpPWXjRhlBVk=
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6791,6 +6845,11 @@ regenerate@^1.4.0:
   resolved "https://registry.npm.taobao.org/regenerate/download/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha1-uTRtiCfo9aMve6KWN9OYtpAUhIo=
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=
+
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -6920,6 +6979,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz?cache=0&sync_timestamp=1618847256390&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fresize-observer-polyfill%2Fdownload%2Fresize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -7739,6 +7803,11 @@ thread-loader@^2.1.3:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.nlark.com/throttle-debounce/download/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha1-UYU9o3vmihVctugns1FKPEIuic0=
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"