Vue是一个用于构建用户界面的JavaScript框架,它主要用于开发单页面应用(SPA)和响应式的Web应用程序。Vue具有以下主要用途: 1. 构建用户界面:Vue提供了一种简单、灵活的方式来构建交互式的用户界面。它使用了基于组件的架构,可以将界面分解为多个独立的组件,每个组件负责管理自己的状态和行为。 2. 数据驱动:Vue使用了响应式的数据绑定机制,可以将数据和DOM元素进行关联,当数据发生变化时,相关的DOM元素也会自动更新。这种数据驱动的方式可以简化开发过程,提高开发效率。 3. 组件化开发:Vue鼓励开发者将界面拆分为独立的组件,每个组件可复用、可组合,使得代码更加模块化、可维护性更高。Vue提供了丰富的组件库和组件化开发的工具,方便开发者进行组件的创建、组合和复用。 4. 轻量级:Vue的核心库只包含了视图层的功能,体积小巧,加载速度快。它采用了虚拟DOM技术,在性能方面也有很好的表现。 总之,Vue是一个功能强大、易用、灵活的前端框架,可以帮助开发者快速构建高质量的用户界面和交互式的Web应用程序。
<template>
<div class="import">
<div class="box">
<h1>mall-admin</h1>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item prop="user">
<el-input v-model="ruleForm.user" prefix-icon="el-icon-user-solid" placeholder="请输入账号" clearable></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input v-model="ruleForm.pwd" prefix-icon="el-icon-lock" show-password placeholder="请输入密码" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" class="i-btn">登录</el-button>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" class="z-btn">登录</el-button>
</el-form-item> -->
</el-form>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "ImportView",
data() {
return {
ruleForm: {
user: '',
pwd: ''
},
rules: {
user: [
{ required: true, message: '请输入账号', trigger: 'blur' },
],
pwd: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('http://106.52.94.26:3001/user/login', {
username: this.ruleForm.user,
password: this.ruleForm.pwd
})
.then(res => {
console.log(res)
if (res.data.msg == "登录成功") {
this.$router.push("/")
this.$message({
message: '登录成功',
type:'success',
center: true,
showClose:true
});
}
})
.catch(err => {
console.log(err)
if (err.response.data.msg == "用户不存在") {
this.$message({
message: '用户不存在',
type:'error',
center: true,
showClose:true
});
} else if (err.response.data.msg == "密码错误") {
this.$message({
message: '密码错误',
type:'error',
center: true,
showClose:true
});
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
<style scoped>
.import {
display: flex;
justify-content: center;
}
.box {
box-shadow: #ccc 0px 0px 8px;
width: 500px;
padding: 50px;
margin-top: 200px;
}
.box h1 {
text-align: center;
color: #409EFF;
margin-bottom: 20px;
}
.i-btn {
width: 100%;
}
</style>
<template>
<div id="app">
<router-link to="/"></router-link>
<div class="left-menu" v-if="$route.meta.isShowMenu">
<router-link to="/">
<div tabindex="1" class="ddclick">
<img src="./assets/home.png" alt="">首页
</div>
</router-link>
<router-link to="/commodity">
<div tabindex="1" class="ddclick">
<img src="./assets/commodity.png" alt="">商品
</div>
</router-link>
<router-link to="/order">
<div tabindex="1" class="ddclick">
<img src="./assets/order.png" alt="">订单管理
</div>
</router-link>
<router-link to="/user">
<div tabindex="1" class="ddclick">
<img src="./assets/user.png" alt="">用户列表
</div>
</router-link>
</div>
<div class="right">
<div class="header">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-if="$route.meta.title !== '首页'">
<a href="/">{{ $route.meta.title }}</a>
</el-breadcrumb-item>
</el-breadcrumb>
<div class="user">
Admin
<el-dropdown @command="exit">
<img src="./assets/commodity.png" alt="">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="individual">个人</el-dropdown-item>
<el-dropdown-item command="quit">退出</el-dropdown-item>
<el-dropdown-item command="import">输入框</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- </div> -->
<router-view />
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
}
},
methods: {
toDetail() {
//如何跳转到详情页
this.$router.push("/detail")
},
exit(command) {
console.log(command)
if (command == "individual") {
this.$router.push('/login')
} else if (command == "import") {
this.$router.push('/import')
}
}
},
computed: {},
created(){
axios
.get("接口地址")
//成功的回调函数
.then(function(res){
console.log(res)
})
//失败的回调函数
.catch(function(error){
console.log(error);
});
},
};
</script>
<style lang="scss"> * {
margin: 0;
padding: 0;
}
#app {
display: flex;
}
.left-menu {
padding: 20px 20px 0;
//让内边距和边框 不会影响
box-sizing: border-box;
width: 180px;
background: #545c64;
height: 100vh;
}
.left-menu img {
width: 20px;
height: 20px;
margin-right: 8px;
}
.left-menu div {
margin-bottom: 25px;
display: flex;
align-items: center;
}
.ddclick:focus {
color: darkseagreen;
}
.left-menu a {
text-decoration: none;
color: white;
}
.left-menu a.router-link-exact-active {
background: red;
}
.right {
flex: 1;
}
.right .header {
display: flex;
justify-content: space-between;
height: 60px;
align-items: center;
padding: 0 15px;
}
.right .header .user {
display: flex;
align-items: center;
}
.right .header img {
width: 30px;
margin-left: 15px;
}</style>
运行版本APP