theluyuan/vue-demo1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

axios

Browse Source
This commit is contained in:
theluyuan
2021-05-13 10:07:39 +08:00
parent 2288224865
commit 826df6ae65
6 changed files with 251 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/main.js
View File

@@ -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
@@ -16,4 +24,9 @@ new Vue({
// 3. 创建 router 实例 // new 引入进来的router明总
// 4. 创建和挂载根实例。 // 在new vue里面写 router: router
// url带/#/ hash 导航
// url带/#/ hash 导航
// axios
// import
// 原型链挂载

2
src/router/index.js
View File

@@ -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) => {
// ...

123
src/views/axios.vue Normal file
View File

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

42
src/views/index.vue
View File

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