Compare commits
9 Commits
0d9e720669
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 0a9e4163d9 | |||
| bfa918caa8 | |||
| adf3c11262 | |||
| 2874c1447a | |||
| e20303c0b3 | |||
| 826df6ae65 | |||
| 2288224865 | |||
| f7331951b7 | |||
| fcd5b18321 |
@ -8,9 +8,12 @@
|
||||
"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"
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
|
||||
1
src/api/admin.js
Normal file
1
src/api/admin.js
Normal file
@ -0,0 +1 @@
|
||||
// 这里面写管理员特有的接口
|
||||
46
src/api/base.js
Normal file
46
src/api/base.js
Normal file
@ -0,0 +1,46 @@
|
||||
import axios from 'axios'
|
||||
axios.defaults.baseURL = 'https://kaoshi-shangpin.theluyuan.com';
|
||||
// 这个改的axios 全局的
|
||||
|
||||
|
||||
|
||||
// 拦截器
|
||||
// 全局都要用的时候
|
||||
// 返回数据的处理
|
||||
// 判断一下登录状态 状态码 未登录 就必须跳转首页或者登录页
|
||||
// 处理一下返回数据
|
||||
// 处理请求数据
|
||||
// 进行加载时提示
|
||||
|
||||
// 添加请求拦截器
|
||||
axios.interceptors.request.use(function (config) {
|
||||
// 在发送请求之前做些什么
|
||||
console.log(config, "拦截器")
|
||||
// config.baseURL = "https://www.baidu.com"
|
||||
return config;
|
||||
}, function (error) {
|
||||
// 对请求错误做些什么
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
|
||||
// 响应拦截
|
||||
axios.interceptors.response.use(function (response) {
|
||||
// 对响应数据做点什么
|
||||
console.log(response, "响应拦截")
|
||||
// 判断一下是不是有权限
|
||||
// if(response.data.code == 0){
|
||||
// router.push("/login")
|
||||
// }
|
||||
// if(response.data.msg == "用户无权限"){
|
||||
// router.push("/login")
|
||||
// }
|
||||
response.data.code = 1;
|
||||
return response.data;
|
||||
}, function (error) {
|
||||
console.log("请求失败")
|
||||
// 对响应错误做点什么
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
export default axios;
|
||||
52
src/api/index.js
Normal file
52
src/api/index.js
Normal file
@ -0,0 +1,52 @@
|
||||
import axios from './base.js'
|
||||
|
||||
export async function getlist(){
|
||||
let res = await axios.get("/findshop",{params:{a:1,b:3}});
|
||||
return res;
|
||||
}
|
||||
|
||||
export async function submit(data){
|
||||
let res = await axios.post("/addshop",data);
|
||||
return res;
|
||||
|
||||
// params get传参
|
||||
// axios({
|
||||
// url:"",
|
||||
// params:{
|
||||
|
||||
// },
|
||||
// headers:{
|
||||
|
||||
// }
|
||||
// })
|
||||
// axios.get("url", {
|
||||
// params:{
|
||||
|
||||
// },
|
||||
// headers:{
|
||||
|
||||
// }
|
||||
// })
|
||||
|
||||
// axios({
|
||||
// url:"",
|
||||
// method:"POST",
|
||||
// data:{},
|
||||
// headers:{}
|
||||
// })
|
||||
// axios.post('url',{data:'data'},{
|
||||
// headers:{
|
||||
|
||||
// }
|
||||
// })
|
||||
}
|
||||
export default {
|
||||
a:1,
|
||||
b:2,
|
||||
getlist:1323
|
||||
}
|
||||
|
||||
// 只有export 的导出 在外面只能用{ 里面导出时候的名字 } 拿到
|
||||
// import mingzi from "" 只能拿到export default导出的东西
|
||||
|
||||
// 只要用import {变量名} 导入的 一定是拿的export 里面的
|
||||
16
src/components/shopitem.vue
Normal file
16
src/components/shopitem.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
{{name}} -- {{sex}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shopitem.vue",
|
||||
props:["name","sex"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
80
src/main.js
80
src/main.js
@ -1,10 +1,83 @@
|
||||
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引入
|
||||
import Vuex from "vuex"
|
||||
// state 全局的状态 全局的变量
|
||||
Vue.use(Vuex)
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
count: 50,
|
||||
list:[]
|
||||
},
|
||||
// 改变只能通过 mutations 不能直接赋值修改
|
||||
mutations: {
|
||||
setcount(state,num){
|
||||
console.log(state)
|
||||
state.count += num.name + num.age ;
|
||||
},
|
||||
addlist(state,info){
|
||||
state.list.push(info)
|
||||
alert("添加成功")
|
||||
},
|
||||
setlist(state,list){
|
||||
state.list = list
|
||||
// 官方不推荐在mutations 里面使用 异步方法修改
|
||||
// axios.get("http://127.0.0.1:3002/list").then((res)=>{
|
||||
// console.log(res)
|
||||
// state.list = res
|
||||
// // this.$store.commit("setlist",res)
|
||||
// })
|
||||
}
|
||||
},
|
||||
actions:{
|
||||
// 官方推荐有异步方法的写在这里面
|
||||
getlist(c,a){
|
||||
console.log(a)
|
||||
axios.get("http://127.0.0.1:3002/list").then((res)=>{
|
||||
console.log(res)
|
||||
c.commit("setlist",res)
|
||||
// state.list = res
|
||||
// this.$store.commit("setlist",res)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// http://192.168.137.1:3002/list
|
||||
|
||||
|
||||
// 这个是创建一个新的axios 实例 他的baseURL是 传入的
|
||||
// const instance = axios.create({
|
||||
// baseURL: 'https://kaoshi-shangpin.theluyuan.com'
|
||||
// });
|
||||
// // instance 这是通过crate创建的一个新的axios实例
|
||||
// console.log(instance)
|
||||
|
||||
|
||||
|
||||
// axios.defaults.headers.common['aaa'] = "3222";
|
||||
// axios.defaults.headers.get['bbb'] = "3222";
|
||||
// axios.defaults.headers.post['ccc'] = 'zheshipost';
|
||||
|
||||
// 头 headers 请求头 common 所有的请求添加 post 只有post才添加 get 只有get加
|
||||
|
||||
// 消息内容
|
||||
// 消息内容 上级id openid
|
||||
|
||||
//全局能添加 baseURL headers
|
||||
Vue.prototype.axios = axios // 基于原型链安装 为Vue添加方法
|
||||
Vue.prototype.globaldata = {}
|
||||
// vuex
|
||||
new Vue({
|
||||
render: h => h(App), // 渲染 传入的组件 根组件
|
||||
router: router //挂载router
|
||||
router: router, //挂载router
|
||||
store: store //挂载store
|
||||
}).$mount('#app')
|
||||
// 链式操作 vue3 $
|
||||
|
||||
@ -17,3 +90,8 @@ new Vue({
|
||||
// 4. 创建和挂载根实例。 // 在new vue里面写 router: router
|
||||
|
||||
// url带/#/ hash 导航
|
||||
|
||||
|
||||
// axios
|
||||
// import
|
||||
// 原型链挂载
|
||||
33
src/pages/addlist.vue
Normal file
33
src/pages/addlist.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" v-model="name" />
|
||||
<input type="text" v-model="sex" />
|
||||
<button @click="add">添加</button>
|
||||
<button @click="navto">到列表页</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "addlist.vue",
|
||||
data(){
|
||||
return {
|
||||
name:"",
|
||||
sex:"",
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(){
|
||||
this.$store.commit("addlist",{name: this.name,sex:this.sex})
|
||||
},
|
||||
navto(){
|
||||
this.$router.push("/list")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -26,6 +26,7 @@
|
||||
export default {
|
||||
// 组件前置守卫不能用this
|
||||
beforeRouteEnter(to, from, next){
|
||||
console.log(from.meta,"这是在组件内的导航收尾取到的")
|
||||
console.log("组件")
|
||||
next()
|
||||
},
|
||||
@ -45,6 +46,7 @@ export default {
|
||||
},
|
||||
mounted(){
|
||||
console.log("生命周期")
|
||||
console.log(this.$route.meta,"这是在组建内")
|
||||
},
|
||||
methods:{
|
||||
xiugai(){
|
||||
@ -57,8 +59,8 @@ export default {
|
||||
// params
|
||||
console.log(1)
|
||||
// this.$router.push({path: '/params/123' })
|
||||
this.$router.push({name:"params",params:{id:123,name:111,aaa:111}})
|
||||
// this.$router.push("/")
|
||||
// this.$router.push({name:"params",params:{id:123,name:111,aaa:111}})
|
||||
this.$router.push("/sitteng/user")
|
||||
},
|
||||
replace(){
|
||||
// 不能回退 会替换当前路由 (当前路由被删除 用跳转之后的代替)
|
||||
|
||||
49
src/pages/list.vue
Normal file
49
src/pages/list.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div v-for="(item,index) in list" :key="index">-->
|
||||
<!-- <span>姓名:{{item.name}}</span>-->
|
||||
<!-- <span>性别:{{item.sex}}</span>-->
|
||||
<!-- </div>-->
|
||||
<shopitem v-for="(item,index) in list" :key="index" :name="item.name" :sex="item.sex"></shopitem>
|
||||
<!-- <div>-->
|
||||
<!-- <input type="text" v-model="name" />-->
|
||||
<!-- <input type="text" v-model="sex" />-->
|
||||
<!-- <button @click="add">添加</button>-->
|
||||
<!-- </div>-->
|
||||
<button @click="navto">到其他页面添加</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopitem from "../components/shopitem.vue"
|
||||
export default {
|
||||
name: "list.vue",
|
||||
components:{
|
||||
shopitem
|
||||
},
|
||||
methods:{
|
||||
// add(){
|
||||
// this.$store.commit("addlist",{name: this.name,sex:this.sex})
|
||||
// },
|
||||
navto(){
|
||||
this.$router.push("/addlist")
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
list(){
|
||||
return this.$store.state.list
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 调用mu里面的
|
||||
// this.$store.commit("setlist")
|
||||
// 调用action里面的
|
||||
// action 使用异步方法获取完成后 在调用 mu里面的
|
||||
this.$store.dispatch("getlist",123)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
44
src/pages/sitteng.vue
Normal file
44
src/pages/sitteng.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="sitteng">
|
||||
<div class="nav">
|
||||
<button @click="navto('/sitteng/index')">到index</button>
|
||||
<button @click="navto('/sitteng/user')">到user</button>
|
||||
<button @click="navto('/sitteng/admin')">到admin</button>
|
||||
</div>
|
||||
<div class="box">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.sitteng{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
.nav{
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
/* background-color: #0f0; */
|
||||
border-right: 1px solid #bcbcbc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav > button {
|
||||
width: 100%;
|
||||
}
|
||||
.box{
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
/* background: #f00; */
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
methods:{
|
||||
navto(url){
|
||||
this.$router.push(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -3,18 +3,44 @@ 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 },
|
||||
{ path: '/a/b/c/d', name: "user", component: user },
|
||||
{ path: '/', component: index,meta:"admin" },
|
||||
{ path: '/a/b/c/d', name: "user", component: user,meta:"admin" },
|
||||
{ path: '/axios', name: "user", component: axios,meta:"admin" },
|
||||
{ path: '/login', name: "user", component: ()=>import("../views/login.vue"),meta:"user" },
|
||||
{ path: '/list', name: "user", component: ()=> import("../pages/list.vue"),meta:"admin" },
|
||||
{ path: '/addlist', name: "user", component: ()=> import("../pages/addlist.vue"),meta:"admin" },
|
||||
{
|
||||
path: "/admin", beforeEnter: (to, from, next) => {
|
||||
path: "/admin",meta:"admin", beforeEnter: (to, from, next) => {
|
||||
// ...
|
||||
console.log("路由独享")
|
||||
next()
|
||||
}, component: admin
|
||||
},
|
||||
{ path: "/params", name: "params", component: () => import("../pages/params.vue") }
|
||||
{
|
||||
path:"/sitteng",
|
||||
component: () => import("../pages/sitteng.vue"),
|
||||
children:[
|
||||
{
|
||||
path:"index",
|
||||
component: () => import("../views/index.vue"),
|
||||
meta:"admin"
|
||||
|
||||
},
|
||||
{
|
||||
path: "user",
|
||||
component: () => import("../views/user.vue"),meta:"admin"
|
||||
},
|
||||
{
|
||||
path:"admin",
|
||||
component: () => import("../pages/admin.vue"),meta:"admin"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{ path: "/params",meta:"admin", name: "params", component: () => import("../pages/params.vue") } // ()=>import('') 按需加载 路由异步加载
|
||||
]
|
||||
// path
|
||||
// name 名字
|
||||
@ -33,34 +59,32 @@ const router = new VueRouter({
|
||||
// 前置守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
// console.log(to,from)
|
||||
if (to.path == "/") {
|
||||
// alert("你即将到首页")
|
||||
console.log("你即将到首页")
|
||||
}
|
||||
if (to.path == "/a/b/c/d") {
|
||||
console.log("到user")
|
||||
next({ path: '/admin', query: { name: 123 } })
|
||||
} else {
|
||||
// this.$route.meta
|
||||
// meta 权限多个
|
||||
// 5个页面没有权限
|
||||
console.log(to.meta,"路由元信息")
|
||||
let token = localStorage.getItem("token")
|
||||
if((to.meta == "admin" && token) ||to.path == "/login"){
|
||||
console.log("权限验证")
|
||||
// 权限验证
|
||||
next()
|
||||
}else{
|
||||
next("/login")
|
||||
}
|
||||
// if (to.path == "/") {
|
||||
// // alert("你即将到首页")
|
||||
// console.log("你即将到首页")
|
||||
// }
|
||||
// if (to.path == "/a/b/c/d") {
|
||||
// console.log("到user")
|
||||
// next({ path: '/admin', query: { name: 123 } })
|
||||
// } else {
|
||||
// next()
|
||||
// }
|
||||
// ...
|
||||
// next() // 继续跳转
|
||||
// next(false) 停止跳转 这次跳转不生效
|
||||
// next('url') or next({path,query,params,name}) 重定向到其他也页面
|
||||
})
|
||||
router.beforeResolve((to, from, next) => {
|
||||
console.log("解析收尾")
|
||||
next()
|
||||
|
||||
// ...
|
||||
// next() // 继续跳转
|
||||
// next(false) 停止跳转 这次跳转不生效
|
||||
// next('url') or next({path,query,params,name}) 重定向到其他也页面
|
||||
})
|
||||
// 后置 跳转完成之后
|
||||
router.afterEach((to, from) => {
|
||||
console.log(to, from, "后置")
|
||||
|
||||
// ...
|
||||
})
|
||||
export default router
|
||||
146
src/views/axios.vue
Normal file
146
src/views/axios.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<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>
|
||||
import { getlist,submit } from "../api/index.js";
|
||||
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() {
|
||||
// 已经配置了baseURL
|
||||
// 全局的 baseurl https://kaoshi-shangpin.theluyuan.com
|
||||
// baseURL + url
|
||||
// https://kaoshi-shangpin.theluyuan.com/findshop
|
||||
// this.axios({
|
||||
// url: "/findshop",
|
||||
// method: "GET",
|
||||
// data:{a:1}
|
||||
// }).then((res) => {
|
||||
// console.log(res);
|
||||
// // this.globaldata.list = res.data
|
||||
// });
|
||||
console.log(getlist)
|
||||
getlist().then((res)=>{
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log(this.$refs.biaodan);
|
||||
this.$refs.biaodan.validate((a, b) => {
|
||||
if (!a) {
|
||||
return;
|
||||
} else {
|
||||
submit(this.form).then((res)=>{
|
||||
console.log(res,"post成功")
|
||||
})
|
||||
//提交表单
|
||||
// 这个位置this
|
||||
// this.axios({
|
||||
// url: "/addshop",
|
||||
// data: this.form,
|
||||
// method: "POST",
|
||||
// }).then((res) => {
|
||||
// console.log(res.data);
|
||||
// }).catch((rej)=>{
|
||||
// console.log("失败",rej)
|
||||
// })
|
||||
|
||||
|
||||
}
|
||||
console.log(a, b);
|
||||
});
|
||||
console.log(this.form);
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
form(){
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<!-- 一定加 scoped -->
|
||||
<style scoped>
|
||||
/* 防止css全局污染 */
|
||||
.title {
|
||||
background-color: #333333;
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,33 @@
|
||||
<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>
|
||||
<div>{{count}}</div>
|
||||
<div>{{fcount()}}</div>
|
||||
<div>{{$store.state.count}}</div>
|
||||
<button @click="setcount">修改count</button>
|
||||
<admin></admin>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary" :plain="true" :circle="true" @click="aaa">信息按钮</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -19,7 +42,52 @@ 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)
|
||||
},
|
||||
fcount(){
|
||||
return this.$store.state.count
|
||||
},
|
||||
setcount(){
|
||||
// this.$store.state.count += 50; // 可以修改 但是官方不推荐
|
||||
// this.$store.mutations.setcount() 不是这样调用
|
||||
// 只能传递一个参数对象 不能像 $emit 可以同时传多个
|
||||
// 如果同时要加入多个 可以传递对象
|
||||
this.$store.commit("setcount",{name:1,age:2}) // this.$emit
|
||||
|
||||
|
||||
|
||||
// commit
|
||||
/**
|
||||
* 两个参数 第一个参数 方法名 vuex里面的mutations 下面的名字 用字符串
|
||||
* 第二个参数 传递的值 只能有一个 多个用对象
|
||||
* 他会帮我们调用mutations 同名的方法 默认传递 state 全局的状态(变量)
|
||||
* 第二个参数 commit 会帮助我们传到方法的第二个参数
|
||||
*/
|
||||
}
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
count(){
|
||||
return this.$store.state.count
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
84
src/views/list.vue
Normal file
84
src/views/list.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 请求拿数据
|
||||
验证成功不成功
|
||||
赋值到data
|
||||
vue会根据模板自动渲染 -->
|
||||
<!--
|
||||
填写 或 获取数据
|
||||
验证填写或者获取的数据正确性
|
||||
进行请求
|
||||
验证后台是否提交成功
|
||||
提示
|
||||
-->
|
||||
<!-- <p>{{list[0].mingcheng}}</p> -->
|
||||
<!-- 1 电脑办公
|
||||
2 手机数码
|
||||
3 男装
|
||||
4 女装 -->
|
||||
<!-- <p v-for="item in list" :key="item._id">{{item.mingcheng}}-{{item.xiangqing}}-{{tihuan(item.fenlei)}}</p> -->
|
||||
<el-table
|
||||
:data="list"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="mingcheng"
|
||||
label="商品名称"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jiage"
|
||||
label="商品价格"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
||||
label="商品分类">
|
||||
<template slot-scope="scope">
|
||||
<!-- {{tihuan(scope.row.fenlei)}} -->
|
||||
<button @click="tijiao(scope.row._id)">删除</button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.axios({url:"https://kaoshi-shangpin.theluyuan.com/findshop"}).then((res)=>{
|
||||
console.log(res.data)
|
||||
if(res.data.code == 0 ){
|
||||
this.list = res.data.data
|
||||
console.log(this.list)
|
||||
}else{
|
||||
alert("请求失败")
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
tihuan(i){
|
||||
let text = "";
|
||||
if(i == 1){
|
||||
text = "电脑办公"
|
||||
}else if(i==2){
|
||||
text = "手机数码"
|
||||
}else if(i==3){
|
||||
text="男装"
|
||||
}else{
|
||||
text="女装"
|
||||
}
|
||||
return text;
|
||||
},
|
||||
tijiao(a){
|
||||
console.log(a)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
src/views/login.vue
Normal file
57
src/views/login.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-position="left" label-width="80px" :model="formLabelAlign">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="formLabelAlign.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input v-model="formLabelAlign.pwd"></el-input>
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="login">登录</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formLabelAlign: {
|
||||
name: "",
|
||||
pwd: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
console.log(this.formLabelAlign);
|
||||
// 请求后台
|
||||
// if(this.formLabelAlign.name == "admin" && this.formLabelAlign.pwd == "123456"){
|
||||
// localStorage.setItem("token","123")
|
||||
// }
|
||||
this.axios({
|
||||
url: "http://127.0.0.1:3002/login",
|
||||
method: "POST",
|
||||
data: {
|
||||
name: this.formLabelAlign.name,
|
||||
pwd: this.formLabelAlign.pwd,
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.code == 1) {
|
||||
this.$message.error("登录失败");
|
||||
} else {
|
||||
this.$message({
|
||||
message: "登录成功",
|
||||
type: "success",
|
||||
});
|
||||
localStorage.setItem("token", res.data.data.token);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
这是用户的页面组件
|
||||
<p>{{$store.state.count}}</p>
|
||||
<button @click="setcount">修改count</button>
|
||||
|
||||
<div>
|
||||
<router-link to="/admin">到admin</router-link>
|
||||
</div>
|
||||
@ -13,6 +16,14 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
methods:{
|
||||
setcount(){
|
||||
// this.$store.state.count += 50; // 可以修改 但是官方不推荐
|
||||
// this.$store.mutations.setcount() 不是这样调用
|
||||
// 只能传递一个参数对象 不能像 $emit 可以同时传多个
|
||||
// 如果同时要加入多个 可以传递对象
|
||||
this.$store.commit("setcount",{name:1,age:2}) // this.$emit
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
yarn.lock
76
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"
|
||||
@ -8210,6 +8279,11 @@ vue@^2.6.11:
|
||||
resolved "https://registry.nlark.com/vue/download/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
|
||||
integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=
|
||||
|
||||
vuex@^3.6.2:
|
||||
version "3.6.2"
|
||||
resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz?cache=0&sync_timestamp=1621868918134&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuex%2Fdownload%2Fvuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
|
||||
integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
|
||||
|
||||
watchpack-chokidar2@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npm.taobao.org/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz?cache=0&sync_timestamp=1604989063099&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack-chokidar2%2Fdownload%2Fwatchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user